The digest of interesting materials from the world of web development and IT for the last week №179 (September 28 - October 4, 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 |
|
|
Browsers |
Design |
news |
Entertaining |
Web development
How-to: The process of creating the layout of html-letters- Weekly selection of beautiful effects on CSS / SVG / JS # 6
- Semantic structure for HTML5 page. HTML5 semantics
- Guide Web Animations API - Part 5: a nice trajectory of movement
FLIF - free lossless image format (FLIF - Free Lossless Image Format)- Paul Irish & Paul Lewis present RAIL (Response, Animation, Idle, Load): a user-oriented performance model (Introducing RAIL: A User-Centric Model For Performance)
- Splitting content into sections in HTML5 - div, section or article?
- Bootstrap 4 Tutorial: creating a one-page template
- Flux Drawn Guide (A cartoon guide to Flux)
- SVG and DOM, or “The Weirdest Bug I've Caught With ” (SVG and the DOM, or “The Weirdest Bug I've Ever Encountered”)
- A fresh article from Peter-Paul Koch about the current state of the viewports and the new device adaptation specification (A new Device Adaptation spec)
- IndexedDB, WebSQL, LocalStorage - what blocks the DOM?
- Debugging Webpack applications in WebStorm (Debugging Webpack applications in WebStorm)
- Remember the impressive LavaLamp SVG demo? Here's an article about how it was created (How To Make An SVG Lava Lamp)
Addy Osmani talk on “What's new in Chrome DevTools?”- Compilation of videos from conferences JSConf and CSSConf 2015
- 7 fresh videos from SmashingConf Freiburg appeared
CSS
- 19 principles of development on BEM, or what every library developer should know
- Mastering CSS: BEM and ITCSS
- Aesthetic Sass. Part 1: architecture and organization , part 2: colors and palettes , part 3: typography and vertical rhythm
- Improved font loading with localStorage and WOFF2
- When you need a calc ()
- CSS Fill Indicators
- A note on the practical use of CSS methodologies on the example of BEM and the problems of Bootstrap
- PostCSS Quick Start Guide: Gulp Setup (PostCSS Quickstart Guide: Gulp Setup)
- Embedding critical CSS for dynamic web applications (Inlining Critical CSS for Dynamic Web Apps)
- List of SVG properties that can be manipulated from CSS
- Shaded Progress Bars: A CSS / Sass Exercise: Shaded Progress Bars: CSS / Sass Exercise
- Corpus - a collection of CSS snippets for each project (SCSS)
- Several videos from Freiburg SmashingConf: CSS For Software Engineers For CSS Developers , Web Fonts Performance
- Glen Maddern Report on Interoperable CSS with CSSconf EU 2015
Javascript
- Javascript and nginx = nginScript, and http2 to boot
- Matreshka.js: Matreshka.js 1.1: more coolness , Events
- nginScript - why did we create our own JavaScript implementation? (nginScript - Why Are We Creating Our Own JavaScript Implementation?)
- ES6:
- Totally Tooling Tips: ES2015 . Google developers share their tooling tips.
- The effect of JavaScript 2015 (ES6) on the development
- JavaScript status on Android in 2015 ... sad (The State of JavaScript on Android in 2015 is ... poor)
- ES6: methods against callbacks (ES6: methods versus callbacks)
- ES6 Documentation with ESDoc (Document ES6 with ESDoc)
- ES6 Promises in Detail (ES6 Promises in Depth)
- Customize ES6 using well-known symbols (Customizing ES6 via well-known symbols)
- The Genius of String Patterns in ES6 (The Genius of Template Strings in ES6)
- ESLint: a new generation of JavaScript validators (ESLint: The Next-Generation JavaScript Linter)
- 6 tricks to help you learn JS faster (Six Simple Mind Tricks to Help You Learn JavaScript Faster)
- 12 rules for JavaScript pros in 2015 (12 Rules for Professional JavaScript in 2015)
- Functions without ”function” (Functions without ”function”)
- Video: Performance with requestAnimationFrame (Watch: Performance with requestAnimationFrame)
- Modern Strat package from React to webpack (A modern React starter pack based on webpack)
- Introduction to Rendr (Introduction to Rendr)
- Prototyping 3D touch interactions with Framer (Prototyping 3D Touch interactions with Framer)
- Plugins and libraries:
- clipboard.js - a modern way to copy to the clipboard, without flash, only 2Kb
- How clipboard.js scored 5000 stars in a few days? (How did clipboard.js get 5000 stars in a few days?)
- Rune.js is a convenient JS library for creating graphic systems, objects, grids, typography with the help of SVG.
- Using the JSCharting library (Using the JavaScript Charting Library)
- Implementing 3D Touch on JavaScript
- Highlighting text inside a textarea
- Popmotion - JS animation engine with physics emulation in 12 KB
- Without jQuery - DOM manipulations with NodeList.js (Lose the jQuery Bloat - DOM Manipulation with NodeList.js)
Browsers
- Trainspotting: Firefox 41
- Firefox 42-beta and Firefox Developer Edition 43 Exit
- Firefox 41 allows developers to take screenshots for individual page elements
Sites with interesting design and functionality
- BioWars - a site full of CSS animation that oozes from almost every component of the pages.
- Interactive site with the original search system dedicated to the game Assassins Creed
- lezilus.fr - site with non-standard hover effects and transitions
- designdisruptors.com/ - concise and nice scroll animation
- Frontend inWonderland - promo page with creative design and parallax
- 88and90lex.com - slide-scrolling site with nice effects
- homerhudson.com - non-standard animated full-screen navigation
Design
- Spatial interfaces: How to use the physical properties of real objects in design
- The psychology of numbers in design
- World Map Design
- Visualize it . Household cartography is not so complicated and confusing thing, if it is a little carried away.
- Channel 4 "broke" the logo into pieces for the sake of new identity
- Graphic editor:
- Sketch Plugins - A library of plugins for aligning elements, typography, and color palettes.
- 10 chips in sketch for designers
- 5 tips to help speed up your work in Sketch
- Link of the day: Product Hunt for Photoshop users
- Quick Tip: How to open a corrupted Adobe InDesign file (Quick Tip: How to Open Corrupted Adobe InDesign Files)
- Redesigns:
- CodePen with new design
- New design CSS Tricks got mixed reviews
- Google redesigned avatars in user accounts
- Improving Facebook profiles on mobile (Improving Mobile Profiles)
- Huffington Post presented a new cool design (The Huffington Post debuts a bold new design)
- Spun: Asana's Rebranding Story (Circling Ourselves: The Story Behind Asana's Rebrand)
- A new Opera logo has been made inside the company in collaboration with Anti and DixonBaxi (New Logo for Opera In-House with DixonBaxiOnline Portal)
- Typography:
- 6 fonts compared to advertising performance
- Future UI is text (The future of UI is text)
- Do serif fonts cause you to click on buttons? (Do serifs make you tap?)
- Details of typography of the best sites according to Typewolf for September 2015 (The Typographic Details Behind Typewolf's Favorite Sites of September 2015)
- UI / UX:
- How IFTTT attracts new users (How IF by IFTTT Onboards New Users)
- Are desktop users ready for the hamburger icon? (Are Users Ready for the Desktop Hamburger Icon?)
- Do web designers really need to know UX? (Do web designers really need to know UX?)
- How to design forms that convert (How to design forms that convert)
- Three dozen examples of website search interfaces (30 Examples of Website Search Interface Interface)
- Learning About Invisible Design
The most amazing UI ever created
- Design for the web against design for apps in the age of mobile devices (Designing for the Web vs. Apps in the Mobile Era)
- Every website looks the same, and that's fine (Every website looks the same, and that's ok)
- How to run projects in your free time: an example of a Screenings project (How to Run A Side Project: Screenings Case Study)
- Fast Food Design
- Keyboard Buffet (Keyboard Smörgåsbord)
- Origami: how to create beautiful prototypes in minutes (Origami: How to Build Terrific Prototypes in Minutes)
- How to liven up your flat design with dirty dots (How to Liven up Your Flat Design with Dirty Dots)
- Introducing: United States Web Design Standards (Introducing: US Web Design Standards)
- BG Stock - stock HTML5 background videos
- How to export pixel art to print in Adobe Photohop (How to Export Pixel Art for Printing in Adobe Photohop)
- Detailed creation of an illustration of a glass of milk and cookies in Adobe Illustrator (Create a Detailed Illustrator of Milk and Cookies in Adobe Illustrator)
A selection of free designer cookies
- MOBIRISE WEBSITE BUILDER - Very simple and free mobile site builder. (Create awesome mobile-friendly websites. No coding and free.)
- Free family replenishment clipart
- Baroque vector clipart
- Apple Device Mockups (Free Apple Devices Mockups)
- PSD with UI iOS 9 on iPhone 5, 6 and 6 Plus (iOS 9 Complete UI free PSDs for iPhone 5, 6 and 6 Plus)
- Ribbon Vector Images (29 Modern Ribbon Vector Freebies to Download)
- Vector Badge Halal (Halal Food Free Vector Badge)
- Collection of vector images of graphs and charts (Freebie: Vector Graph & Chart Collection (AI, EPS, SVG, PSD & PNG))
- Icons of the world's most famous places (AI, EPS, PDF, PNG and PSD) (Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD))
- SEO Icons (FREEBIE: 36 Free SEO Icon Set)
- Davide Pacilio Birply Icons Set (Birply - Free Icons Sets by Davide Pacilio)
- IconAlone: more than hundreds of outline icons (IconAlone: 110 Line Icons)
- Creative Bloq's Thousand OpenType Fonts (1000 Free OpenType Fonts by Creative Bloq)
- Relancer - Art Deco Font (Relancer // Free Display Font)
- NOVU - sans serif font (NOVU - M Free Font)
news
- New Nexus, Chromecast and Android 6.0 Marshmallow: now officially
- Adblock ad blocking extension developer sold the project to an unknown buyer
- The desktop version of Skype has added support for simultaneous speech translation.
- Tesla Model X: wing doors and super filter
- Twitter may soon lift the limit of 140 characters per message
- Google and Microsoft have stopped the protracted patent battle
- GitHub announced large file storage availability for all repositories
- Facebook for introducing video avatars
- Yahoo introduces Gryffin, an open source security scanner for Web applications.
Entertaining
- 11 simple life hacks that can significantly increase productivity
- Stephen Hawking believes nomadic aliens can destroy us
- Four months at Microsoft: From filing and first interview to dismissal
- Open letter that won Adobe Flash
- Windows 10 as a religion of IT despotism
- IgroMir 2015:
- Igromir / Comic Con Russia 2015: Cosplay and stand assistants
- All yours: Comic Con Russia and IgroMir 2015
- The best cosplay and gorgeous girls Igromir 2015 and Comic Con Russia
- The river of people, the day of cosplay and the game about cats is the first public day of “Igromir” / Comic-Con 2015 through the eyes of a crazed guest of the capital
- iThe ring will become a reality?
- 10 Little Known Facts About Logitech
- Wai Fai rake: how not to set up a wireless network
- 9,200 high-quality photos from the Apollo mission are digitized and uploaded to the network
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/268193/
All Articles