Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дайджест за прошлую неделю
Материал подготовили 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).