November 1, 2017 Frontend Focus Issue 314 — November 1, 2017 Creating HTML Web Components with Vanilla JSWhile native Web Component support isn’t 100% yet, polyfills are available, and this tutorial walks through what’s involved to create your own HTML tags as components. Ayush GuptaHTTP 103: A Draft HTTP Status Code for Indicating ‘Hints’The idea is to allow Web servers to send back certain headers (e.g. preload link headers) early before the main response. IETF? Add PDF Support to Your Web App in No TimeA step-by-step tutorial on how to display and annotate PDF files inside your web app using the PSPDFKit JavaScript library. Features include cross-browser support (IE 11 and up), mobile optimized UI, and no server-side component. PSPDFKit SponsorHow to Write a JS-Free Todo App With Only HTML and CSSAn interesting creative attempt to create a basic ‘web app’ using nothing but HTML & CSS. Matt ZeunertWeb Typography: Designing Tables to be Read, Not Looked AtRichard Rutter goes deep on how to improve the readability of your data tables. Richard RutterI Watched All The Chrome Dev Summit Vids So You Don’t Have ToThe takeaway: Google wants you to build PWAs, reduce JS file size, use Web Components, and configure your forms to support autofill. Dan FabulichBuilding a Fast Search ExperienceHow popular car selling platform Auto Trader created a high-performance search experience that regularly returns results in less than a second. Elliot SumnerThe Future of Loading on the WebSam Saccone explores recently shipped performance primitives, cutting edge performance techniques, and a glimpse into what the future of loading on the web may hold. Google Chrome DevelopersThe Accessibility CheatsheetA helpful overview with some simple things you can do to take positive steps towards a more accessible web. From 2015, but worth revisiting. Ire AderinokunJobs Frontend Developer at X-Team (Remote)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. X-Team UI Designer/Frontend DeveloperInterested in #tech4good? We’re seeking a UI Designer to work across ideation, prototyping coding for international development. Catalpa International craigslist seeks JavaScript Developers (San Francisco, CA)CL seeks JS developers to join our small (~50) team. Come help us save the world, or at least our corner of the Internet. craigslistIn BriefMicrosoft’s Plan to Bring Progressive Web Apps (PWAs) to Windows 10 newsPaul ThurrottW3C Invites Implementations of Preload news This spec defines the preload keyword that may be used with link elements.W3CJS Kongress Munich – The Future of JavaScript on Nov 13-14 news Join us for two days on the Future of JavaScript (inc. WebAssembly Tooling). Topics include Frontend Architecture, webpack, Angular, React, Perf, etc.JS Kongress Munich SponsorUnlocking the Benefits of CSS Variables tutorial The benefits of CSS variables and helpful tips and tricks for working with them.Jonathan HarrellHow to Build an Interactive Virtual Globe with Three.js tutorialJeanne Castillo3 Commands to Add SSL to ‘localhost’ for https://localhost on MacOS tutorialPaul BrowneA Look at the Relatively Uncommon ‘output’ HTML Element tutorialRobin RendleUsing Redux When Building Chrome Extensions tutorialBruno AntunesEmulating CSS Timing Functions with JavaScript tutorialAna TudorGetting Around a Revoked Certificate in macOS tutorialGeoff GrahamUsing ReactJS, ES6 & JSX to Build a UI (the rise of MERN) tutorial Part 5 of our Modern Application Stack series – Why ReactJS is driving the development of modern apps.MONGODB SponsorThe Web Began Dying in 2014, Here’s How opinion “GOOG and FB now have direct influence over 70%+ of internet traffic.”André StaltzAn Animated Flexbox Playground tools A helpful visual reminder of what effect certain Flexbox properties have.Blake Bowengrid-kiss: A PostCSS Plugin to Keep CSS Grids ‘Stupidly Simple’ toolsSylvain Pollet-VillardKoa11y: An Open Source Web Accessibility Tool tools A desktop app for automatically detecting Web accessibility issues.Jared WilcurtA Better Focus? demo An attempt at a more ‘visually-pleasing focus for keyboard users’.CodePen Source link