Learn Programming

In this wacky and satirical post, Heydon Pickering describes a wild new technology called Cascading Style Sheets that solves a lot of the problems you might bump into when styling things with JavaScript: A good sign that a technology is not fit for purpose is how much we have to rely on workarounds and best practices to get by. Another sign is just how much code we have to write in order to get simple things done. When it comes to styling, JavaScript is that technology. CSS solves JavaScript’s styling problems, and elegantly. The question is: are you willing to embrace the change, or are you married to an inferior methodology? Yes, this is a funny post but the topic of CSS-in-JS is hot and quite active. We recently shared a video of Bruce Lawson's excellent talk on the subject and published a roundup of chatter about it as it relates to React. Chris also linked the conversation back to the age-old question of how we deal with unused CSS . Direct Link to Article — Permalink...

Maya Benari : Accessibility is a crucial part of government product design. First, it’s the law . Federal agencies face legal consequences when they don’t meet accessibility requirements. Second, it affects us all. Whether you have a motor disability, you sprained your wrist playing dodgeball, you need a building to have a ramp for your wheelchair or stroller, or you literally just have your hands full, we all find ourselves unable to do certain things at different points in our lives. Accessible products are better products for everyone. But accessibility is hard: It comes across as a set of complex rules that are hard to follow. Not everyone feels confident that they’re doing it right. It’s difficult to prioritize alongside other work and project needs. How do you make sure you’re building products that are accessible and inclusive? So they set about building a guide and did a heck of a job . This is 18F work, the same team that did the U.S. Web Design System (see video present...

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations. For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post. Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time. Real-world use case: A data dashboard Dashboards can be used for pretty much anything. As long as you've got data to analyze, you’re good to go, whether that be some sales data or the average weather for the last 20 years....

(This is a sponsored post .) In March and April 2018, Kentico conducted the first global report about the state of headless CMS market. We surveyed 986 CMS practitioners in 85 countries about their opinions, adoption, and plans for using headless CMS. The survey contains valuable industry insights into topics such headless CMS awareness, preferred headless CMS models, current and future uptake of the headless CMS approach, and much more, from leading industry players. Download your complimentary copy of the full report now. Direct Link to Article — Permalink The post ​The State of Headless CMS Market appeared first on CSS-Tricks . from CSS-Tricks https://synd.co/2zA8tFo

The most FA of all the FAQs. Here's Laura Kalbag: Find what you love. Don’t worry about needing to learn every language, technique or tool. Start with what interests you, and carve your own niche. And then use your powers for good! And my own: Buy a domain name. Figure out how to put an HTML file up there. Isn’t that a powerful feeling? Now you’ve got table stakes. Build something. Definitely, go read other A Book Apart author answers because they are all great. My other favorite is just three words . Direct Link to Article — Permalink The post What bit of advice would you share with someone new to your field? appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2Ld8obQ

I enjoyed Bruce Lawson's talk on this holiest of wars. It's funny and lighthearted while being well researched and fairly portraying the good arguments on both sides. The post CSS-in-JS: FTW || WTF? appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2LsModk

What comes to your mind when React 16 comes up? Context ? Error Boundary ? Those are on point. React 16 came with those goodies and much more, but In this post, we'll be looking at the rendering power it also introduced — namely, the ability to render children using Fragments and Array Components. These are new and really exciting concepts that came out of the React 16 release, so let’s look at them closer and get to know them. Fragments It used to be that React components could only return a single element. If you have ever tried to return more than one element, you know that you’ll will be greeted with this error: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag . The way out of that is to make use of a wrapper div or span element that acts as the enclosing tag. So instead of doing this: class Countries extends React.Component { render() { return ( <li>Canada</li> <li>Australia</li> <li>Norway<...

You clever dog. You've rooted it out! It turns out when you build things with serverless technology you're still using servers. Pardon the patronizing tone there, I've seen one-too-many hot takes at this point where someone points this fact out and trots away triumphantly. And yes, because serverless still involves servers , the term might be a bit disingenuous to some. You could be forgiven for thinking that serverless meant technologies like web workers , which use the client to do things you might have otherwise done on a server and is where the term serverless was headed. Alas, it is not. What serverless really means: Using other people's servers instead of running your own. You're probably already doing that, but serverless takes it to another level where you have no control over the server outside of telling it to run a bit of code. You don't need to think about scaling — that's the serverless provider's problem. You are only paying per exec...

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that. But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The "top" one is fixed position and sort of leaves a hole that another taller gradient peeks through from below on scroll. Direct Link to Article — Permalink The post Scrolling Gradient appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2twQrhs

Here’s a nifty post by Diana Mounter all about the design systems team at GitHub that details how the team was formed, the problems they've faced and how they've adapted along the way: When I started working at GitHub in late 2015, I noticed that there were many undocumented patterns, I had to write a lot of new CSS to implement designs, and that there weren’t obvious underlying systems connecting all the pieces together. I knew things could be better and I was enthusiastic about making improvements—I quickly discovered that I wasn’t the only one that felt this way. There were several folks working on efforts to improve things, but weren’t working together. With support from design leads, a group of us started to meet regularly to discuss improvements to Primer and prioritize work—this was the beginnings of the design systems team. This whole post had me nodding furiously along to every word but there was one point that I particularly made note of: the part where Diana ment...

Let’s use React , styled-components , and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It's an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate. This is an intermediate-level walkthrough that assumes familiarity with React and basic animation concepts. Our React guide is a good place to start. Here's what we're aiming to make: See the Pen React Stripe Menu by Alex ( @aholachek ) on CodePen . View Repo Breaking down the animation First, let's break down the animation into different parts so we can more easily reproduce it. You might want to check out the finished product in slow motion (use the toggles) so you can catch all the details. The white dropdown container updates both its size and position. The gray background in the bottom half of the dropdown container transitions its height. As the dropdown container moves, th...

I recently wrote Here’s the thing about "unused CSS" tools , where I tried to enumerate all the challenges any tool would have in finding truly "unused" CSS. The overarching idea is that CSS selectors match elements in the DOM, and those elements in the DOM come from all sorts of places: your static templates, dynamic templates based on server-side state, and of course, JavaScript, which can manipulate the DOM in any way at all, including pull things from APIs and third parties. With all that at play, how can any tool give us a truly accurate picture of unused CSS, to the point that actually removing that CSS isn't just as dangerous as leaving it alone? So, I said: And yet, I don't think these tools are useless — they are just... tools . Their use can actually be a positive step toward better code. Their use says OK, I admit it, I'm a little afraid our CSS. You could use this tool to get a broad picture of what your unused CSS might be, then combin...

There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. What if you could take just the shape of an emoji and use it like a normal glyph? You can! Preethi Sam shows how: .icon { color: transparent; text-shadow: 0 0 #ec2930; } Plus, an alternate technique using background-clip . Note that emojis render differently across platforms, so careful! Direct Link to Article — Permalink The post Emojis as Icons appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2lHnlb7