Обновить
98.97

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Период
Уровень сложности

Если бы я учил Frontend сегодня. Советы начинающим

Время на прочтение4 мин
Охват и читатели78K
Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

В этой статье я бы хотел ясно изложить, какие технологии необходимо изучить новичку, а также поделиться методами их освоения. Гайд ориентирован на людей, которые делают свои первые шаги в веб-разработке, и в нем я постараюсь подробно пояснять суть каждой технологии. Также в конце я расскажу, куда двигаться дальше.

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?

Изучение HTML, CSS, Javascript

CSS Houdini: практическое руководство

Время на прочтение13 мин
Охват и читатели22K
Доброго времени суток, друзья!

Что такое Houdini?


Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

  • Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
  • Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
  • Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

  • API типизированной объектной модели (Typed Object Model)
  • API пользовательских свойств и значений (Custom Properties & Values)
  • API метрик шрифта (Font Metrics)
  • Ворклеты (Worklets)
Читать дальше →

Стилизация флажков и переключателей с использованием CSS3

Время на прочтение4 мин
Охват и читатели115K
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.

JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы

Время на прочтение6 мин
Охват и читатели4.6K


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Читать дальше →

JavaScript библиотека Webix глазами новичка. Часть 2. Работа с формами

Время на прочтение6 мин
Охват и читатели3.2K


Я начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки. Если вы хотите узнать о том, как создать полноценное приложение на основе Webix UI компонентов, можете прочитать статью Создаем Booking приложение с Webix UI, где также подробно описывается работа с формами.
Читать дальше →

Server Side Rendering для React App на Express.js

Время на прочтение7 мин
Охват и читатели45K
На написание этой статьи меня сподвигло отсутствие какого-либо более-менее полного мануала, как же сделать Server Side Rendering для React приложения.

Когда я столкнулся с этой проблемой, у меня было 2 варианта это сделать, либо Next.js фреймворк, либо используя Express.js.

На инвестигейт Next.js было потрачено около 100 часов, чтоб завести его для нашей готовой крупной OTT платформы, но проблем было настолько много, что мы от него отказались (по этому поводу напишу статью еще), остался выбор за малым, Express.js, про который я и хочу рассказать.

Полный код демо-примера, рассматриваемого в статье, тут.
Читать дальше →

Методология БЭМ на примере стикеров в opencart

Время на прочтение5 мин
Охват и читатели5K


Поскольку я предпочитаю методологию БЭМ, начав работать с opencart, я сразу же столкнулся с ужасными для меня вещами, это вложенные селекторы. Они повсюду! Начиная от шаблона по умолчанию, заканчивая практически всеми модулями и авторскими шаблонами. Почему так? Мне кажется тут ряд причин:
Читать дальше →

От парсера афиши театра на Python до Telegram-бота. Часть 1

Время на прочтение6 мин
Охват и читатели25K


Я очень люблю оперу и балет, но не очень — отдавать большие деньги за билеты. Ежедневный просмотр сайта театра с тыканьем в каждую кнопку ужасно утомлял, а внезапно появлявшиеся билеты по 170 рублей на супер-составы бередили душу.
Чтобы автоматизировать это дело появился скриптик, который бежит по афише и собирает информацию о самых дешевых билетах на выбранный месяц. Запросы из серии «выдай список всех опер в марте на старой и новой сцене до 1000 рублей». Подруга обронила «а ты не Telegram-бота делаешь?». Такого в плане не было, но почему бы и нет. Бот родился, хоть и крутился на домашнем ноутбуке.
Потом Telegram заблокировали. Мысль запулить бота на рабочий сервер растаяла, да и интерес, чтобы довести функционал до ума, угас. Под катом рассказываю о судьбе сыщика дешевых билетов с самого начала и о том, что с ним сталось после года использования.
Читать дальше →

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

Время на прочтение10 мин
Охват и читатели63K
Сразу скажу, что сайт будет быстрее работать, если заменить 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

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


Читать дальше →

Меню для меню, гриды или Бутстрап, целесообразность удобства

Время на прочтение1 мин
Охват и читатели5.5K

Привет, Хабр! Давно я сюда ничего не писал, со времён моего золотого поста про переход Opera на WebKit прошло уже пять лет. Но тут появился повод: завёл себе блог на Ютубе. Чтобы понять, зачем и что это такое — смотрите пилот. Если коротко: чтобы разбирать сайты и отвечать на вопросы. А сейчас перед вами 9-й выпуск с ответами на вопросы. Под катом подробности, ссылки, почта для связи и спойлер с остальными видео. Если меня здесь не съедят живьём — буду продолжать постить сюда раз в неделю новые.

Создание несимметричной сетки с помощью Grid Layout

Время на прочтение3 мин
Охват и читатели18K


На данный момент, по данным Can I Use, 84% браузеров поддерживает Grid Layout. С каждым месяцем это число растет. А ведь буквально недавно этот модуль находился за флагом. Поэтому если Вы еще не знакомы с теми возможностями, которые он предоставляет, то самое время это исправить.

В качестве примера я выбрал галерею изображений с сайта Кинопоиск, которая создана с помощью относительного позиционирования. При реализации мы будем руководствоваться принципом «воруй, но улучшай», поэтому наша галерея будет гибкая и адаптирована под различные разрешения.

Html страница глазами разработчика приложений. Часть 2: «Реализация»

Время на прочтение12 мин
Охват и читатели7.1K

В Первой части мы подготовили нашу страницу.


После прочтения комментариев хочется сделать небольшое отступление: я не говорю что этот подход идеальный, или всем надо следовать и теперь писать только так. Я знаю о наличии программ для этого. Но суть статьи была поделиться мыслями как это можно сделать самому, и заодно разобраться в разных технологиях. Всегда интересно искать новые пути, пусть они и неверные, или слишком длинные, но они учат нас чему-то новому, пусть даже мы их прошли с ошибками.


Имитация базы, как мне уже писали в комментариях, это json файлы с содержанием нужного текста. Вопрос: "Зачем тут Vue? Если это можно написать и на скриптах?". Если честно — для красоты html верстки. Ну и изучения новых технологий.

Читать дальше →

Нужен ли метод OPTIONS в REST-сервисах?

Время на прочтение5 мин
Охват и читатели75K
Согласно стандарту HTTP/1.1 метод OPTIONS может быть использован клиентом для определения параметров или требований, связанных с ресурсом. Сервер также может отправлять документацию в удобочитаемом формате. Ответ на запрос OPTIONS может содержать список допустимых методов для данного ресурса в хедере Allow.

То есть этот метод мог бы стать отличным средством для документирования наших REST-сервисов с одной стороны, и быть существенным дополнением к архитектурному ограничению HATEOAS с другой.

А теперь давайте отвлечёмся от страшных слов типа “HATEOAS” и зададимся вопросом: а есть ли какая-нибудь практическая польза от использования метода OPTIONS в веб-приложениях?
Читать дальше →

Ближайшие события

Адаптивное меню без Javascript

Время на прочтение5 мин
Охват и читатели23K
CSS меню без Javascript

В этой публикации я хочу показать один из способов реализации адаптивного горизонтального меню с использованием Flexbox. Данный способ реализации меню используется на сайте Warface Hub, но немного с другой структурой и большим количеством свистелок.
Читать дальше →

Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

Время на прочтение2 мин
Охват и читатели10K
В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.

Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:

  • Сократите CSS (HTML, JavaScript)
  • Используйте кеш браузера
  • Включите сжатие
  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

И если с первыми тремя пунктами проблем, как правило, не возникает, последний пункт меня поставил в тупик.
Читать дальше →

Select / Multiselect без JS

Время на прочтение4 мин
Охват и читатели20K

Я (и, как мне кажется, многие из вас) сталкивался не раз с несовместимостью селектов с дизайном сайта. Боль состоит в том, что их нельзя стилизовать, а в каждом браузере они выглядят по-своему.


Конечно, есть огромное количество решений, представляемых фреймворками/библиотеками (тот же бутстрап). Но все они предполагают наличие JSа. Разумеется, в этом нет ничего страшного/плохого, но я попробовал сделать стилизуемый селект без JS в качестве фоллбэка на случай, если js по каким-либо причинам сломается.

Читать дальше →

Использование CSS Flexbox для позиционирования блоков на странице

Время на прочтение2 мин
Охват и читатели14K

Задача


В блоке на странице требуется разместить два вложенных блока таким образом, чтобы один блок имел максимальную высоту, а второй — занимал все оставшееся в родительском блоке свободное место по высоте. Причем, в случае, если контент не помещается в блок, добавлять ему скролл.

image

Читать дальше →

Альтернатива для .clearfix

Время на прочтение4 мин
Охват и читатели35K

.clearfix — который так полюбился большинству верстальщиков, его использование мотивируется простотой и отсутствием других способов работы с float блоками. Хочу представить вашему вниманию другой способ — не менее действенный и не более сложный. Хотя по привычке многие скажут, что .clearfix влепил — и все работает, но его использование не всегда оправдано, а иногда и невозможно, но каким-то образом нужно налаживать сопряжение блоков, что иногда вызывает трудности и увеличивает продолжительность верстки, а чаще всего отладки или добавления новых элементов в окружение.


Читать дальше →

Кэш, хэш и няш-меш

Время на прочтение6 мин
Охват и читатели15K

UPD0 (2016-07-19 23-31): судя по всему, первая половина моей статьи — успешно изобретённый велосипед. Спасибо хабравчанам за ссылку на спецификацию
Статья ценна не более, чем вольное описание уже придуманной технологии.


Предыстория


Июльский субботний вечер подходил к концу. Нарубив дров на шашлык, я повесил USB-модем на багету, скомандовал sudo wvdial, развернул браузер и обновил вкладку с открытым гитхабом. Вернее, попытался обновить. Скорость не радовала, и в итоге страница-то обновилась, но явно не хватало какого-то из стилевых файлов; и дело было не в блокировке, поскольку аналогичные проблемы я наблюдал и с другими сайтами, и зачастую они решались просто многократным обновлением страницы. Во всём был виноват перегруз 3G-сети.


Стоп! А как же кэш?

Читать дальше →

Как я разрабатывал транслятор языков разметки

Время на прочтение4 мин
Охват и читатели11K

Эта история началась в далеком 2008 году. В одном из моих проектов для противодействия XSS-атакам я решил использовать BB-коды и начал искать подходящие библиотеки на Java. Хорошенько погуглив, я так ничего ничего и не нашел. Конечно, тогда было и сейчас есть много библиотек для трансляции BB-кодов в HTML, но все они меня не устраивали по одному критерию — невозможность добавлять или удалять тэги. Вспомнив курс "Языки программирования и методы трансляции" (польза от классического образования!) я принялся за реализацию своей собственной библиотеки для парсинга BB-кодов. В результате появился мой самый долгоживущий проект KefirBB.

Читать дальше →