- PVSM.RU - http://www.pvsm.ru -

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

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

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

Веб-разработка [1]
CSS [2]
Javascript [3]
Браузеры [4]
Занимательное [5]

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

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

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

Браузеры

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

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

Дайджест за прошлую неделю [103].
Материал подготовили dersmoll [104] и alekskorovin [105].

Автор: Zfort Group

Источник [106]


Сайт-источник PVSM.RU: http://www.pvsm.ru

Путь до страницы источника: http://www.pvsm.ru/javascript/254117

Ссылки в тексте:

[1] Веб-разработка: #webdev

[2] CSS: #css

[3] Javascript: #js

[4] Браузеры: #browser

[5] Занимательное: #intresting

[6] Что должен уметь фронтенд-разработчик: https://habrahabr.ru/company/netologyru/blog/327294/

[7] HTML Шорты: Можно ли оборачивать блок в ссылку?: https://www.youtube.com/watch?v=JEItJ4nyl68&feature=youtu.be&list=PLQJNT2fdCJngOj0mGZaTcZRyfSBTCWHe1

[8] Радости и гадости регрессионного тестирования вёрстки: https://www.youtube.com/watch?v=-dZNNLsKxOk&feature=youtu.be

[9] Как мы оптимизировали Twitter Lite: https://habrahabr.ru/post/327494/

[10] Как использовать preload, prefetch и preconnect для ускорения сайта: https://www.searchengines.ru/ispolzovanie-preload-prefetch-i-preconnect.html

[11] Советы по оптимизации изображений: http://codepen.io/shshaw/post/image-optimization-tricks

[12] Как оптимизировать изображения: практическое руководство: https://gtmetrix.com/blog/how-to-optimize-images-a-practical-guide/

[13] Что означает оптимизация изображений?: https://gtmetrix.com/blog/what-does-image-optimization-mean/

[14] Оптимизация изображений за счет CDN: https://www.smashingmagazine.com/2017/04/content-delivery-network-optimize-images/

[15] Оптимизация веб-шрифтов для производительности: https://www.sitepoint.com/optimizing-web-fonts-for-performance-the-state-of-the-art/

[16] Бенчмаркинг Guetzli (новый JPEG encoder от Google): https://www.keycdn.com/blog/benchmarking-guetzli/

[17] Скоростное написание кода от Ana Tudor: улитка с помощью SVG: https://www.youtube.com/watch?v=gsEvK9L-H7A

[18] как написать миксин на генереции SVG полигонов: https://www.youtube.com/watch?v=unOAibjEjZc

[19] Морфинг SVG: https://eichefam.net/2017/04/21/morphing-svg/

[20] SVG Line Morphing Transition: https://www.uiplease.com/post/svg-line-morphing-transition/

[21] Плагины Sublime Text 3 для разработки фронтенда: https://github.com/jfilter/Sublime-Text-Plugins-for-Frontend-Web-Development

[22] Введение в философию webpack: https://medium.com/webmonkeys/an-introduction-to-webpacks-philosophy-78a02461c17f

[23] webpack в twitter.com: https://alunny.com/articles/webpack-on-twitter-com/

[24] Использование npm качестве сборщика: https://scotch.io/tutorials/using-npm-as-a-build-tool

[25] Введение в Web Animations API: https://www.gatherdigital.co.uk/community/post/intro-to-web-animations/82

[26] Инструменты для морфинга фигур в вебе: https://css-tricks.com/many-tools-shape-morphing/

[27] WebGL Scroll Spiral: https://tympanus.net/codrops/2017/04/26/webgl-scroll-spiral/

[28] Руководство по Progressive Web Apps: https://developers.google.com/web/ilt/pwa/

[29] Как мы созадли наш первый offline first сайт: https://www.skcript.com/svr/offline-is-the-new-online/

[30] awesome-wasm — отобранные материалы по WebAssebly: https://github.com/mbasso/awesome-wasm

[31] Хватит использовать CSS в JavaScript для веб-разработки: https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

[32] Rachel Andrew объясняет нюансы создания спецификаций на примере Grid Layout: https://rachelandrew.co.uk/archives/2017/04/24/refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/

[33] CSS в JavaScript: будущее компонентной стилизации: https://medium.freecodecamp.com/css-in-javascript-the-future-of-component-based-styling-70b161a79a32

[34] Продвинутая резиновая типографика с помощью calc(), vw, брейкпоинтов и линейных уравнений: https://medium.com/@jakobud/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations-8e15505d21ab

[35] Лучший способ задания позиций в CSS: http://codepen.io/jonneal/post/a-better-way-to-write-positions-in-css

[36] Рисуем весенний рисунок с помощью CSS Grid : http://jonibologna.com/spring-into-css-grid/

[37] Отзывчивая периодическая таблица с помощью CSS Grids: https://codepen.io/dudleystorey/full/rmWMXY/

[38] Имплементация системных шрифтов на Booking.com  — выученный урок: https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f

[39] Теперь, когда пользовательские свойства CSS готовы, все значения могут быть изменены индивидуально: https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/

[40] Использование CSS unicode-range для объединение шрифтов: https://jakearchibald.com/2017/combining-fonts/

[41] Как задавать CSS Margins и Padding (и крутые трюки с раскладкой): https://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/

[42] Разные логические варианты по группировке свойств CSS: http://mediatemple.net/blog/tips/different-logical-ways-group-css-properties/

[43] Sass инструмент для создания контрастных цветов: https://codepen.io/giana/project/full/ZWbGzD

[44] Делаем немного магии с помощью CSS blend modes: https://pawelgrzybek.com/make-some-magic-with-css-blend-modes/

[45] Adventure time — экспериментальная игра, созданная без JS — только HTML5 и CSS3 : http://minocernota.com/articles/pure_css_game/

[46] Лямбда-исчисление на JavaScript: https://habrahabr.ru/post/322052/

[47] Функциональное программирование в JavaScript с практическими примерами: https://habrahabr.ru/company/mailru/blog/327522/

[48] Видео докладов с конференции JavaScript fwdays'17, прошедшей 22 апреля в Киеве : https://www.youtube.com/playlist?list=PLPcgQFk9n9y9w-Og6McUeN-5YYhaUyn7E

[49] Пишем производительный JavaScript. 3 совета.: https://medium.com/devschacht/3-tips-about-javascript-597c33a219d6

[50] Управление состоянием в CSS с помощью переиспользуемых функций JavaScript: https://css-tricks.com/managing-state-css-reusable-javascript-functions/

[51] Инфографика: весь javascript в одной картинке: https://fossbytes.com/wp-content/uploads/2015/09/infographic-the-entire-javascript-language-in-one-single-image-491250-2.jpg

[52] Анонс TypeScript 2.3: https://blogs.msdn.microsoft.com/typescript/2017/04/27/announcing-typescript-2-3/

[53] Почему TypeScript становится всё более популярным?: https://thenewstack.io/typescript-getting-popular/

[54] Как как лучше организовать свой JS / jQuery спагетти код: https://notes.devlabs.bg/how-to-organize-our-js-jquery-spaghetti-code-better-78224ab0137

[55] Quokka —  Live JavaScript Scratchpad для JetBrains IDE (бесплатный инструмент): https://medium.com/@artem.govorov/quokka-live-javascript-scratchpad-for-jetbrains-ides-free-developer-tool-569590ab7a05

[56] Означает ли появление Glimmer смерть для Ember?: http://rwjblue.com/2017/04/26/does-glimmer-kill-ember/

[57] 10 примеров Machine Learning в JavaScript: http://tutorialzine.com/2017/04/10-machine-learning-examples-in-javascript/

[58] Информатика в JavaScript: Быстрая сортировка (Quicksort): https://medium.com/devschacht/nicholas-c-zakas-computer-science-in-javascript-quicksort-afa07c0a47f0

[59] Иногда undefined это defined: https://medium.com/devschacht/benedikt-meurer-sometimes-undefined-is-defined-91f32af4532c

[60] Концепты Clean Code, адаптированного под JavaScript: https://github.com/ryanmcdermott/clean-code-javascript

[61] Итак, что именно делает JavaScript таким странным языком программирования?: http://blog.thefirehoseproject.com/posts/exactly-makes-javascript-weird-programming-language/

[62] JavaScript: ключевое слово ‘This’ для начинающих: https://hackernoon.com/javascript-the-keyword-this-for-beginners-fb5238d99f85

[63] Паттерны для объектного наследования в JavaScript ES2015: https://www.sitepoint.com/patterns-object-inheritance-javascript-es2015/

[64] Понимание async/await за 7 секунд: https://twitter.com/manekinekko/status/855824609299636230

[65] Используйте любую Javascript библиотеку с Vue.js: http://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/?jsdojo_id=fef_lip

[66] Прогрессивное веб приложение с Vue JS, Webpack и Material Design [часть 1]: https://blog.sicara.com/a-progressive-web-application-with-vue-js-webpack-material-design-part-1-c243e2e6e402

[67] Airbnb открыла исходники React Sketch, библиотеки для связи React и Sketch: https://tproger.ru/news/airbnb-library-react-sketch/

[68] Вещи, о которых никто вам не говорит о React.js: https://medium.com/@dan_abramov/hey-thanks-for-feedback-bf9502689ca4

[69] Какие проекты нуждаются в React? Все!: https://css-tricks.com/projects-need-react/

[70] Как организовать большое приложение на React и сделать его масштабируемым: https://www.sitepoint.com/organize-large-react-application/

[71] Создание статического сайта с помощью React JS: https://www.dhruvkumarjha.com/articles/building-a-static-website-using-react-js-part-1-project-setup-and-website-ui

[72] Создание React приложения с бэкендом на Express: https://daveceddia.com/create-react-app-express-backend/

[73] recycle — функциональная и реактивная библиотека для React: https://github.com/recyclejs/recycle/

[74] Создание собственного Redux: https://zapier.com/engineering/how-to-build-redux/

[75] «Начало работы с Angular v2+»: https://school.scotch.io/getting-started-with-angular-2

[76] История SPA фреймворков: AngularJS 1.x и ностальгия: https://medium.com/@vladimirmetnew/history-of-spa-frameworks-angularjs-1-x-and-nostalgia-2e4a00df5ee2

[77] Реактивное программирование в Angular: https://blog.nrwl.io/reactive-programming-in-angular-7dcded697e6c

[78] angular-ssr: https://github.com/clbond/angular-ssr

[79] angular: https://habrahabr.ru/users/angular/

[80] Moon: http://moonjs.ga/

[81] en-inflectors: https://github.com/FinNLP/en-inflectors

[82] SmartPhoto.js: https://appleple.github.io/SmartPhoto/

[83] {S}tr{M}an: https://dleitee.github.io/strman/

[84] DevTools в браузере Vivaldi 1.10.289.3: https://habrahabr.ru/company/vivaldi/blog/327570/

[85] Выпуск web-браузера Vivaldi 1.9: http://www.opennet.ru/opennews/art.shtml?num=46463

[86] В Chrome появятся дополнительные предупреждения о небезопасности HTTP: http://www.opennet.ru/opennews/art.shtml?num=46464

[87] Обзор рынка браузеров, апрель 2017: https://www.webdesignerdepot.com/2017/04/browser-watch-april-2017/

[88] Павел Дуров анонсировал ряд нововведений в Telegram: платежи через ботов, видеосообщения и функция Telescope: http://itc.ua/news/pavel-durov-anonsiroval-ryad-novovvedeniy-v-telegram-platezhi-cherez-botov-videosoobshheniya-i-funktsiya-telescope/

[89] Google Maps и Google Search начали автоматически переводить отзывы о различных местах на родной язык пользователя: http://itc.ua/news/google-maps-i-google-search-nachali-avtomaticheski-perevodit-otzyivyi-o-razlichnyih-mestah-na-rodnoy-yazyik-polzovatelya/

[90] В WordPress 4.8 будет прекращена поддержка Internet Explorer 8,9 и 10: http://oddstyle.ru/wordpress-2/novosti-wordpress/v-wordpress-4-8-budet-prekrashhena-podderzhka-internet-explorer-89-i-10.html

[91] Google обновил поисковый алгоритм по борьбе с ложной информацией: http://www.cossa.ru/news/159553/

[92] Мир будущего: Мифы о компьютерных взломах и хакерах в кино: https://www.kinopoisk.ru/article/2935337/

[93] На пути к миллиарду: в Instagram уже 700 млн пользователей: https://ain.ua/2017/04/26/u-kogo-bolshe-v-instagram-uzhe-700-mln-polzovatelej

[94] У LinkedIn 500 млн пользователей. Это больше, чем у Twitter и Snapchat: https://ain.ua/2017/04/25/auditoriya-linkedin-dorosla-do-polumilliarda

[95] Нейросети «Яндекса» освоили сортировку писем: http://www.cossa.ru/news/159590/

[96] Обновление алгоритма Google «Fred». Что говорят эксперты?: https://ain.ua/2017/04/24/obnovlenie-algoritma-google-fred-chto-govoryat-eksperty

[97] Нейросеть освоила видеоигру по языковому гайду: https://naked-science.ru/article/hi-tech/neyroset-osvoila-videoigru-po

[98] Сжечь Александрийскую библиотеку-2. Google оцифровала 25 млн. книг — почему их нельзя читать?: http://rus.delfi.lv/techlife/detali/szhech-aleksandrijskuyu-biblioteku-2-google-ocifrovala-25-mln-knig-pochemu-ih-nelzya-chitat.d?id=48770907

[99] Стив Возняк рассказал, каким он видит будущее человечества: http://itc.ua/blogs/stiv-voznyak-rasskazal-kakim-on-vidit-budushhee-chelovechestva/

[100] Uber анонсировал запуск летающих такси в 2020 году: https://tjournal.ru/43641-uber-anonsiroval-zapusk-letaushih-taksi-v-2020-godu

[101] Маск рассказал, как будет работать интерфейс «компьютер-мозг» в Neuralink: https://ain.ua/2017/04/22/mask-detalnej-rasskazal-ob-interfejse-kompyuter-mozg

[102] Игра Mine3D: http://egraether.com/mine3d/

[103] Дайджест за прошлую неделю: https://habrahabr.ru/company/zfort/blog/327200/

[104] dersmoll: http://habrahabr.ru/users/dersmoll/

[105] alekskorovin: http://habrahabr.ru/users/alekskorovin/

[106] Источник: https://habrahabr.ru/post/327666/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best