Chrome 68 released, non-HTTPS sites marked as “Not Secure”

#350 — July 25, 2018 Read on the Web Frontend Focus A Milestone for Chrome Security: Marking HTTP As “Not Secure” — Chrome 68, released this week (more on that below), shows a “Not secure” message in the location bar when accessing a site over unencrypted HTTP. The march to ‘HTTPS everywhere’ continues. Google Adding Particle Effects to DOM Elements with Canvas — A neat tutorial showing how to create a basic HTML-to-particle effect. You have to balance a few concepts to make it work but the result is striking. Zach Saucier Developer Tools for Every Customer Session – New in FullStory — Your browser developer tools are now available for site sessions other than your own. Easily understand performance issues thanks to page speed metrics, network analysis, downloadable HAR files, and comprehensive stack traces on all your visitors’ sessions. Fullstory sponsor Chrome 68 Released: What's New For Developers? — Other than the ‘Not Secure’ marker (above), Chrome 68 provides the Page Lifecycle API for you to detect when your tab has been suspended or restored, the Payment Handler API, and lots of neat DevTools improvements. Google Developers 5 'Hot' New CSS Features and How to Use Them — Including the CSS Display module (e.g. display: contents), CSS overscroll behavior, conditional rules, and containment. Daniel Crisp Blink Signals Intent to Implement 'Portals' — Portals (explained here) are a proposed approach for enabling seamless navigation between sites or pages (such as showing one page within another via a ‘portal’ before navigating to it). blink-dev The Frustrations of Using CSS Shapes and CSS Exclusions — ”.. indulge me as I explain my current feelings of woe with CSS Shapes and CSS Exclusions.” Ben Frain 💻 Jobs Senior Developer, New York or Remote — We're looking for a Sr Dev to join our team to help build, deliver and produce quality products for our growing customer base. Apartment Therapy Media Find A FrontEnd Job Through Vettery — Vettery specializes in developer roles and is completely free for job seekers. Vettery 📘 Articles & Tutorials An In-Depth Look at the Page Lifecycle API — A Chrome-only API for now that brings app lifecycle features common on mobile operating systems to the web. It ships with Chrome 68. Philip Walton (Google) Getting to Know a Legacy CSS Codebase Harry Roberts Converting Images to WebP — The many ways in which you can convert existing images to the WebP format. An excerpt from the recently released ‘The WebP Manual’ ebook. Jeremy Wagner Choosing the Right JavaScript Framework: Whitepaper — Learn how Angular, React and Vue compare against a comprehensive set of criteria. Get your copy. Progress Kendo UI sponsor 4 CSS Tricks I’ve Learnt The Hard Way — Quick box sizing, centering, and positioning tips. David Mellul Weird Things Variable Fonts Can Do Chris Coyier How to Make a Modern Dashboard with NVD3.js — NVD3.js is a set of chart components built around D3.js. Dan Englishby Build an Instagram Clone with Vue.js and CSSGram — CSSGram recreates Instagram-style filters using CSS filters and blend modes. Hassan Djirdeh Ubuntu 18:04 Is Here and DigitalOcean Has The Info You Need To Know DigitalOcean sponsor ▶  WebFonts and Performance: 2 Videos from SmashingConf Smashing Magazine 🔧 Code and Tools TOAST UI Grid 3.0: A Data Grid Control for the Web — This data grid component works down to IE8, works with many data types, and is easily rethemed. NHN Entertainment 3 Essential Front-End Checklists for Web Developers David Dias Pushbar.js: Simply Creating 'Sliding Drawers' on Your Pages Biraj Ghosh 4 Things You Can Do with CSS Pointer Events — Change the styling of a parent on hover, make only pseudo elements clickable, and more. Martijn Cuppens Unswitch: An Event Handler for Nintendo Switch Controllers on the Web — Based on the Gamepad API. Colin van Eenige

by via Frontend Focus