The many ways to link shapes using HTML and CSS

#411 — October 2, 2019 Read on the Web Frontend Focus Layout-Fun with CSS Grid — Tobi experiments with various CSS Grid layouts here, explaining how to work with layout changes that occur following a browser resize. Tobi Reif The Many Ways to Link Up Shapes and Images with HTML and CSS — Once you move beyond squares and rectangles, you need to step beyond traditional techniques and try out things like SVG, image maps (as old as they are!), and clip-path. Bailey Jones Webinar: Building Great Search Experiences with Search UI — Building a search application from scratch doesn’t have to be a complex task. Join our webinar on Oct 16 to learn how to create premium search experiences with our free and open-source Search UI. No expertise in UI required. elastic.co sponsor An HTML Element 'Potentially Worth $18M' to Indiegogo Campaigns — I’m not so sure of the math here, but this is an interesting play on the recent 'HTML attribute potentially worth $4.4M to Chipotle' post that makes the point that small tweaks to user experience on the web can mean big money at scale. Adrian Roselli WebHint in Firefox DevTools: Improve Compatibility, Accessibility and More — This excellent tool provides feedback about your site’s compatibility, performance, security, and accessibility. It’s now available in Firefox as an add-on. Harald Kirschner (Mozilla) Europe’s Top Court Says 'Active Consent' Is Needed for Tracking Cookies — The ruling notes that pre-checked consent boxes for dropping cookies are not legally valid and that consent must be obtained prior to storing or accessing non-essential cookies, such as tracking cookies for targeted advertising. Natasha Lomas Mozilla Disables TLS 1.0 and 1.1 in Firefox Nightly in Preparation of Deprecation — Support for both the TLS 1.0 and TLS 1.1 protocols are now disabled in Firefox Nightly. Martin Brinkmann 💻 Jobs Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers. X-Team Can You Help Our Client Migrate to Node.js? (Docklands, London) — Do you have experience and strong opinions on Node best practices? Come and share your advice with an engaged, friendly team of excellent software engineers. CareersJS Find A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📙 Articles, Tutorials & Opinion Enhancing The Clickable Area Size of UI Elements — Sometimes only very tightly defined parts of your UI elements will be clickable, but there are ways to improve the experience. Ahmad Shadeed How CSS Grid Changes The Way We Think About Structuring Our Content — A look at how the “extra layer of control” that Grid offers helps simplify your markup and lets us write less code. Kevin Powell ▶  Building Privacy-Conscious Projects — Advice for integrating best privacy practices into your next project. Heather Burns Accessibility for Web Developers: Whitepaper. Get Your Copy Progress Kendo UI sponsor Some Things You May Not Know About Chrome DevTools — Ten quick-fire features you may have not stumbled across. Loftie Ellis A Love Letter to My Website — Now this isn’t particularly related to development, but here Tobias shares his “declaration of love for personal websites” — and thinks we should be making more of them. I’m inclined to agree. House of van Schneider 3 Easy-to-Apply CSS Improvements That You Can Use in Your Project Right Now Mac Daniel beginner 💡 Tip of the Week supported by Styling links with CSS selectors CSS selectors offer a powerful way to add style, and contextual information, to HTML elements, and while you can target element IDs, classes, etc. the spec hash been fleshed out over the years to support lots of other things you can easily select to style. John Rhea highlights the wide variety in which they can be used in this excellent article, but for today we're just going to look at how they can be utilised for links. Let's say you want to style links to PDF documents, signifying to the user that the link is to a 'document', rather than a Web page. This can be achieved like so: a[href$=".pdf"] {   background: url('https://ift.tt/2n0g9v0)   0 50% no-repeat;   padding-left: 20px; } The $= operator in the attribute selector targets the end of the attribute value, looking specifically for links to PDFs. It will then add the linked PDF icon before the full link, like so: This is just one quick example of how this can be used. You could also use this technique to style links to certain sites, style internal links differently to those that are outbound, or even to style certain images by targeting the src attribute of a file. It's worth playing around and experimenting! This Tip of the Week is sponsored by Flatiron School, where you can learn software engineering, data science, or UX/UI design in just 15 weeks online or on campus. 🔧 Code, Tools & Resources A Zero DIV Pure CSS Pixel Art Animation — This is a fun experiment in CSS art, using no HTML, JavaScript or images. Not practical in production of course as the resulting CSS file is massive. Here’s a time-lapse video showing the 'making of.' Ben Evans codepen Cutestrap: A Powerful 2.7KB Pure CSS Framework — Bills itself as “a progressive CSS Framework built with modern techniques and an eye towards the future with a simple API and robust customization options”. Tyler Childs OGL: A Minimal WebGL Framework — WebGL is not the easiest technology to use on its own, so libraries like Three.js are often used to make its functionality more accessible. This is a lighter weight attempt to keep you close to the metal without cutting your hands. Nathan Gordon et al. Proactively Identify Front-End Issues with Datadog Synthetics — Try Datadog Synthetics and run root cause analyses to resolve issues before your customers notice them. Datadog Synthetics sponsor Screen Size Map for Responsive Webdesign — An interactive map that illustrates the responsive and adaptive device landscape and popularity of various screen sizes. Boana remove.bg: Remove A Background From Image — This free tool has been updated to support images up to 25 megapixels. Kaleido Cursor? — This is a somewhat weird and trippy cursor effect, making use of SVGs. Hazem Osama codepen    🗓 Upcoming Events SmashingConf New York, October 15-16 — New York, USA — The conference is sold out, but some workshop tickets are still available. Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility. Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen world-class speakers, covering the most important web performance insights. Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world.

by via Frontend Focus