January 11, 2017 — Read this e-mail on the WebFrontEnd Focus Issue 272 — January 11, 2017 Front-End Tools: Some Top Finds of 2016A look at Louis Lazaris’ favorite front-end tools of 2016, including Modaal, postcss-grid-kiss, MJML and Intercooler.js. SitepointAn Introduction to Building And Sending HTML EmailA broad and straightforward guide to various things you’ll need to think about as a Web developer when sending HTML email. Lee MunroeCSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled ComponentsWhatever technology you use “there is no substitute for a well defined styling architecture that makes it intuitive for other developers to contribute to your code base”. Perez PriegoRethinking the Periodic Table with a JavaScript Sunburst ControlIdeal for visualizing hierarchical data, sunburst charts display categorical data “tiers.” Walk through four-steps, from preparing the data model to building the chart view, to display the periodic table of elements as a sunburst chart on the web using Wijmo. Wijmo SponsorBuild a Custom CMS for a Serverless Static Site GeneratorHow to build the bare bones of a static site generator with content authored by an admin user via a standard web form, with no database necessary. John PolacekResilient Web Design: History, Ideas and ApproachesA free web-based book highlighting ideas and approaches to web design that have proven to be resilient over the years. Jeremy KeithImproving the Look of Links with the CSS Text Decoration ModuleLinks have had some of the strictest styling limits — limitations that can affect their legibility. 2 new CSS properties will soon help, however. Dudley StoreyJobs Senior Frontend EngineerCredit Karma is seeking a Front-End Engineer to join our SF team to help build the next generation of our web platform with React and Node.js. Drive client-side technical direction, build scalable web apps and deliver ground-breaking user experiences. Credit Karma Front-End Developer at Jovoto (Berlin) JovotoCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefThe Most Hearted CodePens of 2016 newsTim HolmanThe Lead Developer 1-day conference for Tech Leads. 21 Feb, New York. news Hear from Rebecca Murphey, Lara Hogan and more on leadership, managing people & running effective teams.White October Events SponsorSloped Edges with a Consistent Angle in CSS tutorialKilian ValkhofArchitecting A Web App to ‘Just Work’ Offline tutorialIslam SharabashWhat Benefits Are There to Using a ‘span’ Instead of ‘input’? tutorialStack OverflowA Guide to Bootstrap 4.0’s Powerful Flexbox Grid System tutorialDirty CSS Hacks for Responsive Emails tutorialSara ChisholmCreating a Custom HTML5 Video Player and The Shadow DOM tutorialMaria CampbellA Thing To Know about Gradients and ‘Transparent Black’ tutorial A quirk with how Safari renders gradients that you may want to be aware of.Chris CoyierCreating a Symmetrical, Animated ‘Mirror’ Effect with CSS tutorialMary LouLearn to build apps in React with Rangle’s Online Training course Register to join Rangle’s free ‘Intro to React’ online training course for developers on February 7Rangle.io SponsorSky UK’s CSS Style Guide tools Used by the team at UK broadcaster Sky, with details on architecture, formatting and naming conventions.Sky UKEveryday Front-End Visual Studio Code Extensions, Tips and Tricks toolsLuca Trazziaccesslint.js: Keep Accessibility Errors in Check tools Works with dynamic content by checking for accessibility issues each time the DOM changes.AccessLintxvg: A Chrome Extension for Debugging SVG Paths toolsVarun VachharColorMe: Visualize The CSS Color Function tools A helpful UI for applying adjusters to a base color and seeing a visual of the adjustments. Accompanying blog.Tyler Gawawsm.css: Simple CSS Library for Semantic HTML Markup code Essentially an alternative ‘default’ styling for regular tags.Igor AdamenkoFlexdatalist: jQuery Autocomplete with ‘datalist’ Element Support codeSérgio Dinis LopesEQCSS: A CSS Extension for Element Queries, Scoped CSS, and a Parent selector code Runs in the browser with JS, so no local compilation step needed.Siema: Lightweight and Simple Carousel with No Dependencies codePawel GrzybekBttn.css: Simple, Styled CSS Buttons codeGanapati V SCurated by Peter Cooper and published by Cooperpress. If you like this, you may also enjoy: JavaScript Weekly, Node Weekly, and React Status.Stop getting FrontEnd Focus : Change email address : Read this issue on the Web© Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK Source link