A guide to data attributes, plus defining CSS 4
source link: https://frontendfoc.us/issues/429
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Let's Define CSS 4 — It seems whether CSS 4 should be a “thing” is a hot button issue right now, with most of the chatter seemingly around branding it as such for marketing reasons. Here’s Jen Simmons with her take, and the position of the CSS Working Group. This GitHub thread is open to comments from developers and designers for their thoughts .
World Wide Web Consortium
A Complete Guide to Data Attributes — Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
Chris Coyier
2021 Reasons to Use Clubhouse.io — #1 Clubhouse encourages collaboration. #2 Using it isn't a slog. #3 Your team will get more done. #4 It's free for up to 10 users. #5 You know what, we really should have considered character limits when we came up with this idea.
Clubhouse.io sponsor
▶ Making Things Better: Redefining the Technical Possibilities of CSS — In this excellent hour-long talk Rachel Andrew explores what recent advances in CSS layout have given us, what things are on the horizon and how they may change the way we see web design, plus a bit on what she hopes to see in the future.
An Event Apart
oldweb.today: Browse Old Web Pages The Old Way with Virtual Browsers — An impressive browser-based tool that allows you to browse public web archives in a recreation of a legacy browser of your choice.
Rhizome
Web Font of the Week
Certainly one of the classier options available on Google Fonts. Even if you don't like to use serif fonts for body text, it can add an interesting touch to headlines and sits well alongside neutral sans serifs.
:computer: Jobs
Product Designer - Komoot (Remote Position) — We're looking for a talented product designer to take over the design of one of our core products on all platforms (Web, iOS, Android).
Komoot
Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.
Vettery
:orange_book: News, Tutorials & Opinion
Styling The Good Ol' Button Element — A thorough look at the finer details of the button element, plus how to style it to ensure it works great on all browsers.
Ahmad Shadeed
Introducing the Page Visibility API — Modern browers generally handle page visibility stuff on their own nowadays, but you can do a little more with the API, which has excellent browser support.
John Au-Yeung
How to Create a Diagonal Layout with CSS — View aninteractive demo of the effect. Uses transforms, pseudo-elements, and custom properties to achieve the layout.
nils binder
▶ UX Tips to Avoid Losing Users' Attention — A look at a variety of design principles for drawing attention, complete with examples (covering both the web and apps), in a 40 minute talk.
Chris Atherton
How to Setup Webpack and Babel 7 for React — If you’ve learned to get a React project up and running using create-react-app, this is a nice detailed tutorial to take that to the next level using two popular tools.
Ismile Hossain
MDN Browser Compatibility Survey — This survey from Mozilla is looking to find out what your pain points are in regards to browser compatibility.
Mozilla
ImageCon: Great Media Experience for U and I
Cloudinary sponsor
▶ Making Images Lazy Load with Chrome DevTools
Umar Hansa
:wrench: Code, Tools and Resources
Blisk: A Developer-Oriented Browser for Faster App Testing — Has a number of built-in testing features including multiple device views, URL and scroll sync, auto-refresh, screenshots, and screen recorder.
Blisk Team
Paged.js: Formats HTML Content Suitably for Creating PDF Output — I think this project’s site could win an award for sheer elegance , but it’s not just elegant, there’s tons of well formatted documentation too. Or.. if you prefer,the GitHub repo.
Cabbage Tree Labs
Svelte-grid: A Draggable and Resizable Responsive Grid Layout for Svelte — The on-page demo works really nicely. You can easily resize the elements to fit after dragging them around. It’s basically a customizable masonry layout.
Vahe Araqelyan
Axe Pro: Free Accessibility Testing Tool Created for Dev Teams — Unique mix of guided & automated tests. Manage multiple tests, limit the scope of your testing, export results, and more.
Deque sponsor
Lion: A Library of Performant, Accessible & Flexible Web Components — From ING, known for their work with components, this is a set of feature-complete web components for kickstarting web projects. Announcement post is here .
ING Bank
Hex Engine: A Modern 2D Game Engine for the Browser — Still in early development. A TypeScipt- and Canvas-based game engine designed to feel similar to React.
Lily Scott
monica.css — A really tiny set of helper classes to make it easier to work with flexbox layouts.
Monica Dinculescu
Upcoming Events
ConveyUX, March 3-5 — Seattle, USA — This West Coast user experience conference features over 65 sessions across three days.
FrontCon, April 1-3 — Riga, Latvia — A two-day conference that focuses on front-end concepts and technologies. This year, there will be 23 speakers, 300+ attendees, and four workshops.
ImageCon, April 22-23 — San Francisco, USA — Learn the latest in innovative approaches to the visual web.
You Gotta Love Frontend Conference, May 14-15 — Vilnius, Lithuania — Described as having "big names with irresistible talks and a whole lot of fun".
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK