​​Новый 69 хром знает все ваши пароли и не даёт использовать одинаковые на разных сайтах

#news

​​Google обновила дизайн Chrome в честь десятилетия браузера

Недавно Chrome стукнуло 10 лет. В честь этого Google существенно обновила интерфейс браузера и добавила в него новые возможности.

В первую очередь стоит отметить вкладки — они стали закруглёнными. Благодаря этому их проще различать, особенно когда открыто не две–три штуки, а гораздо больше. Другие элементы интерфейса тоже стали округлыми. Компания улучшила адресную строку Chrome — некоторые результаты в ней теперь отображаются сразу, чтобы не нужно было открывать отдельную вкладку.

#news #chrome

Казалось бы всего несколько лет назад web платформа проигрывала нативным приложением практически по всем фронтам, и пропасть между тем, что можно было сделать в браузере, и тем, что было доступно приложениями, загружаемым из магазинов, была ужасающе огромной.

Web не стоит на месте: работа оффлайн, фоновая синхронизация данных, push-нотификации, поддержка входа в один клик и оплаты с помощью кредитных карт, Apple Pay, Google Pay и других методов, встроенная в браузер  —  теперь реальность.

Благодаря всем этим изменениям и нововведениям, теперь web и нативные приложения больше не разделяет пропасть. Теперь они стоят плечом к плечу.

Могут ли PWA конкурировать c нативными приложениями?

#pwa #mobile

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

Демо | GitHub

#jquery #scroll

Эта статья, в первую очередь для дизайнера, который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.

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

Кнопка или ссылка?

#html #css #article

Если вы занимаетесь веб-разработкой, то высока вероятность того, что вам знакомы два чудовища, о которых пойдёт речь в статье. Речь идёт об изображениях и о дедлайнах. Иногда, по каким-то причинам, картинки никак не хотят помещаться в те места макетов страниц, которые для них предназначены, а вы не можете потратить несколько часов на то, чтобы с этим разобраться.

CSS-приёмы, которые помогают экономить время

#css #article

​​Shuffle Letters — это jQuery плагин, который создает интересный эффект вывода текста. Буквы выводятся рандомно, одна за другой.

Демо | GitHub

#text #animation #jquery

День программиста — неофициальный праздник программистов, отмечаемый на 256-й день года. Число 256 (два в восьмой степени) выбрано потому, что это количество чисел, которые можно выразить с помощью одного байта.

Этот день сегодня, 13 сентября. Поздравляю!

BEM’а не должно существовать. Есть огромное количество причин не использовать эту методологию, но из-за её простоты использования и непонимания работы CSS и HTML, методология широко распространилась среди фронтендеров всего мира, в большинстве случаев среди разработчиков СНГ.

В этой статье пойдёт подробный разбор плюсов и минусов этого подхода к разработке. Все примеры вёрстки будут взяты с официального сайта BEM.

BEM’a не должно существовать

#frontend #bem

​​AOS — это современная библиотека, которая менять позиции элементов при скролле. Библиотеку очень легко использовать, достаточно просто добавить класс aos-animate. Богатый функционал, есть возможность создавать свои анимации.

Демо | Туториал | GitHub

#js #scroll

Утиная типизация в JavaScript

«Утиная типизация» основана на одной известной пословице: «Если это выглядит как утка, плавает как утка и крякает как утка, то, вероятно, это утка (какая разница, что это на самом деле)».

Читать 1 минуту

#js

Автор статьи расскажет о своем опыте работы на должности тимлида в компании по разработке сайтов. Чтобы всем было полезнее и проще читать, статья разбита на главы, каждая из которых рассказывает об одной отдельной проблеме и её решению.

Надеюсь, что описанный ниже опыт станет для кого-то чужими граблями.

Работа тимлидом в 2018-ом году

#career #article

6 трюков VS Code за 60 секунд от Пола Льюиса

YouTube

#tricks #eng

Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe, JetBrains, Sublime Text и многих ругих. На сайте есть удобный поиск по shortcut'ам.

Shortcut Mapper

#shortcuts

​​Темная тема 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

​​Number Plugin — плагин для стилизации <input type="number">. Плагин создаёт рядом текстовое поле и 2 стрелки с поддержкой полной кастомизации, проект постоянно дорабатывается.

Демо | GitHub

#jquery #input

​​handorgel — легковесная (~3.5 КБ) реализация аккордеона на ES6, соответствующая рекомендациям W3C.

Демо | GitHub

#js #es6

Автор материала говорит, что в последние несколько месяцев ему, при проверке пулл-реквестов, постоянно попадались одни и те же четыре недочёта, связанных с нерациональным использованием методов массивов в JavaScript. Для того чтобы таких недостатков кода, которые раньше появлялись и в его программах, стало меньше, он и написал эту статью.

Эффективное использование методов массивов в JavaScript

#js #article

​​WOW.js — это легковесная (3kb) библиотека, с помощью которой можно создать классные анимации при скролле страницы. Легко кастомизировать настройки: стиль, задержка, длина и многое другое.

Демо | GitHub

#js #scroll

Без понимания концептуальных основ работы современного веба тяжело назвать себя хорошим веб-программистом. В материале будет приведено краткое объяснение, которое поможет разобраться в происходящем.

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

#article

​​Набор хелперов для Vue.js

Vue.js cheatsheet

#vue #cheatsheet