January 24, 2018 Frontend Focus Issue 324 — January 24, 2018 Bootstrap 4 ReleasedAfter a lengthy beta, the final release of the fourth version of popular frontend toolkit Bootstrap is here. No breaking changes. Mark Otto, Jacob Thornton, and Bootstrap contributorsUsing CSS Clip Path to Create Interactive EffectsAs a kid, did you ever cut out pictures from magazines and create collages? Do the same on the Web with this neat technique. Mikael AinalemHow To Defer, Lazy-Load and Act with IntersectionObserverA beautiful dive into the most modern way to lazy-load resources and defer any functionality based upon an element’s visibility to users: using the Intersection Observer API. Smashing MagazineJavaScript Telemetry: Black Box Recorder for App CrashesJavaScript telemetry provides a timeline of browser events leading to an error, including UI interactions, clicks, inputs, console logs and more. Debug better with telemetry and know why your web app crashed. ROLLBAR SponsorFirefox 58: The Quantum Era ContinuesThe first post-Quantum release continues to boost performance with ‘Off-Main-Thread Painting’ and streaming WebAssembly compilation, plus support for font-display. Enjoy the point-by-point summary for developers. Mozilla HacksLearn Flexbox in 12 Interactive ScreencastsA free course focused on getting you up to speed on Flexbox as quickly as possible using novel, interactive code-driven screencasts. ScrimbaUsing the CSS Paint API, Coming to Chrome 65+The CSS Paint API lets us programmatically generate images whenever CSS properties expect them. Google DevelopersHow Firefox’s New Compiler Makes WebAssembly FasterFirefox 58 includes a 2-tiered compiler, boasting a huge speedup for WebAssembly users. Lin ClarkFinding ‘Dead’ CSSA cute way to see if CSS selectors are being used in unanticipated places (such as forgotten pages on legacy sites). Harry RobertsJobs Senior Front-End Developer for Remote Position (Full Time)Take ownership of our CSS code, help us build fantastic new JavaScript modules, and ultimately impact the way people learn design. The Interaction Design Foundation Passionate Senior Frontend Developer, AmsterdamDeveloper run company where you earn an excellent salary, generous bonus scheme, team holidays, conference budgets and a great vibe. thefrontendlab Front-end Dev Jobs at 4,000+ CompaniesTry Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. VetteryIn BriefWes Bos Launches New CSS Grid Course news Already very popular and it’s free.Wes BosjQuery 3.3.0 Released newsTimmy WillisonCSS Scroll Snap: What Is It, and Do We Need It? tutorial A pretty thorough introduction.Dennis GaebelMake Your Site Faster with Preconnect Hints tutorial With preconnect hints, reduce request latency and make your site faster.Jeremy FrankYou Didn’t Become a Front-End Developer to Fuss with a Database MONGODB SponsorLessons Learned Making Our App with Web Components storyAda Rose CannonShould You Use CSS or JavaScript for Web Animations? opinion How you can use both to produce smooth animations for your site.Zell LiewFrontend in 2018: More Consensus, Less Complexity opinionKaelan CooterDesigning for 4-Sided Viewports with CSS Grid videoJen SimmonsThe New Generation of Project Management Tools Is Here and It’s Visual toolsmonday.com SponsorCSS Gridish: A Tool to Help Your Team Adapt CSS Grid Today toolsJames Y Rauhut (IBM Design)Adele: A Repository Of Design Systems and Pattern Libraries toolsMarcin Treder$20 Free On A New Linode Account tools Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.Linode Cloud Hosting Sponsorlit: The World’s Smallest Responsive CSS Framework? code Packs a fair bit into 400 bytes.Arham Jain26 CSS Arrow Examples from CodePen codeFreebie Supply Source link