- PVSM.RU - https://www.pvsm.ru -
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

| Веб-разработка [1] |
| CSS [2] |
| Javascript [3] |
| Браузеры [4] |
| Занимательное [5] |
Веб-разработка
Основные принципы разметки в HTML 5.1 [6] (Document Outlines in HTML 5.1)
Маскирование изображений с помощью SVG [7]
Самый простой и производительный способ подключать ссылки для социальных медиа [8]
Нам нужно поговорить о техническом долге [9] (We Need to Talk About Technical Debt)
Девять ресурсов, на которых можно учиться кодить по 15 минут в день [10]
Языки, фреймворки и инструменты, которые вы «должны» изучить в 2017-м [11]
Топ JS фреймворков и тем для изучения в 2017-м [12]
5 «лучших» Javascript фреймворков для изучения в 2017-м [13]
Размышления о будущем веба [14] (Access and Experience: The Future Web)
Про оптимизацию рендеринга — с оптимизмом [15]
Мгновенные статические веб-страницы с помощью Service Worker [16]
Анимация 60fps в вебе [17]
Сохраняем интернету 2000 терабайт в день благодаря оптимизации Font Awesome [18]
Accessibility [19] — обновленное руководство MDN по доступности: основы WAI-ARIA [20], HTML [21] и CSS [22], мультимедиа [23] и мобильная доступность [24]
Доступность в вебе — разработка веба с эмпатией [25] (Web Accessibility — Developing web with empathy)
Опасайтесь вложенности ролей [26] (Be Wary of Nesting Roles)
Progressive Web AMPs [27]
Урок, который я получил, работая с AMP от Google [28]
CloudFour делится опытом перевода сайта в PWA [29] (Hey, Hey, Cloud Four is a PWA!)
Создание Web Bluetooth Progressive Web App [30]
Chrome DevTools: Optimise your Web Development Workflow 2016 [35]. Материалы по докладу от Umar Hansa, включающий в себя видео, 177 слайдов и бонусный контент
CSSConf.Asia 2016 [36]
JSConf.Asia 2016 [37]
ffconf 2016 [38]
ReactiveConf 2016 [39]
CSS
Анимации на GPU: делаем это правильно [40]
Битва css-in-js [41]
Директива CSS @support и ее двойник в JS. Готовы к использованию! [42] (CSS support [43] directive and its JS twin. Ready to use!)
CSS Grid! [44] Оптимистичное мини-интревью Эрика Мейера о грядущем CSS Grid Layout
Virtual CSS c помощью Styletron [45]
BEM и поддерживаемый CSS [46]
Мощь селекторов CSS и как их использовать [47]
Балансировка текста в отзывчивом дизайне [48]
Гибкая типографика с помощью :root [49]
Сокращенный синтаксис CSS рассматривается как антипаттерн [50] (CSS Shorthand Syntax Considered an Anti-Pattern)
Изучение linear-gradient() с помощью разработки сложного шахматного узора [51]
Новый мир: написание CSS в ClojureScript и жизнь после Sass [52]
Использование CSS переменных в разработке сайтов [53] (Using CSS Variables in Site Development)
Циклы в CSS препроцессорах [54]
CSS object-fit для добавления мощности вашей верстке [55]
JavaScript
Нейронные сети на JS. Создавая сеть с нуля [56]
Дорогой JavaScript [57], мне хочется рассказать тебе о проблеме в нашем сообществе.
React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты [58]
Забавные хаки для ускорения контента [61]
Нативная разработка JavaScript после Internet Explorer [62]
Отображаем динамические сообщения с помощью Web Notification API [63]
Как должны работать табы [64] по версии Реми Шарпа
Примеры JavaScript кода, актуального для 2016-го года по версии автора [65] (Enough JavaScript to be dangerous in 2016)
Урок по созданию Scrollspy-навигации на JS [66]
styletron — универсальные высокопроизводительные стили css-in-js [67]
Релиз V8 версии 5.6 [68] (V8 Release 5.6)
Angular 1.6 уже здесь, и вот что вы должны по этому поводу знать [69]
Релиз Angular 2.3.0 [70]
Текущее состояние Babel и его планы на будущее [71]
Анонс TypeScript 2.1 [72], TypeScript 2.1: async/await для ES3/ES5 [73]
Async/Await заработали в Firefox [74]
Путеводитель по JavaScript Promise для новичков [75]
Неизменяемый JavaScript: как это делается с ES6 и выше [76]
Основы Flow за 10 минут [78] (The Fundamentals of Flow in 10-ish Minutes)
Проверка типов в JavaScript: Начало работы с Flow. [79] (Type Checking In JavaScript: Getting Started with Flow.)
Зачем использовать статические типы в JavaScript? Часть I [80], II & III [81]
Возможно вам не понадобится TypeScript (или статические типы) [82] (You Might Not Need TypeScript (or Static Types))
Можно ли обойтись без jsx и зачем? [84]
Переведена документация Vue.JS 2.x [85]
5 бесплатных туториалов по VueJS [86]
Laravel выбрал Vue, но вы не должны [87] (заменив его на React)
Если вы перешли с React на Vue, почему вы это сделали? [88] Большой тред на reddit
React на серверной стороне [89] (Server Side React)
Начало квеста по написанию кода: Как написать свой первый React компонент [90]
Ошибочное сравнение React и Angular [91] (Wrong comparisons between React and Angular)
Почему мы выбрали Angular 2 вместо React для нашей ентрейпрайз разработки [92]
pulltorefresh.js [93] — быстрый и мощный плагин для реализации pull-to-refresh в вашем веб-приложении
myScale [94] — Quick SVG Icon Resizer
Siema [95] — очередная легкая и простая карусель без зависимостей
es-beautifier [96] — ECMAScript beautifier based on eslint
Браузеры
Инструмент разработки Firebug закрывается: «Пользуйтесь Firefox DevTools» [97]
Chrome 56 Beta: “Not Secure” warning, Web Bluetooth и CSS position: sticky [99]
Детали свежего обновления Microsoft Edge [102] — частичная поддержка CSS Custom Properties, Async/await, улучшенная производительность DOM и другое
Release Notes for Safari Technology Preview 19 [103]
Занимательное
4 эксперимента с рукописным текстом с помощью нейронной сети [114]Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю [115].
Материал подготовили dersmoll [116] и alekskorovin [117].
Автор: Zfort Group
Источник [118]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/219632
Ссылки в тексте:
[1] Веб-разработка: #webdev
[2] CSS: #css
[3] Javascript: #js
[4] Браузеры: #browser
[5] Занимательное: #intresting
[6] Основные принципы разметки в HTML 5.1: https://bitsofco.de/document-outlines-in-html-5-1/
[7] Маскирование изображений с помощью SVG: https://www.jayfreestone.com/journal/masking-bitmaps-with-svg/
[8] Самый простой и производительный способ подключать ссылки для социальных медиа: https://css-tricks.com/simple-social-sharing-links/
[9] Нам нужно поговорить о техническом долге: https://24ways.org/2016/we-need-to-talk-about-technical-debt/
[10] Девять ресурсов, на которых можно учиться кодить по 15 минут в день: https://medium.com/the-mission/9-places-to-learn-how-to-code-in-15-minutes-or-less-a-day-b29451500c21
[11] Языки, фреймворки и инструменты, которые вы «должны» изучить в 2017-м: http://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017/
[12] Топ JS фреймворков и тем для изучения в 2017-м: https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711
[13] 5 «лучших» Javascript фреймворков для изучения в 2017-м: https://www.dunebook.com/5-best-javascript-frameworks-to-learn-in-2017/
[14] Размышления о будущем веба: https://www.vectorform.com/news-and-views/access-and-experience-the-future-web/
[15] Про оптимизацию рендеринга — с оптимизмом: https://habrahabr.ru/company/livetyping/blog/316136/
[16] Мгновенные статические веб-страницы с помощью Service Worker: http://calendar.perfplanet.com/2016/instant-static-web-pages-with-service-worker/
[17] Анимация 60fps в вебе: https://westwingsolutions.com/articles/blog/60fps-animations
[18] Сохраняем интернету 2000 терабайт в день благодаря оптимизации Font Awesome: https://pixelambacht.nl/2016/font-awesome-fixed/
[19] Accessibility: https://developer.mozilla.org/en-US/docs/Learn/Accessibility
[20] WAI-ARIA: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
[21] HTML: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
[22] CSS: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript
[23] мультимедиа: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia
[24] мобильная доступность: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile
[25] Доступность в вебе — разработка веба с эмпатией: https://medium.com/@paramsingh_66174/web-accessibility-developing-web-with-empathy-2aee08ebe97c
[26] Опасайтесь вложенности ролей: http://adrianroselli.com/2016/12/be-wary-of-nesting-roles.html
[27] Progressive Web AMPs: https://www.smashingmagazine.com/2016/12/progressive-web-amps/
[28] Урок, который я получил, работая с AMP от Google: https://www.viget.com/articles/lessons-learned-working-with-googles-amp
[29] CloudFour делится опытом перевода сайта в PWA: https://cloudfour.com/thinks/hey-hey-cloud-four-is-a-pwa/
[30] Создание Web Bluetooth Progressive Web App: https://medium.com/@nimbleape/building-a-web-bluetooth-progressive-web-app-a859f91fd29
[31] Подкаст «Веб-стандарты», Выпуск №45: https://soundcloud.com/web-standards/episode-45
[32] Подкаст radiojs, Выпуск 43: Фиолетовый паттерн: https://radiojs.ru/2016/12/radiojs-43/
[33] Я.Субботник по фронтенду: https://events.yandex.ru/events/yasubbotnik/10-dec-2016/
[34] KharkivJS #7 2016 : https://www.youtube.com/playlist?list=PLnkLrCUX4Qh435vUFpNTUSJILQK27_akH
[35] Chrome DevTools: Optimise your Web Development Workflow 2016: https://umaar.com/dev-tips/125-optimise-web-dev-workflow/
[36] CSSConf.Asia 2016 : https://www.youtube.com/playlist?list=PL37ZVnwpeshFizH1JsG3s7_qyN2Uk0OSh
[37] JSConf.Asia 2016 : https://www.youtube.com/playlist?list=PL37ZVnwpeshFn7VjMHjenn8niUTYNe8O7
[38] ffconf 2016: https://www.youtube.com/watch?v=uXYZbLT0j9c&feature=youtu.be&list=PLXmT1r4krsTpDoGcdh1baZPIV6DtX9_rX
[39] ReactiveConf 2016 : https://www.youtube.com/playlist?list=PLa2ZZ09WYepMCRRGCRPhTYuTCat4TiDlX
[40] Анимации на GPU: делаем это правильно: https://habrahabr.ru/company/odnoklassniki/blog/313978/
[41] Битва css-in-js: https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.2ev3n29f0
[42] Директива CSS @support и ее двойник в JS. Готовы к использованию!: https://medium.com/@barvysta/css-support-directive-and-its-js-twin-ready-to-use-6eea2fefef36
[43] support: https://habrahabr.ru/users/support/
[44] CSS Grid!: http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/
[45] Virtual CSS c помощью Styletron: https://ryantsao.com/blog/virtual-css-with-styletron
[46] BEM и поддерживаемый CSS: https://www.stackbuilders.com/news/bem-and-maintainable-css
[47] Мощь селекторов CSS и как их использовать: http://webdesignerwall.com/tutorials/the-power-of-css-selectors-and-how-to-use-them
[48] Балансировка текста в отзывчивом дизайне: https://24ways.org/2016/responsive-display-text/
[49] Гибкая типографика с помощью :root: http://allthingssmitty.com/2016/12/05/flexible-type-using-root/
[50] Сокращенный синтаксис CSS рассматривается как антипаттерн: http://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-anti-pattern/
[51] Изучение linear-gradient() с помощью разработки сложного шахматного узора: http://www.zpyro.com/learn-linear-gradient-by-designing-a-complex-chess-pattern/
[52] Новый мир: написание CSS в ClojureScript и жизнь после Sass: https://blog.estimate-work.com/a-new-world-writing-css-in-clojurescript-and-life-after-sass-bdf5bc80a24f
[53] Использование CSS переменных в разработке сайтов: http://thenewcode.com/1161/Using-CSS-Variables-in-Site-Development
[54] Циклы в CSS препроцессорах: https://css-tricks.com/loops-css-preprocessors/
[55] CSS object-fit для добавления мощности вашей верстке: https://medium.com/@barvysta/css-object-fit-to-power-up-your-markup-1c9be305e5a0
[56] Нейронные сети на JS. Создавая сеть с нуля: https://habrahabr.ru/company/epam_systems/blog/317050/
[57] Дорогой JavaScript: https://habrahabr.ru/post/316978/
[58] React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты: https://habrahabr.ru/company/devexpress/blog/316358/
[59] Челендж JavaScript30: https://ymatuhin.ru/front-end/javascript-30/
[60] Распутываем спагетти-код: как писать поддерживаемый Javascript: http://prgssr.ru/development/rasputyvaem-spagetti-kod-kak-pisat-podderzhivaemyj-javascript.html
[61] Забавные хаки для ускорения контента: https://jakearchibald.com/2016/fun-hacks-faster-content/
[62] Нативная разработка JavaScript после Internet Explorer: https://www.sitepoint.com/native-javascript-development-after-internet-explorer/
[63] Отображаем динамические сообщения с помощью Web Notification API: https://www.sitepoint.com/browser-notification-api/
[64] Как должны работать табы: https://remysharp.com/2016/12/11/how-tabs-should-work
[65] Примеры JavaScript кода, актуального для 2016-го года по версии автора: https://blog.hellojs.org/enough-javascript-to-be-dangerous-in-2016-5d04b3439e16
[66] Урок по созданию Scrollspy-навигации на JS: https://scotch.io/tutorials/build-a-custom-javascript-scrollspy-navigation
[67] styletron — универсальные высокопроизводительные стили css-in-js: https://github.com/rtsao/styletron
[68] Релиз V8 версии 5.6: http://v8project.blogspot.com/2016/12/v8-release-56.html
[69] Angular 1.6 уже здесь, и вот что вы должны по этому поводу знать: https://toddmotto.com/angular-1-6-is-here
[70] Релиз Angular 2.3.0: http://angularjs.blogspot.com/2016/12/angular-230-now-available.html
[71] Текущее состояние Babel и его планы на будущее: https://babeljs.io/blog/2016/12/07/the-state-of-babel
[72] Анонс TypeScript 2.1: https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/
[73] TypeScript 2.1: async/await для ES3/ES5: https://blog.mariusschulz.com/2016/12/09/typescript-2-1-async-await-for-es3-es5
[74] Async/Await заработали в Firefox: https://hacks.mozilla.org/2016/12/asyncawait-arrive-in-firefox/
[75] Путеводитель по JavaScript Promise для новичков: https://habrahabr.ru/company/zerotech/blog/317256/
[76] Неизменяемый JavaScript: как это делается с ES6 и выше: https://habrahabr.ru/company/piter/blog/317248/
[77] Что и как в ES6: хитрости, лучшие практики и примеры. Часть вторая. Мэпы, слабые мэпы, обещания, генераторы, async / await, геттеры / сеттеры, символы: https://tproger.ru/translations/es6-cheatsheet-2/
[78] Основы Flow за 10 минут: https://www.youtube.com/watch?v=xWMuAUbXcdQ
[79] Проверка типов в JavaScript: Начало работы с Flow.: https://hackernoon.com/type-checking-in-javascript-getting-started-with-flow-8532c11aceb3
[80] Часть I: https://medium.freecodecamp.com/why-use-static-types-in-javascript-part-1-8382da1e0adb
[81] II & III: https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-2-part-3-be699ee7be60#.cxkprazjf
[82] Возможно вам не понадобится TypeScript (или статические типы): https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b
[83] Основы производительности React-приложений: http://blog.csssr.ru/2016/12/07/react-perfomance/
[84] Можно ли обойтись без jsx и зачем?: https://habrahabr.ru/post/317114/
[85] Переведена документация Vue.JS 2.x: https://habrahabr.ru/post/317112/
[86] 5 бесплатных туториалов по VueJS: https://hackernoon.com/5-free-vuejs-tutorials-3caa8ff865e9
[87] Laravel выбрал Vue, но вы не должны: https://medium.com/@MentallyFriendly/laravel-chooses-vue-but-you-dont-have-to-a578244648ce
[88] Если вы перешли с React на Vue, почему вы это сделали?: https://www.reddit.com/r/javascript/comments/5fi07s/have_you_moved_from_react_to_vue_if_so_why/
[89] React на серверной стороне: https://remysharp.com/2016/12/07/server-side-react
[90] Начало квеста по написанию кода: Как написать свой первый React компонент: https://www.youtube.com/watch?v=xRoYf-QgHpc
[91] Ошибочное сравнение React и Angular: https://medium.com/aya-experience/wrong-comparisons-between-react-and-angular-707d504c95df
[92] Почему мы выбрали Angular 2 вместо React для нашей ентрейпрайз разработки: https://blog.biznas.io/why-we-chose-angular-2-over-react-for-our-enterprise-software-development-work-392e2c9e39a9
[93] pulltorefresh.js: https://www.boxfactura.com/pulltorefresh.js/
[94] myScale: https://webkul.github.io/myscale/
[95] Siema: https://pawelgrzybek.com/siema/
[96] es-beautifier: https://www.npmjs.com/package/es-beautifier
[97] Инструмент разработки Firebug закрывается: «Пользуйтесь Firefox DevTools»: https://habrahabr.ru/post/316974/
[98] Новая версия браузера Chrome 55 использует примерно на 30% меньше оперативной памяти, нежели предыдущая Chrome 54: http://itc.ua/news/novaya-versiya-brauzera-chrome-55-ispolzuet-primerno-na-30-menshe-operativnoy-pamyati-nezheli-predyidushhaya-chrome-54/
[99] Chrome 56 Beta: “Not Secure” warning, Web Bluetooth и CSS position: sticky: https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html
[100] Google Chrome полностью прекращает поддержку Adobe Flash Player: https://tproger.ru/news/no-more-flash-player-in-google-chrome/
[101] Google добавила в Chrome для Android возможность скачивать музыку и видео: https://vc.ru/n/new-chrome-android
[102] Детали свежего обновления Microsoft Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/14986/
[103] Release Notes for Safari Technology Preview 19: https://webkit.org/blog/7093/release-notes-for-safari-technology-preview-19/
[104] Свершилось! Полноценная Windows 10 приходит на ARM: http://gagadget.com/announce/24870-svershilos-polnotsennaya-windows-10-prihodit-na-arm/
[105] YouTube выплатил $1 млрд авторских отчислений музыкантам и лейблам за последние 12 месяцев: https://vc.ru/n/youtube-music
[106] Куда пойти учиться программисту: советы опытного тимлида, преподавателя и новичка: https://vc.ru/p/csssr-programming
[107] Мифы, в которые верят программисты: https://tproger.ru/articles/falsehoods-programmers-believe-in/
[108] «Уберите всё со стола» — рассказ разработчика о дистанционном собеседовании в Amazon: https://tproger.ru/translations/amazon-interview-bs/
[109] О техподдержке Google или робот с человеческой душой: http://www.computerra.ru/160147/o-tekhpodderzhke-google-ili-robot-s-cheloveches/
[110] Depositphotos назвал 12 главных трендов видео и фото на 2017 год: http://ain.ua/12-fototrendov-na-2017-god
[111] Magic Leap — афера на $1.4 миллиарда?: https://shazoo.ru/2016/12/10/46873/magic-leap-afera-na-14-milliarda
[112] Самые яркие технологические тренды на Web Summit 2016: как изменится мир в ближайшем будущем: http://www.cossa.ru/152/147544/
[113] В Google Play Movies теперь доступны 4K-фильмы: http://gagadget.com/announce/24855-v-google-play-movies-teper-dostupnyi-4k-filmyi/
[114] 4 эксперимента с рукописным текстом с помощью нейронной сети: http://distill.pub/2016/handwriting/
[115] Дайджест за прошлую неделю: https://habrahabr.ru/company/zfort/blog/316812/
[116] dersmoll: http://habrahabr.ru/users/dersmoll/
[117] alekskorovin: http://habrahabr.ru/users/alekskorovin/
[118] Источник: https://habrahabr.ru/post/317362/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.