Дайджест свежих материалов из мира фронтенда за последнюю неделю №247 (23 — 29 января 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
А если без JavaScript?
3 мин
В нашем мире без JavaScript никуда! Куча фреймворков, библиотек и прочей радости! jQuery плотно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему. Да и не за горами поддержка браузерами ES6 без Babel.
Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
KeepDraw.js — javascript framework для рисования на canvas
3 мин
Всем привет. В этой статье речь пойдет о библиотеке для рисования на canvas — KeepDraw.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.
Это фреймворк для работы с canvas 2d с поддержкой событий и анимации.
Отличительные черты:
- API в стиле ООП;
- События для мыши, клавиатуры и сенсорных экранов;
- Поддержка анимации;
- Рисование кривых безье по точкам;
- Множество функций, проверяющих пересечения фигур и точек;
- Заливка фигур градиентами и изображениями;
- Шаблоны объектов — линия, прямоугольник, текст, многоугольник и круг.
- Поддержка мобильных устройств.
- Сглаживание фигур с использование кривых безье.
- Легковесный. Сжатая версия весит 15 килобайт.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №246 (16 — 22 января 2017)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Чек-лист вёрстки
7 мин
Это статья — список полезных мелочей. Весь текст поделен на две части. Первая рассказывает про простые элементы (текст, кнопки, изображения, формы и другие), вторая часть про производительность, масштабируемость, безопасность и доступность.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №245 (9 — 15 января 2017)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
FPS и пусть ваш код подождет
8 мин
Приветствую, уважаемые читатели Хабра. Эта статья про фронтенд, JavaScript и FPS. И сегодня мне хотелось бы поделиться своими мыслями о «слепом» коде, который фактически никак не учитывает производительности среды исполнения. Ну и, конечно, напишем очередной велосипедокостыль — куда без них.
Верстка интернет-магазина: список товаров
5 мин
Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
Простой шаблонизатор на чистом JS со связями
4 мин
В последнее время все чаще требуется максимально быстрая разработка прототипов веб-приложений. Интерфейсы усложняются, требуется отображение огромного количества данных. И вот я озадачился созданием легкого и максимально простого html-шаблонизатора. Кому интересно, что получилось на ~50 строках JS-кода — под кат.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №244 (2 — 8 января 2017)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Скорость с доставкой до пользователя
17 мин
Анатолий Орлов ( anatolix ), Денис Нагорнов ( Яндекс )
Анатолий Орлов: Всем привет! Меня зовут Анатолий. Я последние 10 лет работал в Яндексе. В Яндексе я занимался разными вещами, но, так получилось, что на HighLoad я всегда доклады делаю про скорость разного вида. У меня есть содокладчик — Денис Нагорнов, он и сейчас работает в Яндексе и занимается, помимо всего прочего, не поверите, тоже скоростью.
Доклад называется «Скорость с доставкой до пользователя». Как вы знаете, огромное количество компаний пытаются оптимизировать загрузку своих страничек. Некоторые компании так гордятся достигнутыми результатами, что они эти результаты пишут на своих страничках, причем даже не внизу, а вверху.
Например, скриншот с сайта Google:
Адаптивный jQuery без window.matchMedia
3 мин
Велосипед с электроприводом вместо рейсового автобуса. Хочу поделиться своим методом адаптации скриптов jQuery (сам привык писать скрипты на jQuery, но разницы нет, все описанное верно и для чистого javascript) параллельно адаптации веб-верстки.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №243 (26 декабря — 1 января 2017)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Ближайшие события
Как мы звезды рейтинга дробили
3 мин
Туториал
Вместо предисловия
Привет всем хабражителям!
Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга — их частичную заливку для дробных чисел (4.5, 3.85 и тд.). Так ведь и глазу милее и информативнее — какое заведение лучше, а какое — хуже. Вот и сели мы с командой думать и гадать.
Видео-курс «Основы HTML» — в помощь преподавателю информатики
1 мин
Мы сняли видео-курс «Основы HTML». Он простой и увлекательный, включает раздел теории и довольно прикольной практики (про это ниже).
Перед тем, как объяснять тонкости языка разметки гипертекста, новичкам нужно сначала объяснить, что такое гипертекст и чем он отличается от обычного текста. В общем-то, гипертекст как идею придумали в 1960х, а сегодня даже трёхлетние дети не задумываюсь клацают по ссылкам на iPad. Смело можно сказать, что гипертекст — это будущее сегодня.
Вот одно из первых видео курса по HTML:
Курс состоит из 2 больших разделов — в первом рассказывается, что такое теги и какие они вообще бывают: форматирование текста, картинки, таблицы и формы. А также, что такое «валидность» документа, как это проверить и главное зачем. Даже на HTML-entities отведено одно занятие.
Перед тем, как объяснять тонкости языка разметки гипертекста, новичкам нужно сначала объяснить, что такое гипертекст и чем он отличается от обычного текста. В общем-то, гипертекст как идею придумали в 1960х, а сегодня даже трёхлетние дети не задумываюсь клацают по ссылкам на iPad. Смело можно сказать, что гипертекст — это будущее сегодня.
Вот одно из первых видео курса по HTML:
Курс состоит из 2 больших разделов — в первом рассказывается, что такое теги и какие они вообще бывают: форматирование текста, картинки, таблицы и формы. А также, что такое «валидность» документа, как это проверить и главное зачем. Даже на HTML-entities отведено одно занятие.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №242 (18 — 25 декабря 2016)
3 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Как я проект на БЭМ переводил… и перевел
13 мин
Связка HTML и CSS (CSS в большей степени) всегда казалась мне несколько «туманной», хуже всего поддающейся контролю и тестированию. Я придумывал для себя различные правила и пытался так или иначе стандартизировать свой подход, но не было ощущения, что «вот, это оно». Я несколько раз мельком знакомился с БЭМ (и не только), читал статьи на эту тему, но дальше чтения дело не заходило. Но чем дальше, тем сильнее было ощущение необходимости в наличии определенной строгой методологии. В конце концов, я решил попробовать внедрить БЭМ на одном из своих проектов, где без этого, на мой взгляд, было не обойтись. Речь идет о CMS, упрощенную страничку бекенда которой я приведу в качестве примера верстки:
Сразу хочу заметить, что БЭМ — это далеко не методология на все случаи жизни, и вопрос о необходимости ее применения в том или ином проекте следует рассматривать в частном порядке (в том числе исходя из того, нравится она вам или нет). Также, в силу того, что я не использовал предлагаемую специфическую файловую структуру или генерацию HTML, о них говорить не будем (позднее я все-таки разделил CSS-файл на отдельные части, соответствующие блокам, но этим решил пока ограничиться). Также, уже достаточно много (например, вот и вот) написано о достоинствах и недостатках этого подхода в целом, поэтому говорить об этом тоже не будем, я просто поделюсь своим опытом и размышлениями на эту тему, предполагая, что с сутью вы уже знакомы.
Сразу хочу заметить, что БЭМ — это далеко не методология на все случаи жизни, и вопрос о необходимости ее применения в том или ином проекте следует рассматривать в частном порядке (в том числе исходя из того, нравится она вам или нет). Также, в силу того, что я не использовал предлагаемую специфическую файловую структуру или генерацию HTML, о них говорить не будем (позднее я все-таки разделил CSS-файл на отдельные части, соответствующие блокам, но этим решил пока ограничиться). Также, уже достаточно много (например, вот и вот) написано о достоинствах и недостатках этого подхода в целом, поэтому говорить об этом тоже не будем, я просто поделюсь своим опытом и размышлениями на эту тему, предполагая, что с сутью вы уже знакомы.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №241 (12 — 18 декабря 2016)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Landing Page как замена всего сайта
5 мин
Здравствуйте, уважаемые хабрапользователи! Предлагаю поговорить о landing page. Многие из вас слышали, а, наверняка, большинство знают, что это. Но все равно хотелось бы чуть-чуть заострить на этом внимание.
Landing page (Целевая, посадочная страница) — это возможность для продавца или сервиса за несколько секунд рассказать о своих товарах и услугах самое главное, а для потенциального клиента — убедиться в том, что он попал «точно в цель». Одна из задач создания целевых страниц — формирование положительного восприятия рекламы и замена «стандартного» трюка, основанного на различных импликациях, полноценным информационным блоком.
