April 4, 2018 #334 — April 4, 2018Read on the WebFrontend FocusProgressive Web Apps on iOS Are Here — iOS 11.3 added support for several PWA technologies (such as Service Workers) meaning apps can now be installed on iOS without App Store approval. There are limitations, of course, and here’s a rundown of what you need to know.Maximiliano FirtmanIntroducing Network Error Logging — Server logs are useful, but what if you could request logs from clients? It turns out the W3C’s Web Performance Working Group are working on an approach called Network Error Logging.Douglas Creager New Course: From Fundamentals to Functional JavaScript, v2 ? — Learn the techniques you need to write professional, modern JavaScript. This course starts with the basics and takes you to mastering key functional methods like map, reduce and filter…plus promises and ES6+ asynchronous JavaScript.Frontend Masters sponsorUnderstanding Logical Properties and Values — The CSS Logical Properties and Values spec is still at an early stage but logical properties and values will allow us to control layouts through logical, rather than physical, mappings and it’s worth having an idea of how they work. There’s also a PostCSS plugin if you want to start using them now.Rachel AndrewHow to Get Started with Coding Email Layouts — An increasingly common task for front-end developers with lots of quirks to be aware of.Caity G. O’ConnorThe Critical Path: Optimizing Load Times with Chrome DevTools — Improvements you can make and measurements to keep track of in order to optimize load times on a complex web application.Ben DiltsCalling All Web Developers: Here’s Why You Should Be Using Firefox — “In my opinion, Firefox Quantum has superior performance compared to other browsers.” Here’s why.Ibrahim Nergiz5 Things with Anders Hejlsberg – Why TypeScript is for you — Quickly learn 5 quick tips about TypeScript and why it’s for you.Microsoft sponsor? An Introduction to Viewport Units — A look at how you can use vw, vh, vmin, and vmax in creative ways.Jen Simmons? Cropping Images on the Web with Object FitJen SimmonsThe Inside Story of Reddit’s RedesignWIREDJobsWeb Backend Developer (Fairfax, VA) — City State Entertainment is looking for an ASP.NET dev to help create Camelot Unchained, an RvR fantasy MMO for its studio in VA.City State EntertainmentFrontend Developer – Milan, Italy — MotorK is looking for passionate Junior and Senior frontend devs to join the team. Great place to work and career opportunities.MotorKFront-End Expert? Sign Up for Vettery — Create your profile and we’ll connect you with top companies looking for talented front-end developers.Vettery? TutorialsDesigning Systematic Colors — How to make themable, flexible, WCAG 2.0 compliant color ramps for a design system.Jeeyoung JungEasy Accordions with the ‘details’ and ‘summary’ ElementsChris CoyierSuper-Powered layouts with CSS Variables and CSS Grid — A look at using CSS variables to control CSS grid layouts.Michelle BarkerA Simple Guide to Taking a Web Page Offline, using Service WorkersAdeyinka AdegbenroCreating Vue.js Transitions & Animation: Live ExamplesSnipcart sponsorRecreating Iron Man’s Arc Reactor Using CSS3 Transforms and AnimationsKunal SarkarContextual Styling with Custom Properties — A look at how using custom properties might make contextual styling (i.e. multiple themes on the same page) a bit easier.SimuraiMeasuring the Hard-to-Measure — A quick tip to measure how many of your users turn up on a device with no JavaScript capabilities.Harry Roberts? Code and Toolsloaders.css: Fast Pure CSS Loading Animations — See them all in action here.Connor AthertonPose: A Declarative Animation Library for HTML, SVG and React — The powers of SVG, React, and CSS combine to make easily declared and triggered element animations.Popmotionimaging-heap: A Command Line Tool to Measure The Efficiency of Your Responsive Image Markup — ..across viewport sizes and device pixel ratios.Filament GroupGet the Official Bulma Book & Learn How to Create Your Own InterfaceBleeding Edge Press sponsorBulma: A Flexbox-based CSS FrameworkJeremy ThomasA CSS Grid-Powered Expanding ‘Box Filled’ MenuMary Lou ? Golden Oldies10 Tips on Typography in Web DesignNick BabichA Step-by-Step Guide to Making Pure CSS TooltipsYoussouf El AziziHoudini: Maybe The Most Exciting Development In CSS You’d Never Heard Of — The fruits of this W3C task force are beginning to be seen in browsers now so it’s worth revisiting what they’re all about.Philip Walton Source link