HTML/CSS

Философия CSS

Привет всем! Пришло время сообщить, что мы рассчитываем еще до конца февраля выпустить
новую книгу по CSS, которая рекомендуется всем, кто уже
освоил Макфарланда (пока в наличии, ближайшую допечатку рассчитываем сделать в январе).

Сегодня вам предлагается перевод статьи Кита Гранта (опубликована в июне), в которой автор излагает свою точку зрения на CSS и фактически объясняет, о чем хотел рассказать в своей книге. Читаем и комментируем!

Источник

Заглушка для изображения с использованием padding-top и процентов

Когда мы проходим собеседования, нам часто задают вопросы по верстке. Зачастую они сводятся к перечислению значений свойства display или способов центрирования элементов. Меня это откровенно достало, и мне захотелось придумать свои задачи, с помощью которых можно проверить знания верстальщика, а не то, как он зазубрил значения свойств.

Источник

Предиктивное поведение веб-интерфейса

Сразу стоит отметить, что эта статья — лишь субъективные размышления от том, как может выглядеть и быть реализовано поведение элементов интерфейса, которые знают что делает пользователь в конкретный момент. Размышления, впрочем, подкрепленные небольшим исследованием и реализацией. Поехали.

Источник

О преимуществах встраивания CSS в JS

Этот пост является развернутым ответом на вопросы из этого разговора в Твиттере. Автор оригинала, Сунил Пай, является автором относительно популярной библиотеки glamor и работает разработчиком в Facebook.

Каким образом Javascript оказывается более удобным чем CSS? Как написание CSS внутри JS делает его более поддерживаемым?

Буду счастлив пообщаться на эту тему. Сразу скажу, что у CSS-in-JS решений есть накладные расходы, но обычно эта цена оправдана теми преимуществами, которые они приносят. Иногда они могут быть полезными, но также это не значит, что CSS-in-JS должен использоваться всегда и везде.

Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №343 (10 — 16 декабря 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Атомарный CSS — порядок и чистота

С первых строк кода, каждый человек начинает понимать важность правильной его организации и оптимизации рабочего пространства в целом.

Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №342 (3 — 9 декабря 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

«CMS» на базе Google Spreadsheets для статических сайтов

Все чаще для рассказа о мероприятии/товаре/услуге компании создают сайты на базе каких либо конструкторов. Либо своими силами, либо привлекая дизайнеров и без участия программиста. Современные конструкторы позволяют собрать классный, яркий, эффектный сайт, но статичный. Любые изменения нужно вносить «ручками в редакторе» и перепубликовать страницу. Но что делать, если данные меняются очень часто или хочется добавить немного автоматизации — вот тут и могут помочь Гугл Таблицы и Charts Query Language (и знакомы программист).

Источник

Разбор таска по верстке (sass, pug, gulp, bem)

Для Junior’ов, для junior’ов… а то начнут тут… да мы, да это…

Доделал проект(сайт) pug+sass+es6+gulp+BEM. Во время разработки столкнулся со многими трудностями. Эта статья рассчитана на новичков, на тех, кто не знает об отрицательных маржинах, слышали о методологии именования БЭМ, но не пробовали ее, для тех, кто не имеет огромного опыта в разработке. Надеюсь, вам здесь будет интересно. Если же вы читаете это на работе, сидя у 4-ех мониторов и одной рукой пишите код для ИИ, а второй листаете хабр, то я бы хотел у вас услышать конструктивную критику о методах, которые были использованы здесь.

Отрицательные margin и width 110%Про такой фокус я знаю давно, но на практики применял лишь впервые. В макете было ограничение(wrapper = width: 1170px, красная граница). Справа контент соответствовал ограничению и прилегал к границе, а вот слева картинка вылезала за границу. Сначала это может пугать, но стоит подробней узнать о работе margin-letf: -100px и вы уже знаете, как решить поставленную задачу. К слову, это flex и желтым я отметил границы объектов.

Мы привыкли использовать width, height как 100%, и это понятно, все для адаптива, с помощью width, можно добиться схожего результата как и с отрицательными маржинами. Просто дайте размер потомку больше своего родителя(например, width: 130%)

Источник

Начать с React и Bootstrap за 2 дня. День №1

Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.

Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).

Где брать материалы для изучения?Для изучения HTML и CSS рекомендую
htmlbook.ru

Для изучения JavaScript рекомендую
learn.javascript.ru

Для изучения XML рекомендую
msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih

Про DOM можно почитать в уроке по JavaScript
learn.javascript.ru/dom-nodes

Для изучения ООП рекомендую видеокурс
proglib.io/p/oop-videocourse

Для изучения командной строки Windows рекомендую
cmd.readthedocs.io/cmd.html

Для изучения терминала в Mac рекомендую
ixrevo.me/mac-os-x-terminal

Если вы работаете в Linux, то
bash и аналоги знаете, в крайнем случае
man или
help вам помогут.

Для изучения React использую
learn-reactjs.ru (который является переводом официальной документации React:
reactjs.org).

Для изучения Bootstrap использую
bootstrap-4.ru (который является переводом официальной документации Bootstrap:
getbootstrap.com).

Для того, чтобы подружить React и Bootstrap нашёл отличную статью
webformyself.com/kak-ispolzovat-bootstrap-s-react

В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:



Источник

Дайджест свежих материалов из мира фронтенда за последнюю неделю №341 (26 ноября — 2 декабря 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Собственный VPN клиент на JavaScript. 6 часть — Electron компонент Notify

P.S.
Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать с 1 части


Notify —
Electron компонент, элемент представления уведомлений.

Структура папок.

notify
│
│   index.js
│
└───client // Все что относится к клиенту
    │   fly.html
    │   static.html
    │   style.css
    │
    └───fonts
            font1.woff2
            font2.woff2
            font3.woff2
            font4.woff2
            font5.woff2
            font6.woff2
            font7.woff2

Источник

Собственный VPN клиент на JavaScript. 7 часть — Electron компонент Context

P.S.
Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать с 1 части


Context —
Electron компонент, элемент навигации по приложению.

Структура папок.

context
│
│   index.js
│
└───client // Все что относится к клиенту
    │   index.html
    │   style.css
    │
    └───fonts
            font1.woff2
            font2.woff2
            font3.woff2
            font4.woff2
            font5.woff2
            font6.woff2
            font7.woff2

Источник

Как собрать информацию с Контур.Закупки с помощью Selenium

Всем привет.

История эта случилась из-за экономии. При покупке платного аккаунта мы даже не обратили внимание на то, сколько полезного даёт тариф Эксперт.

Ах, если бы мы обратили на это внимание, то мне не пришлось бы осваивать Selenium и основы Java.

Как-то раз возникла маркетинговая задача — собрать контакты закупщиков в компаниях по нашей тематике.

Источник

Введение в пользовательские CSS-свойства

Автор курса «HTML-верстка» Стас Мельников рассказал, что такое пользовательские CSS-свойства и почему их стоит изучить. 

Стандарт CSS Custom Properties изменил CSS. Появились безумные возможности, о которых раньше мы могли только мечтать. Рассказываем, какие именно и почему новичкам стоит изучить их как можно быстрее. 

Источник