Saveti – Web design

A Deep Dive of CSS Inheritance, The Cascade & Global Scope Heydon Pickering explains how to write less code by using CSS inheritance. If you take a closer look, It’s remarkably good at letting you do a lot with a little. HTML 5. 1 is the Gold Standard A quick update from the W3C after its recently publication of HTML 5. 1 as a standard. Work on HTML 5. 2 is also well underway. The State of Front-End Tooling 2016 Survey Results 4715 developers responded to a recent front-end tooling survey and the rather thorough results are shared here. Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web. Service Workers: An Introduction A thorough up to date introduction to Service Workers, a Web technology that can provide your app with rich offline experiences, periodic background syncs, push notifications, and more. The 100% Correct Way to Do CSS Breakpoints An interesting experiment and some forthright opinions on where to really draw breakpoints on responsive pages and why. Seven Ways You Can Place Elements Using CSS Grid Layout Nitish Kumar shows seven ways in which CSS Grid Layout lets front-end developers quickly and intuitively place content on the web. Building Production PWAs with Frameworks Addy Osmani works through building Progressive Web Apps with a variety of common tools and development frameworks.  47 minutes. Intercooler. js: Making AJAX As Easy As Anchor Tags A jQuery-based library that allows you to add asynchronous server requests to your pages using HTML attributes alone.   IN BRIEF Firefox's Approach to Add-Ons and Extensions in 2017 NEWS By the end of 2017, and with the release of Firefox 57, we’ll move to WebExtensions exclusivelyMOZILLA New Responsive Design Mode: RDM Lands in Firefox Dev Tools NEWS Firefox Developer Tools now includes a redesigned Responsive Design Mode. MOZILLA HACKS Free O'Reilly eBook - 'Intelligent Caching' - Optimize Front End Performance at Scale Use "Intelligent Caching" as a resource and guide for optimizing performance on your website or application.  Download nowSTACKPATH  SPONSOR Pure CSS Horizontal Scrolling TUTORIAL How to tackle horizontal scrolling in your mobile apps with pure CSS. PIETER BIESEMANS Using CSS Variables in Site Development TUTORIALDUDLEY STOREY Fixing Styles on 'code' Tags Nested Inside Links TUTORIALLOUIS LAZARIS Adding and Leveraging a CDN On Your Site TUTORIAL A simple guide aimed at front-end devs. DAVID ATTARD SVG Line Animation for the Uninitiated TUTORIALEVAN DENNINGTON Some Useful Techniques for CSS Print Stylesheets TUTORIALMANUEL MATUZOVIC Disqus' Mixed Content Problem and Fixing It with A CSP STORYTROY HUNT Generating Content with Service Workers VIDEOBEN FOXALL Make Browsers Compatible With the Web VIDEO Issues that arise when browsers attempt to clean up the web platform while attempting to remain backwards compatible.  22 minutesMIKE TAYLOR Accessibility for Front-End Developers VIDEO The challenges users face with accessibility and how it’s approached at GOV. UK.  42 minutesALISTAIR DUGGIN Progressive Web Apps: The Definitive Collection of Resources TOOLS A collection of resources from around the web covering the various aspects of building PWAs. BRUCE LAWSON AND SHWETANK DIXIT Firefox Focus: A Private Browser for iOS That Blocks Trackers TOOLSNICK NGUYEN Discover the world’s most trusted SQL Server comparison tool TOOLS Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.  RED GATE  SPONSOR McGriddle: A (Mostly) Get-Out-Of-Your-Way Sass Grid Library CODEJONATHAN SUH Web Animation Essentials: A CSS Animations and Transitions Online Course COURSERACHEL NABORS Curated by Peter Cooper and published by Cooperpress. If you like this, you may also enjoy: JavaScript Weekly, Node Weekly, and React Status. Stop getting FrontEnd Focus : Change email address : Read this issue on the Web © Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK

A Beginners Guide to Webpack 2 and Module Bundling A beginner-friendly Webpack 2 tutorial showing how to set up and configure Webpack to transform and bundle all your frontend assets. Reload, Reloaded: Faster, Leaner Page Reloads in Chrome Chrome now has new page reloading behavior which maximizes the reuse of cached resources, results in lower latency, power consumption, and data usage.  Shift + Reload will still work as before, luckily. Power Up Your Use of Web Fonts [video] Are you using the full capabilities of modern OpenType fonts from your CSS? Chris Lilley runs through their potential in this dotCSS talk.  19 minutes. New Course: ⚡️ ES6 The Right Parts with Kyle Simpson Uncover how to think deeply about new ES6 JavaScript features like arrow functions, destructuring, generators, classes and computed properties with Kyle Simpson of the "You Don't Know JS" book series! A Look at 50+ Interesting CSS Properties and Values Greg Hovanesyan documents and showcases a ton of interesting CSS properties and values. You may find some handy new solutions to old problems here. Edge Gains WebRTC 1. 0 for Interoperable Real-Time Comms “We’re excited to announce the preview availability of the WebRTC 1. 0 API and support for the H. 264/AVC and VP8 video codecs for RTC in Microsoft Edge. ” A Step-by-Step Guide to the Auto-Placement Algorithm in CSS Grid Nitish Kumar digs into the workings of the auto-placement algorithm in the CSS Grid Layout module. npm for Beginners: A Guide for Frontend Developers If you are not an npm expert but want to learn more, Louis Lazaris created a great beginners’ guide to npm for front-end developers. Service Mocker: An API Mocking Framework for Frontend Developers Uses Service Workers in the browser to let you set up a mock API without using any servers at all. Writing Element Queries Today Using EQCSS Baljeet Rathi demonstrates writing element queries using the EQCSS plugin. Element queries are similar to media queries but based on the properties of individual elements (e. g. its width). IN BRIEF Web Components Remote Conf: February 16-17, 2017 NEWS An online conference with 16 great sounding Web Components talks. Learn to develop your next web or mobile application with ReactJS.  Register for Rangle’s React online training course for developers on February 7, free of cost. RANGLE. IO  SPONSOR Implementing 'Save For Offline' with Service Workers TUTORIALUNA KRAVETS Align SVG Icons to Text and Say Goodbye to Font Icons TUTORIAL A scalable solution for solving the alignment issues of SVGs. ELLIOT DAHL 'ack' for CSS Developers: A Command Line Tool You Could Find Useful TUTORIALHARRY ROBERTS A Clean Responsive Web Design Menu Tutorial using CSS, HTML, and jQuery TUTORIALALEX CALDWELL Building a Morphing Hamburger Menu with CSS TUTORIALLUIS MANUEL Ensuring CSS Animations Run and Stop Gracefully TUTORIALTOMMY MARSHALL Beware of Mixed Content and Responsive Images TUTORIAL Images defined in a ‘picture’ element on an HTTPS-loaded page will not load if served over HTTP. JONATHAN SNOOK [Whitepaper] The Future of JavaScript—2017 and Beyond 2017 predictions for the key and rising JavaScript libraries and frameworks and JS’s New Frontiers in this whitepaper. PROGRESS  SPONSOR Working with Vertically-Written East Asian Languages and CSS Grid VIDEOCHEN HUI JING keyframes-tool: Convert CSS Animations for the Web Animations API CODE A tool that converts CSS Animations to a keyframes object suitable for the Web Animations API. gotem: 'Copy to Clipboard' for Modern Browsers in Under 1KB CODEMICHAEL CAVALEA qart. js: Merges Pictures and QR Codes for Artistic QR Codes CODELEE SUN-HYOUP Parasail: A Minimal Sass and Flexbox-Oriented CSS Framework CODE multi. js: A User-Friendly Replacement for 'select' Boxes CODEFABIAN LINDFORS Animography Text Editor: A Text Input Field With Animated Letters DEMO

How to Use HTML5 Custom Data Attributes (and Why) Gajendar Singh explains HTML’s custom data attributes, why they’re useful, how to use them from CSS, and manipulating them with JavaScript. Preventing Cross-Site Attacks using Same-Site Cookies How Dropbox rolled out same-site cookie based defenses, and some guidelines on how you can do the same for your site. Beyond The Browser: From Web Apps To Desktop Apps Building desktop apps using Web technologies has never been easier. This tutorial compares NW. js and Electron and digs into the key concepts and issues. Create a Quick-Start Application with Angular and Wijmo Find out how Wijmo’s advanced UI components can help you to create an Angular application quickly and efficiently – we take you through step-by-step. Ways to Improve Your Billing Form's UX Make your credit card form support autocompletion, improve how numbers are laid out, and perform simple validations on the fly. Chrome 58 Beta: IndexedDB 2. 0 and a New IFRAME Feature IndexedDB 2. 0 is now fully supported. IFRAME elements now support a allow-top-navigation-by-user-activation sandbox keyword allowing them to navigate the top-level page. Which Responsive Design Framework Is Best? It Depends. . Which framework should we be using, and why? Also, should we be using the whole framework or just parts of it? IN BRIEF CodePen Projects: Edit Multiple Files and Host Sites on CodePen NEWS A big step forward for the popular HTML and CSS sandbox. CHRIS COYIER DRM in HTML5 Takes Its Next Step Toward Standardization NEWSPETER BRIGHT Guetzli: A New Open Source JPEG Encoder Yielding 35% Smaller Files NEWSGOOGLE Workshop: Brian Lonsdorf's Practically Functional Programming COURSE Master monoids, monads & other algebraic abstractions to produce highly composable, safer, & simpler code. FORWARD COURSES  SPONSOR Animating Your Site's Hero Header with CSS TUTORIALDONOVAN HUTCHINSON Smoothly Animating 1000s of Points with HTML5 Canvas and D3 TUTORIALPETER BESHAI Experimenting with the Web Share API TUTORIALPHIL NASH Text Effects with CSS (and A Little 'contenteditable' Trick) TUTORIAL DEMOCHRIS COYIER css-razor: A Fast Way to Remove Unused Selectors From CSS TOOLS Uses cheerio to parse static html to removed unused selectors in CSS. TIM SCANLIN A Chrome Extension That Fills Out Forms Automatically TOOLS Aims to make life for developers easier. Can use faked or pre-defined info. STEPHAN AHLF SQL Source Control: track each change to your SQL Server database TOOLS Get a full history in your source control system. See who made changes, what they did why.  See how. RED GATE  SPONSOR Barebone: A Minimal SCSS-Based Framework for Rapid UI Development CODEBAREBONE Fetch Inject: Dynamically Inline Assets Into The DOM using Fetch Injection CODE Here’s an introduction and explanation. JOSH HABDAS moveTo: A Dependency-Free Scroll Animation JavaScript Library CODEHASAN AYDOĞDU Vizceral: WebGL Animated Traffic Visualization Tool CODENETFLIX Planck. js: A Pure JS Rewrite of Box2D's Physics Engine CODE For cross-platform HTML5 game development.  Demos. ALI SHAKIBA minireset. css: A Tiny Modern CSS Reset CODEJEREMY THOMAS

11 Things I Learned Reading The Flexbox Spec A run through some of the ‘good bits’ of the CSS Flexible Box Layout specification. Just Keep Scrolling: How To Design Lengthy, Lengthy Pages Scrolling opens a lot of doors to designers but isn’t without its drawbacks. Some tips on how to approach ‘long scroll’ experiences. Google (Mostly) Dropping PNaCL in Favor of WebAssembly Google will remove support for PNaCl early next year from “everywhere except inside Chrome Apps and Extensions” shifting their focus over to WebAssembly instead. SQL Source Control: Track each change to your SQL Server database Get a full history in your source control system. See who made changes, what they did & why.  See how. Production Progressive Web Apps with JS Frameworks In this session from Google I/O, Addy Osmani covers PWA best practices, patterns for efficiently loading websites and the latest tools for getting fast and staying fast. A Love Letter to CSS TJ VanToll explains why, despite the ridicule CSS sometimes gets from the developer community, he still loves it for its flexibility, simplicity and power. Accessibility in a Responsive World Slides and a thorough write up of a talk on accessibility within the context of responsive web design. Browserslist is a Good Idea and Here's Why Browserlist provides information to tools like Autoprefixer and postcss-normalize (and more) to let you specify which browsers you want to target. A Unified Styling Language A look at why “writing your styles in JavaScript isn’t such a terrible idea after all”. Inspirational UI Design Ideas for Your Next Web Project Simon Codrington illustrates some UI design ideas using CSS animation and gradients. IN BRIEF Page Scroll Animations Made Easy with the AOS Library TUTORIALGAJENDAR SINGH On-Scroll Morphing Background Shapes TUTORIAL A decorative website background effect where SVG shapes are morphing and transforming on scroll. Powered by anime. js and scrollMonitor. js. MARY LOU Full Page Background Video Styles TUTORIAL Tips and approaches for using videos as backgrounds. THE MEDIA TEMPLE BLOG Making Custom Properties (CSS Variables) More Dynamic TUTORIALDAN WILSON Accurately Checking for CSS Grid Support in Microsoft Edge TUTORIALGREG WHITWORTH The CSS Fractional Unit (fr) In Approachable, Plain Language TUTORIALOHANS EMMANUEL How to Create Perfectly Centered Text With Flexbox TUTORIALCRAIG CAMPBELL

Designing Efficient Web Forms: Structure, Inputs, Labels & Actions Users can be reluctant to fill out forms, so make the process as easy as possible. Usability testing can help you find out how usable a particular form really is. Chrome 59 Released to Stable Channel Here’s what’s new in Chrome 59, including cross-platform Headless Chrome support (tutorial here) and Image Capture API support. There have also been DevTools updates, including code coverage reports and full-page screenshots. Leveraging the Web Perf Metrics That Affect User Experience A 40-min talk looking at the metrics and platform APIs that enable user-centric performance measurement and how devs can use this data to improve end-user experiences. ForwardJS Tickets on sale today Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July.   The State of CSS: 5 Things You Don't Need Anymore? Five supposedly ‘old-fashioned’ CSS practices that you may not need anymore (like using floats or grid libraries) and what you can use instead.     Safari 11 To Introduce WebRTC and WebAssembly Support At this week’s WWDC, Apple announced support for WebRTC in Safari 11 on both desktop and iOS, as well as improved perf metrics tools and WebAssembly support.     Fun with Viewport Units Viewport units (e. g. vw, vh, vmin, vmax) have been around for a while, and are well supported. Here’s a look at various uses for them.     How CSS's New minmax() Function Works Introduced with the CSS Grid Layout Spec, the minmax() function “opens the door to us being able to write much more powerful and succinct CSS”.     Async Cookies Explained The Chromium team have expressed an intent to implement an asynchronous cookie API, which is particularly useful for Service Workers.   IN BRIEF Tracking Prevention Coming to Safari NEWS Safari to reduce cross-site tracking by limiting cookies and more. JOHN WILANDER Wake Lock API: An API to Let Webapps Keep a Device Awake NEWSW3C What's The Stuff at the Top of an SVG? TUTORIALPETER NOWELL Beautifully Animate Points with WebGL and regl TUTORIAL How to draw and smoothly animate 100,000 points in the browser. PETER BESHAI How to Build Web Form Layouts With CSS Grid TUTORIALAHMAD SHADEED Locally Scoped CSS Variables: What, How, and Why TUTORIAL CSS Variables are super powerful, and scoping them locally makes them an even more powerful tool for clean, modular design systems. UNA KRAVETS Non-Linear Interpolation in CSS TUTORIALMIKE RIETHMULLER An Intro to Web Components (with Otters) TUTORIAL An introduction for absolute beginners. MONICA DINCULESCU Learn Flexbox in 10 Minutes TUTORIALJUSTIN YEK Masking vs. Clipping: When to Use Each TUTORIALSARAH DRASNER Why IT Consulting and Developer Services Companies Love Compose OPINION Software firms and app developers love using Compose to manage data for their clients – find out why. COMPOSE  SPONSOR Designer vs. Developer #1: Creating a Collaborative Environment VIDEO Mustafa Kurtuldu (a designer) speaks to developer Jake Archibald about communication and the assumption that designers and developers sole role is to either make things look pretty or to be a cog in a machine with no soul. GOOGLE CHROME DEVELOPERS Sandcat: A Lightweight Multi-tabbed Web Browser TOOLS Features include live HTTP headers, an extensible command line console and more. FELIPE DARAGON svgi: An SVG Inspection Tool TOOLSÁNGEL M MIGUEL taxi-rank: A JSDom-Based Selenium Webdriver API CODE Uses Zombie under the hood. FORBES LINDESAY LQIP-Loader: Low Quality Image Placeholders (LQIP) for Webpack CODEZOUHIR CHAHOUD $20 Free Credit on a new account.  Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit. LINODE  SPONSOR

Form Constraint Validation in HTML Digging into two ways to validate forms on the front end while both taking advantage of newer web APIs and taking support back to IE9. The World and CSS In a 28 minute talk, the original proposer of CSS covers the history of the Web, CSS, and even doing book layouts with CSS. A Study Guide to the Modern Front End Stack A guide built at Grab, a major Asian transportation platform, covering SPAs, React, Flux/Redux, and other popular front-end dev tools. Learn Testing JavaScript Apps (Feat. testing React and Redux) Join Kent C. Dodds to master the latest tooling (like Jest & Cypress) and techniques to test real-world React, Redux, and Node express apps. Aspect Ratios in CSS are a Hack An argument that current aspect ratio techniques are hacky, with a proposal for some new CSS syntax along the lines of 'aspect-ratio: 16/9'. Taking Photos and Controlling Camera Settings with the Image Capture API Image Capture is an API to control camera settings and take photos, now supported in Chrome 59+. Simple demo and code here. The Responsive Order Conflict for Keyboard Focus Some thoughts on how CSS methods such as Flexbox and Grid pose a problem for keyboard focus order. Web Audio Weekly: A Newsletter on All Things Web Audio It’s not one of ours, but it’s been around a while and really narrows in on this niche area well. IN BRIEF CSS Grid Support Shipping in Edge (Behind A Flag For Now) NEWSSTEFAN BAUMGARTNER Possible Future Directions for Data On The Web NEWSW3C Conquer Email with Postal and Compose TUTORIAL A deep dive article on creating a custom email server with Postal and IBM Compose. COMPOSE  SPONSOR Designing The Perfect Accordion TUTORIAL How do you design the perfect accordion? The choice and position of the icon matters, and so does interaction designs. A detailed run-down. VITALY FRIEDMAN Using Stickybits: An Alternative to 'position: Sticky' Polyfills TUTORIALJEFF WAINWRIGHT Building a Color Picker Component with Marko TUTORIAL Marko is a UI library built at eBay. EBAY How to Apply CSS3 Transforms to Background Images TUTORIAL Applying transforms like rotating and skewing to background images. SITEPOINT How to Create A Checkmark Animation with Anime. js TUTORIALMIKAEL AINALEM 10 Tips on Typography in Web Design TUTORIALNICK BABICH Database Performance Monitoring Buyer’s Guide This guide is designed to aid when evaluating database monitoring solutions for your unique environment. VIVIDCORTEX  SPONSOR Reliably Measuring Responsiveness [PDF] SLIDEDECKSHUBHIE PANICKER AND NIC JANSMA Building a Better Login with the Credential Management API VIDEO Currently a draft specification at the W3C. JAMES ALLARDICE An Interview with Chris Coyier of CodePen and CSS-Tricks Fame STORYPREETHI KASIREDDY Progressing The Web: Progressive Web Apps are for Everyone OPINIONJEREMY KEITH Thoughts on Self-Documenting CSS OPINION A look at differing CSS comment styles, with consideration for whether they add (or not) to the code. KEITH J. GRANT Powerful Additions to the CSS Grid Inspector in Firefox Nightly TOOLSMOZILLA HACKS consolemock: A Small Dev Utility for Testing Console Logs CODETHOMAS MAREK picogl. js: A Minimal, WebGL 2-Only Rendering Library CODE For WebGL 2 developers who want a simpler API. TAREK SHERIF share-this: Medium-like Text Selection Sharing Without Dependencies CODEMASSIMO ARTIZZU Flubber: Smoothly Interpolate Between 2D Shapes CODENOAH VELTMAN

Building Mega Menus with Flexbox Kalpesh Singh uses Flexbox features to build a ‘mega’ drop-down navigation menu as are particularly common on e-commerce sites recently. Pell: A Simple, Small (5kB) WYSIWYG Web Text Editor . . with no dependencies.  Demo here. Is It Really Safe to Start Using CSS Grid Layout? Some thoughts on old browsers and how to make good decisions about the technology choices that you have. Add Powerful UI Components to your React Apps with ExtReact Learn how to build data-intensive, cross-platform web apps leveraging over 115 Sencha components and React. Tim Berners-Lee Approves Encrypted Media Extensions (EME) Tim Berners-Lee, inventor of the Web and director of the W3C, is supporting the EME spec (commonly thought of as ‘DRM for the Web’) to gain W3C Recommendation status. What's the Deal with Collapsible Margins? A helpful refresher on collapsed margins: what occurs when two block-level elements with meeting vertical margins combine. Using Feature Queries in CSS Using @supports, you can apply styles conditionally based on support for certain features. Not a new article but now almost universally supported. URLs are UI “You change fonts, move CSS around ad infinitum, and agonize over single pixels. You should also care about your URLs. ” IN BRIEF The Options for Programmatically Documenting CSS TUTORIAL “documentation should be kept as close to the code as possible. ”KALOYAN KOSEV A Beginner’s Guide to Making Progressive Web Apps TUTORIALYUVESH TULSIANI Building Pattern Libraries With Shadow DOM in Markdown TUTORIALHEYDON PICKERING The CSS 3 Speech Module and iOS TUTORIAL VoiceOver on iOS supports 4 settings on the CSS speak-as property. ERIC BAILEY Designing The Perfect Date and Time Picker TUTORIALVITALY FRIEDMAN Browser Security in 2017 VIDEO A good summary of the current state of security oriented browser technologies. JOHANN HOFMANN / MOZILLA How to Label Shadow DOM VIDEO Rob Dodson shares a quick accessibility tip for labelling content inside of a shadow root. GOOGLE CHROME DEVELOPERS Browser Module Loading: Can We Stop Bundling Yet? OPINION Includes performance tests comparing bundled and unbundled. SÉRGIO GOMES Life Is About to Get Harder for Sites Not Using HTTPS OPINION Increased numbers of warnings in browsers will make users think twice. TROY HUNT CSS vs. JavaScript: Trust vs. Control OPINION Thoughts on what using CSS means and how programmers may not use it to its strengths. CHRISTIAN HEILMANN Inline/Live Validation Is Problematic OPINIONSIMPLE = HUMAN $20 Free on a new Linode account TOOLS Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit. LINODE  SPONSOR csvtotable: CLI Utility to Convert CSV Files to Sortable HTML Tables TOOLSVIVEK R 6 Material Design CSS Frameworks Compared CODESITEPOINT fractures: A Baseline Atomic CSS Toolkit CODE Provides a set of non-blocking, atomic, utility classes for quick prototyping. KRISZTIAN PUSKA pinhole-js: A 3D Wireframe Drawing Library for HTML Canvas CODEJOSH BAKER Tonik: A WordPress Starter Theme Using Modern Web Practices CODE An open-source theme which leans heavily on ES6, Sass, webpack, and modern PHP features. TONIK AC-D3: Library for Building Audiovisual Charts in D3 CODE Bring the power of embedded videos to D3 visualizations. MICHALS, WORREL AND NUNNS It’s easy to version control your database alongside your application Connect your database to your version control system with SQL Source Control and keep track of every change. REDGATE  SPONSOR Curated by Peter Cooper and Chris Brandrick and published by Cooperpress.

HTML 5. 2 Now A Candidate Recommendation Now a W3C Candidate Recommendation, the HTML 5. 2 spec defines the second minor revision of HTML. A few things are up for potential deprecation including the ‘menu’ and ‘dialog’ elements. The Languages Which Almost Became CSS The history of all the languages which almost became CSS and the development of the styled web. Make your website content editable for anyone on your team Avoid back-and-forth changes to website content by enabling anyone on your team to make changes themselves. Component IO is a modular CMS that easily integrates with any website & allows even non-technical teammates to make edits without learning new tools. Inside Mozilla: Firefox Fights Back Mozilla is preparing to outmanoeuvre Google’s Chrome browser, beginning with the release of Firefox 57 in November. 10 Guidelines to Improve Your Web Accessibility Some guidelines to improve the accessibility of your site from color choices through to helpful tools and HTML element choices. Firefox 55: First Desktop Browser to Support WebVR Firefox on Windows is the first desktop browser to support the new WebVR standard (with macOS support ready now in Firefox Nightly). Changes to the Grid Spec, and Multi-Column Layouts grid-gap properties are changing in favour of more generic gap, column-gap and row-gap properties. IN BRIEF CSS Containment Module Level 1: W3C Recommendation NEWSW3C W3C Launches a WebAssembly Working Group NEWSBRADLEY NELSON Service Worker Support Coming to Safari NEWS Initial implementation steps in Safari appear to be taking place. MAXIM SALNIKOV Companies Are Losing Web Accessibility Lawsuits NEWS The ‘Americans with Disabilities Act’ means companies cannot discriminate. LAINEY FEINGOLD Critical CSS & Webpack: Automatically Minimize Render-Blocking CSS TUTORIALANTHONY GORE The new front end: building experiences for devices, Facebook & mobile TUTORIAL The final blog post in a series examining technologies that are driving the development of modern web and mobile applications. MONGODB  SPONSOR If You Hate FOUT, 'font-display: optional' Might Be Your Jam TUTORIAL Your options to avoid showing a ‘Flash of Unstyled Text’. CHRIS COYIER 6 Ways to Detect Chrome Headless TUTORIAL If you want to detect bots, perhaps. ANTOINE VASTEL Focusing on Focus TUTORIAL Mouse and keyword handle focus differently, and the behaviour can change depending on what browser you use. Chris runs through why that matters for accessibility and offers a solution. CHRIS DEMARS Keyboard-Only Focus TUTORIAL Another look at :focus variation between browsers. ROMAN KOMAROV Are You Concerned About Accessibility? TUTORIAL How to educate developers on creating accessible websites. DANIELA MATOS DE CARVALHO Solving CSS Versioning Conflicts TUTORIAL How New Relic’s engineering teams solve CSS versioning conflicts. JAVIER SÁNCHEZ-MARÍN A Designer’s Guide to Flexbox and Grid TUTORIALJON YABLONSKI Using CSS to Detect and Count Prime Numbers TUTORIAL Crazy but fun.  Demo here. XIERANMAYA The Flash Games Postmortem VIDEO Kongregate’s John Cooney looks at the immense history of Flash games. GAME DEVELOPERS CONFERENCE After a 23-Year Wait, WebVR Ships Today STORY The tale of the history of VR on the Web. SEAN WHITE Web Maker: How I Built a Fast, Offline Frontend Playground STORYKUSHAGRA GOUR Resolving CSS Gridlock OPINIONMATTHIAS OTT A CSS Grid Highlighter for Chrome TOOLSADEM ILTER DisplayJS: A Simple, Lightweight JS Framework for Building Ambitious UIs TOOLSARTHUR GUIOT Analyze web app performance in real time TOOLS Collect custom metrics from your servers, dbs, and 200+ techs. Start visualizing and alerting in minutes. DATADOG  SPONSOR JPNG. svg: Combine PNG Transparency with the Compression of a JPEG TOOLS A drag and drop tool that compresses large transparent images. STEPHEN SHAW

W3C Abandons Consensus, Standardizes DRM with 58% Support This decision has resulted in the EFF resigning from the consortium due to a belief that the W3C process is no longer suited to defending the open web. How New Font Technologies Will Improve The Web François Poizat looks at how variable & parametric fonts will revolutionize responsive type. The All-New Guide to CSS Support in Email A big update to this popular guide for getting your CSS behaving in a range of email clients. Linux cloud hosting starting at 1GB of RAM for $5/mo Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server. Use promo code HTML520 for a $20 credit on a new account. Payment Request API Now Being Implemented in Major Browsers The Web Payments Working Group has advanced both Payment Request API and Payment Method identifiers to Candidate Recommendation Status. Chrome to Force '. dev' Domains to HTTPS via Preloaded HSTS A future version of Chrome may force all domains ending on . dev (and . foo) to be redirected to HTTPs via a preloaded HTTP Strict Transport Security (HSTS) header. Writing CSS with Accessibility in Mind Techniques, considerations, and approaches that will help you write more accessible CSS. Uploading Directories at Once with 'webkitdirectory' A look at a non-standard attribute supported by Chrome, Firefox and Edge for allowing the selection of an entire directory via a form. In Brief W3C Publishes Encrypted Media Extensions as a W3C Recommendation newsW3C Building The DOM Faster: Speculative Parsing, Async, Defer and Preload tutorial How browsers interpret code and how they help load pages faster with speculative parsing. Milica Mihajlija Taking CSS Linting to the Next Level with Stylelint tutorial Ashley Nolan introduces the features of stylelint, a flexible and well-supported CSS linting tool that can improve your code style/maintenance. SitePoint Building a multiplayer game with Angular and Pusher tutorial Learn how to build a realtime Angular game from scratch, taking advantage of the awesome realtime capabilities with Pusher. Pusher  Sponsor Basic Grid Layout with Fallbacks using Feature Queries tutorialChen Hui Jing 'The Notch' (on iPhone X) and CSS tutorialChris Coyier Chrome Extensions for Quick Site Redesigns tutorial How one developer uses Chrome extensions to do quick site redesigns. Monica Dinculescu Building Inclusive Toggle Buttons tutorialHeydon Pickering CSS Grid: Bringing True 2D Layout to the Web videoMelanie Richards Microsoft Edge Web Summit 2017 Roundup video All of the recorded sessions from the recent Edge Summit are now available (with slides and captions). Channel 9 Running a Performance Profile on the YouTube Search Box with DevTools videoUmar Hansa I Don’t Know Who The Web Audio API Is Designed For opinion “The scope of Web Audio is hopelessly huge, with features I can’t imagine anybody using, core abstractions that are hopelessly expensive, and basic functionality basically missing. ”Jasper St. Pierre Create Beautiful, Dynamic React Apps with a Single Component Library - Try ExtReact for Free Today toolsSencha, Inc.   Sponsor luma. gl: A JS WebGL2 Framework for Data Visualization codeUber Curated by Peter Cooper and Chris Brandrick and published by Cooperpress.

Essential Image Optimization for the Web A free ebook on modern image optimization techniques. Formats, decoders, techniques for efficient compression and more are covered. ADDY OSMANI CSS Grid Gotchas And Stumbling Blocks CSS Grid is such a different way of approaching Web layout that a variety of questions often pop up, some of which are answered here. RACHEL ANDREW The Future of Accessibility for Custom Elements A look at how the Accessibility Object Model may help custom elements with semantics. ROB DODSON Introduction to Vue. js with Sarah Drasner Get up and running in a hurry with the Vue. js JavaScript framework. Learn how to build and maintain complex applications quickly and efficiently in this practical guide to Vue. js by Sarah Drasner. Fundamentals of Responsive Images A good explainer of the key concepts for responsive images, and an overview of a few different responsive image tactics. MARC DRUMMOND HTML 5. 1 2nd Edition is a W3C Recommendation The Web Platform Working Group has published a W3C Recommendation of HTML 5. 1 2nd Edition. W3C Integrating SVG Into Your Site Dudley Storey gets into why you should be using Scalable Vector Graphics (SVG) and how you can easily integrate them into your site in a variety of ways. HEART INTERNET IN BRIEF Everything You Ever Wanted to Know About Secure HTML Forms TUTORIALRANDALL DEGGES Using SVG clip-path to Change A Logo's Color On Scroll TUTORIALEDUARDO BOUÇAS Implementing a Collapsible Widget with Pure CSS TUTORIALALLIGATOR. IO VoiceOver, Safari and `list-style-type: none` TUTORIAL A fix for when VoiceOver doesn’t play nice when reading out unordered lists from Safari. UNFETTERED THOUGHTS How to Write Better CSS with the BEM Naming Convention TUTORIALRAYMON SCHOUWENAAR 2017 Video Developer Report - Free Download Get the 24 page report on current video technology usage and planned usage for 2018. BITMOVIN  SPONSOR How 18F Created A Large-Scale Design System for the US Government STORYMAYA BENARI eBay’s Font Loading Strategy STORY The considerations and strategy behind eBay’s switch to using a custom font. SENTHIL PADMANABHAN Microsoft Edge Extensions, One Year Later STORYMICROSOFT EDGE TEAM What You Need to Know About Variable Fonts OPINION An interview with Tim Brown and Bram Stein of Adobe Typekit. ULRIK HOGREBE How CSS Grid Went From Idea to Reality VIDEOMICROSOFT Embedding a CMS anywhere you want, with any framework A CMS that works on any website and any platform. It’s simple to install & easy for your whole team to use. COMPONENT IO  SPONSOR Stripe Elements: Build Beautiful, Smart Checkout Flows TOOLS Pre-built UI components for creating ‘pixel-perfect’ checkout flows across desktop and mobile. STRIPE CSS Grid Layout + Firefox = ️ CODE A detailed walk-through on learning CSS Grid layout. MOZILLA SentinelJS: Detect New DOM Nodes using CSS Selectors CODEANDRES MOREY a11y-dialog: A Very Lightweight and Flexible Accessible Modal Dialog CODEEDENSPIEKERMANN A Comic Book Style Layout Example with CSS Grid and 'clip-path' DEMO CODEREN AYSHA

Introducing the New Firefox (57): Quantum A major update that’s “over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine. ” It’s time to revisit Firefox if you haven’t recently. Using SVGs as Placeholders, and Other Image Loading Techniques A frontend developer from Spotify looks at several approaches to showing something in place of an image before that image loads. Kendo UI and Angular 5—The Perfect Pair Kendo UI—the premium JavaScript UI component library for jQuery, Angular, React, and Vue, is pleased to announce full support for the new Angular 5 release. Kendo UI combines the power of feature-rich components with easy integration. On Declining Complexity in CSS Despite the latest edition of CSS: The Definitive Guide dwarfing earlier ones, Eric Meyer suggests CSS is not any more complex than it was, just more capable.  The book’s out now. WebAssembly Support Now Shipping in All Major Browsers Apple and Microsoft are shipping WebAssembly support in the new versions of Safari and Edge, so all 4 major browsers can now run code compiled to the super-fast wasm format. How Firefox Got Fast Again and Where It’s Going to Get Faster Mozilla’s major reboot of Firefox came out yesterday — here’s an accessible look at the work that went into its retooling. The Current State of Element Queries What element queries are and where community consensus currently finds itself amongst developers and standards working groups.   IN BRIEF Firefox Quantum 57 for Developers NEWS A more practical list of things you need to be aware of in the latest Firefox release, including Firefox’s new CSS engine, Stylo. MOZILLA Be a Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics COURSE MongoDB University courses are free and give you everything you need to know about MongoDB. MONGODB  SPONSOR The Contrast Swap Technique: Improved Image Perf with CSS Filters TUTORIALUNA KRAVETS Go Beyond console. log with the Firefox Debugger TUTORIALMOZILLA HACKS Cross-Origin Communication with postMessage TUTORIALADAM LAKI Creating a TripAdvisor-Style Text input Highlight Effect TUTORIAL A line under the text field highlights as you type more text. PETR GAZAROV A Cute Way to Highlight Images Lacking 'alt' Attributes TUTORIALMATT SMITH ON TWITTER Flexbox and Grids, Your Layout’s Best Friends TUTORIAL Debunking myths around Flexbox and Grid, and showing you the power of these two technologies working together. EVA FERREIRA Creating a Loading Placeholder with Sass TUTORIAL Using animation to simulate loading text content. LEE ROBINSON 6 CSS Code Smells TUTORIALROBIN RENDLE Designing Grids VIDEO This talk delves into grid design theory and makes it applicable for today’s web. MARK BOULTON Analyzing Your Page's Layers with Chrome DevTools' Layers Panel VIDEOGOOGLE CHROME DEVELOPERS Should We Stop Using Google's Font Service and Self Host? OPINION . . as Google can change how fonts look on the fly. GOOGLE Monitor, Analyze, and Optimize Web App Performance TOOLS Start collecting and correlating real-time metrics from over 200 technologies in minutes.  Try it free. DATADOG  SPONSOR Tailwind: A Utility-First CSS Framework for Rapid UI Development CODEADAM WATHAN, JONATHAN REININK, ET AL Shards: A UI Toolkit Based on Bootstrap 4 CODE Curated by Peter Cooper and Chris Brandrick and published by Cooperpress.     IN BRIEF Firefox Quantum 57 for Developers NEWS A more practical list of things you need to be aware of in the latest Firefox release, including Firefox’s new CSS engine, Stylo. MOZILLA Be a Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics COURSE MongoDB University courses are free and give you everything you need to know about MongoDB. MONGODB  SPONSOR The Contrast Swap Technique: Improved Image Perf with CSS Filters TUTORIALUNA KRAVETS Go Beyond console. log with the Firefox Debugger TUTORIALMOZILLA HACKS Cross-Origin Communication with postMessage TUTORIALADAM LAKI Creating a TripAdvisor-Style Text input Highlight Effect TUTORIAL A line under the text field highlights as you type more text. PETR GAZAROV A Cute Way to Highlight Images Lacking 'alt' Attributes TUTORIALMATT SMITH ON TWITTER Flexbox and Grids, Your Layout’s Best Friends TUTORIAL Debunking myths around Flexbox and Grid, and showing you the power of these two technologies working together. EVA FERREIRA Creating a Loading Placeholder with Sass TUTORIAL Using animation to simulate loading text content. LEE ROBINSON 6 CSS Code Smells TUTORIALROBIN RENDLE Designing Grids VIDEO This talk delves into grid design theory and makes it applicable for today’s web. MARK BOULTON Analyzing Your Page's Layers with Chrome DevTools' Layers Panel VIDEOGOOGLE CHROME DEVELOPERS Should We Stop Using Google's Font Service and Self Host? OPINION . . as Google can change how fonts look on the fly. GOOGLE Monitor, Analyze, and Optimize Web App Performance TOOLS Start collecting and correlating real-time metrics from over 200 technologies in minutes.  Try it free. DATADOG  SPONSOR Tailwind: A Utility-First CSS Framework for Rapid UI Development CODEADAM WATHAN, JONATHAN REININK, ET AL Shards: A UI Toolkit Based on Bootstrap 4 CODE Curated by Peter Cooper and Chris Brandrick and published by Cooperpress.

THE MOST POPULAR ITEMS OF 2017 HEAD: Everything To Go In Your HTML's 'head' Starts from the usual basics (title, charset, etc. ) but works up to a significant number of meta and link tags useful in various situations. A Thorough Guide to Building Layouts with CSS Grid A helpful guide to CSS Grid, including a free visual grid builder tool. Debugging Tips and Tricks for Front-End Developers A fantastic round-up of concepts, tools, and things to consider when doing one of a developer’s most important tasks: debugging. New Course: Advanced State in React with Redux, MobX & More Learn the patterns to manage state across large React applications. Take a tour through the popular approaches and libraries to state management like Flux, Redux, MobX, Redux Thunks and Redux Sagas in this new course by Steve Kinney. Does CSS Grid Replace Flexbox? In short, not exactly. Some good examples here of where Grid and Flexbox work best. Best Practices for Links Back to the Homepage A site logo linking to the homepage is not always enough. Here’s some best practices for that key link. The State of CSS: 5 Things You Don't Need Anymore? Five supposedly ‘old-fashioned’ CSS practices that you may not need anymore (like using floats or grid libraries) and what you can use instead. You Do Not Need A CSS Grid Based Grid System Why you don’t need a grid system to use CSS Grid Layout, due to it already being one. The Front-End Checklist An exhaustive list of all the elements you need to have/test before launching your site. Bootstrap 4 Beta (Was) Released Two years in the making, the beta of Bootstrap version four arrived in August, taking some key steps forward — for starters, it switched from Less to Sass and is now Flexbox based. Getting Started with Headless Chrome ‘Headless’ Chrome is basically Chrome running without any UI or visible controls, so is ideal for being remotely controlled from JavaScript. Optimize Web App Performance with Datadog Start collecting, monitoring & correlating real-time metrics from 200+ technologies in minutes.   Learn How To Debug JavaScript with Chrome DevTools Ditch console. log debugging by using breakpoints to debug code within the DevTools. Shoelace. css: A Pure CSS Alternative to Bootstrap A back to basics CSS starter kit “for when you don’t need the whole boot”.

Building Resizeable Components with Relative CSS Units AHMAD SHADEED A ton of examples for taking relative units beyond just font sizing, including building an entire page of elements sized in %, em, and rem units. Creating Sites With Dropbox-Powered Hosting Tools COSIMA MIELKE A look at nine tools you can hook up to Dropbox to streamline the process of creating and hosting static websites (particularly for prototypes). What, Exactly, Makes Something A Progressive Web App? ALEX RUSSELL “A PWA is functionally defined by the technical properties that allow the browser to detect that the site meets certain criteria and is worthy of being added to the homescreen. ” Building Your HTML5 Project? Host with Linode LINODE  SPONSORED Linode's SSD hosts are the perfect environment for any HTML5, CSS, and Javascript media. Meet your website's demands with a lightening-quick cloud host offered at competitive pricing. 99. 9% uptime and 24/7 support. Webfonts on the Prairie RICHARD FINK It’s 2016, Rich Fink reminds us. Webfonts have blossomed (60% of the Alexa top 1 million sites use them). Surely no one would argue for a return to system fonts? Wrong. Appmetrics. js: Measures Perf and Annotates the DevTools Timeline ERIC BIDELMAN A library that uses the User Time API and measures things in your web app, annotates the DevTools timeline, and reports the results to Google Analytics. A Nerd's Guide to Color on the Web SARAH DRASNER An in-depth dive into some of the technical details of using color on the web. Why There Is No CSS4 - Explaining CSS Levels RACHEL ANDREW We had CSS1, and CSS2. We even had CSS2. 1 and we then moved onto CSS3 – or did we? This post is a quick explanation of how CSS is versioned today. Is Now A Good Time to Start Using Web Bluetooth? (Yes) URI SHAKED Into IoT and the Web? If you like playing with cutting edge, user-facing tech, you should check out Web Bluetooth. In brief Where Things Are At In The CSS Grid Layout Working Draft NEWS A few things have changed in the latest draft of the Grid Layout module.  NITISH KUMAR Polymer 2. 0 Preview NEWS The goal is to take advantage of native, v1-level Shadow DOM and Custom Elements APIs.  POLYMER TEAM Microsoft Working on Bringing WebVR to Edge NEWS WebVR makes it easier to build immersive VR experiences for the Web.  MICROSOFT Visual Studio Code Introduces iOS Web Debugging NEWS You can now debug JS running on iOS devices directly from VS Code.  MICROSOFT CacheQueryOptions Arrive in Chrome 54 NEWS Good news for Cache Storage API users.  GOOGLE Two free weeks of JavaScript training: React Native, Async, GraphQL COURSE Learn from Google, Twitter and Netflix alums about Event Loops, React, Flux, Async Coding & Front End DevOps FORWARDJS COURSES SPONSOR A Look at 8-Digit Hex Color Codes TUTORIAL The extra 2 digits are for alpha transparency.  CHRIS COYIER How to Translate from DOM to SVG Coordinates and Back Again TUTORIAL CRAIG BUCKLER Content Security Policy, Your Future Best Friend TUTORIAL Why Content Security Policy (CSP) is important and what you need to be aware of when configuring it.  NICOLAS HOFFMANN A Guide to Browser Scroll Animations TUTORIAL BRIAN RINALDI MinMaxing: Understanding vMin and vMax in CSS TUTORIAL DUDLEY STOREY Fancy SVG Letter Animation with anime. js TUTORIAL MARY LOU Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper TUTORIAL If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.  PROGRESS SPONSOR The Colors Used by the Ten Most Popular Sites STORY Goes deeper into Web color than you’d expect from the title alone.  PAUL HEBERT Redesigning a Seven-Level Navigation System: A Case Study STORY MARKO DUGONJIĆ Is Web Programming a Series of Hacks on Hacks? OPINION A very busy discussion on Hacker News.  HACKER NEWS The Job of a Web Designer is Changing (And That's Good News) OPINION PAUL BOAG granim. js: Create Fluid and Interactive Gradient Animations CODE Demo page.  BENJAMIN BLONDE pageAccelerator: A Very Light Solution to Load Web Pages Faster CODE An agnostic library that uses ajax and pushState to deliver a faster navigation experience.  EASYFOOD The 'Stranger Things' Intro in CSS DEMO An impressive CSS recreation of the intro to this summer’s biggest Netflix show.  WILLIAM O'BEIRNE

Google's HTML and CSS Style Guide GOOGLE This isn’t new but a few recommendations in here surprised me (as well as people on Twitter) so you might find Google’s advice both useful and intriguing. Welcome to HTML 5. 2: New Developments in the Specs TELERIK DEVELOPER NETWORK Annarita Tranfici discusses what has changed since HTML5 was originally released including new HTML elements and other features that are at risk as the spec evolves. 12 Handy Chrome DevTools Tips DAVID GILBERTSON These are mostly simple tips but may uncover a few features you hadn’t got around to trying yet. ($0was a handy one I didn’t know about. ) Learning Paths: From Beginner to Advanced Front-End Dev FRONTEND MASTERS  SPONSORED Pick your skill level and get course suggestions ordered. Choose from four learning paths: Beginner, Intermediate, Advanced & Designers Learning Code. Gmail to Support Media Queries and Head-Based CSS GOOGLE Google will be supporting modern CSS more thoroughly in Gmail by the end of the month. CSS Grid Meets The Real World: A Login Form RACHEL ANDREW A look at creating a login form that uses several alignment properties alongside CSS Grid Layout, enhancing a simpler version using feature queries. The Challenges of HTML5 Media Playback BBC INTERNET BLOG The BBC’s Lloyd Wallis looks at the challenges the BBC has faced regarding HTML5 media playback as they move away from Flash. From WordPress to Apple News, Instant Articles, and AMP CHRIS COYIER Chris Coyier (of CSS Tricks) looks at ways to republish a WordPress blog to Apple News, Facebook’s Instant Articles and AMP. In brief Safari 10 Available for MacOS 10. 12 and 10. 11 NEWS CSS support for object-position, picture-in-picture video playback, and full ES6 and Apple Pay support.  APPLE Firefox 49 Fixes Sites Designed with WebKit in Mind NEWS The recently released Firefox 49 now includes support for various -webkit- prefixes.  MOZILLA HACKS What’s New in Opera 40 (based on Chromium 53) NEWS Shadow DOM v1, new MediaStreamTrack API methods, unprefixed CSS filter changes & more.  OPERA W3C on Bringing Virtual Reality to the Web Platform NEWS DOMINIQUE HAZAËL-MASSIEUX Discover the world’s most trusted SQL Server comparison tool Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.  RED GATE SPONSOR WebGL2 Fundamentals: Learn WebGL2 from the Ground Up TUTORIAL GREGGMAN CSS Floats Explained By Riding An Escalator TUTORIAL “If you have ever jumped on an escalator, then you can quickly understand floats. ” KEVIN KONONENKO Hiding DOM Elements, and the Implications of Doing So TUTORIAL RODNEY REHM Common CSS Mistakes (And How To Fix Them) TUTORIAL MARIANO MIGUEL Autoprefixing with CSS Variables TUTORIAL An interesting use for CSS variables I hadn’t considered before.  LEA VEROU Why We Use Progressive Enhancement to Build GOV. UK STORY Does progressive enhancement have a perception problem? Here, Robin Whittleton explains why the UK government use progressive enhancement for GOV. UK.  GOVERNMENT DIGITAL SERVICE (UK) Rise of the Web Workers SLIDEDECK Slides on how mainstream libraries like React or Angular use Web Workers to improve performance.  PARASHURAM N Confident Frontend with Elm VIDEO Elm is a compile-to-JavaScript language that brings some interesting ideas to frontend development.  JACK FRANKLIN Beyond The Tab: Executing JavaScript Across Browser Contexts VIDEO ANDREW DUNKMAN 6 Web Layout Myths Busted OPINION Challenge your assumptions, break out of old habits and discover what’s newly possible with layout on the web.  JEN SIMMONS Browser Bug Searcher: Search for Bugs Across All Major Browsers TOOLS  Onsen UI 2 Released: A Hybrid Mobile App Framework and Toolset TOOLS ONSEN UI regl: A New Declarative and Stateless Abstraction for WebGL TOOLS Check out the examples.  ERIC ARNEBÄCK Performance monitoring for JS developers TOOLS Instantly pinpoint performance issues and build faster JS apps OPBEAT SPONSOR gulp-css-tailor: Automatically Generate CSS From HTML Classes CODE I’m not entirely sure this is a great idea, but. .  KAMRAN AHMED Reframe. js: Make Unresponsive Elements Responsive CODE Removes an element’s height and width attributes and wraps it in a responsive DIV.  DOLLAR SHAVE CLUB wysiwyg. css: Style TinyMCE or Markdown Generated Content with a Single CSS Class CODE JEREMY THOMAS

State of CSS 2019 — Rezultati iz prve State of CSS ankete, sa detaljima o tome koje CSS funkcije i alatke su omiljene za preko 10. 000 programera. Vredi pregledati ove podatke da biste saznali šta ljudi koriste u praksi dok se CSS razvija.  SACHA GREIF & RAPHAËL BENITTE Kako da podelite HTML na odeljke — Vredan detaljan pregled različitih HTML elemenata semantičkog segmentiranja (kao što su <nav>, <section> i <aside>) sa smernicama kada ih je pogodno koristiti i kako. Vredi sačuvati ovu stranicu za buduću referencu.  DANIEL TONON Novo kompletno predstavljanje Reacta. . . sada, sa vezama — Mnogo više od samog uvoda, jer ćete izgraditi stvarnu aplikaciju sa najnovijim funkcijama u Reactu, uključujući  veze, efekte, kontekst i portale.  FRONTEND MASTERS SPONSOR Uvod u Web Components — Web Components (ili Custom Elements) omogućava vam da implementirate ponovo upotrebljive komponente samo pomoću HTML-a, CSS-a i JS-a. Evo kako da izgradite prvu i kako da ih upotrebite u aplikacijama.  ROBIN WIERUCH Predstavljanje 'novog' HTML elementa - Welcome <clippy> — Ovde ćete pročitati kritiku Googleovog skorašnjeg pristupa za predstavljanje novog HTML elementa (naizgled izostavljajući potvrdu standarda), konkretno <toast> element notifikacije. Jen Simmons je takođe razmotrila ovu temu.  TERENCE EDEN API nestabilnosti rasporeda — Znate li koliko je uznemirujuće kada stranica skakuće u toku učitavanja? Ovaj API teži da pronađe ovaj problem. Ovde je predstavljen API, njegovi ključni koncepti i opisano je kako da ga upotrebite.  PHILIP WALTON Poslovi Inženjer za optimizaciju performanse JavaScripta / Reacta - Exodus (udaljeno) — Exodus traži opsesivnog inženjera koji će raditi na poboljšanju performanse Exodus desktop aplikacije.  EXODUS Viši softverski inženjer (Santa Barbara ili udaljeno) — Pridružite se timu gde svako teži da konstantno poboljša svoje znanje o alatkama za razvoj softvera, praksama i procesima.  INVOCA Oglasite novi Dev posao na Vettery-u — Vettery je specijalizovan za tehničke uloge i potpuno je besplatan za korisnike koji traže posao.  VETTERY Novosti, tutoriali & mišljenje Microfrontends: Dobro, loše i ružno — Frontend Twitter je nedavno bio prepun postova o ‘microfrontends-u’, pristupu za izgradnju frontend aplikacija modelovanih po mikroservisima. Ovde ćete pročitati prednosti i mane ovog pristupa.  KEVIN BALL CSS Scroll Snap ažuriran u Firefoxu 68 — Firefox 68, do sledećeg meseca, će isporučiti ažuriranu CSS Scroll Snap specifikaciju (ista verzija kao Chrome i Safari). Sada će prianjanje klizača funkcionisati isto u svim pretraživačima koji ga implementiraju.  RACHEL ANDREW (MOZILLA) Sve što treba da znate o objektu Date u JavaScriptu — Opisuje sve što treba da znate o objektu Date.  ZELL LIEW Chromium i problem monokulture pretraživača — Nakon što je Microsoft prešao na Chromium, razbuktale su se priče o ponovnoj pojavi monokulture pretraživača. Ken opisuje jedno moguće rešenje.  KEN BELLOWS 5 ključeva za dostupnu veb tipografiju — Dobro predstavljanje osnova i najbolje prakse za dostupnu veb tipografiju.  MATEJ LATIN Stav o CSS-u — Objašnjava ‘ideje jezika’ koje treba da znate da biste pisali dobar CSS.  MAX BÖCK Korisne alatke i tehnike za minimiziranje CSS-a PETER EKENE EZE Manifold pokreće Marketplace-as-a-Service MANIFOLD SPONSOR Chrome 76 Beta: Dark režim, plaćanja, PWA funkcije & više GOOGLE Informacije o izdanju Safari Technology Previewa 85 JON DAVIS (WEBKIT) Savet nedelje Veb dostupnost za Devs: 3 saveta za bolju čitljivost  by Nikola Shekerev Tokom implementiranja usaglašenosti dostupnosti za KendoReact (biblioteka UI komponenti za React), otkrio sam mnogo o čitljivosti. Dobra čitljivost obezbeđuje da će sajt biti dostupan i upotrebljiv za korisnike sa i bez invaliditeta. Čitljivi podnaslovi/transkripti će biti od pomoći ljudima sa problemima sluha a čitljiv tekst će generalno biti koristan za one koji imaju problem sa vidom ili disleksijom.  Pravilo je da upotrebite jednostavan i čist sans-serif font veće veličine. RAZMAK: Duge linije su teške za čitanje pa zato primenite granicu od 70 karaktera po liniji, ako je to moguće. Za podnaslove preporučena granica je 35 karaktera. Obezbedite dovoljan razmak za karaktere - prored od 1. 5x je dobar. KONTRAST: Pozadinske slike mogu da zamagle tekst, pa ih pažljivo koristite. Neki fontovi imaju granicu oko slova za poboljšanje kontrasta, ali je bolje da u potpunosti izbegavate pozadinske slike i obezbedite jednobojnu pozadinu koja ima dobar kontrast sa tekstom. FONTOVI: Dizajneri slova su kreirali neke odlične fontove koji su optimizovani za čitljivost i trebali biste da ih razmotrite u zavisnosti od vaše publike.  OpenDyslexic i Inter su dobri primeri. Veb pristupačnost je ogromna tema koju bi svaki frontend programer trebao da upozna, a razlozi su opisani u mom pregledu pristupačnosti. Takođe ćete pronaći i pregled ključnih standarda pristupačnosti i savete i najbolju praksu za izgradnju pogodnijih sajtova. Ovonedeljni savet sponzoriše KendoReact. Izgradnja UI-a za poslovne aplikacije je težak posao, čak i pomoću Reacta. Možete da olakšate ovaj posao pomoću UI & data visualization component biblioteke dizajnirane i izgrađene za React. Svih 55+ KendoReact komponenti su usklađene za pristupačnost.  Isprobajte ih. Kod, alatke & resursi Animirani CSS i JS 'Matrix' Digital Rain — Nema potrebe da uzimate crvenu pilulu da biste pregledali ovaj uredan demo.  YUAN CHUAN Automatizujte odlazne linkove — Nezavisni servis koji će proveriti na datom URL-u linkove ka drugim sajtovima, otkriti da li podržavaju linkove, zatim će ih poslati na cilj.  Ovde se nalazi povezani post bloga.  REMY SHARP Obnovite znanje o CSS rasporedu: Every Layout — Rastući resurs koji će vam pomoći da naučite (ili obnovite znanje) o CSS rasporedu, upotrebom jednostavnih komponenti i kompozicioniog pristupa.  HEYDON PICKERING & ANDY BELL Nadgledanje korisničkog doživljaja pomoću Datadog Syntheticsa — Datadogov AI-powered Browser Tests može da se kreira u roku od nekoliko minuta i sam se ažurira. Isprobajte besplatno.  DATADOG SPONSOR CSS Wand — Kolekcija prilagodljivih CSS stilova i animacija koje mogu lako da se kopiraju i pejstuju u projekat.  OLIVER GOMES Predstojeći događaji An Event Apart, 29-31 Jul — Vašington, D. C.  — Popularna trodnevna konferencija koja se fokusira na sve što se odnosi na digitalni dizajn i korisnički doživljaj. Front Conference, 29-30 avgust — Cirih, Švajcarska — Dvodnevna dvotračna konferencija za sve uključene od koncepta do implementacije. CSSConf, 25. septembar— Budimpešta, Mađarska — Konferencija zajednice namenjena dizajnerima i programerima koji vole CSS.  

Kreiranje HTML Web komponenata pomoću Vanilla JS Izvorne Web komponente još uvek nisu 100% podržane, ali polifili su dostupni i ovo uputstvo vas vodi kroz ono što je potrebno za kreiranje HTML tagova kao komponenata. Ayush Gupta HTTP 103: Radna verzija HTTP koda statusa za označavanje „hintova“ Ideja je da se omogući da Veb serveri pošalju nazad određena zaglavlja (npr. da učitaju zaglavlja linka unapred) pre glavnog odgovora. IETF Veb tipografija: Dizajniranje tabela koje su čitljive Richard Rutter detaljno prikazuje kako poboljšati čitljivost tabela podataka. Richard Rutter Dodajte PDF podršku za veb aplikaciju Korak po korak uputstvo kako da prikažete i označite PDF datoteke unutar veb aplikacije koristeći biblioteku PSPDFKit JavaScript Funkcije uključuju podršku za pregledače (IE 11 i novije), korisnički interfejs optimizovan za mobilne uređaje i ne sadrže komponente na strani servera. PSPDFKit   SpONZOR Kako napisati aplikaciju ToDo bez JS-a koristeći samo HTML i CSS Zanimljiv kreativni pokušaj kreiranja osnovne „veb aplikacije“ koristeći samo HTML i CSS. Matt Zeunert Pogledao sam sva videa Chrome samita o programiranju, pa vi ne morate Glavna poruka: Google želi da napravite PWA-ove, smanjite veličinu JS datoteke, koristite Web komponente i konfigurišete obrasce za podršku automatskog popunjavanja. Dan Fabulich Kreiranje brze pretrage Kako je na popularnoj platformi za prodaju automobila Auto Trader kreirana brza pretraga visokih performansi koja obično vraća rezultate za manje od sekunde. Elliot Sumner Budućnost učitavanja na vebu Sam Saccone istražuje nedavno isporučene osnovne elemente performansi, najsavremenije tehnike performansi i ukazuje šta može da sadrži budućnost učitavanja na vebu. Google Chrome Developers Podsetnik za pristupačnost Korisni pregled sa jednostavnim stvarima koje možete primeniti da biste preduzeli pozitivne korake ka pristupačnijem vebu. Od 2015. godine, ali vredi se podsetiti. Ire Aderinokun POSLOVI Frontend programer u kompaniji X-Team (rad na daljinu) Mi pomažemo našim programerima da nastave sa učenjem i da napreduju svaki dan. Oslobodite svoj potencijal. Radite sa bilo kog mesta. Pridružite se kompaniji X-Team.  X-Team UI dizajner/frontend programer Zainteresovani ste za #tech4good? Tražimo UI dizajnera koji će raditi na idejama, izradi prototipa i kodiranju za međunarodni razvoj.  Catalpa International craigslist traži JavaScript programere (San Francisko, CA) CL traži JS programere koji će se pridružiti našem malom (~50) timu. Pomozite nam da spasimo svet ili makar naš kutak Interneta.  craigslist UKRATKO Microsoftov plan da uvedu progresivne veb aplikacije (PWA) u Windows 10  VESTIPaul Thurrott W3C poziva na implementacije ključne reči Preload vesti Ova specifikacija definiše ključnu reč preload, koja može da se koristi sa elementima linka. W3C JS kongres u Minhenu – Budućnost JavaScripta 13-14. novembra  VESTI Pridružite nam se na dvodnevnoj konferenciji „Budućnost JavaScripta“ (uključujući WebAssembly i alatke). Teme obuhvataju Frontend arhitekturu, webpack, Angular, React, Perf itd. JS Kongress Munich  Sponsor Otključavanje prednosti CSS promenljivih UPUTSTVO Prednosti CSS promenljivih i korisni saveti i trikovi za rad sa njima. Jonathan Harrell Kako da napravite interaktivni virtuelni globus koristeći Three. js uputstvoJeanne Castillo 3 komande za dodavanje SSL-a u 'localhost' za https://localhost na operativnom sistemu Mac  UPUTSTVOPaul Browne Pregled relativno neuobičajenog „output“ HTML elementa  uputstvoRobin Rendle Upotreba Reduxa prilikom izrade Chrome dodataka  uputstvoBruno Antunes Emuliranje CSS funkcija za podešavanje vremena pomoću JavaScripta  uputstvoAna Tudor Dobijanje opozvanog sertifikata u operativnom sistemu Mac UPUTSTVOGeoff Graham Upotreba ReactJS, ES6 i JSX za izradu korisničkog interfejsa (uspon MERN-a) UPUTSTVO Deo 5 naše serije steka moderne aplikacije – Zašto ReactJS pokreće razvoj modernih aplikacija?MONGODB  Sponsor Veb je počeo da izumire 2014. Evo kako MIŠLJENJE „GOOG i FB sada imaju direktni uticaj na više od 70% internet saobraćaja. ”André Staltz Animirani Flexbox Playground ALATKE Korisni vizuelni podsetnik o efektima koje poseduju određena Flexbox svojstva. Blake Bowen grid-kiss: Plagin PostCSS koji pojednostavljuje CSS Grid ALATKESylvain Pollet-Villard Koa11y: Alatka za pristupačnost otvorenog koda ALATKE Desktop aplikacija za automatsku detekciju problema u vezi Web pristupačnosti. Jared Wilcurt Bolji fokus? demo Pokušaj „vizuelno ugodnijeg fokusa za korisnike tastature“. CodePen

1. Bolja Python raspoređivanja pomoću alatke dh-virtualenv github. com Dobra alternativa za upotrebu Git-a za raspoređivanja. Kombinuje moć Debian paketa sa sandbox prirodom alatke virtualenvs. 2. Asinhroni zadaci pomoću Django-a i Celery-a realpython. com Dobar uvod u upotrebu Celery-a pomoću Django-a. Uključujući periodične, lokalne i udaljene zadatke. 3. Razumevanje HTTP-a 2. 0 oreilly. com Poglavlje iz odlične knjige “High Performance Browser Networking” od izdavača Oreilly Media. 4. Organizovana i klasifikovana lista UI obrazaca calltoidea. com Katalog UI obrazaca visokog kvaliteta iz dobro dizajniranog veba. Obrasci za prijavljivanje, kalendari, podnožja stranica, iskačući prozori, tabele za cene i tako dalje. 5 Konačno dobra alatka za ispravljanje grešaka za Go github. com Prava alatka za ispravljanje grešaka za Go od tima iz Mailguna. Podesite, tačke prekida, vidite StackTrase klasu, listajte kontekst. +1700 zvezdica do sada na Githubu.  

Pusher, provides collaboration and communication APIs that enable devs to add realtime features to their apps in minutes and scale massively.  Get started. Heyo Hacker, Time to set up your week with some free thinking tech stories. Want to improve the Hacker Noon experience? Take our reader survey. Want to contribute to Hacker Noon? We’re always reading story submissions. And here are this week’s top Hacker Noon stories: Algorithm of Note Timsort — the fastest sorting algorithm you’ve never heard of by Brandon Skerritt.  Timsort: A very fast , O(n log n), stable sorting algorithm built for the real world — not constructed in academia. Battle of Reality and Desires VR vs. AR by Blockchain DuDe.  By 2021, the combined market size of augmented and virtual reality is expected to reach 215 billion U. S. dollars. Blockchain Story Trie, Merkle, Patricia by Daniel Kronovet.  Hash tables, tries, merkle trees, and patricia trees are all do essentially the same thing: they let you map keys to values. While there are differences between them, this is essentially what they do. Coding Practice in Question Does Column Width of 80 Make Sense in 2018? by javinpaul.  One of the oldest coding practice is to keep line width 80, and many of us follow it blindly but have you ever thought why we have this practice in first place? Contracts Random Number Generator in Contracts by Lior Yaffe.  Fast forward to lightweight contracts. In the Ardor platform, we can use two properties unique to lightweight contracts. Crypto Trading Simulating a Prolonged Cryptocurrency Bear Market with the Monte Carlo Method by Anthony Xie.  Rather than simply making a prediction based on a single average number, Monte Carlo simulations employ randomness to generate millions of different outcomes. Decentralization The State of Decentralized Exchanges by Gary Basin.  By making trades that settle directly on-chain, you avoid moving your crypto into an exchange wallet and facing the risk of a hack or theft. Developer Interview Rise of Kotlin: The Programming Language for the Next Generation featuring zan.  That exact idea of a highly interoperable and better Java was why this started to attract so many Android developers (including me, having done Android since the early days). HTML 15 HTML element methods you’ve potentially never heard of by David Gilbertson.  Always check browser support before use and never trim your eyebrows while you’re angry. My Second App Building Cathedrals — In Coding, And In Life by kunal shandilya.  It taught me that delivering a good product at the expense of exceeding the deadline is always, always, always better than shoving a half-baked product down my beta testers’ throats. Persuasion How companies leverage psychology to steer our choices by Maarten Dalmijn.  In the 70s, an American researcher called Robert Cialdini had a hunch. Cialdini believed there was a science to how people are persuaded. He decided to study the factors influencing people to respond with “Yes” to requests. Product Management Share Outcomes With Your Team by John Cutler.  The challenge is that sharing ongoing outcomes is a muscle. You need to practice and make it a regular part of the team’s cadence of rituals Proof of Burn Migrating USD to the Ethereum blockchain by Denis Petrovcic.  The need to bring fiat currency into the blockchain space is BIG and many have been making loads of money providing solutions that fail to fulfill blockchain’s fundamental vision — giving people control over wealth without central authority. Python 7 features proposed so far in Python 3. 8 by Anthony Shaw.  Python 3. 7 benefitted from both new functionality and optimizations. From what we know so far about 3. 8, it’s going to be a similar story. This time, most of the new functionality is targeted at C extension and module development. REST APIs How to build powerful REST APIs blazingly fast with Node. js by Justin Headley.  After nearly two years of hard work and development I’m excited to introduce rest-hapi v1 to the web development community. State of Cryptocurrencies Summer 2018 by Adam Taché.  A comprehensive overview of the current state of the cryptocurrency ecosystem as of Summer 2018. Virtual Reality Virtual reality with React 360 by Lily Barrett.  As I ported my application over to React 360, I took note of some important differences between React VR and React 360. Until next time, don’t take the realities of the world for granted. Kind Regards, David Smooke P. S.  Want to improve the Hacker Noon experience? Take our reader survey. Want to contribute to Hacker Noon? We’re always reading story submissions. P. P. S.  Pusher, our weekly sponsor, provides collaboration and communication APIs that enable devs to add realtime features to their apps in minutes and scale massively.  Get started.

Go, Go and Go FEATURED Go 1. 8 Beta 1 Released   NEWS  Now’s a great time to get playing with Go 1. 8 ahead of its official release. The draft release notesshow what’s new. GOLANG. ​ORG Implementing Binary Search Iteratively with Go   TUTORIAL  How to implement an iterative (without recursion) binary search that can find a number in a sorted list of numbers using Go. JON CALHOUN DigitalOcean Releases go-qemu and go-libvirt   CODE  DigitalOcean uses QEMU to provide VMs on bare metal servers. go-qemu and go-libvirt are Go packages that provide a way to manage QEMU instances and communicate with them. OPEN SOURCE AT DIGITALOCEAN Seamless Continuous Delivery for Docker Looking for the easiest way to ship your dockerized apps to production? Try cloud's fastest CI/CD solution that takes less than a minute to set up and has full layer caching for Docker images. Start a 30-day free trial today. SEMAPHORE   SPONSORED  Halftoning with Go   TUTORIAL  A fun tutorial looking at how to take a photo and create a monochrome half-toned effect purely in Go. BRIAN MAIER Introducing gobpf: Using eBPF from Go   TUTORIAL  eBPF is a virtual machine included in the Linux kernel that can be used for tracing kernel functions, networking activities, etc. KINVOLK GMBH Sybil: A Fast and Simple NoSQL OLAP Written in Go   CODE  An append only analytics datastore with no up front table schema requirements. Designed for fast full table scans of multi-dimensional data on a single machine. LOGV Archiver 2. 0: Create and Extract Archives from Go   CODE  Supports . zip, . tar, . tar. gz, . tar. bz2, . tar. xz, and . rar (extract-only) formats. MATT HOLT Proposal to Delete the /r/golang Subreddit   NEWS  Last week there was a controversial proposal to delete, or at least officially dissociate, from Reddit due to recent actions by its CEO. This led to a lot of debate on Reddit itself. BRAD FITZPATRICK JOBS Don't love your job? You Should - Try Hired and Find the Right Fit. Hired puts the power back in your hands, by having companies apply to you, not the other way around. With Hired you only talk to companies you're interested in. HIRED IN BRIEF Announcing Go 1. 7 Support for Amazon Linux   NEWS  LAMBDA LINUX Codeship Launches GitLab Support   NEWS  Codeship is proud to announce that we now offer a GitLab integration! Users can connect their GitLab repos to a Codeship account. CODESHIP   SPONSORED  Go Tips You Might Not Know   TUTORIAL  This post is for 1st day of Go Advent Calendar (3). HAYA14BUSA How to Use go:generate   TUTORIAL  go generate was added in Go 1. 4 “to automate the running of tools to generate source code before compilation. ” CARL M. ​ JOHNSON Value Conversions, Assignments and Comparisons   TUTORIAL  “all the the value assignment, conversion and comparison rules in Go” TAPIR GAMES Building a Slack Bot in Go   STORY  CHRIS NG Accept Interfaces, Return Structs   OPINION  Why you should write your packages to accept interfaces and return structs. CRAIG BROOKES Simple to use, powerful programming language need a home?   TOOLS  Use a simple, powerful hosting company. LINODE   SPONSORED  GoAppMonitor: Go App Performance Data Monitoring Tool   TOOLS  WANGGUOLIANG go-bluetooth: Go Bluetooth Client Based on bluez DBus Interfaces   CODE  LUCA CAPRA redis-healthy: Periodically Get Metrics from Redis and Send to Logstash   CODE  GLOBO. ​COM masterkey: Secure Interactive Password Manager using NACL and Go   CODE  JOHNATHAN HOWELL Gru: A Simple Orchestration Framework Written in Go   CODE  MARIN ATANASOV NIKOLOV Go Newsletter is curated by Peter Cooper

GRAPHQL WEEKLY - izdanje 149 Zajednica i događaji Skicirane beleške GraphQL Conf-a na Twitteru Pogledajte ovaj odličan post na Twitteru skiciranih beleški sa GraphQL Conf-a. Crtao ih je Chris Grice! Crtao je ove beleške za svaki govor na konferenciji. VIDEO GraphQL: The Documentary (zvanično izdanje) Pogledajte zvanično izdanje “GraphQL: The Documentary” sa vodećim ulogama Lee Byrona, Dan Schafera, Nick Schrocka i drugih velikih imena iz GraphQL zajednice! Dokumentarni film istražuje priču zašto i kako je nastao GraphQL i kakav uticaj ima na tehnološke kompanije širom sveta. Obuhvaćena je zajednica i kreiranje GraphQL iz više perspektiva. Članci Najbolje teme sa GraphQL Conf 2019 Odličan rezime GraphQL Conf 2019 i Prisma Day koji uključuje resurse o kojima se govorilo, prikazivalo, izdavalo i mnoge druge značajne alatke/koncepte. Post ističe neke ključne teme i komentare o stanju GraphQL zajednice. GraphQL i keširanje: slon u prostoriji U ovom članku, Marc-André Giroux obezbeđuje detaljno objašnjenje GraphQL ograničenja u pogledu keširanja. On istražuje kako HTTP keširanje, keširanje na strani servera i keširanje na strani aplikacije imaju različite efekte na mogućnosti keširanja GraphQL-a. Članak je prikaz njegove predstojeće knjige koja će detaljno opisati rešenja za proglem GraphQL keširanja. Tamo i nazad, priča o životnom ciklusu GraphQL-a U ovom postu bloga objašnjen je i vizualizovan životni ciklus GraphQL zahteva i odgovora servera. U postu je detaljno opisana putanja od momenta kada klijent pošalje zahtev do momenta kada ga server analizira a zatim razrešava očekivani odgovor.