Front End web development

Last year we formed a team focused on using the growing number of new web APIs to build multimedia applications that push the edge of the web platform. Our main work in this area over the last 2 years has been with the wonderful team behind Scratch at MIT’s Lifelong Kindergarten Group (LLK), and with […] from Bocoup https://ift.tt/2HaChub

The single best thing I ever did for my career was start a blog on my own website. — Brad Frost (@brad_frost) January 18, 2019 I’ll share two stories. I was speaking at a conference and after my talk I was approached by someone who said, “I had to think for a while, but weren’t you the one who wrote that Medium post about avoiding the word ‘just’? ” Now, I’ve never written anything on Medium. They were referring to the (fantastic) Pastry Box Project where I originally published the post . The design of both Medium and the Pastry Box are pretty minimal (white background, black serif text) which led to the person confusing the two. One time I was at the dog park, and only one other dog and owner were there. We struck up a conversation (the owners, not the dogs), which inevitably led to the big question of “so what do you do?” The guy said that he was a web developer, which obviously led to both of us explaining a bit more about what type of web stuff we do. I mentioned how I tend...

This is the first chapter of the Complete WordPress Theme Guide series. In this chapter, you will learn how to install WordPress on a local computer. By doing so, it will save you time from updating and previewing files (so, you don’t have to frequently upload files on every change). You can also use the […] The post Installing WordPress Locally appeared first on Web Designer Wall . from Web Designer Wall https://ift.tt/2H7f8c2

Today I’m going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens […] The post Word-Wrap: Force Text to Wrap appeared first on Web Designer Wall . from Web Designer Wall https://ift.tt/2BVga7Q

So you might be aware of CSS Custom Properties that let you set a variable, such as a theme color, and then apply it to multiple classes like this: :root { --theme: #777; } .alert { background: var(—-theme); } .button { background: var(—-theme); } Well, I had seen this pattern so often that I thought Custom Properties could only be used for color values like rgba or hex – although that’s certainly not the case! After a little bit of experimentation and sleuthing around, I realized that it’s possible to use Custom Properties to set image paths, too. Here’s an example of that in action: :root { --errorIcon: url(error.svg) } .alert { background-image: var(--errorIcon); } .form-error { background-image: var(--errorIcon); } Kinda neat, huh? I think this could be used to make an icon system where you could define a whole list of images in the :root and call it whenever you needed to. Or you could make it easier to theme certain classes based on their state or perh...

I love posts like this. It's just about adding a little icon to the end of certain links, but it ends up touching on a million things along the way. I think this is an example of why some people find front-end fun and some people rather dislike it. Things involved: Cool [attribute] selectors that identify off-site links Deliberating on whether it's OK to use additional HTML within links or not Usage of white-space Combining margin-left and padding-right to place icons into placeholder space Using custom properties to keep things easier Usage of inline SVG versus background SVG Considering inline versus inline-block Using masks Direct Link to Article — Permalink The post Text Wrapping & Inline Pseudo Elements appeared first on CSS-Tricks . from CSS-Tricks https://www.jayfreestone.com/writing/wrapping-and-inline-pseudo-elements/

Here’s a nifty trick from Andy Bell that now seems a little obvious in hindsight: if you set an SVG to have a width and height of 1em then you can change the size of it with the font-size property. Try and change the font-size on the body element below to see the icon scale with the text: See the Pen Font size controlled icon by Andy Bell ( @andybelldesign ) on CodePen . You pretty much always want your icons to be aligned with text so this trick helps by creating that inherent relationship in your code. Pretty nifty, eh? Direct Link to Article — Permalink The post Control Icons with Font Size appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2H36RFY

Atomic Design has been on sale for about two and half years, and I’m making the decision to stop selling paperback copies of the book . You can still buy the ebook version of the book for 10 bucks in addition to reading the entire text online for free . Why stop? I’m absolutely thrilled with the process I used to create Atomic Design (if you’re interested, I wrote a detailed post all about it ). In addition to writing the book, I self-published it and managed every aspect of the project. That included fulfilling all the paperback book orders. As I saw it, shipping the books myself was important for me to connect with the supporters of this project, and I liked the idea of carrying the DIY nature of the project all the way through to the end. Fulfilling the books myself meant that every few days, myself and my brother stopped our development work, fired up Shopify, printed out invoices, stuffed envelopes, affixed shipping labels, and scrambled to get to the post office before they...

We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we're seeing a lot more usage, we're seeing people want more from grid. Michelle Barker lists hers wants (and I'll put my commentary after): Styling row and column gaps. I've also heard requested styling grid cells directly, rather than needing to place an element there and style that element. Multiple gap values . I wanted this just the other week, and I was told to use an empty column or row instead of a gap. The size of that column can be controlled, and things are placed accordingly to treat it like a gap. Sort of OK, except that isn't particularly friendly to implicit grids. Autoflow patterns . This is clever. Check out Michelle's use case and proposal. calc() with the fr unit . This is a mindbender. I can see wanting to do something like calc(1fr - 100px) , but then isn't the leftover space 100px short and 1fr recalcuate...

I am likely going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article smippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track. Today we will attempt to describe the different mental models for CSS and JavaScript. Everybody agrees there is a difference, but nobody’s able to define exactly what that difference is. So let’s try. (Also, at the last moment I switched from describing CSS as “context-based” to “state-based.” I hope that makes more sense, and it’s one of the points I’d like feedback on.) CSS and JavaScript mental models Programming CSS requires a different mental model than programming JavaScript. CSS is a declarative language, while JavaScript is an imperative language. (Also, it’s an open question whether CSS is a programming language at all. We’ll get back to that later, but for now we’ll pretend it is.) Those who have exp...

I am likely going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article smippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track. Today we will attempt to describe the different mental models for CSS and JavaScript. Everybody agrees there is a difference, but nobody’s able to define exactly what that difference is. So let’s try. (Also, at the last moment I switched from describing CSS as “context-based” to “state-based.” I hope that makes more sense, and it’s one of the points I’d like feedback on.) CSS and JavaScript mental models Programming CSS requires a different mental model than programming JavaScript. CSS is a declarative language, while JavaScript is an imperative language. (Also, it’s an open question whether CSS is a programming language at all. We’ll get back to that later, but for now we’ll pretend it is.) Those who have exp...

There is a lot to like about Gaddafi Rusli's ICONSVG . It provides inline <svg> , which is the most generically useful way to deliver them, and probably how they should be used anyway . Each icon is a tiny amount of SVG and I'd bet they were all hand- golfed . They are all stroke-based, so they can be beefed up or slimmed down as needed. The stroke-linecap and stroke-linejoin properties can be adjusted, which presents an opportunity to make their edges sharper or more rounded. I often find icons that are close to what I want, but the weight isn't right or the edges are either too sharp or too round. This quick and easy configuration is awesome. Direct Link to Article — Permalink The post iconsvg.xyz appeared first on CSS-Tricks . from CSS-Tricks https://iconsvg.xyz/

Any overflow value other than visible and no height is the enemy of child elements with position: sticky; . It's like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that's not always desirable. Dannie Vinther digs into a way of dealing with that. The end result is avoiding that situation all together by removing the element that wants to be sticky from the element that needs an overflow. But as soon as you do that, the elements no longer scroll together since they aren't siblings. The use case here is a table with sticky headers on vertical scrolling and allowing for horizontal scrolling as well. Dannie uses a script to sync the scroll positions. Direct Link to Article — Permalink The post Dealing with overflow and position: sticky; appeared first on CSS-Tricks . from CSS-Tricks https://ift.tt/2E6zUp0

CSS custom properties (a.k.a. CSS variables ) are becoming more and more popular. They finally reached decent browser support and are slowly making their way into various production environments. The popularity of custom properties shouldn’t come as a surprise, because they can be really helpful in numerous use cases, including managing color palettes, customizing components, and theming . But CSS variables can also be really helpful when it comes to responsive design. Article Series: Defining Variables and Breakpoints (This Post) Building a Flexible Grid System (Coming Tomorrow!) Let’s consider an <article> element with a heading and a paragraph inside: <article class="post"> <h2 class="heading">Post's heading</h2> <p class="paragraph"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam adipisci recusandae officiis dolore tenetur, ...

Violet Peña has shared her recommendations for using CSS Grid. They basically boil down to these high-level points: Use names instead of numbers for setting up our grid columns. fr should be our flexible unit of choice. We don’t really need a grid system anymore. Although this is all great advice and Violet provides a few examples to support her recommendations, I particularly like what she has to say about learning CSS Grid: “Learning” CSS Grid requires developing working knowledge of many new properties that don’t just describe one aspect of appearance or behavior, but feed into a completely new layout system. This system includes around 18 properties which use paradigms and syntax rarely (or never) seen anywhere else in the CSS spec. This means that CSS Grid has a pretty high skill floor — a developer needs to learn and internalize lots of new information in order to be effective with it. Once you’re above that skill floor, Grid is an amazing ally in layout creation. Bel...

A (usually) weekly round-up of interesting links I’ve tweeted. Sponsored by Smashing Magazine who slip banknotes into my lacy red manties so I can spend time reading stuff. How A Screen Reader User Accesses The Web: A Smashing Video – I commissioned and hosted a webinar with Léonie Watson (a blind screen reader user), showing how she uses big-name sites (and this one!) and how the HTML helps or hinders her. Firefox CSS survey – Your chums at Firefox seek your input on the most time-consuming CSS bugs you’ve faced in the last 3 months (to help them make devtools better, not just to make fun of you) The Dark Side of the Grid (Part 1) – part 1 of 3 in a series of articles about CSS Grid layout and accessibility CSS Scroll Snap — How It Really Works Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom – by my nephew who doesn’t have a local area network Midi City 2000 – an interactive art experiment where midi songs become cities. Each row of buil...

(This is a sponsored post .) Here's the situation: You've bashed out a complicated design over two weeks of near full-time effort, gotten everything down to the exact spec of the design file, turn it in for stakeholder review and... you're way off scope. Turns out a few folks on the team put their heads together, made some changes, and never sent you an updated comp. Boo! The unfortunate truth is that this happens all too often in front-end development, but it's really no one person's fault because it boils down to simple collective miscommunication and a lack of transparency on the team. Well, that's where a project management platform like monday.com comes into play. Even if you're on a remote team or sitting in an office with cubicle walls up to the ceiling, monday.com bridges gaps and tears down walls that could throw a project off-track. With powerful and intuitive tools, like instant messaging for those ad hoc meetings, file storage for a centra...

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid , and — what we’re concerned about here — Custom Properties ( aka CSS variables), all of which make robust and dynamic layouts and interfaces easier than ever while opening up many other possibilities we used to only dream of. The other day, I was thinking that there must be a way to use Custom Properties to color an element's background while maintaining a contrast with the foreground color that is high enough (using either white or black) to pass WCAG AA accessibility standards . It’s astonishingly efficient to do this in JavaScript with a few lines of code: var rgb = [255, 0, 0]; function setForegroundColor() { var sum = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000); return (sum > 128) ? 'black' : 'white'; } This takes the red, green and blue (RGB) values of an element’s background color, mul...

A Swing/ Big Band song! Many thanks to Chris Taylor – a Big Band scholar – for advice on what’s authentic and what was out of place. Produced by Shez Leave these stupid people. The time’s exactly right. I have got a sailing ship, let’s sail away tonight. You can be the captain I will be the crew. I have got a sailing ship so I can sail away with you. Help me weigh the anchor I’ll look out while you steer. Come aboard my sailing ship Let’s sail away from here. We’ll sing along with mermaids who will help us chart our course. be guided by dolphins from these weary, dreary shores. The map says “here be dragons” but perhaps it’s Shangri-La. Let’s go and see what lies beyond this half-life where we are. Through the doldrums, ice and tempests we’ll cross the oceans deep. We’ll make all pirates walk the plank and croon the Kraken back to sleep. My ship is called “Clarita”, her sails are big and bright. The wind is up and the tide is high let’s sail away tonight. ...

While working on the site’s 24th redesign , I played around with a number of styles to customize the appearance of links. As you can see by hovering over any link, I decided to keep the styles as minimal as possible while still letting the user know that, “hey, this is a link”. This quick post shares one of the link styles I was considering, it’s sort of a “slide-up” background-color effect that happens when the user hovers over the hyperlink. Demo Quick Demo: CSS Background Hover Slide Effect » Code So if you like the demo and want to use the code or just play around whatever, you can inspect the demo source code or grab it from here: a { padding: 5px; display: inline-block; text-decoration: none; transition: all 0.3s; background-size: 100% 200%; background-image: linear-gradient(to top, #333 50%, #fff 50%); color: #333; } a:hover { background-position: 0 100%; color: #fff; } The...

Brad points out some UX problems with a variety of apps that are doing things a little outside of the norm when it comes to their login forms. There is already a bunch of things to get right with forms to begin with (e.g. use the right input types, label your inputs, don't have whack password requirements, use SSL, etc.)... OMG why complicate it even more?! A "password manager test" should be a development best practice here. Does it work cleanly with the built-in browser password manager? How about 1Password and LastPass? No? Give it some love, please and thank you. Direct Link to Article — Permalink The post Don’t Get Clever with Login Forms appeared first on CSS-Tricks . from CSS-Tricks http://bit.ly/2GrzKMx

instant.page is a pretty cool project from Alexandre Dieulot. Alexandre has been at this idea for half a decade now, as InstantClick is his and is essentially the same exact idea. The idea is that there is a significant delay between hovering over a link and clicking that link. Say it takes you 300ms of delay. That 300ms could have been spent preloading the next page. And if you do use that time preloading, that page loads that much faster. This new project makes use of newer tech to get it done. It's hardly any code. , the core of which is appending a <link rel="prefetch" href=""> to the document of the link you're about to click/touch. The page encourages you to hotlink the script, which means possible cache-hits in case you've already visited a page using this. It's not risky in the way other third-party JavaScript can be because the integrity attribute means that if you trust the code as it is now, it can't ever change unless you...

I love this classification of different kinds of web applications. It takes a more nuanced view of “sites vs apps”. I’d love to see this turned into a full-blown site with additional holotypes (airline, hotel chain, etc). from Brad Frost http://bit.ly/2Egxbeh