February 21, 2018 Frontend Focus Issue 328 — February 21, 2018 How Chrome’s New Ad Filtering WorksChrome has now begun to block ads that don’t meet the Better Ads Standards. What does this mean and how does it work? GoogleEverything You Need to Know About CSS VariablesHow variables work natively in CSS, and how to use them to make your life a lot easier. Ohans EmmanuelShipping System Fonts to GitHub.comAn explainer on why GitHub began to focus on system fonts, how they coded and tested it, and what they’ve done since making the change. Mark OttoFix JavaScript Bugs Like a Boss ?Instantly know whats broken and why. Get real-time monitoring, alerting, analytics for JavaScript errors, and worry less about breaking things. Learn more. ROLLBAR SponsorA Front End Interview HandbookHeaded to a job interview any time soon? Here are some questions (and answers) worth being prepared for. Yangshun TayHTTPS or Bust: Chrome’s Plan to Label Sites as ‘Not Secure’Starting this July, with the release of Chrome 68, non-HTTPS sites will be marked as ‘not secure’. This post is an extensive review of HTTPS ubiquity, how we got here, and what happens next. Patrick R. DonahueAn Approach to Keylogging with CSSInteresting proof of concept using CSS to log keypresses under certain conditions. Max ChehabVariable Order Tables using CSS VariablesA neat HTML/CSS only experiment, using CSS Custom Properties to order a table and sort its contents by ascending/descending order. Roman KomarovDesigning A Perfect Responsive ConfiguratorDives deep into the dos and don’ts of designing a responsive Web-based product configurator, with a checklist of things to use and keep in mind. Smashing MagazineJobs Senior Front End Engineer at Plectica (New York, NY)Come build a beautiful collaborative platform for visual brainstorming and thinking with SVG, WebSockets and all sorts of other fun. Plectica Lead React/Redux Engineer – Remote, SF, or Halifax, CanadaWe’re an ambitious startup seeking an experienced front-end engineer to bring our React architecture forward. Manifold Find a Job You’re Passionate AboutVettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job. VetteryIn BriefOur Mobile Focused Newsletter: Mobile Dev Weekly Each week we cover the vast mobile landscape, spanning the web, hybrid and native app development.CooperpressProgressive Web Apps Coming to All Chrome Platforms tutorial …and how to try it.Kenneth ChristiansenHandling Long Titles with Truncation via CSS or JS tutorialLuke WhitehouseFallback Font Stacks for More Robust Web Typography tutorialChris CoyierThings You Need to Know About Working with SVG in VS Code tutorialBurke HollandBuilding a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 3) tutorial Deploy our Lambda function using the AWS Command Line Interface and verify that the bot fully works as expected.MONGODB SponsorWhat the Heck is the ‘Shadow DOM’ Anyway? tutorialRowan LuptonSpicing Up the Bootstrap Carousel with CSS3 Animations tutorialMaria Antonietta PernaHow to Build a Responsive Site with Bootstrap tutorialSyed Fazle RahmanWhitespace on the Web with CSS Grid videoJen SimmonsCSS Grid Like You Are Jan Tschichold videoJen SimmonsSave Time with the Best, Fastest Angular Spreadsheets & UI Components toolsGrapeCity JavaScript Solutions SponsorGradPad: A CSS Gradient Generator and Gallery toolsOur Own ThingGifski: A High Quality GIF Encoder toolsKornel Lesi?skiPressure.js: Handle Force Touch, 3D Touch, and Pointer Pressure code Works with Surface, iOS devices, MacBooks, and more, with a single, simple API.Stuart YamartinoSlice Revealer: A Reveal Effect Where Slices Cover and Uncover An Image demo GitHub repo.Codrops3D iMacs with Parallax Effect Created Entirely with CSS demo A well-executed, convincing effect.James MellersLinux Cloud Hosting Starting at 1GB of RAM for $5/mo Linode Cloud Hosting Sponsor Source link