Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Медиа |
Веб-разработка |
CSS |
Javascript |
Браузеры |
Занимательное |
Медиа
Подкаст «Веб-стандарты», Выпуск №80 : Firefox 55, Samsung есть, Safari виднее, алгоритмы и паттерны, прозрачный JPG, Телеграм, приоритеты загрузки, фокусы, модули в Node.js.
Подкаст «Пятиминутка React» #30 : setState и организация кода
Подкаст «Пятиминутка Angular» #1 : Angular 5 Beta 3, Angular CLI 1.3, CreateAngularComponents
Подкаст «Фронтенд Юность (18+)» #14: Все секреты производительности фронтенда
Подкаст «devschacht», Выпуск №6: Готовим с фронтендером: одна часть Node.js, одна часть CSS-in-JS, густо приправить ФРП, добавить щепотку корутин и чайную ложечку зелёных тредов.
Подкаст «Drinkcast» #3: «Раньше дивы были зеленее»
Нужно ли фронтендеру знать алгоритмы и паттерны проектирования?. Игорь Алексеенко в HTML Шортах
Запись трансляци Я.Субботника по фронтенду, прошедшего 12 августа в Санкт-Петербурге
Totally Tooling Tips: Webpack Tips. Регулярное шоу от разработчиков Google Chrome, в этом выпуске советы по Webpack
Веб Разработка
О чем всегда стоит помнить при локализации веб-сайта, чтобы потом не было стыдно
Ускорьте ваш сайт с помощью машинного обучения
Календарь событий по фронтенду. Конференции, встречи и другие события по фронтенду во всём мире в одном календаре.
- W3C рассматривает вопрос перевода предыдущих спецификаций HTML в разряд устаревших
- Критический запрос. Перевод статьи Ben Schwarz: The Critical Request.
- Урок-введение по WebAssembly на примере игры «Жизнь»
.NET и WebAssembly — это будущее фронтенда?
Какие функции Progressive Web App будет поддерживать Apple?
- SEO:
- Google призывает оптимизаторов помочь JS-разработчикам понять SEO
JavaScript и SEO: разница между Crawling и Indexing
Разработчик из Shuvayatra делится опытом внедрения Progressive Web App? в контексте SEO
- Инструменты:
Вредоносный код в npm-пакетах и борьба с ним
Официальный релиз Bootstrap 4 beta наконец состоялся. Переход с Bootstrap 4 Alpha 6 на Beta
JPNG.svg — прозрачный PNG с JPEG компрессией
- Accessibility:
- Анимация:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #48
Transitions with JavaScript: коллекция небольших Chrome-only демок от Ana Tudor (CSS переменные плюс немного JS)
Производительные веб-анимации и интерактив: достигаем 60 FPS
Креативные переходы между страницами с эффектом морфинга
Руководство по покадровой анимации с помощью CSS и JavaScript
CSS
- Свойства для интервалов (*-gap) становятся универсальными
- Модуль CSS-изоляции (CSS Containment Level 1) стал кандидатом в рекомендации
EqualizeCSS — современная легкая система гридов, основанная на flexbox (Sass)
Практическое руководство по использованию CSS Modules в React приложениях
Изоляция css стилей с помощью компонентного подхода
Развенчание мифов о Hex цветах в CSS
Font-size: неожиданно сложное CSS-свойство
Shadow DOM: Быстрые и инкапсулированные стили
Веб-шрифты: когда вы нуждаетесь в них, а когда нет
Наследование в CSS: введение
Лучший способ сделать “Wrapper”-обертку на CSS
Flex Grow и Flex Basis: адаптивная раскладка страниц
- CSS Grid Layout:
- Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас
Разница между явными и неявными сетками
Простые Sass миксины для улучшения браузерной совместимости для CSS Grid Layouts
Изменения в спецификации Grid и использование многоколоночного макета
Создание графиков на CSS с помощью гридов и пользовательских свойств
chrome-css-grid-highlighter — Chrome-расширение для подсветки CSS Grid Layout
JavaScript
ES Modules в Node уже сегодня. Анонс нового загрузчика standard/esm
JavaScript для людей, которые ненавидят JavaScript
Машинное обучение в Javascript. Слайды с обзором возможностей
JavaScript паттерны: паттерн Observer
Как все время быть в теме экосистемы JavaScript?
Как на самом деле работает JavaScript: часть 1
- Практика:
Ленивая загрузка изображений с помощью Intersection Observer
Бинарный поиск в JavaScript. Практический пример
Как мы создали наше первое full-stack JavaScript приложение за три недели. Простое пошаговое руководство от идеи до запуска
Улучшаем разговоры с помощью Perspective API
Как создать UI поиска по GitHub за 60 минут
VueJS:
Лучшие мобильные компоненты для PWA в VueJs
React + Webpack: замешательство, фрустрация и как Vue.js может помочь
Компонент Yandex Maps для VueJS
React:
Почему React лучше, чем Vue.js. И когда.
React Progressive Web Apps? — часть Part 1
Получение данных из API с React.JS
Использование Create React App с Relay Modern
react-beautiful-dnd — доступные drag and drop для списков с React.js
Angular:
Как Angular защищает нас от XSS атак?
MEAN Stack: разработка приложения с помощью Angular 2+ и Angular CLI
Избегайте общих проблем с модулями в Angular
- Libs & Plugins:
js-meter — инструмент для измерения производительности времени выполнения, CPU, RAM и кучи javascript кода
posterus — компонуемые асинхронные примитивы (futures) с реальной отменой, управлением расписанием и корутинами
nanoid — крошечный генератор уникальных ID, дружественный к URL
react-simple-maps — SVG карты с d3-geo и topojson
DisplayJS — быстрый и простой JS фреймворк для создания амбициозных UI, местами похожий на jQuery
Браузеры
У Mozilla есть план, как победить Chrome. Встречайте Firefox 57 и боевую лисичку в броне
Релиз Firefox 55, разбор деталей от Марата Таналина
Firefox 55: first desktop browser to support WebVR
Фишеры уже два месяца «охотятся» на разработчиков расширений для Chrome
- Выпуск web-браузера Opera 47
Релиз Safari Technology Preview Release 37
Занимательное
- Новый рубеж взят: стоимость биткоина превысила $4000
- Foursquare снова обновил Swarm. Теперь это журнал ваших путешествий
- Facebook представила похожий на YouTube видеосервис с пользовательскими и профессиональными видео
- SoundCloud нашла финансирование для дальнейшей работы и сменила гендиректора
- Криптовалюты и блокчейн: история и перспективы рынка
- Киберспорт могут включить в программу Олимпийских игр 2024 года
- «Дефейс» дорожных знаков может дезориентировать беспилотные автомобили
- Бот OpenAI победил трёх топовых профессионалов в Dota 2
- Как устроен «Яндекс.Навигатор». Как алгоритм строит маршрут, откуда берутся данные о пробках и будет ли сервис платным
Алгоритмы компрессии — введение с хорошей визуализацией
Руководство по участию в Open Source
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Комментарии (13)
ange007
14.08.2017 17:39DisplayJS — быстрый и простой JS фреймворк для создания амбициозных UI, местами похожий на jQuery
Ну он старается быть на него похожим, но со своими нюансами.
А так интересная библиотека, правда есть ещё косяки и неудобства.
Думаю тем кто не хочет менять свои шаблонизаторы и красиво выстроенные классы/модули на фреймворки — отличная замена для двустороннего связывания.
Alexeyco
derSmoll
Пусть будет для баланса среди десятков статей «почему vue лучше..», вышедших за последнее время :)
Alexeyco
Так я ж не против. Просто в качестве основной мысли там «React is better when you are better». И все… и если ты возражаешь, на это остается только разводить руками и произносить «дело не в React, просто ты должен быть лучше».
Rastishka
Да там вообще неадекватный автор.
А типа размещение HTML шаблона в JS это не переизобретение колеса?Типа HTML шаблон на JS — это правильно, а HTML шаблон на HTML — это неправильно?
Бред какой то.
inoyakaigor
JSX это не HTML шаблон как таковой. В реакте нет шаблонов вообще (в классическом понимании этого слова).
Alexeyco
Предположим, JSX не шаблонизатор, а в vue шаблонизатор. От этого один хуже, а другой лучше? Заключительная мысль статьи (как я ее понял): «да, vue из коробки быстрее и удобнее и проще, но react все равно лучше». Все.
spmbt
> React лучше потому, что JSX.
Я понял, что это не прямая речь: ). Но тем, кто не знает — вот ссылка: https://ru.vuejs.org/v2/guide/render-function.html (в середине стр.) и https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage (можно использовать JSX в Vue).