June 21, 2017 Frontend Focus Issue 295 — June 21, 2017 Building Production-Ready CSS Grid Layouts“to start working with CSS grid, you first need to set aside the habits, assumptions and practices that have enabled you to create advanced CSS-based layouts” Morten Rand-HendriksenGet Ready for Web BluetoothA look at the current state of Web Bluetooth support and how it can play an important role in the physical web and projects using beacons and mobile devices. Jen LooperCSS Animations vs Web Animations APIA comparison between using pure CSS versus JavaScript’s native API for animation. Ollie WilliamsForwardJS Tickets on Sale TodayAttend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July. ForwardJS SponsorRefactoring CSS Without Losing Your Mind How to decide what to refactor and when; how to refactor code whilst still shipping features; how to avoid regressions when adding new CSS and more. Harry RobertsBehind Stripe Connect’s Front-End ExperienceA look at how payment platform Stripe used several next-gen web technologies to bring their new suite of tools to life. Benjamin De CockWebpack 3.0 Officially ReleasedNow with scope hoisting, ‘magic comments’, and more. The upgrade process from v2 is also designed to be very smooth. Sean T. LarkinThe Ever Growing ‘Append-Only’ Stylesheet Problem“I’ve heard it from lots of lots of developers. The years tick by on their projects, and all they ever seem to do is add to their CSS, never remove.” Chris CoyierJobs Web Application Engineer – Apple Inc. (California, USA)Our Media Products Engineering team is looking for a software engineer to build and enhance our algorithmic quality evaluation tools. Apple Inc. Frontend Developer at X-Team (Remote)We seek a developer with extensive Frontend knowledge. We’re 100% remote and provide the funding needed to help you achieve your goals and grow. X-TeamCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefHandling Long and Unexpected Content in CSS tutorial How to handle situations where content overruns the designed space.Ahmad ShadeedGetting Started with Draft.js tutorial A framework for creating browser-based text editors.Julian KrispelCSS Tips and Tricks for Making Aspect-Ratio Friendly Boxes tutorialChris CoyierSet Up File Persistence with Chrome DevTools Workspaces tutorial Changes you make in the DevTools can easily be saved to disk.Google DevelopersFaster Page Load Using Lightweight CSS & SVG Animation (without JS) tutorial Covers the basics of CSS animation, and the process of setting up an animation, exporting an SVG, and adding classes.Kyle HenwoodIntroduction to Webpack: Entry, Output, Loaders, and Plugins tutorial A step-by-step guide, going from an empty configuration file to a complete setup to bundle a project.Jeremias MenichelliDesigning A Simple Web Page with mini.css tutorialAngelos ChalarisAn Introduction to the ‘fr’ CSS Unit tutorialRobin RendleIt’s easy to version control your database alongside your application Connect your database to your version control system with SQL Source Control and keep track of every change.Red Gate SponsorPaint the Web with CSS video Using CSS as an artistic medium to create images and animations made up of pure code.Eva LettnerThe Illusion of Speed opinion “If you could take a 50% hit in real world performance and get a site that feels 50% faster, would you?”Paul BakausWhat Does a Well-Documented CSS Codebase Look Like? opinionKaloyan KosevHTML Imports Are The Best Web Component opinionAshley GullenHEIF: A First Nail in JPEG’s Coffin? opinion Could Apple’s new image file format be JPEG’s replacement?Kelly Thompson$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 SponsorFeather: A Collection of Open Source SVG UI Icons tools Line-based and monochrome.Cole BemisCell: A Self-Constructing Web Framework Powered by A Self-Driving DOM codeIntercellularhtml5-parser: Fast C-Based HTML 5 Parsing for Python codeKovid GoyalGrid Styled: A Responsive React Grid System Built with styled-components code Source link