The digest of interesting materials from the world of web development and IT for the last week №149 (February 24 - March 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
The site from scratch on a full stack of BEM technologies. Yandex Methodology- We increase the stability of the front-end
- Providing better backup support for SVG and managing design using the <picture> element - translation of Sarah Swaidan's article on css-live
- Create an audio player using HTML5. Part 2: prototyping , Part 3: microdata and appearance
- 5 myths associated with optimizing the speed of the site
Top 20 Emmet Tips to Speed Your Code Writing (20 Crazy Fast HTML / CSS)- Drop-down menus providing for careless mouse hovering (Dropdown Menus with More Forgiving Mouse Movement Paths)
- RICG Responsive Images For WordPress
- Fast use of the Offline-first technique with the sw-precache module (Offline-first, fast, with the sw-precache module)
- Want to learn SVG? Start with this article (Want To Learn About SVG? Start With This Article)
- Comparison of static engines for creating websites - Jekyll, Middleman and Harp (Comparing Static Site Engines)
- Secondary sliding navigation second level
- frontend-guidelines (HTML / CSS / JS guideline)
- Another twenty collections of documentation for front-end developers (Another 20 Docs and Guides for Front-End Developers)
- How to share images on Pinterest with a button (Share Images with a Pinterest Call-to-action)
- Layout with SVG and Flexbox for simple D3 charts (SVG layout with Flexbox for simpler D3 charts)
- My gulp workflow
- Synchronization of Gulp tasks with run-sequence (Sync Gulp Tasks with run-sequence)
- Interesting demos on CodePen:
- A simple 3D plane hover effect using CSS3 transformations (A simple 3D plane hover effect using CSS3 transformation)
- CSS + SVG Pacman
- Cute animation concept for the dialog box
- The effect of text printed in the DOS console using CSS (a simple DOS-writing-effect for titles, crafted in CSS)
CSS
- Pointer Events specification has become a recommendation
- CSS Animation Performance : The Untold Story (with comments by Paul Irish). Css-live translation
- Four more ways to hide and show elements using HTML and CSS
- Conditional @supports instruction
- Extend the color cascade with the currentColor variable (Extending the Color Cascade with the CSS currentColor Variable)
- Inspiration and Button Styles (Inspiration for Button Styles and Effects)
- HTML & CSS Material Design Examples in Action (HTML & CSS Examples of Material Design in Action)
- Understanding Sass Units Understanding Sass Units
- Determining CSS features: Modernizr or Feature queries? (CSS Feature Detection: Modernizr or Feature Queries?)
- Blackhole is a minimalist but flexible and powerful static framework on the SCSS / CSS (minimalistic but flexible SCSS / CSS framework)
- Selector Specificity with CSS Preprocessors (Selector Specificity with CSS Preprocessors)
Javascript
- BattleGIS - JavaScript engine for playing Tanchiki
- JavaScript statistical analyzers and errors that they can help us to unlearn (Part 1) , (Part 2)
- Introduction to developing a slideshow in JavaScript
- SummaryJS Release 3
- Use ES6 rest parameters
- Using AngularJS for data visualization (translation of the article “Using AngularJS for Data Visualisations”)
- How to use ECMAScript 6 today?
- Isomorphic JS applications - the future of the web? (Isomorphic JavaScript Applications - the Future of the Web?)
- Bower and Grunt: marriage made in heaven (Bower and Grunt: match made in heaven)
- Introduction to the React (Introduction to the React JavaScript Framework)
- Radium (a set of tools for working with inline-styles in React elements)
- Use jQuery npm plugins
- We track errors JavaScript, AngularJS and jQuery using Google Analytics (Track JavaScript, AngularJS and jQuery errors with Google Analytics)
- AngularJS vs. Emberjs
- Organizing your Grunt Tasks (Organizing Your Grunt Tasks)
- Iterable and iterators in ES6 (Iterables and iterators in ECMAScript 6)
- As I wrote an ultra-fast DNA sequence alignment algorithm on JS (NBEAM: How I Wrote an Ultra-Fast DNA Sequence Alignment in JavaScript)
- Three JS libraries to watch out for in 2015 (3 JavaScript Libraries to Library )
- Study of ES6 classes in Angular 1.x (Exploring ES6 Classes In AngularJS 1.x)
- Ramda Philosophy (The Philosophy of Ramda)
- remote control using a smartphone, a solution built on Node.js and Socket.io (Smartphone Remote Control with Node.js and Socket.io)
- Plyr - A simple HTML5 media player with custom controls and WebVTT headers.
- RIN - a lightweight HTML / SASS static template based on Gulp
- Flickity: responsive touch galleries
- NgReact (For interaction between React and Angular)
- proginoskes (monitoring real-time infrastructure using ssh to centralize the flow of events for logging)
Browsers
- News from the latest builds of Opera Developer 29
- Release Firefox 36 with HTTP / 2.0 support
- Some features of Firefox 36 that will be useful to web developers
- Exit Firefox 37-beta and Firefox Developer Edition 38
- Hello! Firefox and other browsers instead of Skype
- Vivaldi Browser Beats Records in Development
- Device-width viewport will remove touch-delay in IE
')
Design
- Problems of future interfaces: What fonts to use in gadgets
- Google showed the futuristic concepts of the new headquarters
- Accessibility from UX: BBC iPlayer Solutions (Accessibility Origin With UX: A BBC iPlayer Case Study)
- On meta-design and algorithmic design systems (On meta-design and algorithmic design systems)
- Testing Accordion Menu Designs & Iconography
- 10 principles of good design (Dieter Rams: ten principles for good design)
- Design Principles ( Design Principles Tutorial)
- It's Only Color (the basics of working with color)
- The Difference Between Minimalism and Simplicity (The Difference Between Minimalism and Simplicity)
- Making ArtList (design history of one successful product)
- The Unbearable Inaccessibility of Slideshows
- Refinement of the image to wake the users of emotions (Image Tricks to Make Users Feel Rather Than Think)
- The design concept of the Hungarian version of the euro (Hungarian paper money)
- Redesign of the New York Times magazine, including a new logo and an emphasis on a more “digital” image (The New York Times Magazine)
- Challenges of redesign: Nest for iPhone app (Nest for iPhone)
- How to learn design, based on the Japanese traditions of martial arts (How 破 Is How You Learn Design)
- Origami is a free tool for creating the design of modern interfaces. Introducing Origami Live and Origami 2.0
- Using Pixate - a prototyping tool (Using Pixate)
- How to write unforgettable texts for interfaces (How to Create Unforgettable Interface Copy)
- Design in detail: Instagram for iOS (Design Details: Instagram for iOS)
- Creating an Isometric Pixel Art Building in Photoshop (Create an Isometric Pixel Art Office Building in Adobe Photoshop)
- Design a search bar and interface for an image in Photoshop (Design a Search Bar and Image Display Interface in Adobe Photoshop)
- Best typography drawing tools in 2015 (Lettering Gear Guide 2015)
- Font replacing empty words with stylized bullshit (Sans Bullshit Sans)
- Web tools
- Designer's Toolkit: Prototyping Tools - Comparing Prototyping Tools
- v2.polarr.co - online photo editor
- colorable - a tool for checking contrast
A selection of free designer cookies
- Free UI Kit from PixelKit (set UI "transparent forms")
- 25 Sketch Freebies for Web & Graphic Designers (graphics - UI sets, icons, etc. for Sketch)
- Freebie: Flat design UI kit by TeslaThemes (UI Tesla Themes set)
- 15 Free PSD Poster / Flyer Mock-ups - February 2015 Edition ( mock-ups for displaying posters and flyers)
- 22 Smartphone Perspective PSDs for Conceptual App Mockups (photorealistic mockups for demonstrating mobile applications on smart phone screens in perspective)
- Free download: Lucid one page PSD template (one-page site layout in gray-white-blue tones)
- 10 Free Vintage Retro Labels (PSD) (vintage typographic labels)
- Free User pics (user icons with a flat design)
- Space icon .ai for free (vector outline icons for space themes in .ai format)
- 77 Essential Icons - Free Icon Set Download (vector outline icons for the most typical tasks)
- Travel icon pack (set of vector icons on a tourist theme)
- Freebie: Flat Icon Pack (AI, SVG, EPS, PSD, PNG) (four dozen vector icons on home subjects)
- Growl - Free Font (decorative font with fur and sans serif)
- 30 Free Vector Ribbon Sets
news
- MWC 2015:
- MWC 2015: Samsung Galaxy S6 and S6 Edge - Long Live Predictability
- MWC 2015: HTC Vive - a virtual reality helmet in partnership with Valve
- MWC 2015: ZTE Grand S3 smartphone can scan an eyeball
- MWC 2015. Sports Bracelet HTC Grip
- MWC 2015. Huawei Watch presented officially.
- Google will raise mobile-adapted websites in search results since April
- Google bought a startup of mobile payments to strengthen Google Wallet
- Google tests company chats with customers in search results
- Google’s artificial intelligence has learned to run computer games.
- Most people in the world do not have Internet access.
- Despite a billion audience, YouTube makes almost no profit.
- Tim Cook: Apple Watch Smart Watch Replaces Car Keys
- Now in Googe Music you can download 50 thousand of your tracks.
- Rating of the world IT-brands by popularity in the Internet
- Google Adwords introduced a way to automatically convert Flash-ads to HTML5
- Computer memory will be in short supply this year.
Entertaining
- What exactly happens when a user types google.com in the address bar? Part 1 , Part 2
- "Out of the body" for a few days with the Oculus Rift
- The history of the war for Sex.com - the most expensive domain in history
- The five main problems of Russian IT journalism
- How Western and Russian brands have responded to a large-scale discussion of the color of the dress in social networks
- Jet engine printed on a 3D printer
Google Now vs Russian Siri- Video: Microsoft showed the technology of the future
- Drone learned to manage the power of thought
How our brain perceives colors (+ selection of the best optical illusions)
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/251849/
All Articles