​​Моя компания не взлетела, 6 уроков ценою в 4 года жизни и $150 000

О том, как мы работали по 10 часов в сутки без выходных, получили инвестиции, прошли во ФРИИ, набрали более ста тысяч пользователей в США, нас хотел купить Sports Illustrated, но в итоге мы закрыли компанию.

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

​​Slidebars — это JQuery фреймворк позволяющий очень быстро подобрать необходимые стили для мобильного меню без определённой привязки к источнику. Slidebars может редактировать и обрабатывать все основные размеры мобильного меню сайта.

Демо | GitHub

#js #sidebar

​​Несколько красивых эффектов подчеркивания при наведении на ссылки

CodePen

#css #animation

​​dlocator — библиотека позволяет реализовать паттерн service locator но с модулями и зависимостями. Больше похоже на контейнер зависимостей.

Как использовать:
1. Сделать модуль
2. Каждый модуль может реализовывать сервисы
3. Каждый модуль может использовать другие сервисы

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

npm | GitHub

#js #nodejs

Функции в JavaScript никак не привязаны к своему контексту this, с одной стороны, здорово – это позволяет быть максимально гибкими, одалживать методы и так далее.

Но с другой стороны — в некоторых случаях контекст может быть потерян. То есть мы вроде как вызываем метод объекта, а на самом деле он получает this = undefined.

Такая ситуация является типичной для начинающих разработчиков, но бывает и у «зубров» тоже.

Привязка контекста и карринг

#js #article

​​Поддержка 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

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

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

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