​​Поддержка PWA на Windows

Хотя поддержка Progressive Web Apps в основном реализована на мобильных платформах, Google не забывает и о десктопе. В десктопном Chrome 67 появилась кнопка установки PWA, а уже Chrome 70 привнес несколько улучшений для пользователей Windows.

Теперь Chrome показывает поп-ап «Install app?» для PWA (после того, как вы какое-то время взаимодействовали с ними). Если вы установите PWA, браузер создаст ярлык для PWA в меню «Пуск». По аналогии с мобильным опытом, интерфейс браузера будет скрыт в открытом PWA.

Google обещает, что выкатит эту функциональность для Mac и Linux в 72 версии.

Мы уже писали про PWA, если вы еще не знаете что это, то советую почитать.

​​WhatRuns — это расширение для браузера, которое бесплатно разведает для вас все о внутренностях любого сайта.

Нажмите на иконку и получите список инструментов, которые используются на странице, аккуратно рассортированных по категориям — от плагинов и виджетов до аналитики и CMS. Можно даже установить постоянный надзор, настроив почтовые уведомления с обновлениями списка.

whatruns.com

#extensions

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

Автор считает, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем. В этой статье он быстренько расскажет вам об основах CSS Grid.

Учим CSS Grid за 5 минут

#css #grid #article

​​Highcharts — весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту.

Одно из самых больших преимуществ применения Highcharts – совместимость со старыми браузерами, такими как IE 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Демо | GitHub

#js #charts

Если вы занимаетесь изучением JavaScript, то вы, наверняка, сталкивались с понятием функция высшего порядка. Может показаться, что это что-то очень сложное, но, на самом деле, это не так.

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

Функции высшего порядка в JavaScript

#js #article

​​InlineTweet.js — благодаря этой библиотеке, вы сможете добавить кнопку Tweet к любому тексту на веб-странице.

Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.

Демо | GitHub

#js

Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

В этой статье я научу вас, как это сделать.

Как быстро спроектировать сайт с помощью CSS Grid

#css #grid #article

​​BasicScroll — это библиотека добавляет на страницу красивую параллакс анимацию при скролле. Вы можете задавать параметры для анимации в CSS или использовать JS для еще лучшей анимации.

Плавная анимация отлично работает на мобильных устройствах и ПК.

Демо | GitHub

#js #scroll #parallax

В этой статье вы найдете несколько удобных команд для работы с npm  — менеджером пакетов, входящим в состав Node.js. Из всего множества существующих мы выбрали те, которые могут быть наиболее полезны при ежедневном использовании.

npm: полезные сокращения и трюки

#js #npm #article

​​Spectre — это современная, отзывчивая CSS библиотека. Она предлагает набор классных элементов, разметку сделанную на flexbox'ах и CSS компоненты, которые можно легко модифицировать с помощью Sass.

Библиотека весит всего 10kb и поддерживается всеми современными браузерами.

Демо | GitHub

#css

​​TODO Highlight — подсветка важных комментариев. Комментарии к коду обычно не особенно бросаются в глаза, поэтому мы нередко не обращаем на них особого внимания. В целом — это хорошо, так как они не отвлекают от работы, однако, иногда комментарии весьма важны, поэтому их хорошо было бы сделать более заметными, чтобы гарантировать их прочтение, и то, что тот, для кого они предназначены, отреагирует на них.

Благодаря расширению TODO Highlight, если в комментарии содержится слово TODO или FIXME, оно будет автоматически выделено, что точно не даст такой комментарий пропустить.

VS Code Marketplace | GitHub

#vscode #extensions

На днях я читал материалы на MDN и наткнулся на некоторые довольно интересные возможности и API JavaScript, о существовании которых я не знал. Хочу сегодня о них рассказать.

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

Возможности JavaScript, о которых я не знал

#js #article

​​Muuri — это библиотека, которая позволяет создавать все виды макетов и делать их отзывчивыми, сортируемыми и добавлять анимации с возможностью drag'n'drop.

Демо | GitHub

#js #grid

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

Контекст выполнения и стек вызовов в JavaScript

#js #article

​​CSS Gradient Generator — это полноэкранный генератор градиентов. Так вам будет легче визуализировать, как все будет выглядеть в вашем проекте.

Можно создавать линейные или радиальные градиенты, выбрать направление и цвета. Когда вы создадите идеальный градиент, то легко сможете скопировать его CSS и использовать у себя в проекте.

css-gradient.com

#css #gradient

​​Фулстеки — это вечные мидлы. Не идите по этому пути, если не хотите страдать

Когда я только начал учиться кодить, я поверил старым мудрым засранцам с их мантрой «язык программирования не важен». У меня появилась идея фикс — быть разработчиком, который может всё. Парнем, который переносит опыт использования одной технологии на другую и возносится над деталями. Но эта затея с треском провалилась.

Читать подробности

Ребята из Microsoft в своем блоге на Хабре рассказали про новый дизайн Visual Studio 2019. Они обновят тему, значок продукта и заставку. Это поможет быстрее приступать к работе.

Оставляйте свои пожелания в комментариях. Им важно ваше мнение, каждый комментарий влияет на будущий продукт.

Что нового в дизайне Visual Studio 2019

#news #vs

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

Несколько дельных советов по CSS

#css #tips #article

​​Fork Awesome — это иконочный шрифт с более чем 600 svg иконками. Их очень легко кастомизировать и менять цвет, размер, тень и тд. Набор бесплатный, для использования не нужен js, а иконки выглядят отлично.

Демо | GitHub

#css #icons #font

​​Stage.js — это библиотека, которая позволяет создавать 2D игры с помощью HTML5 и JavaScript. Легковесная, быстро работает и с открытым исходным кодом. Рекомендую взглянуть на примеры игр.

Демо | GitHub

#js #html #game