Какой из современных Front-End фреймовиков самый быстрый? А в каком файлы весят меньше?

Сравнение производительности современных Front-End фреймовиков

#frontend #benchmark

В наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хорошо реализовали работу с DOM/BOM API. Вам не нужно изучать jQuery с нуля для манипуляцией DOM'ом или объектами событий. В то же время, благодаря лидирующим front-end библиотекам, таким как React, Angular и Vue, манипуляция DOM'ом напрямую становится антипаттерном, а jQuery теряет свою значимость.

Вам не нужен jQuery. Примеры кода jQuery на чистом JavaScript

#js #jquery

​​SpinKit - полезный сайт для web-разработчика. Набор спинеров с исходным кодом.

Обновления Material Design

На Google I/O 2018 было представлено много нового. Так же обновление получил Material Design. Шестиугольные кнопки, App bars, Backdrops и многое другое. Полный список изменений можно посмотреть тут.

#design #material

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

Подсказки по flexbox - Flexbox Cheatsheet

#css #flexbox

​​Игра Stacker на чистом CSS3 и HTML5 (без использования JS)

Посмотреть на Codepen

#css #html #gamedev

Chrome DevTools очень полезный инструмент для веб-разработчика, но есть возможности DevTools, которые неизвестны большинству разработчиков. Советую узнать!

Инструменты Chrome DevTools, о которых ты не знал

#tools #css #html

​​Набор CSS иконок. Выбери нужную и скопируй. Почему CSS иконки лучше, чем PNG:

✔️ Весят меньше
✔️ Можно менять размер без потери качества
✔️ Легко добавить анимацию и изменить стили

Сайт с иконками CSS ICON

#css #icons

​​49 градиентов, которые можно использовать на сайте в качестве background'a

HUE.CSS

#css #background

Полезная статья для начинающих - Как стать профессиональным веб-разработчиком.

С чего начать?
Какой язык выбрать?
Как найти первую работу?

Ответы на все вопросы есть в статье.

#forbeginner

​​Популярная игра Tower Blocks на JavaScript

Tower Blocks на Codepen

#js #gamedev

​​Wappalyzer - расширение для определения технологии, используемые веб-страницей

#tools

Local Storage - небезопасно!

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

Почему не стоит использовать LocalStorage

#js #security

​​Odometer - это JavaScript библиотека для анимирования чисел

#js

Вы, наверное, начали получать сообщения от сервисов об изменении правил пользования в части защиты персональных данных, и пока вы не примете новые правила использования, они перестанут работать.

Все, что вам нужно знать про GDPR

#security

​​С помощью библиотеки timeline.js можно легко добавить анимированный таймлайн на свой сайт.

Демо и документация timeline.js

#js #frontend

​​Демонстрация работы box-shadow

How Box-Shadow Works на Codepen

#css

​​Темная тема Chrome DevTools

Чтоб установить тему достаточно выполнить три простых шага:

1. Установите тему оформления из магазина приложений Chrome
2. Перейдите по адресу chrome://flags/#enable-devtools-experiments и нажмите Enable. Затем в этом же окне нажмите Relaunch Now
3. Откройте настройки инспектора Chrome и во вкладке Experiments tab поставьте галочку напротив Allow custom UI themes

Zero Dark Matrix в магазине Chrome

#devtools #theme

​​Диана Смит создала портрет женщины «Франсин» вручную с помощью инструментов разработчика в Google Chrome. Она опубликовала код на GitHub.

Работа лучше всего смотрится в последних версиях Chrome, а в других браузерах все намного веселее.

Масляная картина на чистом CSS

#css #art

​​А так выглядит ее картина в других браузерах. На фото Opera, IE7 и старая версия Chrome.

​​Визуализация вашей активности на GitHub за всё время существования профиля

GitHub Contribution Chart Generator

#tools