​​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

C# 8.0 – New Planned Features

All of the C# 8 features are still early in development and are likely to change.

#csharp #eng

Google опубликовал руководство по стилям кода для JavaScript, где изложены лучшие стилистические практики (по версии компании) для написания аккуратного, понятного кода.

13 интересных моментов из руководства по стилям для JavaScript от Google

#js

​​Обучение Git прямо в браузере

Изучи Git с помощью интерактивного курса Try Git

#git #forbeginner

Gulp — это инструмент сборки веб-приложения, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д.

О том, что может Gulp и как его использовать можно почитать в статье Что такое Gulp и для чего он нужен?

#devtools