The digest of fresh materials from the world of the frontend for the last week №306 (March 12 - 18, 2018)

We offer you a selection with links to new materials from the front-end area and around it.

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

---

Media

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

Web development

• Simple static webpack site 4
• CloudFlare introduced Workers Stable Release for cloud-based administration of JavaScript web applications.
• Learn Bootstrap 4 in 5 minutes
• Stack Overflow 2018 Poll: AI, Ethics and Sexual Orientation
')

• Performance:
  • 4 useful tips on image optimization
  • Why performance matters. Jeremy Wagner's post on the Google Developer Blog
  • How to test custom connection speed using GTmetrix
  • 10x performance improvement: static site optimization
  • Accelerated Mobile Pages: Increasing Conversion Level
  • How BBC Interactive Content Works in AMP, Applications, and the Web
  

• Instruments:
  • Accelerate javascript build using webpack 2-3
  • If you have ever configured a Webpack, Parcel will blow you away!
  • Continuous Development without pressing Ctrl + R using webpack 4
  • emma-cli is an auxiliary terminal for finding and installing node packages.
  

• Accessibility:
  • How can you make your site more accessible?
  • Single page apps not available
  • Detailed Web Accessibility Plan
  • Useful resources on accessibility
  • Labels Required . Detailed article on filamentgroup about why it is so important to use the label
  

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

CSS

• Font (even more) Awesome - a landmark invention
• Animation without stereotypes
• CSS in the React era: how we traded the cascade for consistency
• CSS Grid Application Layout in production
• A Microsoft Developer Blog Announces Emergency Fonts Support in Microsoft Edge
• Resource for searching and testing variable fonts
• Thematization using variables, global and local
• Vanilla CSS Magic with custom properties

Javascript

• SEO Guide for JavaScript sites: Part 1. The Internet through the eyes of Google , Part 2. Problems, experiments and recommendations
• Pitfalls Service Workers
• How to make a drag-and-drop file loader in pure javascript
• Three years with Angular and no regrets: an overview of the capabilities of the framework
• Comparison of major 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
• Selection of useful tips and tricks from ECMAScript 2015 (ES6)
• MobX 4: Better, Easier, Faster, Less

• Theory:
  • How JS Works: Tracking DOM Changes with MutationObserver
  • How to replace all identical substrings in a string with JavaScript
  • Type casting in JS . Magic or simple rules?
  • Elegant templates in modern JavaScript: Ice Factory
  

• VueJS:
  • Hooks life cycle Vue.js
  • 4 cool things you can do with Vue.js CLI
  • Using JSX with Vue and why should you care
  • Boiler - a javascript framework using Vue and Sass
  • vue-promise-btn - a minimalist but powerful plugin for locking buttons when performing asynchronous actions with a built-in spinner
  

• React:
  • React Tutorial: A detailed tutorial for learning React.js in 2018
  • Reselect - selector library for Redux
  • Server rendering using React and React Router
  • How GraphQL Replaces Redux
  • How not to do React: Popular antipatterns and finds in React
  • React Authentication in detail
  • Why do React developers need to modulate their applications?
  

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

Browsers

• Release of Firefox 59 , details for developers in the blog of Marat Tanalin
• Password export will appear in Google Chrome
• Firefox will start fighting pop-up page elements
• “Yandex” released “Yandex Browser” with built-in “Alice”

Entertaining

• When will the next big programming language from Darwin's point of view
• What is it like to work in IT, if you are over 50
• Google will begin to block advertising cryptocurrency and ICO
• Hidden miners spread through forks of various projects on GitHub.
• 23 hacking sites
• Why is it helpful to read any user feedback?
• Why is it hard for Google to get promoted and sometimes easier to quit
• Google has opened the Google Maps API for game developers.
• Large US companies no longer need their own data centers and sell them to Microsoft, Google and Amazon
• Voice Assistant "Alice" learned to control a computer on Windows
Go

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

Digest from last week .
Material prepared dersmoll and alekskorovin .