The digest of fresh materials from the world of frontend, design and IT for the last week №211 (May 9 - 15, 2016)
We offer you a selection with links to useful resources and materials from the field of frontend and design.
In connection with the innovations in creating posts and dividing them into separate development and design streams, the current post will be the last in this format.
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 .
In connection with the innovations in creating posts and dividing them into separate development and design streams, the current post will be the last in this format.
| Customer development |
| CSS |
| Javascript |
| Browsers |
| Design |
| news |
| Entertaining |
Customer development
- 15th edition of “Web Standards”: ad blocking, Pointer Events, extensions, web components
- RadioJS Release 39: React, honey, beer and everything else
Data on the frontend: a step towards future applications- Introduction to Web MIDI
An interesting article about optimizing choreography of content, images and typography for large-scale screens (Optimizing for Large-Scale Displays)- Introduction to Page Visibility API
- Unstuck Webpack - GUI tool with ready-made Webpack-templates for those who do not want to spend time setting up
- Introduction to Webpack: Part 2 (Introduction to Webpack: Part 2)
- Necessary tools for cross-browser testing in 2016 (The 7 Cross-Browser Testing Tools You Need in 2016)
- Bootstrap Cheat Sheet 4
- List of command line utilities for working with structured text information (A list of command line tools)
- Interactive tutorials on working with Sublime (Sublime Tutor)
- I am a fucking webmaster (I'm a fucking webmaster)
- Performance:
- Preloading resources in HTML5 . Predicting user actions and preloading resources to improve performance
- Tips for deploying frontend on HTTP2 (Best Practice for HTTP2 Front-end deployments)
- The complete guide to optimizing images for the web (Optimize Images for Web - Ultimate Guide)
- SVG:
- Creating SVG patterns without carrying out the brain (or budget) (Mastering SVG Patterns Without Breaking Your Brain (or Budget))
- Once again about SVG Clipping Paths
- Browsing with CSS and SVG (Masking in Browser with CSS and SVG)
- Availability:
- The cost of accessibility
- Create a more accessible UX using HTML5 and UIA (Building a more accessible user experience with HTML5 and UIA)
- How to conduct a basic accessibility audit on your site (How to Conduct a Basic Accessibility Audit on Your Site)
- Quick Start Guide: How to Make Accessible Web Components (How to Make Accessible Web Components - a Brief Guide)
- What is being done with accessibility issues in Vox Media
- Frend - collection of available web components (Off Canvas, Accordion, Tabs, etc.)
- Spectacular web:
- Distorted Button Effects with SVG Filters: Distorted Button Effects
- Animated Transition Effects
- Weekly selection of beautiful effects on CSS / SVG / JS # 37
CSS
- Styling React components
- Transition from HTML Grid to CSS Grid Systems
- Meaningful CSS: style your logic . Translation of the article Meaningful CSS: Style Like You Mean It by the css-live.ru community
- Video with PiterCSS №3
- The importance of! Important in CSS (The Importance of! Important: Forcing Immutability in CSS)
- Use Cases for Vertical Media Queries (Use Cases For CSS Vertical Media Queries)
- BEMantic: DRY Like You Mean It
- to__bem or not__to - bem
- Architectural design for frontend styles (Architecting Front-end Styles)
- CSS Modules in rescue.jsx
- CSS Modules in examples
- Let's write beautiful comments in CSS (Let's Write Beautiful CSS Comments)
- Good and Bad CSS Practices for Beginners
- Typography
- Really flexible typography using vh and vw units (Truly Fluid Typography With vh And vw Units)
- Flexbox and trimming long text (Flexbox and Truncated Text)
- Responsive Modular Scale
Javascript
- Do-it-yourself bind function method
- New documents published in b_ methodology: JavaScript on BEM , JavaScript Features
- JavaScript roadmap: small and more frequent updates ahead (javascript road map: Smaller, more frequent updates ahead)
- Simplified JavaScript jargon (glossary) (Simplified JavaScript Jargon)
- Neural Networks in JS (Neural Networks in Javascript)
- 7 amazing things I learned when writing a Fibonacci number generator on JS (7 Surprising Things I Learned Writing a Fibonacci Generator in JavaScript)
- What is Promise.try, and why is it so important? (What is Promise.try, why does it matter?)
- Creating a simple loop using an array (Create an easy loop using an array)
- Modular JavaScript: Beginners Guide to SystemJS and jspm (Modular JavaScript: A Beginners Guide to SystemJS & jspm)
- Taste of new parallel primitives in JavaScript (A Taste of JavaScript's New Parallel Primitives)
- Unusual jQuery selectors (Uncommon jQuery Selectors)
- Create your own custom Slackbot with Node.js (Build Your Own Custom SlackBot with Node.js)
- Video courses on Node.js (Learn Node.js)
- ES6:
- ES6 in detail: generators, continued
- 5 "bad" parts of JavaScript that were fixed in ES6 (5 JavaScript “Bad” Parts That Are Fixed In ES6)
- An example of using ES6 generators (A Case For ES6 Generators)
- ES6 Sets Review (A Look at ES6 Sets)
- How to create and publish ES6 modules today with Babel and Rollup (How to Build and Publish ES6 Modules Today, with Babel and Rollup)
- Framework:
- Why not use Backbone.js in 2016
- ReactJS 15.0.2 Tutorial
- Best news and announcements from ng-conf 2016 (The Best News from Angular's ng-conf 2016)
33 Videos from ng-conf 2016 (ng-conf 2016)- Angular Performance: Tuning the Engine (Angular Performance: Tuning the Engine)
- Don't blame the framework: my experience with AngularJS and ReactJS
- Angular 2 Series - Part 5: Forms and Custom Validation (Angular 2 Series - Part 5: Forms and Custom Validation)
- Build Your Own Chrome Extension Using Angular 2 & TypeScript (Build Your Own Chrome Extension Using Angular 2 & TypeScript)
- How I stopped worrying and fell in love with JSX (How I learned to stop worrying and love the JSX)
- Tips to optimize the drawing of a set of elements in React (Tips to optimize rendering of a set of elements in React)
- Getting Started with Ionic: Navigation (Getting Started With Ionic: Navigation)
- Scripts and plugins:
- Tocbot - generates page content with anchor links based on HTML header structure
- JavaPoly.js - polyfil for native browser JVM support (JavaPoly.js - Java (script) in the Browser)
- Stop.js - 'setTimeout' based on promises (Stop.js - the Promise base `setTimeout`, reduce your callback)
- Trial.js - a library for monitoring the position of the mouse cursor and assumptions about further behavior (Trial.js -
- Adobe CC Scripts Panel - a panel for scripts for After Effects, Illustrator, and Photoshop (Adobe CC Scripts Panel - Scripting Panel for After Effects, Illustrator, and Photoshop)
Browsers
- Save Firefox
- Introduced a preliminary testing program for experimental improvements to Firefox.
- New battery saving mode in Opera browser for PC extends laptop autonomy by 50%
- Chrome plans to turn off informing websites about Flash support
- In Microsoft Edge, you can now block ads using AdBlock or Adblock Plus
- In Yandex Browser for devices based on Android, Anti-shock technology has earned
- Safari Technology Preview 4 release
- Blisk - browser (based on Chromium) for web development (Develop on test).
- The latest developments in browser security (The Cutting Edge of Browser Security)
Design
- Product design digest, April 2016
- Material Design: philosophy and practice
- "Web brutalism": Why do developers create simple and ugly sites in the style of the 90s
- Inspired by the community - how Instagram redesign went
- Where to start to become a designer
- Instagram introduced a new design and "rainbow" application icon
- High-load, data-driven interface design
- Design smart notifications in mobile and web interfaces
- New from Google - Material motion (Material motion)
- The evolution of design, or how I became the best designer (The Evolution of Design. Or how I became a better designer)
- 8 popular mistakes made by novice designers (8 Super Common Mistakes That Beginner Designers Make)
- The Retina Asset Workflow Kit you always wanted in Photoshop (The Retina Asset Workflow You've Always Wanted For Photoshop)
- A complete introduction for beginners on searching UX (Complete Beginner's Guide to UX Research)
- The dark side of the UI. The advantages of a dark background (Dark Side of UI. Benefits of Dark Background)
- Works on Dribble, dedicated to the new Instagram icon
- Designing a New Look for Instagram Inspired by the Community
- Trends of web design 2016: a complete guide (Web Design Trends 2016: The Definitive Guide)
- Easy steps to improve icon design (Easy Steps To Better Icon Design)
- Eventbrite Design: An Evolutionary Process (Eventbrite Design: An evolutionary process)
- How we redesigned our application (How We Redesigned Our App)
- How Duolingo does design using psychology (How Duolingo Designs with Psychology in Mind)
- Uber for age and poorly seeing people (Uber for Seniors and Poor Visibility)
- Usability Heuristics for Bots (Usability Heuristics for Bots)
- Scientifically based color facts (50 Hard Science-Backed Facts About Color)
- Always show your work: why designers should write on the walls (and you as well) (Always Show Your Work:).
- OpenBazaar in detail: branding and aesthetics (OpenBazaar in Detail: Branding & Aesthetics)
- Supervised collection of works by digital artists (Talented web artists exhibit code-driven art)
- What is the purpose of logos? (It's more than design… it's about purpose)
- Never show a design that has not been tested on users (Never Show A Design You Haven't Tested On Users)
- Basic and secondary buttons for performing actions (Primary & Secondary Action Buttons)
- Quick Tip: How to use the Symbol Toolkit in Sketch (Quick Tip: How to Use Sketch's Updated Symbols)
- How the updated Symbols tool in Sketch will improve the work process (How Sketch's New Symbols Will Improve Your Workflow)
- Illustrator in 60 seconds: how to use the Width tool (Illustrator in 60 Seconds: How to Use the Width Tool)
- Logos with hidden messages (15 Logos With Hidden Messages)
- How to use similar fonts (How to Use Clashing Fonts)
news
- Google Translate now works inside any Android application.
- Embedded instant messenger will appear on YouTube
- Alphabet again became the most expensive company in the world.
- Comments and smart tips appeared in Google Photos
- Github introduces unlimited private repositories, raising prices for organizations
- Top esports teams have created a new e-sports league
- Release Electron 1.0, an application development platform based on the Chromium engine
- Amazon launched its own video hosting competitor YouTube
- Mozilla has expanded the scope of the grant system to open projects.
- Mozilla in court is seeking the disclosure of vulnerabilities used in the FBI attack on the Tor Browser
- Facebook launches support for panoramic photos
- Hollywood film designer will design space suits for SpaceX
- Artificial Intelligence IBM Watson will fight cybercrime
Entertaining
- Habrahabr ≥ 10 years
- Creativity: five myths that are long overdue
- Hyperloop testing proved the future will still be boring
- “Goodbye smartphone, goodbye leptop!”: Tour of the most mysterious IT startup Magic Leap
- Without exception, learn to program. You are welcome
- Do not learn to program, please
- Visual mathematics: how to calculate the value of the user using integrals
- Ah, that stupid "smart" house!
- Nevada experienced Hyperloop
- Hyundai is developing its own suit "Iron Man"
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/300842/
All Articles