Дайджест свежих материалов из мира фронтенда за последнюю неделю №260 (24 — 30 апреля 2017)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Веб-разработка

CSS

Javascript

Браузеры

Занимательное

Веб-разработка

• Что должен уметь фронтенд-разработчик
• HTML Шорты: Можно ли оборачивать блок в ссылку?. Новое еженедельное шоу, где Вадим Макеев отвечает на вопросы
• Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTML Academy)
• Производительность:
  • Как мы оптимизировали Twitter Lite
  • Как использовать preload, prefetch и preconnect для ускорения сайта
  • Советы по оптимизации изображений
  • Как оптимизировать изображения: практическое руководство
  • Что означает оптимизация изображений?
  • Оптимизация изображений за счет CDN
  • Оптимизация веб-шрифтов для производительности
  • Бенчмаркинг Guetzli (новый JPEG encoder от Google) – сравнение размера и времени оптимизации
  
  
• SVG:
  • Скоростное написание кода от Ana Tudor: улитка с помощью SVG. И сразу же видео о том, как написать миксин на генереции SVG полигонов
  • Морфинг SVG
  • SVG Line Morphing Transition
  
  
• Инструменты:
  • Плагины Sublime Text 3 для разработки фронтенда
  • Введение в философию webpack
  • webpack в twitter.com
  • Использование npm качестве сборщика
  
  
• Анимация:
  • Введение в Web Animations API
  • Инструменты для морфинга фигур в вебе
  • WebGL Scroll Spiral
  
  
• Руководство по Progressive Web Apps от разработчиков Google
• Как мы созадли наш первый offline first сайт
• awesome-wasm — отобранные материалы по WebAssebly

CSS

• Хватит использовать CSS в JavaScript для веб-разработки
• Rachel Andrew объясняет нюансы создания спецификаций на примере Grid Layout
• CSS в JavaScript: будущее компонентной стилизации
• Продвинутая резиновая типографика с помощью calc(), vw, брейкпоинтов и линейных уравнений
• Лучший способ задания позиций в CSS
• Рисуем весенний рисунок с помощью CSS Grid
• Отзывчивая периодическая таблица с помощью CSS Grids
• Имплементация системных шрифтов на Booking.com  — выученный урок
• Теперь, когда пользовательские свойства CSS готовы, все значения могут быть изменены индивидуально
• Использование CSS unicode-range для объединение шрифтов
• Как задавать CSS Margins и Padding (и крутые трюки с раскладкой)
• Разные логические варианты по группировке свойств CSS
• Sass инструмент для создания контрастных цветов
• Делаем немного магии с помощью CSS blend modes
• Adventure time — экспериментальная игра, созданная без JS — только HTML5 и CSS3

JavaScript

• Лямбда-исчисление на JavaScript
• Функциональное программирование в JavaScript с практическими примерами
• Видео докладов с конференции JavaScript fwdays'17, прошедшей 22 апреля в Киеве
• Пишем производительный JavaScript. 3 совета.
• Управление состоянием в CSS с помощью переиспользуемых функций JavaScript
• Инфографика: весь javascript в одной картинке
• Анонс TypeScript 2.3. Почему TypeScript становится всё более популярным?
• Как как лучше организовать свой JS / jQuery спагетти код
• Quokka —  Live JavaScript Scratchpad для JetBrains IDE (бесплатный инструмент)
• Означает ли появление Glimmer смерть для Ember?
• 10 примеров Machine Learning в JavaScript
• Теория:
  • Информатика в JavaScript: Быстрая сортировка (Quicksort)
  • Иногда undefined это defined
  • Концепты Clean Code, адаптированного под JavaScript
  • Итак, что именно делает JavaScript таким странным языком программирования?
  • JavaScript: ключевое слово ‘This’ для начинающих
  • Паттерны для объектного наследования в JavaScript ES2015
  • Понимание async/await за 7 секунд
  
  
• Vue:
  • Используйте любую Javascript библиотеку с Vue.js
  • Прогрессивное веб приложение с Vue JS, Webpack и Material Design [часть 1]
  
  
• React:
  • Airbnb открыла исходники React Sketch, библиотеки для связи React и Sketch
  • Вещи, о которых никто вам не говорит о React.js, от Dan Abramov
  • Какие проекты нуждаются в React? Все!
  • Как организовать большое приложение на React и сделать его масштабируемым
  • Создание статического сайта с помощью React JS. Часть #1: Настройка проекта и UI сайта
  • Создание React приложения с бэкендом на Express
  • recycle — функциональная и реактивная библиотека для React
  • Создание собственного Redux
  
  
• Angular:
  • Бесплатный курс «Начало работы с Angular v2+» (работает и для v4)
  • История SPA фреймворков: AngularJS 1.x и ностальгия
  • Реактивное программирование в Angular
  • angular-ssr — серверный рендеринг, совместимый с angular/material, jQuery и другими библиотеками
  
  
• Libs & Plugins:
  • Moon — быстрая библиотека для создания интерфейсов.
  • en-inflectors — библиотека для работы со склонениями существительных, глаголов и прилагательными английского языка
  • SmartPhoto.js — простой просмотрщик изображений с поддержкой мобильных устройств
  • {S}tr{M}an — мощная библиотека для работы со строками

Браузеры

• DevTools в браузере Vivaldi 1.10.289.3
• Выпуск web-браузера Vivaldi 1.9
• В Chrome появятся дополнительные предупреждения о небезопасности HTTP
• Обзор рынка браузеров, апрель 2017

Занимательное

• Павел Дуров анонсировал ряд нововведений в Telegram: платежи через ботов, видеосообщения и функция Telescope
• Google Maps и Google Search начали автоматически переводить отзывы о различных местах на родной язык пользователя
• В WordPress 4.8 будет прекращена поддержка Internet Explorer 8,9 и 10
• Google обновил поисковый алгоритм по борьбе с ложной информацией
• Мир будущего: Мифы о компьютерных взломах и хакерах в кино
• На пути к миллиарду: в Instagram уже 700 млн пользователей. У LinkedIn 500 млн пользователей. Это больше, чем у Twitter и Snapchat
• Нейросети «Яндекса» освоили сортировку писем
• Обновление алгоритма Google «Fred». Что говорят эксперты?
• Нейросеть освоила видеоигру по языковому гайду
• Сжечь Александрийскую библиотеку-2. Google оцифровала 25 млн. книг — почему их нельзя читать?
• Стив Возняк рассказал, каким он видит будущее человечества
• Uber анонсировал запуск летающих такси в 2020 году
• Маск рассказал, как будет работать интерфейс «компьютер-мозг» в Neuralink
• Игра Mine3D

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin

Let's block ads! (Why?)