The digest of interesting materials from the world of web development and IT for the last week №183 (October 26 - November 1, 2015)
We offer you a selection with links to useful resources, interesting materials and IT-news
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 |
| Design |
| news |
| Entertaining |
Web development
We continue to fight the frontend-routine- <input> I love you, but you break me off
- How I did the web version of KeePass
- Mimic is a utility for replacing similar characters, making debugging a nightmare.
- Podcast SDCast # 31 : Visiting Microsoft Strategic Technology Expert Konstantin Kichinsky
Video from Web Standards Days conference held in Minsk this weekend: First day , Second day
The Art of Debugging- 13 Tips for Better Design and Building Applications (13 Tips on Designing and Building Apps More Efficiently)
- Work with images:
- Why BPG will replace the GIF and not only. (Why BPG will replace GIFs and not only.)
- A Guide to Using WebP Images Today: A Case Study (Guide To Using WebP Images Today: A Case Study)
- How to create responsive images with srcset (How to Build Responsive Images with srcset)
- Spectacular web:
- Weekly selection of beautiful effects on CSS / SVG / JS # 10
- Spectacular ideas for animating card sets (Effect Ideas for Card Stacks)
- Animation for the introductory section on the website page (Animated Intro Section)
- FCC Zipline: JS Calculator : a spectacular Fallout-style JS calculator
- SVG:
- Svg path builder
- Creating complex SVG animations (Designing Complex SVG Animations)
- How to manipulate SVG text (How To Manipulate SVG Text)
- Firebug & DevTools Integration
- Five Things Age Programmers Should Remember (Five Things Old Programmers Should Remember)
- Please do not commit the commented out code (Please, don't commit commented out code)
- 4 Expert Tips for Getting More from Google Fonts (4 Expert Tips for Google)
- Tips for Improving Site Performance
- Correct markup for recording measurements in HTML5 (Marking Up Measurements Correctly in HTML5)
- 12 of the worst nightmares of developers on All Saints Day (12 of the Scariest Developer Fears at Halloween)
CSS
- All about spaces
The work of CSS-selectors explained in the pictures with cats- What to avoid when writing CSS (Things To Avoid When Writing CSS)
- How z-index works (How z-index Works)
- The State of Web Type
- Less: the most misunderstood CSS preprocessor (Less: The World's Most Misunderstood CSS Pre-processor)
- Practical CSS Parallax
- CSS Haiku
- Breaking Myths About Flexbox (Flexbox Myth Busting)
- Apply Flexbox to video player (Applying Flexbox to the Video Player)
- An article on how to make effective blocks with non-standard geometry as a site background (Background Image Shapes)
- The next edition of Totally Tooling Tips from Google: Critical Path CSS (S2 Mini Tip # 1)
- Experts share their favorite CSS tricks (Expert’s Weigh In: What's Your Favorite CSS Trick?)
- Learn the Bootstrap Grid in 15 minutes
- 4 Ways to Create Accordions in Pure CSS (4 Ways to Create Awesome CSS-Only Accordions)
- PostCSS:
- PostCSS Quick Start Guide: Configuring Grunt
- Using PostCSS with BEM and SUIT Methodologies (Using PostCSS with BEM and SUIT Methodologies)
- Using PostCSS with Sass, Stylus, or LESS (Using PostCSS Together with Sass, Stylus, or LESS)
- PostCSS Time Machine - will help to correct mistakes made when creating CSS, and described in CSSWG.
- mdcss - a PostCSS plugin that allows you to create and maintain styled gages using CSS and Markdown comments
- CSS in JS:
- BackstopJS - CSS regression testing
- CSS in JS: it's a trap! (CSS In JS: It's a Trap!)
- Why you shouldn’t add lower-case styles using JavaScript in React components (Why You Shouldn't Style React Components With JavaScript)
Javascript
- We have problems with promises
- New releases:
- Launch of server-side JavaScript platform Node.js 5.0
- Babel 6.0.0 release
- Quick tip on updating Babel 5.x -> 6.x
- ES6:
- Subtleties of ES6: Inheritance (Part 1)
- Simplify asynchronous JavaScript code using asynchronous functions from ES2016
- ES6 in details: Destructuring
- ECMAScript 6 (ES6): What's new in the new version of JavaScript (ECMAScript 6 (ES6): What's New In The Next Version Of JavaScript)
- Quiz: Do you understand object oriented JS with ES6?
- Pigeon is a HTML preprocessor written in Javascript.
- How is Javascript used in the Spotify desktop app? (How is the Javascript used within the Spotify desktop application?)
- JavaScript with the ability to debug in production with Source Maps (Debuggable JavaScript in production with Source Maps)
- ServiceWorker and Progressive Networking
- Cache isolated HTTP requests with Service Worker (Cache sandboxed HTTP requests with Service Worker)
- Keep pushing, with W3C Push API (Keep pushing it, with the W3C Push API)
- Reading and copying selected text to the clipboard using JS (Reading and copying selected text to clipboard using JavaScript)
- Introduction to the concept of functional programming in JS (An Intro to Functional Programming Concepts in JavaScript)
- Choosing JavaScript Build Tool - Babel, Browserify, Webpack, Grunt and Gulp
- A JS module manager that fits into a tweet (A JavaScript Modules Manager)
- Framework:
- From 0 to 1. We understand with Redux
- Cheat Sheet by React v0.14.1
- YouTube channel "ReactRally"
- Upgrading applications from Angular 1 to Angular 2 using ngUpgrade (Upgrading apps to Angular 2 using ngUpgrade)
- ngclipboard - a directive for clipboard.js (Angularjs directive for clipboard.js)
- Lessons:
- Lesson: Using React with a Webpack (Using React with Webpack Tutorial)
- Creating a simple demo with Three.js (Building up a basic demo with Three.js)
- Create a Tabbed Browser with Node-Webkit and AngularJS (Create a Tabbed Browser Using Node-Webkit and AngularJS)
- Create a real-time photo update application using the Instagram API (Build a Real-Time Photo Update App with the Instagram API)
- Creating and publishing your own Grunt plugin (Build and Publish Your Own Grunt Plugin)
- Getting started with Emscripten: C / C ++ to JavaScript / HTML5 conversion (Getting Started with Emscripten: Transpiling C / C ++ to JavaScript / HTML5)
- Creating SCRUD systems using jQuery, JSON and DataTables (Creating a SCRUD System Using jQuery, JSON and DataTables)
- Plugins:
- Protip - another jQuery plugin for displaying tooltips (Yet another jQuery tooltip plugin for almost ANY SITUATION!)
- Quill - rich text editor (IE9 +)
- canvid.js - library for playing videos in HTML5 canvas element
- Segment - a small JS (without dependencies) for drawing and animating SVG path strokes
Sites with interesting design and functionality
- Sites Made in Japan
- 22 modern sites with horizontal layouts
- 25 sites with custom navigation
- Examples of modern website design (Website Showcase Of Modern Design - 39 Examples)
- ginventory.co - site with cool scroll effects
- frightgeist.withgoogle.com - multimedia website from the series of Google experiments
- georgeleonardo.com - a site with nice transitions between pages and preload effects
- deuxhuithuit.com - site non-standard effects in the design
- Bond Interactive Fleet
- whatisburningman.org - site with a diamond structure
- jwt.amsterdam - quality promo site with background videos
- andreo.li - a site with parallax and scrolling animation
- merixstudio.com/frontend - an interactive multimedia site in the style of Back to the Future
Design
- Trello designer. How we solved the problem with icons using automation
- Casual design: comfortable measuring spoon
- Fascinating illustrations in packaging design
- 300 Million Button (The $ 300 Million Button)
- 12 Mobile Web Design Tips for Present and Future (12 Mobile Web Design Tips for the Present and the Future)
- Essential tips for converting a desktop site, to mobile
- Visualization of two types of people (2 Kinds Of People)
- What makes a good user experience? (What makes a good user experience?)
- UI design books that you should read (UI design books you should read)
- What's on your bookshelf? part 2 (What's on your bookshelf? Part 2)
- Video: logo design - rules of thumb that you shouldn't forget (Watch: Logo Design Rules of Thumb You Shouldn't Forget)
- Direct slash: a story about how Massimo Guzmán turned a simple logo into a brand of opportunities (Forward slash: The story of how Massimo Guzmán turned our logo into a brand of possibility.)
- Fonts In Use - photo collection with examples of using fonts
- Complete Beginner's Guide to Interaction Design for Beginners
- 5 times UX matters in everyday life (5 Ways UX Matters in Everyday Life)
- 10 mobile UX nightmares to avoid (10 mobile UX nightmares to avoid)
- Working with writers: what designers need to know (Working with writers: what designers need to know)
- Redesign:
- Studio showed new branding Netflix
- GoodReads redesign concept (goodreads bibliophilic design approach)
- Branding Netflix (Netflix Branding)
- New York City Subway Map Redesign (The New York City Subway Map Redesigned)
- Graphic editor:
- Exporting Sketch Sources to Zeplin
- Create elegant (but simple) animations using Sketch and Atomic.io
- Bugs in Adobe Illustrator: Disappearing View of the Pencil Tool
- Can you use photoshop for narration? (Can You Use Photoshop to Tell a Story?)
- Visualize Sketch 3.4 New Features (Visualize Sketch 3.4 New Features)
- 15 top Sketch plugins
- Interview:
- How do Google UX designers work?
- Interview with designer Jean-Marc Denis (Google, who worked in the Inbox, Gmail and Sparrow) (AMA: Jean-Marc Denis)
- Lessons:
- Create an illustration of an evil witch in Adobe Illustrator (Create the Wicked Witch of the West in Adobe Illustrator)
- How to create a vintage typographic illustration-poster in Adobe Illustrator (How to Create a Vintage Typographic Illustration Poster in Adobe Illustrator)
- Connecting the dots: how we added a smile to the Basecamp logo (Connecting the dots: How we put a smile on the Basecamp logo.)
- The process of creating a design for the site CarenZorgt (The design process of the CarenZorgt web site)
A selection of free designer cookies
- Vector clipart on SEO themes
- Stylish frames for your design.
- The best actions for retouching (Top 80 Photoshop Actions To Download Your Photo Retouching Work)
- Packing with cookies from SmartyBundles (Free download: design bundle from SmartyBundles)
- Mockups for T-shirts design demonstration (15 Free High-Resolution T-Shirt Mockup Templates)
- A set of cookies from AlienValley (Freebie Bundle from AlienValley)
- Hand-selected micro icons (PSD) (200 Handcrafted Free Micro Icons (PSD))
- Creaticons - vector food and beverage icons (AI, EPS, SVG, PNG) (Creaticons Free - Food & Beverages Vector Icons (AI, EPS, SVG, PNG))
- SVG icons of popular brands (Free Download: 134 SVG Icons for Popular Brands)
- Set of weather icons for mobile and web applications (Freebie: Weather App Icon Set For Mobile and Web)
- bitIcon is an icon font with logos of popular languages and programming technologies
- More than a hundred of the best fonts, autumn 2015 (101 best free fonts, fall 2015)
news
- Launch of Opera 33 browser
- EU abandoned network neutrality and mobile roaming
- The turnover of e-sports in 2015 rose to $ 747 million
- Windows 10 installed on 120 million devices, plans - 1 billion
- Microsoft changed the distribution terms of Windows 10
- Twitter's organic search traffic grew 20% after Google deal
- The cost of Twitter shares fell by 13% against the background of the financial report for the III quarter of 2015
- Chrome OS will cease to exist in 2017
- In 2016, Google will test Project Loon in Indonesia
- Yandex's net profit in the third quarter of 2015 amounted to 4.3 billion rubles
- Bill Gates is 60 years old
- Record sales of computers provided Apple with the biggest earnings for the year.
Entertaining
- Rating: 26 US IT companies with an average salary above $ 120 thousand
- MIT scientists have learned to see through walls using Wi-Fi
- How cognitive computers can change our future
- Ten opinions: which programming language to learn first
- Big Data for Digital Humanism
- Mal, yes removed . Interesting stories of young entrepreneurs who are changing the world at an age when the majority do not even think about it.
- The founder of Megaupload, Kim Dotcom, spoke about the alternative Internet project based on smartphones.
- (Almost) robokar: Tesla Motors autopilot adventures
- What is a code? Translation of the article by journalist and programmer Paul Ford “What is Code?”, Published on Bloomberg Businessweek
- Grandma programming . Margaret Hamilton is considered the progenitor of modern programming, and thanks to the code she wrote, the Americans flew to the moon.
- How math helps people to live
- How Pornhub, Google, Uber, Mail.ru Group and other brands reacted to Halloween
- Other Internet or hidden networks of the virtual world
- Virtual Tour of the Crater of Mars
- Ignore everyone (Ignore Everybody)
- NASA is looking for a programmer who will program in 60-year old languages to work with Voyager
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/270011/
All Articles