Дайджест свежих материалов из мира фронтенда, дизайна и IT за последнюю неделю №210 (2 — 8 мая 2016)
Мы немного переименовались и предлагаем вашему вниманию очередную подборку с ссылками на полезные ресурсы и материалы из области фронтенда и дизайна| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Дизайн |
| Занимательное |
Веб-разработка
Опасный target="_blank"- Как вы можете использовать отзывчивые веб-компоненты сегодня
- Производительность web: Why Performance Matters
- Подготовка к использованию WebGL
- 14-й выпуск «Веб-стандартов»: Node 6, DOM, графика, чистый CSS, смерть в опенсорсе, префиксы
- Frontflip Podcast, выпуск 17: Редизайн Вконтакте: как сделать хорошо и избежать фронтенд-хайпа. В гостях Вячеслав Шебанов (ВК, Твитер) и Евгений Найденышев (ВК).
- Why Polymer? Веб-компоненты в продакшне, часть 1
Безопасность веб-приложений — доклад Олега Мохова
Atom празднует свое двухлетие- Сравнение техник и технологий анимации: CSS, Canvas, SMIL, Web Animations API, WebGL, GSAP, VelocityJS, jQuery, Snap.svg, Mo.js, Three.js, React-Motion и другие (A Comparison of Animation Technologies)
- HTML5 Accessibility
- История советов о том, как создать «хорошо сделанный сайт» в разные периоды развития веба (The history of 'this website is well-crafted' hints)
- Оптимизация Google PageSpeed до 100 в WordPress
- Советы по созданию доступного SVG (Tips for Creating Accessible SVG)
- Текущее состояние веб-форм, или почему существуют UI библиотеки (The current state of web forms)
- Relax — CMS нового поколения на базе React, Redux, GraphQL (New generation CMS on top of React, Redux and GraphQL)
- Интервью с Brendan Eich-ом, создателем JavaScript и CEO компании Brave (Interview with Brendan Eich, CEO of Brave)
- shots — автосоздание анимированной gif-ки для просмотра истории сайта из архива Wayback Machine
- Анимированные эффекты искажений из-за раскаленного воздуха с помощью WebGL (Animated Heat Distortion Effects with WebGL)
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #36
- Stack Overflow: как мы делаем деплоймент — редакция 2016-го (Stack Overflow: How We Do Deployment — 2016 Edition)
- HTTP/2
- Что такое протокол HTTP/2 и чем он полезен для сайтов?
- Подробное руководство по HTTP/2 (The Ultimate Guide To HTTP/2)
- В чем разница между HTTP и HTTPS (What is the Difference Between HTTP and HTTPS?)
CSS
- Что такое CSS-модули и зачем они нам?
- Переход с SCSS на PostCSS: мой опыт
- Полное руководство по псевдоклассам и псевдоэлементам. Перевод статьи An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements на prgssr.ru
- Разворачивание критического CSS: нюансы и сомнения (Unfolding Critical CSS)
- Refactoring Legacy CSS
- Итак, ты хочешь создать PostCSS плагин (So you want to make a PostCSS plugin)
- Слайды доклада «Do Better With Flexbox»
- WAIT! Animate — онлайн-инструмент для упрощения создания анимации за счет удобного добавления типов анимации, количества кадров и задержек
- Мы были неправы по поводу вертикального ритма все это время? (Were We Wrong About Vertical Rhythm All Along?)
- Переменные CSS4 и фоллбек с помощью Sass (CSS4 Variables with Fallbacks Using Sass)
- Выразительный CSS: стили, какими вы их задумывали (Meaningful CSS: Style Like You Mean It)
- Остановите насилие: опасность пиксельного размера шрифта (Stop Maiming Bodies: The Perils of Pixel Font-Size)
- Представление CSS Grid Layout (Introducing the CSS Grid Layout)
- Запись доклада о Ryan Seddon о проекте Houdini
JavaScript
- JavaScript по-русски — pycckuu.js
- JavaScript модули: сборка модулей
- Рассвет Javascript разработчиков полного стека (The Rise of the Full Stack JavaScript Developer)
- Как сделать плавную прокрутку на ванильном JavaScript (How to Implement Smooth Scrolling in Vanilla JavaScript)
- 12 крайне полезных приемов в JavaScript (12 Extremely Useful Hacks for JavaScript)
- Лучшие практики по созданию популярных опен-сорс JavaScript библиотек (Best Practices for Building Popular Open-Source JavaScript Libraries — Forward 4 Web Summit)
- Tic-Tac-Toe.js: redux паттерн на чистом JavaScript (Tic-Tac-Toe.js: redux pattern in plain javascript)
- Сравнение NW.js & Electron (2016 Edition)
- От JavaScript к TypeScript Pt. I: типы и переменные
- Создание модульных приложений с локальными модулями npm (Build modular application with npm local modules)
- Герой Node — урок по модулю Node.js Request (Node Hero — Node.js Request Module Tutorial)
- Путаница относительно Saga паттерна (Confusion about Saga pattern)
- NativeScript 2.0 — лучший способ создания кросс-платформенных нативных приложений (NativeScript 2.0 — the best way to build cross-platform native mobile apps)
- Фреймворки:
- React для Angular-разработчиков
- Angular 2 приобрел статус релиз кандидата
- Руководство по стилю Angular 2 (Write Angular 2 with style)
- Angular Augury — расширение Chrome Dev Tools для отладки Angular 2 приложений
- Лучшие практики Angular 2: производительность Change Detector (Angular 2 Best Practices: Change Detector Performance)
- Почему неизменяемость имеет значение в React (Why immutability matters in React)
- Ок, вы были правы — React офигенен (Ok, you were right! React is awesome!)
- Изоморфный React и SEO: преимущества SPA на React JS (Isomorphic React and SEO: The Benefits of a Single Page App on React JS)
- Xblocks — библиотека, объединяющая X-Tag и React (Xblocks javascript library)
- Улучшение производительности Angular одной строчкой кода (Improving Angular performance with 1 line of code)
- Как создать приложение «список дел» с React, Redux, и Immutable.js (How to Build a Todo App Using React, Redux, and Immutable.js)
- lovli.js — стартовый пакет для разработки приложений на React+Redux с rethinkdb/horizon базой и Express для сервера
- Фреймворк Ionic: наиболее полное руководство (Ionic Framework: A definitive 10,000 word guide)
- ES2015:
- Ускоряем тесты для многоузлового кода с помощью ES6 и babel (Faster tests for multi-node code with ES6 and babel)
- Использование ES2015 в приложениях сегодня (Using ES2015 in Your Applications Today — Forward 4 Web Summit)
- JavaScript Forward: ES6 и ES7 — Forward 4 веб саммит (JavaScript Forward: ES6 and ES7 — Forward 4 Web Summit)
- Плагины:
- Tribute.js: новый легкий и простой в использовании Javascript плагин для добавления упоминаний в тексте (Mention)
- bwip-js — генерация изображений с бар-кодами (bwip-js — barcode Writer in Pure JavaScript)
- jqImgBlurEffects — jQuery плагин для SVG Blur эффектов на изображениях
Браузеры
- Firefox Developer Edition 48: функции Firebug, редактируемое хранилище, улучшение инспектора и многое другое
- Что нового в Chromium 50 и Opera 37
- По данным Netmarketshare Chrome наконец стал популярнее Internet Explorer
- Выпуск браузера Opera 37
- Chrome обогнал Internet Explorer по данным сервиса Net Applications
- Ретроспектива: один год для Microsoft Edge (Looking Back: One Year of Microsoft Edge)
- Ускорение загрузки страницы с шрифтами WOFF 2.0 в Microsoft Edge (Speed up page load with WOFF 2.0 fonts in Microsoft Edge)
Дизайн
- Создание паттернов в Sketch
- Использование динамических данных с помощью Flex Layout в Sketch
- Дизайн комплексных продуктов: мысли об управлении сложностью
- Идеальное меню для мобильных приложений
- Введение в Material Design для новичков (The Beginner's Guide to Google's Material Design)
- Infinite Scrolling vs. Pagination
- Pagination Best Practices
- Уменьшение размеров JPG (Reducing JPG File size)
- Основные принципы дизайна UI
- Насколько быстрой должна быть UI-анимация? (How fast should your UI animations be?)
- Лучшие практики для по-страничной навигации (Pagination Best Practices)
- Дизайн проиллюстрированный в трех графиках (Design, Illustrated in 3 Charts)
- Семь вещей которые каждый дизайнер должен знать о доступности (7 Things Every Designer Needs to Know about Accessibility)
- Что произошло с Google Maps? (What Happened to Google Maps?)
- Как креативно рисовать используя фото для справки (How to Draw Creatively Using Photo References)
- Оценка мультигарнитурного дизайна (The Value of Multi-Typeface Design)
- Художники мира: Италия (International Artist Feature: Italy)
- Как создать дерзкий, но эффектный дизайн с разделенным пополам макетом (How to Design a Daring but Effective Split-Screen Layout)
- Создание набора иконок в Affinity Designer (Icon Set in Affinity Designer)
- Как добавить текстуру в плоскую иллюстрацию в Adobe Photoshop-е (How to Add Texture to a Flat Illustration in Adobe Photoshop)
- Фотоманипуляция по мотивам игры «Квантовый Разлом» в Adobe Photoshop
- Винтажный дизайн логотипа в хипстерском стиле в Adobe Illustrator
- Что означают названия шрифтов? (What Do Font Names Actually Mean?)
- Ценность дизайна с несколькими шрифтами (The Value of Multi-Typeface Design)
Подборка бесплатных дизайнерских печенек
- Resource Cards — хаб со ссылками на ресурсы (Resource Cards — Remember to Bookmark)
- Мокапы для демонстрации дизайна обложек книг и постеров (Free Download: 30 PSD Mock-ups)
- Мокапы с изображением смартфонов и планшетов (65+ Free Smartphone & Tablet Mock-up Templates)
- Иллюстрации упаковок (Freebie Packaging Illustrations)
- Фото-текстуры бетона (Free Concrete Textures Download!)
- Набор иконок Profi (PROFI FREE ICON SET)
- Иконки на тему салонов красоты (Hair Salon Free Icons)
- Набор иконок на тему медитации и СПА (AI, PDF, SVG, PNG) (Freebie: Meditation & Spa Icons (AI, PDF, SVG, PNG))
- Наборы иконок (Free Icon Sets to Download Today)
- Набор иконок музыкальных инструментов (39 иконок, SVG, PNG) (Freebie: Musical Instruments Icons (39 Icons, SVG, PNG))
- Лучшие иконочные шрифты (65+ Best Free Glyph Icons Download)
- Бесплатные рукописные шрифты в вашу коллекцию
- Publica Sans Regular — шрифт без засечек (Publica Sans)
- Annabel — элегантный декоративный ретро-шрифт с засечками (Annabel Regular Font)
- Лучшие геометрические шрифты за 2016-й (36+ Amazing Free Geometric Fonts 2016)
Новости и занимательное
- Взломаны базы крупнейших почтовых сервисов — более 57 млн аккаунтов Mail.ru под угрозой
- Последний шанс на бесплатное обновление до Windows 10
- Названы 50 самых выдающихся устройств в истории
- Пост-PC: конвергенция началась
- Виртуальная реальность. Отрасли, которые изменит виртуальная реальность
- 30-летний анализ опроверг связь между мобильниками и раком мозга
- Химики превратили молекулу в криптографическую машину
- Как искусственный интеллект повлияет на журналистику и работу ньюсрумов
- Хай-тек в помощь незрячим: настоящее и будущее
- Как бывший глава разработки Windows отказался от ноутбука и перешел на iPad
- Забавное приглашение-тест на работу для веб-разработчика
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Отправлено с iPhone
Этот комментарий был удален автором.
ОтветитьУдалитьthanks for sharing this article
ОтветитьУдалитьrel="nofollow"ReactJS Development Services