Front End web development

You’re probably used to fetching data in React using axios or fetch. The usual method of handling data fetching is to: Make the API call. Update state using the response if all goes as planned. Or, in cases where errors are encountered, an error message is displayed to the user. There will always be delays when handling requests over the network. That’s just part of the deal when it comes to making a request and waiting for a response. That’s why we often make use of a loading spinner to show the user that the expected response is loading. See the Pen ojRMaN by Geoff Graham ( @geoffgraham ) on CodePen . All these can be done using a library called React Async . React Async is a promised-based library that makes it possible for you to fetch data in your React application. Let’s look at various examples using components, hooks and helpers to see how we can implement loading states when making requests. For this tutorial, we will be making use of Create React App . You can c...

This quick post is aimed at users of the 6G Firewall . The latest 6G update removes the IP -address blocking section to improve firewall compatibility and implementation. So now with the IP section removed, you may be asking “how to block an IP address with 6G?” Well good news, this tutorial explains how to do it. Required: For this tutorial, you will need to know which version of Apache you are using. If in doubt, ask your web host. How to deny access based on IP address First make sure you are running the latest version of the 6G Firewall . Also make sure that you understand the pros and cons of blocking IPs . Next, locate the 6G:[USER AGENTS] section in the 6G Firewall. There, you will find two sections of code, one for older versions of Apache, and another for newer versions of Apache: Older Apache # Apache < 2.3 <IfModule !mod_authz_core.c> Order Allow,Deny Allow from all Deny from env=bad_bot </IfModule> Newer Apache # Apache ...

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant? To prove that, we can use the same selector inside and outside of an at-rule and see if it seems to affect specificity. body { background: red; } @media (min-width: 1px) { body { background: black; } } The background is black. But... is that because the media query increases the specificity? Let's switch them around. @media (min-width: 1px) { body { background: black; } } body { background: red; } The background is red, so nope. The red background wins here just because it is later in the stylesheet. The media query does not affect specificity. If it feels like selectors are increasing specificity and overriding other styles with the same selector, it's likely just because it comes later in the stylesheet. Still, the @keyframes in the original question got me thinking. Keyframes, of course, ca...

The most famous line of code to have come out of CSS grid so far is: grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); Without any media queries, that will set up a grid container that has a flexible number of columns. The columns will stretch a little, until there is enough room for another one, and then a new column is added, and in reverse. The only weakness here is that first value in minmax() (the 10rem value above). If the container is narrower than whatever that minimum is, elements in that single column will overflow. Evan Minto shows us the solution with min() : grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); The browser support isn't widespread yet, but Evan demonstrates some progressive enhancement techniques to take advantage of now. Direct Link to Article — Permalink The post Intrinsically Responsive CSS Grid with minmax() and min() appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2Ge1UJp

Scott Jehl: One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> Don't just up and do this to all your stylesheets though, otherwise, you'll get a pretty nasty "Flash of Unstyled Content" ( FOUC ) as the page loads. You need to pair the technique with a way to ship critical CSS . Do that though, and like Scott's opening sentence said, it's quite impactful. Interesting side story... on our Pen Editor page over at CodePen, we had a FOUC problem: This has done this for (years?) on CodePen in @firefox . We have a totally normal <link rel=“styles...

React has a built-in hook called useEffect . Hooks are used in function components. The Class component comparison to useEffect are the methods componentDidMount , componentDidUpdate , and componentWillUnmount . useEffect will run when the component renders, which might be more times than you think. I feel like I've had this come up a dozen times in the past few weeks, so it seems worthy of a quick blog post. import React, { useEffect } from 'react'; function App() { useEffect(() => { // Run! Like go get some data from an API. }); return ( <div> {/* Do something with data. */} </div> ); } In a totally isolated example like that, it's likely the useEffect will run only once. But in a more complex app with props flying around and such, it's certainly not guaranteed. The problem with that is that if you're doing something like fetching data from an API, you might end up double-fetching which is inefficient and un...

Mike Pennisi: The web-platform-tests project is a massive suite of tests (over one million in total) which verify that software (mostly web browsers) correctly implement web technologies. It’s as important as it is ambitious: the health of the web depends on a plurality of interoperable implementations. Although Bocoup has been contributing to the web-platform-tests, or “WPT,” for many years, it wasn’t until late in 2017 that we began collecting test results from web browsers and publishing them to wpt.fyi Talk about doing God's work. The rest of the article is about the incredible pain of scaling a test suite that big. Ultimately Azure Pipelines was helpful. Direct Link to Article — Permalink The post Lessons Learned from a Year of Testing the Web Platform appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2JLfPJ9

When someone says “web design,” it often puts an image in my head of a designer at a computer working in Adobe XD or Sketch. Because the final medium of the design is displayed on computer screens, web design is... The post 7 Reasons to Sketch on Paper First appeared first on Treehouse Blog . from Treehouse Blog https://ift.tt/32QYMg6

I had a little rant in me a few months ago about design systems: "Who Are Design Systems For?" My main point was that there are so many public and open source ones out there that choosing one can feel like choosing new furniture for your house. You just measure up what you need and what you like and pick one. But it just isn't that simple. Some are made for you , some makers want you to use them , and some just ain't . A more measured take from Koen Vendrik (consistently, the same Koen who just made a cool Jest browser tool ): ... it’s important that you first define who a design system is for and what people should be able to do with it. When you have decided this, and start looking at the implementation for the level of flexibility you require, keep in mind that it’s okay to do something that’s different from what’s already out there. It’s easy to create a lot of flexibility or none at all, the trick is to get it just right. The levels: Zero customizabilit...

Finally put together a giant list of .htaccess redirect examples . It’s meant as a quick copy-&-paste resource for those who may be looking for an assortment of redirect techniques. Here you will find redirects via mod_alias and mod_rewrite . Examples include redirecting to and from any directory, subdirectory, resource, URL , and much more. Most of these examples are taken from my previous article, Stupid htaccess Tricks ; other examples are taken from previous .htaccess tutorials here at Perishable Press . Enjoy! :) Redirect via mod_alias These examples show how to redirect from one location to another using Apache’s alias module . Also, you can change the status code to whatever you want (for example, change from 301 to 302). And then learn how to go further with even more awesome .htaccess redirect examples . Redirect a page on same domain Redirect 301 /page.php /page.html Redirect a page on different domain Redirect 301 /page.php https://example.com/page.html Red...

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what <input type="text"> is for. There are lots of different input types (and modes! ), and picking the right one is a great idea. But this little story is about something else and applies to any of them. What if the text needs to be arbitrary (like "What's your favorite color?") so people can type in whatever, but you also want to be helpful. Perhaps there are a handful of really popular answers. Wouldn't it be nice if people could just select one? Not a <select> , but a hybrid between an input and a dropdown. Hold on though. Don't make your own custom React element just yet. That's what <datalist> is for. I just used it successfully the other day so I figured I'd blog it because blogging is cool. Here are the basics: See the Pen Basic datalist usage by Chris Coyier ( @chriscoyier ) on CodePen ...

Say you wanted to put the CSS-Tricks website in an <iframe> . You'd do that like this: <iframe src="https://css-tricks.com"></iframe> Without any other styling, you'd get a rectangle that is 300x150 pixels in size. That's not even in the User Agent stylesheet, it's just some magical thing about iframes (and objects). That's almost certainly not what you want, so you'll often see width and height attributes right on the iframe itself (YouTube does this). <iframe width="560" height="315" src="https://css-tricks.com"></iframe> Those attributes are good to have. It's a start toward reserving some space for the iframe that is a lot closer to how it's going to end up. Remember, layout jank is bad . But we've got more work to do since those are fixed numbers, rather than a responsive-friendly setup. The best trick for responsive iframes, for now, is making an aspect ratio...

Dave Rupert digs into some of his favorite Vue features and one particular issue that he has with React: I’ve come to realize one thing I don’t particularly like about React is jumping into a file, reading the top for the state, jumping to the bottom to find the render function, then following the method calls up to a series other sub-rendering functions only to find the component I’m looking for is in another castle. That cognitive load is taxing for me. I wrote about this very problem recently in our newsletter where I argued that finding my way around a React component is difficult. I feel like I have to spend more energy than necessary figuring out how a component works because React encourages me to write code in a certain way. On the other hand, Dave, says that Vue matches his mental model when authoring components: <template> // Start with a foundation of good HTML markup </template> <script> // Add interaction with JavaScript </script> <...

I really like :focus-within . It's a super useful selector that allows you to essentially select a parent element when any of its children are in focus. Say you wanted to reveal some extra stuff when a <div> is hovered... div:hover { .extra-stuff { /* reveal it */ } } That's not particularly keyboard-friendly. But if something in .extra-stuff is tab-able anyway (meaning it can be focused), that means you could write it like this to make it a bit more accessible: div:hover, div:focus-within { .extra-stuff { /* reveal it */ } } That's nice, but it causes a tricky problem. Browsers ignore entire selectors if it doesn't understand any part of them. So, if you're dealing with a browser that doesn't support :focus-within then it would ignore the CSS example above, meaning you've also lost the :hover state. Instead: div:hover { .extra-stuff { /* reveal it */ } } div:focus-within { .extra-stuff { /* reveal i...

Julia Carrie Wong and Matthew Cantor's How to speak Silicon Valley: 53 essential tech-bro terms explained was pretty hilarious. A little something in there to offend everyone. Speaking of kinda douchey words, I'm reminded of one of my favorite sites on the internet: Unsuck It . Not only does it call out a ton of terms for being, uh, sucky, but suggests unsucky alternatives. Bubble Up Thank you for pointing out that issue. I’ll be sure to bubble that up. Unsucked: Tell someone with more authority. Powwow Oh, yes! That’s very important to me. Let’s have a powwow about this first thing tomorrow. Unsucked: Yet more unthinking appropriation of Native American culture. Meeting. Solutioneering Unsucked: Thinking. On a somewhat related note, there's the ol' swoop and poop which is also a thing. Direct Link to Article — Permalink The post Unsuck It appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/1Ix8QPt

Yonatan Doron wrote a post on Medium not long ago called "Art of Code — Why you should write more Pseudo Code. " Love that title, as a fan of pseudo code myself. That is, writing "code" that describes something you want to do or communicate, but that isn't of any particular language and doesn't use any correct API s or anything. Taking this time to write commented pseudo code helps organize our thoughts and our motivation and plan the desired outcome code ahead. By doing so, one moment later when we venture through to start hacking we would always have this map or skeleton of our thoughts that can help us regain focus and increase our productiveness Jeremy Keith once likened it to writing a script: When the user submits a form, then show a modal dialogue with an acknowledgment.” I then encouraged them to write a script …but I don’t mean a script in the JavaScript sense; I mean a script in the screenwriting or theatre sense. Line by line, write out ea...

This post by Tom Johnson gives a fantastic overview of the limitations of static design tools and design/dev handoff tools. The author breaks down the various ways static design tools are detached from the reality of how things truly play out in the browser. The author is excited that there’s a new crop of tools aiming to address these issues, and he rounds them up: Webflow Modulz Mason SwiftUI Framer X Hadron Rather than dragging around rectangles and then “exporting” to code, the code is the source of truth (in many of these tools) and is then backfilled into a more visual, design-friendly environment. Treating the code as the source of truth in my view is the right call. After all, users interact with that code, not some static representation of it. I get asked about these new tools often. I too am excited about this new crop of tools, although it’s still early days. My main concern about this new generation of tools is that they require a specific toolchain in order t...

Say you want to select an element when it doesn't have a certain class. That's what the :not() selector is for. body:not(.home) { } But what if there are multiple classes you want to avoid? There are no logical combinators with :not() , like and or or , but you can chain them, which is effectively like and . body:not(.home):not(.away):not(.page-50) { } The :not() selector doesn't add any specificy by itself, but what is inside does, so :not(.foo) adds the same weight as .foo does. The post CSS :not() with Multiple Classes appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/30P0YTs

The web-platform-tests project is a massive suite of tests (over one million in total) which verify that software (mostly web browsers) correctly implement web technologies. It’s as important as it is ambitious: the health of the web depends on a plurality of interoperable implementations. Although Bocoup has been contributing to the web-platform-tests, or “WPT,” for […] from Bocoup https://ift.tt/2JLfPJ9

There was a fun tweet circulating around yesterday: You’re working on a frontend project. You can install max. 5 dependencies. Which ones do you pick? — Kitze (@thekitze) July 19, 2019 Naturally, everyone weighed in with their tools of choice, and it’s of course fascinating to see what the frontend tooling zeitgeist is on July 19th, 2019. Of course I was a bit cheeky with my response: HTML, CSS, and JavaScript — Brad Frost (@brad_frost) July 19, 2019 While it’s a bit cheeky, I also think there’s a deeper point to be made here. All that was given was “You’re working on a frontend project”, so all that can be assumed is that HTML, CSS, and likely JavaScript will be involved. This is a bit like asking: You’re working on a home improvement project. You can choose max. 5 tools. Which ones do you pick? Sort of depends on what the home improvement project is, yeah? If the gig is repairing the toilet tank gasket, I’m likely not going to need my circular saw. But what if I real...

I love this post by Simon. He’s rounded up a ton of great steps his family has taken to be more ecologically mindful. I’m not as far down the road as he is, but am striving to do better. There are plenty of great tips in here that I want to implement. Read: Simon Collison | Living ecologically from Brad Frost https://ift.tt/32FYWqw

This post touches on something really important: “What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?” That’s not a question of if. It’s a question of when. I play out this scenario with all of my clients. I tend to ask “what happens when two years from now everyone has moved onto the next framework?” If they’re building things in React, I say “what happens when the industry goes all in on Vue?” If they’re building things in Vue, I say “what happens when the industry goes all in on React?” “What if something else comes along and is the new hotness?” It’s important to make technology choices with your eyes wide open about what the future holds. We don’t know what things will look like in the future, but we can bet it’ll be different than the present. Going into a project with this in mind helps the teams architect a more future-friendly foundation. I’m honestly surprised there was no mention of web components in here. H...

New E-Commerce Checkout Research – Why 68% of Users Abandon Their Cart – 2/3 of shopping carts are abandoned. The main reasons: deceptive practices (not showing total cost upfront / adding high “taxes” or delivery charges), stupidly requiring customer to set up an account) and bad UX (too complex to do). How to make your HTML responsive by adding a single line of CSS – aha! So *that’s* what minmax does! Web Components and the AOM by Léonie Watson – 23 minutes of Watters banging on at JSConf.Asia 2019 We’re told that too much screen time hurts our kids. Where’s the evidence? – “The authors of a landmark study argue that social media use has only minor effects on wellbeing. But an entire industry says otherwise” Initial thoughts on standardizing form controls by Greg Whitworth from Microsoft Edge team The Web Can’t Survive a Monoculture – “Web developers are right to fear a monoculture, but they don’t seem to appreciate their agency in the solution. They have the power to pro...

The irony of web performance is that the average page weight of a site continues to go up year after year, despite us being more aware of the problem and having more tools at our disposal to fight it than ever. To paraphrase Seinfeld , "we know how to fight page weight issues; we just don't use the tools we have to fight page weight issues." That's why Jetpack provides powerful features for all users at any plan level. They made it so that performance is integrated right into managing content on a WordPress site. One of those things is lazy loading images . Lazy loading is an excellent technique to defer loading images until they are actually needed. So, an image never loads until the user actually scrolls to where it comes into display. That could potentially save a ton of server requests and precious bytes when waiting for a page to load. Jetpack includes lazy loading, even on free plans , so everyone has access to this performance boost. And what's...