July 19, 2017 Frontend Focus Issue 299 — July 19, 2017 A Real World Guide to WebRTCA practical guide to the relatively complex world of WebRTC, a set of real-time communications mechanisms that can be useful for things like voice and video chat, file transfers, chat, etc. deepstreamHubDesigning The Perfect SliderA thorough guide to things you need to consider when creating ‘slider’ UI elements. Vitaly FriedmanStop Using Resets: An Argument in Visual ExamplesJens argues that CSS resets achieve what devs “often do anyway” adding that the same result can be acheived “with one or two declarations instead of an entire extra style sheet”. Jens Oliver MeiertAnnouncing: How to Earn More as a Software DeveloperTechnical knowledge alone isn’t enough—increase your income by leveling up your “soft skills.” Learn new skills faster, command more respect, find work you love, and earn what you’re worth. Get the book for $0.99 (48 hours only). Simple Programmer SponsorSass 3.5 ReleasedSass now fully supports CSS custom properties (more info here), first class functions, bracketed lists, and the ::slotted pseudo-element. Natalie WeizenbaumMeasuring Web Performance; It’s Really Quite SimpleKey pointers on how to establish a practical approach to performance, what to measure, and how to set goals. David Gilbertson(Now More Than Ever) You Might Not Need jQuery“a good bit has changed in browser land since the last ‘You Might Not Need jQuery’ article you might have stumbled upon” Ollie WilliamsTagUI: A General Purpose Web Interaction Automation ToolCross-platform and supporting Chrome, Firefox, PhantomJS, TagUI lets you create natural-language style scripts for performing Web actions. Tebel.AutomationJobs Senior Front-End Software Engineer (San Francisco, CA)New Relic is seeking a talented front-end engineer to join us in building web applications to visualize and analyze data. New Relic Front-End Developer (Remote) Aurity.coCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefReducing CSS Bundle Size 70% tutorial ..by cutting the class names and using scope isolation.Gajus KuizinasAdvanced SCSS, or 16 Cool Things You May Not Have Known Your Stylesheets Could Do tutorialJarno RantanenIntroduction to Clipping Out Shapes with CSS’s `clip-path` tutorialAlligator.ioWebpack’s import() Will Soon Fetch JS + CSS — Here’s How You Do It tutorialJames GillmoreHow to Use CSS Variables for Animation tutorialDennis GaebelCreating a Cut-Out ‘Sticky Tape’ Effect for Images with SVG and CSS tutorialAna TudorBuilding Better Backgrounds tutorial Approaches to stacking CSS background images on mobile for improved readability, using object-fit and ES2015+.Zack CoteResponsive Typography using calc(), vw, and Sass Superpowers tutorial How to precisely scale text as the viewport expands and contracts.Nate YorkAdd interactive features to your site in minutes With features like in-app notifications, real-time dashboards and multi-user collaboration. Start for free, with a few lines of code.Pusher SponsorWhat I Learned About Vue.js from Building a Chrome Extension storyvuejs developersEvergreen Websites for Evergreen Browsers video Rachel’s talk from this year’s Fluent conf, covering CSS Grid, Feature Queries, Exclusions and more.Rachel AndrewWhat’s New in Chrome 59? video Take a look at the new features of Chrome 59 (e.g. Headless Chrome). Filmed at Ember London.Will RaxworthyMusings on HTTP/2 and Bundling opinionJeremy WagnerTroubleshoot slow web apps with Datadog tools Get alerts for performance problems and find the bottleneck in your application with end-to-end request tracing.Datadog SponsorIntroducing the Website Speed Test Image Analysis Tool toolsEric PortisDoppioJVM: A JVM in 100% JavaScript coderaf-schd: A Scheduler Based on requestAnimationFrame codeAlex ReardonBabylon.js 3.0: A Framework for Building 3D Experiences code Here’s a demo of it in action.David Catuhe Source link