The digest of fresh materials from the world of the frontend for the last two weeks №220 (July 11 - 24, 2016)
We offer you a selection with links to useful resources and interesting materials from the frontend area.
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 .
| Web development |
| CSS |
| Javascript |
| Browsers |
| News and entertaining |
Web development
Fighting BEM: 10 major mistakes and how to avoid them- Effective use of Github
- Deploying from GitHub to server
- Continuation and end of a series of articles by Ilya Klimov “Frontend Dev: good, bad, evil”. Part 2: The Bad Way , Part 3: The Wicked Way
- Podcast Web Standards, Issue # 25 : Atom, availability, font download, promises, vector effects, Anton Vinogradov about code, design and Protein.
- Comprehensive guide to web font download strategies . Translation of the article A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES by the community css-live.ru
Learn and debug your webpack using Chrome Dev Tools (Learn and Debug webpack with Chrome Dev Tools)- Available UI Components for the Web (Accessible UI Components For The Web)
- Creating a mobile-first letter template, walkthrough (Coding mobile-first emails)
- You know what? Fuck Drop Downs (Fuck Drop Downs)
- Service Workers:
- Add a service worker to a simple website hosted on Github pages and Cloudflare (Adding Service Worker to a simple website)
- ServiceWorker: The Basic BackgroundSync Tutorial
- Lifecycle of Service Worker Lifecycle
- Improvements to the standard MathML in WebKit
- Real world HTTP / 2: download 400gb images per day (Real – world HTTP / 2: 400gb of images per day)
- A Hitchhiker's Guide to the Galaxy Modern Development Development Workflow
- Pros for performance when using rel = noopener (The performance benefits of rel = noopener)
- Microsoft REST API Manuals (Microsoft REST API Guidelines)
- How Pony Foo is Wise - and Why It Is Really Cool (How Pony Foo is ridiculously over-engineered — and why that is awesome)
- WebP Support - Wider Than You Think (WebP Support - It's More Than You Think)
- Practical examples of using the picture element (Practical use cases for the picture element)
- HyperTerm - JS / HTML / CSS Terminal (JS / HTML / CSS Terminal)
- Effective interactive for map marker (Simple Interactive Points Effect)
CSS
- Registration of modal windows . Translation of the article Considerations for Styling a Modal
- Pseudo-class tricks: target . Translation of the The: target Trick article
- How to lint your Sass / CSS correctly using Stylelint . Translation of the article How to lint your Sass / CSS properly with Stylelint
- How to lint SCSS using stylelint (How to lint SCSS with stylelint)
- How Web Components Change CSS Architecture (How Will Web Components Change CSS Architecture?)
- In Search of the Holy Grail: How I Stayed at the Element Queries and How You Can Use Them Today
- 4 ways to implement sticky hover effect for mobile devices (4 novel ways to deal with sticky: hover effects on mobile devices)
- Year spent with PostCSS (A year with PostCSS)
- Visual Regression Testing with PhantomCSS (Visual Regression Testing with PhantomCSS)
- News and current state of the CSS Grid Layout standard (CSS Grid updates, changes and state of the browsers)
- BEM and Atomic Design: CSS architecture to love (BEM & Atomic Design: A CSS Architecture Worth Loving)
- Effects with CSS filters: blur, b / w, brightness and more (CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!)
- Limitations of the media query supports (The limits of support)
- Working with Strings in Sass (Working With Strings In Sass)
- Creating cool CSS animations to improve front-end performance (Creating Cool CSS Animations to Improve Frontend Performance)
- Adapting to input fields (Adapting to Input)
- Parsing CSS Positioning: Master Class with Paul O'Brien (Decoding CSS Positioning: Master Class with Paul O'Brien)
- Print styles with Rachel Andrew (Translating CSS for Paged Media with Rachel Andrew)
- Jets.js - Native CSS search engine
Javascript
- JavaScript again tops the list of most popular programming languages (JavaScript, Once Again, Leads The List Of Top Programming Languages)
9 videos from the conference OdessaJS 2016 , held July 2 - 3- Progressive loading of modern web applications through code sharing (Progressive loading for modern web applications via code splitting)
- The myth of the “Real JavaScript Developer” (Brenna O'Brien / Front-Trends 2016)
- Why object literals in JavaScript are a worthwhile thing (Why object literals in JavaScript are cool)
- Setting up cross-browser JS unit testing (Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing)
- Alternative to regular expressions: apg-exp (An Alternative to Regular Expressions: apg-exp)
- ES6:
- ES6 is human . Translation of a brief (really brief) guide to ES6
- Arrow hell, or a new circle of old problems
- Pattern Literals in ES6: Techniques and Tools (ES6 Template Literals: Techniques and Tools)
- Const or Let? (Const or Let: Let's Talk Javascript)
- Details about ES2016 features that you should know about (Must know details about ES2016 features)
- 6 options for using ES6 proxy (6 compelling use cases for ES6 proxies)
- How to use arguments and parameters in ECMAScript 6 (How To Use Arguments And Parameters In ECMAScript 6)
- 5 reasons why you should use Promises (5 Reasons Why You Should Be Using Promises)
- The most detailed review of ES6 Destructuring (The Most In-Depth Yet Understandable ES6 Destructuring Tutorial (complete with Assembled Avengers))
- Clean code with ES6 default parameters and property abbreviations (Clean Code with ES6 Default Parameters & Property Shorthands)
- Using the new ES6 collections: Map, Set, WeakMap, WeakSet (Using the New ES6 Collections: Map, Set, WeakMap, WeakSet)
- Using ES6 Generators and Yield to Implement Asynchronous Processes in JavaScript (Using ES6 Generators And Yield To Implement Asynchronous Workflows In JavaScript)
- JavaScript Promises 101 (JavaScript Promises 101)
- Framework:
- Portals in React.js
- React.js in patterns (React.js in patterns)
- How to work with state in React. Missing FAQ. (How to handle state in React. The missing FAQ.)
- Getting Started with Redux: Introduction (Getting Started with Redux: An Intro)
- Progressive Enhancement Techniques for React Part 1 Techniques for Progressive Enhancement with React
- Three simple steps to improve React Redux code (3 simple steps to improve your React Redux code)
- Creating email templates with React components (Creating email templates with React components)
- How to work with form elements in Angular 2 (How to Deal with Different Form Controls in Angular 2)
- JS Mobile Apps: Dawn of React Native (Mobile JavaScript Apps: The Dawn of React Native)
- AngularJS vs. Ember.js: which javascript framework would be best for you?
- Getting started with Vue.js (Getting Started With Vue.js)
- Consider VueJS for your next web project (Consider VueJS for Your Next Web Project)
- Lessons:
- Free online training on Angular 2 on August 16-17th
- SPA with AngularJS and WordPress REST API (Single Page Apps Using AngularJS and the WordPress REST API)
- Creating a dating application based on components with Angular 1.5 (Writing component based goats dating app with angular 1.5)
- Create an app in VueJS 2 (Create an App in VueJS 2)
- Creating an application for streaming music with Electron, React and ES6 (Build a Music Streaming App with Electron, React & ES6)
- Learn to create data visualizations with D3.js with an example (Learn to Create D3.js Data Visualizations by Example)
- Plugins:
- howlerjs - a library for working with audio in the modern web (Audio library for the modern web. Howler.js makes it easy and reliable across all platforms.)
- Cleave.js - formatting content in the <input /> field when typing
- allora - promises that use ES6 proxies for each JS API (Promisify using es6 Proxies every javascript API with less than 50 lines of code)
- Dio is a lightweight (~ 6kb) framework with Virtual DOM. (Dio is a lightweight (~ 6kb) Virtual DOM framework.)
- Aquarelle - JS for the realization of the effect of spreading watercolor paint (Aquarelle is a watercolor js effect)
Browsers
- Firefox 48 starts integrating Rust components
- Firefox switches to blocking certain types of Flash content.
- Launch Chrome 52 Web Browser
- Microsoft recommends using Microsoft Edge browser because of its energy efficiency.
- What would a purchase by Opera Software's Chinese consortium entail?
- ChromeLens ChromeLens, Chrome DevTools extension to simulate color blindness and screen readers
- Top 12 tools for testing browser compatibility
- Safari Technology Preview Release 9 Release Details
- Ōryōki - a small web browser with a thin interface, an experimental project in development
- Apple plans to implement WebP to increase the speed of sites
News and entertaining
- Stack Overflow launches the biggest innovation since the start of the entire project - documentation
- Advertising blockers are banned in China
- In the next major Windows 10 update, a developer mode will appear
- Google has used machine learning for the convenience of reading comics
- The fall in sales of Apple Watch pulled down the entire market of "smart" watches
- CloudFlare captcha can be used to de-anonymize Tor users.
- The demand for techies has fallen by 40%, but no one talks about it
- The basis of the SEO market continues to be deception
- Neural networks boom: Who makes neural networks, why they are needed and how much money can bring
- 5 future medical trends
- 108 tasks with IT-interviews with the analysis of solutions
- Ten predictions about the future that will scare you to death
- Pokemonomania: Who and how earns on the game Pokémon Go
- Cognitive distortion. What everyone needs to know
- Stop learning to write code - learn to analyze data better.
- 7 laws of robotics by Satya Nadella
- Where and how do neural networks operate?
- Plan 2026: Mark Zuckerberg on the main directions for the development of Facebook for the next 10 years
- Every month, Facebook Messenger uses 1 billion people.
- Is it time to look for a replacement for the mobile version of Skype?
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 .
')
Source: https://habr.com/ru/post/306306/
All Articles