Category Archive for: performance

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

Make Your Site Faster with Preconnect Hints

Requesting an external resource on a website or application incurs several round-trips before the browser can actually start to download the resource. These round-trips include the DNS lookup, TCP handshake, and TLS negotiation (if SSL is being used). Depending on the page and the network conditions, these round-trips can add hundreds of milliseconds of latency, or more. If you are requesting resources from several different hosts, this can add up fast, and you could be looking at a page that feels more sluggish than it needs to be, especially on slower cellular connections, flaky wifi, or congested networks. One of the the easiest ways to speed up your website or application is to simply add preconnect hints for any hosts that you will be requesting assets from. These hints essentially tell the browser what origins will be used for resources, so that it can then prep things by establishing all…

Read More →

“Stop Using CSS Selectors for Non-CSS”

I saw Nicole Dominguez tweet this the other day: say it louder for the people in the back — nicole (@sodevious) January 11, 2018 I wasn’t at this conference, so I have very little context. Normally, I’d consider it a sin to weigh in on a subject brought up by looking at two out-of-context slides, but I’m only weighing in out of interest and to continue the conversation. The idea seems to be that if you need to select an element in the DOM with JavaScript, don’t use the same selector as you would in CSS. So if you have… <article class=”article”> </article> …and you need to apply an event listener to that article for some reason, then don’t use… $(“.article”) (or querySelector or whatever, I assume.) Instead, apply an attribute intended just for the JavaScript to target, like… <article class=”article” data-hoverable> </article> …and target that like… $(“[data-hoverable]”) The idea…

Read More →

Third-Party Scripts

Trent Walton: My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts. I recently had a conversation with a friend working on quite a high profile e-commerce site. They were hired to develop the site, but particularly with performance in mind. They were going the PWA route, but were immediately hamstrung by third-party scripts. One of them, apparently unavoidably, couldn’t be HTTPS, meaning the site was immediately disqualified from being a PWA. They could still do a good job in many other areas, but right and left their great performance work was slaughtered by third-party scripts. I don’t envy being in that position. It’s…

Read More →

Design Systems: Problems & Solutions

Why do you need a Design System? In a previous article, we shared our thoughts on why Design Systems may be on the rise. Now, let’s further explore why you might need one. What are some of the common problems organizations face without a Design System, and how can one help? Common Problems Here are a few warning signs that might indicate you need to think about implementing a Design System: Process bottlenecks Through agile development methodologies, rapid release cycles have improved the ability for organizations to make timely and recurring updates. This means that individuals in organizations have had to do things more quickly than they used to. The benefits of speed often come at a cost. Usually, that cost is a compromise in quality. How will you ensure quality without introducing bottlenecks to your release cycles? Design inconsistencies Because your design needs have had to keep up with…

Read More →


Here’s an interesting and super useful Chrome extension by Nitin Tulswani that measures React component performance: React Performance Devtool is a browser extension for inspecting the performance of React Components. It statistically examines the performance of React components based on the measures which are collected by React using window.performance API. Along with the browser extension, the measures can also be inspected in a console. Also, if you’re interested in learning more about the process of this tool, there’s a great thread that digs into the history of the project. Direct Link to Article — Permalink react-perf-devtool is a post from CSS-Tricks Source: CssTricks

Tales of a Non-Unicorn: A Story About the Roller Coaster of Job Searching

Hey there! It’s Lara, author of the infamous”Tales of a Non-Unicorn: A Story About the Trouble with Job Titles and Descriptions” from a couple years back. If you haven’t read that original article, I recommend skimming it to give you some context for this one, but I think you’ll still find value here even if you don’t. A lot has happened since I wrote that article in 2015, and this follow-up has been in the works for a good six months. I ended up, not with a solution for the job titles conundrum or a manifesto about the importance of HTML and CSS, rather a simple, honest story about my roller coaster ride. Okay, enough dilly-dally. Let’s go! <story> In the aftermath of the FizzBuzz drama in 2015, I doubled down on my freelance business and did really well. I got a great contract gig with startup in New York…

Read More →

Deliberate Practice?

Photo by Steven LelhamThere’s an endless list of books about how the greatest become the greatest — deliberate practice. They don’t just show up time after time. They also set short measurable goals and keep stretching them.Time your runs. Swim a bit faster. Get yourself over that pull up bar just one more time.That’s great for performance sports. The goals are easily measurable.But I’m not looking to be, for example, a fast editor. I’d like to be a better, more creative, editor. I want to build bigger audiences. And get more subscribers this week.So how do you deliberately practice in the creative field where success is often external, unpredictable, and uncontrollable?Here’s four ways I’ve found over the years to deliberately practice being more creative.RepetitionHow many times have you redone something? Probably not more than 18. Monet painted at least 18 haystacks that we’re aware of. He destroyed a bunch too.Work on the same thing over and…

Read More →

Front-End Performance Checklist

Vitaly Friedman swings wide with a massive list of performance considerations. It’s a well-considered mix of old tactics (cutting the mustard, progressive enhancement, etc.) and newer considerations (tree shaking, prefetching, etc.). I like the inclusion of a quick wins section since so much can be done for little effort; it’s important to do those things before getting buried in more difficult performance tasks. Speaking of considering performance, Philip Walton recently dug into what interactive actually means, in a world where we throw around acronyms like TTI: But what exactly does the term “interactivity” mean? I think most people reading this article probably know what the word “interactivity” means in general. The problem is, in recent years the word has been given a technical meaning (e.g. in the metric “Time to Interactive” or TTI), and unfortunately the specifics of that meaning are rarely explained. One reason is that the page depends…

Read More →

Drupal Training day (Free)

Start:  2018-01-26 18:30 – 20:30 Europe/Lisbon Organizers:  rfmarcelino fmfpereira Event type:  Training (free or commercial) Drupal Training Day Friday, Jan 26, 2018, 6:30 PM OmibeeRua de Ceuta, 83, 1D Porto, PT 4 Drupalistas Attending E estamos de volta! O nosso próximo encontro vai ser especial. Após vários pedidos de formação, Vamos juntar-nos à iniciativa global da Drupal Association e acolher o primeirissimo GTD em Portugal. A formação será gratuita mas com lugares limitados. Propomos uma linha principal: “Começar e usar Drupal – O que é e como usar para utilizadores finais”… Check out this Meetup → Portugal is about to have the very first GTD event! We are proposing one main track: “Up and running with Drupal – What is and how to use for end users”. We will have two other tracks depending on the attendee’s skillsets or interest: “Drupal for developers – From installation to custom development” “Advanced…

Read More →

Improving the Accessibility of 24 ways

I’ve been thinking recently about the nature of my work and which aspects of it I enjoy the most. In a role that will often straddle the realms of design and development, whether editing copy, evaluating the design of an interface or refactoring code, I’ve come to realize that my interests lie in the act of review and refinement. My work on 24 ways is a case in point. Since Drew McLellan asked me to redesign the site in 2013, I’ve stayed on as part of the team, helping to review, edit and format articles. But I’ve also been able to fulfil the desire I expressed upon launching the redesign: I’m a big believer in iteration and not treating a website as ever being finished. I hope what’s been released this year can act as a foundation, and that the design will evolve in the years to come. In the…

Read More →

Fragmented HTML5 Video

I have seen various implementations of the Voronoi Diagram. Perhaps you’ve seen one without knowing what it was. It almost looks like random stained glass: Wikipedia: In mathematics, a Voronoi diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane. It’s even possible to create a Voronoi diagram by hand, as eLVirus88 has documented. I wanted to give it a try. The Idea My idea is to chop up a video into fragmented parts (called cells) and put them into 3D space on a slightly different z-axis. Then, by moving the mouse, you would rotate the whole experience so you would see the cells in different depths. The Code Building on top of Raymond Hill’s and Larix Kortbeek’s JavaScript implementation, the first thing I needed to was split up the cells. I choose to use the <canvas> element, and…

Read More →

Breaking Down the Performance API

JavaScript’s Performance API is prudent, because it hands over tools to accurately measure the performance of Web pages, which, in spite of being performed since long before, never really became easy or precise enough. That said, it isn’t as easy to get started with the API as it is to actually use it. Although I’ve seen extensions of it covered here and there in other posts, the big picture that ties everything together is hard to find. One look at any document explaining the global performance interface (the access point for the Performance API) and you’ll be bombarded with a slew of other specifications, including High Resolution Time API, Performance Timeline API and the Navigation API among what feels like many, many others. It’s enough to make the overarching concept more than a little confusing as to what exactly the API is measuring but, more importantly, make it easy to…

Read More →

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: <img src=”video.mp4″/> The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits: Animated GIFs are a hack. […] But they have become an awesome tool for cinemagraphs, memes, and creative expression. All of this awesomeness, however, comes at a cost. Animated GIFs are terrible for web performance. They are HUGE in size, impact cellular data bills, require more CPU and memory, cause repaints, and are battery killers. Typically GIFs are 12x larger files than H.264 videos, and take 2x the energy to load and…

Read More →

On Building Features

We’ve released a couple of features recently at CodePen that I played a role in. It got me thinking a little bit about the process of that. It’s always unique, and for a lot of reasons. Let’s explore that. What was the spark? Features start with ideas. Was it a big bright spark that happened all the sudden? Was it a tiny spark that happened a long time ago, but has slowly grown bright? Documenting ideas can help a lot. We talked about that on CodePen Radio recently. If you actually write down ideas (both your own and as requested by users), it can clarify and contextualize them. Documenting all ideas in Notion There is tooling (e.g. Uservoice) which is specifically for user feedback guiding feature development as well. Personally, I prefer a mix of internal product vision with measured customer requests, staying light on the public roadmap. The addition…

Read More →

Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. This article will focus on genuine CSS tricks that would be easy to drop into any project without having to touch the DOM or use JavaScript. The methods covered here will follow these rules Single element (no helper divs, but psuedo-elements are allowed) CSS only (no JavaScript) Works for any size (not restricted to a specific width, height, or aspect ratio) Supports transparent backgrounds Smooth and performant transition I proposed this challenge in the Animation at Work Slack and again on Twitter. Though there was no consensus on the best approach, I did receive some really clever ideas by some phenomenal developers. Method 1: Animating border The most straightforward way to animate a border is… well, by animating border. .border-button { border:…

Read More →

Most Common Technical SEO Mistakes: How Severe Are They? by @DigitalAnya

Find out how you can avoid the most common technical SEO mistakes that hurt many websites’ rankings and overall performance.The post Most Common Technical SEO Mistakes: How Severe Are They? by @DigitalAnya appeared first on Search Engine Journal. Source:

SEO for the CMO: How to Evaluate SEO Performance by @SERanking

Learn how you can efficiently forecast, review, and measure your search engine optimization efforts using helpful tools and data.The post SEO for the CMO: How to Evaluate SEO Performance by @SERanking appeared first on Search Engine Journal. Source:

Top 5 Text Editors for Designers Learning to Code

Okay, so you’ve decided it’s finally time to expand on your design expertise with some ninja coding skills. Congratulations! The good news is there are plenty of online resources to help you learn the basics and get your coding adventures off to a rolling start. Sooner or later, though, you’re going to have to fly solo and pen your own code. In fact, the sooner you do this, the better – because scribbling real code is by far the best way to learn, practise and improve. Which means, sooner or later, you’re going to need a good text editor – a program for typing unformatted text. This incredibly simple tool is the playground of all your coding escapades and modern text editors are a lot fancier than they used to be. Here are the top five text editors for designers learning to code. #1: Sublime Text ($70) Sublime Text calls itself “the text editor you’ll fall…

Read More →

24 Ways

24 Ways, the advent calendar for web geeks, started up again this week. Throughout December they’ll be publishing a wide range of posts all about web design, CSS, and front-end development. Chen Hui Jing has already written a great post about feature queries and Stephanie Drescher published a post today about a tool called sonarwhal which identifies accessibility, performance and security issues, just to name a few. And if you’re into advent calendars, here’s another 16 web development related ones. Direct Link to Article — Permalink 24 Ways is a post from CSS-Tricks Source: CssTricks

Back to Top