Posts
Learning Synths
Super fun little thing that teaches you the basic vocabulary of synthesizers (and sound in general). Learning Synths from Brad Frost https://ift.tt/2LroHoj
Nownownow
Matthias Ott, relaying an idea he heard from Derek Sivers: Many personal websites, including this one here, have an “about” page. It’s a page that tells you something about the background of a person or about the services provided. But what this page often doesn’t answer – and neither do Twitter or Facebook pages – is what this person really is up to at the moment . A page that answers questions like: What are you focused on at this point in your life? What have you just started working on that excites you like nothing else? Did you just move to a new town? Did you start a new career as a Jengascript wrangler? To answer all those questions, Derek suggests to create a “now page”. A page that tells visitors of your site “what you’d tell a friend you hadn’t seen in a year.” Very cool idea! Derek has a directory page of people who have done this. I have more scattered thoughts: It's funny how social media sites aren't very helpful with this. You'd think looking at som...
Which CSS IS AWESOME makes the most sense if you don’t know CSS well?
Peter-Paul posted this question: Which of the examples in the image do you consider correct? If you know CSS well, don't reply, just retweet. If you don't know CSS too well, please reply to the poll in the next tweet. pic.twitter.com/4bgnf9Wdkc — ppk 🇪🇺 (@ppk) June 17, 2019 Note the interesting caveat: only vote in the poll if you don't know CSS well. The winning answer was D ! You gotta wonder if the result would have been different if the request for non-CSS experts wasn't there. I like to think I know CSS OK, so I didn't vote. My brain goes like this: I think he's asking "by default," so the answer may assume there's no other CSS doing anything to that text. I wish I knew why the box was that particular width, but I guess I'll just assume it's a set width . It's not B because ellipsis stuff requires extra stuff , and doesn't work on multiple lines like that — unless we're talking line clamping , which is e...
Getting to Know the useReducer React Hook
useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer, initialState); What’s the good for? Well, think about any situation where having the first loaded state of the application might be nice. Let’s say the starting point on an interactive map. Maybe it’s an app that lets the user build a custom car with custom options from a default model. Here’s a pretty neat demo of a calculator app that puts useRedcuer to use in order to reset the calculator to a default state of zero when clearing it out. See the Pen Basic React Hook Calculator by Gianpierangelo De Palma ( @dpgian ) on CodePen . We’re going to dig into a couple more examples in this post, but let’s first look at the hook itself to get a better idea of what it is and what exactly it ...
What Is A Web Browser?
What comes to mind when you think of visiting a web page? It might not work quite the way you assume. And in order to code, you’ve got to learn to think the way your browser does. What is a... The post What Is A Web Browser? appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2KCZkAh
Why I don’t use web components
Here’s an interesting post by Rich Harris where he’s made a list of some of the problems he’s experienced in the past with web components and why he doesn’t use them today: Given finite resources, time spent on one task means time not spent on another task. Considerable energy has been expended on web components despite a largely indifferent developer population. What could the web have achieved if that energy had been spent elsewhere? The most convincing part of Rich’s argument for me is where he writes about progressive enhancement and the dependence on polyfills for using web components today. And I’m sure that a lot of folks disagree with many of Rich’s points here, and there’s an awful amount of snark in the comments beneath his post, but it’s certainly an interesting conversation worth digging into. For an opposing perspective, go read the very last paragraph in the last installment of our Web Components Guide , where author Caleb Williams suggests that there's no need...
Linkbait 43
Back from hiatus. I’m starting up serious planning and writing of “CSS for JavaScripters” so this is a CSS-heavy linkbait, mostly filled with reminders to myself. Every-layout.dev is easily the most important CSS resource to be unveiled in recent months. (In fact, it was unveiled at CSS Day , which was a nice touch.) Serious, in-depth, algorithmic discussion of several popular CSS layouts and how to construct them with care. The 2019 State of CSS survey results. Contains several interesting gems. The figure that really surprised me is that 85% of the respondents is male. I thought CSS had a slightly higher ratio of women. Then again, maybe it’s the marketing of the survey that caused the disparity. (I never heard of it until I saw the results.) Or my gender guesstimate is just wrong. The CSS mindset : [...] the declarative nature of CSS makes it particularly difficult to grasp, especially if you think about it in terms of a “traditional” programming language. Other programming ...
Linkbait 43
Back from hiatus. I’m starting up serious planning and writing of “CSS for JavaScripters” so this is a CSS-heavy linkbait, mostly filled with reminders to myself. Every-layout.dev is easily the most important CSS resource to be unveiled in recent months. (In fact, it was unveiled at CSS Day , which was a nice touch.) Serious, in-depth, algorithmic discussion of several popular CSS layouts and how to construct them with care. The 2019 State of CSS survey results. Contains several interesting gems. The figure that really surprised me is that 85% of the respondents is male. I thought CSS had a slightly higher ratio of women. Then again, maybe it’s the marketing of the survey that caused the disparity. (I never heard of it until I saw the results.) Or my gender guesstimate is just wrong. The CSS mindset : [...] the declarative nature of CSS makes it particularly difficult to grasp, especially if you think about it in terms of a “traditional” programming language. Other programming ...
Relearn CSS layout: Every Layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. Source: Relearn CSS layout: Every Layout from Brad Frost http://bit.ly/2Y33l4n
Hello Subgrid!
Rachel Andrew’s talk at CSSconf is wonderful because it digs into one of the most exciting changes that’s coming soon to a browser near you: subgrid ! That’s a change to the CSS Grid spec that allows for much greater flexibility for our visual designs. Subgrid allows us to set one grid on an entire page and let child elements use that very same grid tracks. The reason why I’m very excited is because this solves one of the most annoying visual layout issues that I’ve come across since becoming a web developer, and if that sounds bonkers and/or wonderful to you, then make sure to check out Rachel’s talk because she does a much better job of describing this than I possibly could: Direct Link to Article — Permalink The post Hello Subgrid! appeared first on CSS-Tricks . from CSS-Tricks https://www.youtube.com/watch?v=vxOj7CaWiPU
Drop caps & design systems
Ethan Marcotte has written up his process for how to make drop caps accessible for screen readers and browsers alike. All of that is very interesting and I’m sure I’ll use a technique like this in the near future, but the part that made me hop out of my seat is where Ethan notes his experience with design systems at Vox: Since rolling out our new and improved drop caps, we’ve continued to iterate on them. (Including fixing a number of bugs that I, a professional web designer, introduced.) We’ve also discussed potential changes to the custom styles feature, in order to make it sustainable. But for my money, the real benefit of the work wasn’t the drop caps themselves, but the process that emerged from it. This is something I’ve been thinking about a lot . The tricky thing to understanding design systems is that the process of creating and maintaining them is just as important than the code it uses. Sure, yes, fixing small things is very important, but the long-lasting improvements...
Every Layout
Every Layout is a new work-in-progress website and book by Heydon Pickering and Andy Bell that explains how to make common layout patterns with CSS. They describe a lot of the issues when it comes to the design of these layouts, such as responsive problems and making sure we all write maintainable code, and then they’ve provided a handy generator at the end of each article to create our own little frameworks for dealing with these things. They also have a complementary blog and one of the posts called "Algorithmic Design" caught my eye: We make many of our biggest mistakes as visual designers for the web by insisting on hard coding designs. We break browsers’ layout algorithms by applying fixed positions and dimensions to our content. Instead, we should be deferential to the underlying algorithms that power CSS, and we should think in terms of algorithms as we extrapolate layouts based on these foundations. We need to be leveraging selector logic, harnessing flow and wra...
The Technical Side of Design Systems at CSS Day in Amsterdam
I had a fantastic time traveling to Amsterdam to speak at CSS Day (I was part of the + UI Special day). It was an absolutely phenomenal event and I learned a ton from all the amazing speakers. In my talk, I discuss a bunch of topics around the technical aspects of creating and maintaining design systems. Since the organizers are so awesome, they turned around and published the videos of the conference pretty much immediately! Which means you can check out my talk: Here are some of the topics I hit on in my talk: Your Sketch library is not a design system – the heart and soul of a successful design system is a collection of reusable code components that build real software applications There are many technical benefits of design systems : reducing technical dept, faster and higher-quality development, reduces QA effort, potentially makes adopting new technologies faster, it’s a useful reference, and it’s a future-friendly foundation to build and iterate over for years to come A...
Why would a screen reader user have a braille display?
Last week, I was invited to address the annual conference of the UK Association for Accessible Formats . I found myself sitting next to a man with these two refreshable braille displays, so I asked him what the difference is. On the left is his old VarioUltra 20, which can connect to devices via USB, Bluetooth, and can take a 32MS SD card, for offline use (reading a book, for example). It’s also a note-taker. He told me it cost around £2500. On the right is his new Orbit Reader 20 , “the world’s most affordable Refreshable Braille Display” with similar functionality, which costs £500. As he wasn’t deaf-blind, I asked why he uses such expensive equipment, when devices have built-in free screen readers. One of his reasons was, in retrospect, so blazingly obvious, and so human. He likes to read his kids bedtime stories. With the braille display, he can read without a synthesised voice in his ear. Therefore, he could do all the characters’ voices himself to entertain his children. My ...
How to Modify HTTP Headers in the WordPress Admin Area
WordPress provides the wp_headers filter hook and send_headers action hook to add and modify HTTP requests. For front-end pages, these are ideal hooks that should be used whenever possible. Unfortunately however neither hook works on all pages in the WordPress Admin Area. After some experimentation, I found an easy solution to modify HTTP headers on any/all pages in the Admin Area. wp_headers = Doesn’t Work in the Admin Area At WP-Mix.com , I posted a tutorial about how to Disable the Chrome XSS Auditor . The code provided in the original version of the tutorial used wp_headers to add the XSS header: // Add HTTP XSS Header function shapeSpace_add_xss_header() { $headers['X-XSS-Protection'] = '0'; return $headers; } add_filter('wp_headers', 'shapeSpace_add_xss_header'); But as JanWillem pointed out, it doesn’t work in the Admin Area. It does work on Posts, Pages, and other CPT screens, but nowhere el...
Components, yo.
I see VuePress just went 1.0 . Explained simply, it's a static site generator based on Vue . But of course, you work in Vue, which means you work in components . All the modern JavaScript frameworks are component-based. Even when they disagree with each other about specific things (like how Svelte requires compilation), they all seem to agree on the model of working in components. React is all components. A popular static site generator for React is Next.js . The Vue version of that is Nuxt.js . Then there is Gatsby which is all React. (Listen to our latest ShopTalk Show as we discuss it.) Gridsome seems like the most 1-to-1 comparison in Vue-land, the notable comparison being how they both are designed to suck in data from any source. Components though, of course. I'm not sure there is a flagship Angular-based static site generator, but they are out there, and Angular is components all the way down. Components are so ubiquitous that perhaps you don't even think ...
Building the most inaccessible site possible with a perfect Lighthouse score
This post flips the topic of accessibility best practices on its head and demonstrates how to exclude everyone, even while still scoring perfectly on accessibility tools. The moral of the story: automated accessibility tools can help but shouldn’t be the only thing you rely on to craft accessible experiences. from Brad Frost http://bit.ly/2MMmkPf
A11Y with Lindsey
Lindsey Kopacz has a wonderful blog about accessibility . I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed . For example: An Introduction to ARIA States 3 Simple Tips to Improve Keyboard Accessibility Create custom keyboard accessible checkboxes Regarding that last one, I remember learning from Sara Soueidan that a good tip for this to position them over the new custom checkboxes and hide them via opacity instead of hiding the native checkboxes by clipping them away. That covers the scenario of people exploring a touch screen for native interactive elements. The post A11Y with Lindsey appeared first on CSS-Tricks . from CSS-Tricks http://bit.ly/2KhwwNE
Grid, content re-ordering and accessibility
Take this: <ol> <li>Get hungry</li> <li>Order pizza</li> <li>Eat pizza</li> </ol> That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that DOM order. Do nothing, and the list items will flow in the block direction of the document. Apply flexbox, and it will flow in the inline direction of the document. But flexbox and grid also allow you to muck it up. Now take this: ol { display: flex; flex-direction: row-reverse; } In this case, the DOM order still makes sense, but the visual order is all wrong. It's not just row-reverse . There are a number of flexbox and grid properties that can get involved and confuse things: the order property, flowing items into columns instead of rows, and positioning items specifically in unusual orders, among others....
Rethinking designer-developer collaboration
My design partner in crime Dan Mall and I were interviewed on the Design Better podcast about breaking down barriers between designers and developers. Give ‘er a listen here . from Brad Frost http://bit.ly/2wJt3if
Level up your .sort game
Sorting is a super handy JavaScript method that can display the values of an array in a certain order. Whether that’s real estate listings by price, burger joints by distance, or best nearby happy hours by rating, sorting arrays of information is a common need. If you’re already doing this with JavaScript on a project, you are will likely using the built-in array .sort method, which is in the same family of array methods that includes .filter , .map and .reduce . Let's take a look at how to do that! A quick note about side effects Before going into the details of how to use .sort , there is a very important detail that needs to be addressed. While many of the ES5 array methods such as .filter , .map , and .reduce will return a new array and leave the original untouched, .sort will sort the array in place . If this is unwanted, an ES6 technique to avoid this is using the spread operator to concisely create a new array. const foo = ['c','b','a']; ...
Designing with Motifs
I love the way Erik Kennedy talks about digital design. Very practical and understandable. Have a listen to a chat with him we had on ShopTalk. One of his latest blog posts is titled "The #1 Way to Spice Up Your Designs (And Create a More Cohesive Brand)" and it's about something he pegs as more of an intermediate (beyond the basics) level design tip about the idea of motifs . In music, that might be a bit of a melody that asserts itself periodically and kinda informs the rest of the song. It's equally interesting in design, where a theme — perhaps a geometric element — is sprinkled in tastefully that helps the gestalt. Ties the room together, as they say. Anyway, if you're serious about getting better at design, his course is where it's at and opens up in mid-June. So, now's the time to think about it. Direct Link to Article — Permalink The post Designing with Motifs appeared first on CSS-Tricks . from CSS-Tricks http://bit.ly/2JMDQk6
What if we got aspect-ratio sized images by doing almost nothing?
Say you have an image you're using in an <img> that is 800x600 pixels. Will it actually display as 800px wide on your site? It's very likely that it will not. We tend to put images into flexible container elements, and the image inside is set to width: 100%; . So perhaps that image ends up as 721px wide, or 381px wide, or whatever. What doesn't change is that images aspect ratio, lest you squish it awkwardly (ignoring the special use-case object-fit scenario). So—we don't know how much vertical space an image is going to occupy until that image loads. This is the cause of jank! Terrible jank! It's everywhere and it's awful. There are ways to create aspect-ratio sized boxes in HTML/CSS today. None of the options are particularly elegant, relying on the "hack" of setting a zero height and pushing the boxes height with padding. Wouldn't it be nicer to have a platform feature to help us here? The first crack at fixing this problem that I k...
4 Reasons Why JavaScript is Beginner Friendly
JavaScript is the most popular and versatile programming language in the world. It's also the first programming language many developers learn. Why is that? The post 4 Reasons Why JavaScript is Beginner Friendly appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2WmKLam
JAMstack? More like SHAMstack.
I'm a fan of the whole JAMstack thing. It seems like a healthy web movement. I'm looking forward to both of the upcoming conferences . Of any web trend, #jamstack seems like it will be the least regrettable. — Chris Coyier (@chriscoyier) May 22, 2019 I feel like the acronym might not be quite doing it justice though. Not that I suggest we change it. Once a thing like that has legs, I find it's best to roll with it. Same deal with serverless . Heck, the name of this website is pretty... not great. To me, the most important part of JAMstack is rooted in the concept of static file hosting. Static file hosting is the foundation of all the power. It opens up a bunch of doors, like: Everything can be CDN -hosted. "The edge," as they say. Even the HTML (the M in JAMStack also refers to Markup) can be CDN -hosted, which you otherwise can't do. That gives you an amazing base of speed that encourages you to keep that speed as you build. The project feels...
Self-Host Your Static Assets
Harry Roberts digs into why hosting assets on someone else’s servers (including CDN s) is not such a great idea if we want our websites to be lightning fast. Harry writes: One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. I think perhaps the most shocking example Harry shows is this one: ...on a reasonably fast connection, hosting these static assets off-site is 311ms, or 1.65×, slower than hosting them ourselves. By linking to three different origins in order to serve static assets, we cumulatively lose a needless 805ms to network negotiation. Full test. Okay, so not exactly terrifying, but Trainline, a client of mine, found that by reducing latency by 300ms, customers spent an extra £8m a year . This is a pretty quick way to make eight mill. It’s clear from Harry’s example (as well as the rest of the...
How to Learn to Code
Congratulations! You’ve decided you want to learn to code. Whether it’s because you’re interested in tech, or you want a high-paying career — you’re in the right place. How do you learn to code? It’s a... The post How to Learn to Code appeared first on Treehouse Blog . from Treehouse Blog http://bit.ly/2JYDjvs
Movin’ Modals Along a Path
Modals always be just appearin' . You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from "above" or "below." But we can get weirder than that. Why not have them come in on an offset-path ? Just a swoopy arc is kinda fun. See the Pen Move Modal In on Path by Chris Coyier ( @chriscoyier ) on CodePen . Or we could Mary Poppins it and have it come floating in from afar. See the Pen Move Modal In on Path: Mary Poppins Edition by Chris Coyier ( @chriscoyier ) on CodePen . Or get straight up wiggly woggly. See the Pen Move Modal In on Path: Wackadoo by Chris Coyier ( @chriscoyier ) on CodePen . That's all. I figured you were here for the CSS tricks, anyway. ;) The post Movin’ Modals Along a Path appeared first on CSS-Tricks . from CSS-Tricks http://bit.ly/2KsRg4y
Do you need an ICON ONLY button without screwing up the accessibility?
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple's latest blunder ). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair of articles that nicely lay out all the options and present actual research on this topic. Sara Soueidan: Accessible Icon Buttons Scott O'Hara: Contextually Marking up accessible images and SVGs If you just want to be told what to do, I'd go for the just use some text in the button approach: <button aria-expanded="false" id="menu-trigger"> <svg viewBox="0 0 32 32" width="32px" height="32px" aria-hidden="true" focusable="false"> <!-- svg content --> </svg> Menu </button> Sara says There is no One Way to Rule Them All , but it does seem like you really ne...
Prevent Page Scrolling When a Modal is Open
Please stop me if you've heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant to do) but the rest of page continues to behave as normal. See the Pen Avoid body scrollable in safari when modal dialog shown by Geoff Graham ( @geoffgraham ) on CodePen . Sometimes this is a non-issue, like screens that are the exact height of the viewport. Anything else, though, we're looking at Scroll City. The good news is that we can prevent that with a sprinkle of CSS (and JavaScript) trickery. Let's start with something simple We can make a huge dent to open-modal-page-scrolling ™ by setting the height of the entire body to the full height of the viewport and hiding vertical overflow when the modal is open: body.modal-open { height: 100vh; overflow-...