The digest of fresh materials from the world of the front-end for the last week No. 306 (March 12 - 18, 2018)

We bring to your attention a selection with links to new materials from the frontend area and around it.

    Media     |    Web Development     |    CSS     |    Javascript     |    Browsers     |    Entertaining

---

Media

• Frontend Weekend podcast # 44 - Konstantin Burkalev on creating SDCast and RadioJS and how to start your podcast from scratch
• Web Standards podcast, Issue No. 112: New Firefox 59, SEO for JS, Webpack without SPA, Houdini for CSS, sorting DOM, fonts without too much.
• React Five Minute Podcast # 42 - Jake Archibald: In the loop (JSConf.Asia 2018)
• Devschacht Podcast: Night Frontend # 26 - Static Typing Debate
• Youth Frontend (18+) podcast visiting uWebDesign
• “Drinkcast” podcast from SPB Frontend, “Sad,” about burnout at work
•“ALL YOUR HTML” # 40: “Decompiled animation from murmure.me website”

Web development

• A simple static site on Webpack 4
• CloudFlare introduced a stable release of Workers for cloud-based administration of web-based JavaScript applications
• We study Bootstrap 4 in 5 minutes
• Survey Stack Overflow 2018: AI, ethics and sexual orientation

• Performance:
  • 4 helpful image optimization tips
  • Why performance matters. Jeremy Wagner's note on the Google Developers Blog
  • How to test custom connection speeds using GTmetrix
  • 10x performance improvement: Static site optimization
  • Accelerated Mobile Pages: increasing conversion rates
  • How BBC interactive content works in AMP, applications and the web
  

• Tools:
  • Speeding up JavaScript code builds using webpack 2-3
  • If you have ever configured Webpack, Parcel will blow you off!
  • Continuous Development without pressing Ctrl + R using webpack 4
  • emma-cli - an auxiliary terminal for finding and installing node packages.
  

• Accessibility:
  • How you can make your site more accessible
  • Single-page applications are not available
  • A detailed plan for working with web accessibility
  • Useful resources on the topic of accessibility
  • Labels Required . A comprehensive filamentgroup article on why labeling is so important
  

• Animation:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 73
  • Slideshow with glitch effect
  • Unusual concept of link animation
  

CSS

• Font (even more) Awesome - a symbolic invention
• Animation without stereotypes
• CSS in the React era: how we traded the cascade for consistency
• CSS Grid Application Layout on production
• Microsoft developers blog announced an early support for variable fonts in Microsoft Edge
• Search resource and testing of variable fonts
• Theming using variables, global and local
• The magic of vanilla CSS using custom properties

Javascript

• Guide to SEO JavaScript sites: Part 1. Internet through the eyes of Google , Part 2. Problems, experiments and recommendations
• Pitfalls of Service Workers
• How to make Drag-and-Drop file downloader in pure JavaScript
• Three years with Angular and have no regrets: overview of the features of the framework
• Comparison of the main JavaScript front-end frameworks as of 2018
• JavaScript vs. TypeScript vs. ReasonML
• SmooshGate: the ongoing battle between progress and stability in JavaScript
• 17 tips for writing productive code in JavaScript / node.js to make your applications faster
• You can create a neural network in JavaScript even if you don’t really understand the neural network
• A selection of useful tips and tricks from ECMAScript 2015 (ES6)
• MobX 4: better, easier, faster, less

• Theory:
  • How JS works: Tracking changes in the DOM using MutationObserver
  • How to replace all the same substrings in a string with JavaScript
  • Type casting in JS . Magic or simple rules?
  • Elegant patterns in modern JavaScript: Ice Factory
  

• VueJS:
  • Хуки жизненного цикла Vue.js
  • 4 клевые вещи, которые вы можете делать с Vue.js CLI
  • Использование JSX с Vue и почему вас должно это волновать
  • Boiler — javascript фреймворк, использующий Vue и Sass
  • vue-promise-btn — минималистичный, но мощный плагин для блокировки кнопок при выполнении асинхронных действий со встроенным спиннером
  

• React:
  • React Tutorial: подробное руководство по изучению React.js в 2018
  • Reselect — библиотека селекторов для Redux
  • Серверный рендеринг с помощью React и React Router
  • Как GraphQL заменяет Redux
  • Как не делать React: популярные антипаттерны и находки в React
  • React Authentication в деталях
  • Почему разработчики на React должны модулизировать их приложения?
  

• Libs & Plugins:
  • Rough.js - creating graphics with a sketch effect in canvas
  • driver.js - a lightweight engine without dependencies to attract user attention when interacting with a page
  • filepond - an advanced library for uploading different types of files
  

Browsers

• Firefox 59 release , details for developers on Marat Tanalin’s blog
• Password export will appear in Google Chrome
• Firefox will begin to deal with pop-up page elements
• Yandex has released Yandex Browser with the built-in Alice

Entertaining

• When the next big programming language appears from Darwin’s point of view
• How does it feel to work in IT if you are over 50
• Google will start blocking cryptocurrency and ICO
ads • Hidden miners distribute through forks of various projects on GitHub
• 23 sites for hacking practice
• Why it is useful read any user reviews
• Why it’s difficult to get a promotion at Google and sometimes it’s easier to quit
• Google has opened the Google Maps API for game developers
• Large American companies no longer need their own data centers and sell them to Microsoft, G oogle and Amazon
•Voice assistant "Alice" learned to control a computer on Windows

We apologize for any typos or broken / duplicated links. If you notice a problem - please write in a personal email, we try to quickly fix them.

Last week's digest .
Material prepared dersmoll and alekskorovin .