June 17, 2017 Frontend Focus Issue 292 — May 31, 2017 11 Things I Learned Reading The Flexbox SpecA run through some of the ‘good bits’ of the CSS Flexible Box Layout specification. David GilbertsonJust Keep Scrolling: How To Design Lengthy, Lengthy PagesScrolling opens a lot of doors to designers but isn’t without its drawbacks. Some tips on how to approach ‘long scroll’ experiences. Nick BabichGoogle (Mostly) Dropping PNaCL in Favor of WebAssemblyGoogle will remove support for PNaCl early next year from “everywhere except inside Chrome Apps and Extensions” shifting their focus over to WebAssembly instead. Brad NelsonSQL Source Control: Track each change to your SQL Server databaseGet a full history in your source control system. See who made changes, what they did & why. See how. Red Gate SponsorProduction Progressive Web Apps with JS FrameworksIn 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. Google Chrome DevelopersA Love Letter to CSSTJ VanToll explains why, despite the ridicule CSS sometimes gets from the developer community, he still loves it for its flexibility, simplicity and power. Telerik Developer NetworkAccessibility in a Responsive WorldSlides and a thorough write up of a talk on accessibility within the context of responsive web design. Scott JehlBrowserslist is a Good Idea and Here’s WhyBrowserlist provides information to tools like Autoprefixer and postcss-normalize (and more) to let you specify which browsers you want to target. Chris CoyierA Unified Styling LanguageA look at why “writing your styles in JavaScript isn’t such a terrible idea after all”. Mark DalgleishInspirational UI Design Ideas for Your Next Web ProjectSimon Codrington illustrates some UI design ideas using CSS animation and gradients. SitePointJobs Full-Stack Developer @ Workday (San Francisco)Build interactive video learning tools used by the world’s largest companies. Work with kind people in TypeScript (browser/Node). Apply here. Workday Principal Front End Engineer at Mondo Robot (Boulder, Colorado)We’re seeking an engineer to take ownership of big opportunities, set standards and be a mentor to junior members of the team. Mondo RobotCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefPage Scroll Animations Made Easy with the AOS Library tutorialGajendar SinghOn-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 LouFull Page Background Video Styles tutorial Tips and approaches for using videos as backgrounds.The Media Temple BlogMaking Custom Properties (CSS Variables) More Dynamic tutorialDan WilsonAccurately Checking for CSS Grid Support in Microsoft Edge tutorialGreg WhitworthThe CSS Fractional Unit (fr) In Approachable, Plain Language tutorialOhans EmmanuelHow to Create Perfectly Centered Text With Flexbox tutorialCraig Campbell?? [Free until June 26] Squash Common JavaScript Bugs Course Join Todd Gardner’s course on Debugging and Fixing Common JavaScript Errors. You’ll be armed to squash bugs for good.Frontend Masters SponsorChrome Won opinion ”..it’s safe to say that Chrome is eating the browser market, and everyone else except Safari is getting obliterated.”Andreas GalWhat is the Future of Front End Web Development? opinionChris CoyierHTML5: Where The Core Web Technology Is Headed Now opinionPaul KrillMuuri: Create Responsive, Sortable, Filterable and Draggable Grid Layouts tools A JavaScript powered layout tool. Demo here.HaltuFlexbox Cheatsheet: Click to Copy Flexbox Properties to Your Clipboard toolsValery LiubimovFirefox Screenshots: A New In-Beta Web Screenshot Tool toolsMozilla$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 SponsorVideoContext: Experimental HTML5+WebGL Video Composition and Rendering API codeBBCElongated/Extruded CSS Text Shadows codeMixfontProgress Nav: An Example of Page Navigation That Shows Progress demoCodePenHN PWA: Hacker News Clients as Progressive Web Apps demo Along the lines of TodoMVC, these are example PWAs built with different frameworks.HNPWA Source link