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.

Working With the new CSS Typed Object Model

Eric Bidelman introduces the CSS Typed Object Model. It looks like it’s going to make dealing with getting and setting style values through JavaScript easier and less error-prone. Less stringy, more number-y when appropriate. Like if we wanted to know the padding of an element, classically we’d do: var el = document.querySelector(“#thing”); var style = window.getComputedStyle(el); console.log(style.padding); And we’d get “20px” as a string or whatever it is. One of these new API’s lets us pull it off like this: console.log( el.computedStyleMap().get(‘padding’).value, el.computedStyleMap().get(‘padding’).unit ); And we get 20 as a real number and “px” as a string. There is also attributeStyleMap with getters and setters, as well as functions for each of the values (e.g. CSS.px() CSS.vw()). Eric counts the benefits: Few bugs. Arithmetic operations & unit conversion. Value clamping & rounding. Better performance. Error handling. Naming matches CSS exactly. Direct Link to Article — PermalinkThe post Working With the…

Read More →

List Rendering and Vue’s v-for Directive

List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user. In almost every web application we use, we can see lists of content in numerous areas of the app. In this article we’ll gather an understanding of Vue’s v-for directive in generating dynamic lists, as well as go through some examples of why the key attribute should be used when doing so. Since we’ll be explaining things thoroughly as we start to write code, this article assumes you’ll have no or very little knowledge with Vue (and/or other JavaScript frameworks). Case Study: Twitter We’re going to use Twitter as the case study for this article. When logged in and in the main index route of Twitter we’re presented with a view similar to…

Read More →

The State of Web Animation: Part 2

In Part 2, we’re picking up where I left off with current tools for animation with JavaScript (mostly in the form of JavaScript libraries). Be sure to check out Part One. Javascript is admittedly a more controversial method of animation than the methods I mentioned previously (Video, Gifs, CSS Transitions + Keyframes). There was once a day when we longed for CSS support of animation and, when that day came to pass, many disregarded JavaScript animation as non-performant and outdated. But now, JavaScript animation is making a come-back in a few different forms (and no, none of them are just changing CSS classes). There are far too many libraries out there to cover them all, so I’ll try to cover more broad techniques with some notable libraries: jQuery Using jQuery as an animation tool (with .animate()) is pretty outdated. Unless you really need your animations to work in IE versions 9 or…

Read More →

The State of Web Animation: Part 1

We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit: Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next? I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m…

Read More →

The 9 Most Common SEO Errors That Hurt Your Rankings [DATA] by @anathewriter

An analysis of 300 million SEO errors reveals the most common factors that might be hurting your performance.The post The 9 Most Common SEO Errors That Hurt Your Rankings [DATA] by @anathewriter appeared first on Search Engine Journal. Source:

What’s New in Basecamp 3.9 for iOS

This release is all about usability improvements. Download it for iPhone and iPad from the App Store now.Find tab improvements 🔍The Find tab now lets you quickly jump to anything you recently viewed without having to type a word! When you open Find, you’ll see your most recently visited pages, making it super easy to quickly get back to something you were viewing. Or start typing to instantly search in place for anything in your Basecamp account. You can also use advanced filters to define even more specific search terms. Go forth and find!New project and team pages ⚡️The old project and team pages were… slow. We decided to speed them up, as well as feature your team’s latest activity more prominently with this new design. Instead of nearly identical cards for each tool, you’ll see a unique icon in a bright color, making them easier to recognize. Each icon also has a…

Read More →

Someone’s underperforming. Now what?

14 questions to ask an employee who’s struggling during your next one-on-one meeting so you can figure out how to best help.Someone’s slipping. You see it. You feel it. You’re not on the same page. You desperately want to pull the person up, but you’re not sure exactly how. Do you encourage them? Switch them off the project? Change how you’re leading them?You’re now facing one of the toughest tasks as a leader: How do you manage underperformance at work? And more specifically, how do you sit down and talk about their underperformance with them, during a one-on-one meeting with her or him?It’s tempting to look outward first. To blame the person herself or extenuating circumstances. “They don’t pay attention to detail.” Or, “The client is being unreasonable with them.”While those may very well be the case, you should also turn inward. As leaders, when an employee is underperforming, we must self-reflect. What are…

Read More →

LinkedIn Introduces Video Ads and Video for Company Pages by @MattGSouthern

LinkedIn has finally jumped on the video ad bandwagon with video for sponsored content. LinkedIn is also giving businesses the opportunity to add video to company pages. Video for sponsored content are ads that can be placed in the LinkedIn news feed as a standalone post. These video ads have a persistent call to action button, giving businesses the opportunity to capture leads at any point throughout the video. Video for sponsored content can be targeted by traits like job title, seniority, company name, industry, skills, and more. Performance can be measured through insights and breakdowns of the types who’s […]The post LinkedIn Introduces Video Ads and Video for Company Pages by @MattGSouthern appeared first on Search Engine Journal. Source:

Solved With CSS! Colorizing SVG Backgrounds

CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting! One of those is now one of my favorite CSS features: filters. Let’s look at how we can use filters to solve a problem you may have encountered when working with SVG as a background image on an element. CSS Filters First, let’s start by with an overview of filters. They include the following functions: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() These effects can also be achieved with SVG filters or WebGL shaders, but CSS filters are the easiest way to implement basic transformations in the most browser-efficient manner. Because they are shortcuts of SVG filter effects, you can also use…

Read More →

How well do you know yourself?

Why self-awareness at work just might be the most underrated, overlooked element of a successful leader.A few months ago, I asked Ben Congleton, CEO of Olark, what he wished he’d learned earlier as a leader. No, he didn’t mention learning a new business development hack, nor did he talk about the importance of hiring well. Rather, what Ben wishes he’d learned earlier was how to improve his self-awareness as a leader.Self-awareness, really? After considering it for a moment, I caught myself nodding vigorously at his answer. How true!In my head, I recalled all the moments I’ve personally lacked self-awareness as a leader: When I micromanaged someone yet had no idea, when I argued against a new idea because of my own bias… The list goes on. Each time, I’d shot myself in the foot.The more I thought about it, the more I realized: Self-awareness at work just might be the most underrated, overlooked…

Read More →

Why would I use a Webpack?

Gonzalo García takes a crack at why webpack (not capitalized like npm) exists at all. No particular disagreements here, but here’s my crack at it… We use webpack because we need to import stuff from place;. This is a good pattern. We can use webpack to interpret those statements, as native support for them isn’t what it needs to be yet, and it’s not clear whether the native version will be smart for performance or not (probably not, at the scope of projects webpack is usually used for). We use webpack because we know we need to concatenate and compress our JavaScript anyway, and managing load order isn’t something you wanna handle manually. We use webpack because of npm. Powerful features are a yarn or npm i away and so our projects are loaded with stuff to import. We use webpack because we’re sure it performs fancy magic that results…

Read More →

The 3 Facebook Ad Metrics You Aren’t Looking At, But Should Be by @SusanEDub

Want to turbocharge your Facebook Ads performance? Watch these three metrics that apply to almost any campaign type.The post The 3 Facebook Ad Metrics You Aren’t Looking At, But Should Be by @SusanEDub appeared first on Search Engine Journal. Source:

Animate a Container on Mouse Over Using Perspective and Transform

I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it. Here’s the final version: See the Pen MrLopq by Mihai (@MihaiIonescu) on CodePen. This effect is achieved through CSS and JavaScript. I figured I’d make a little tutorial explaining how each part works so you could easily reproduce it or extend it. I recommend reading up on the almanac entries for perspective and transform before we get started. We’re going to refer to these properties through the post and it’s a good idea to be familiar with them. Let’s get down to it. Setup First, we need a…

Read More →

Chrome DevTools “Local Overrides”

There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code. Umar Hansa: Improving the performance of with local overrides and font-display Harry Roberts: Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools inside DevTools to see if your changes had the effect you wanted them to have. Great for showing a client a change without them having to set up a whole dev environment for you. Direct Link to Article — PermalinkThe post Chrome DevTools “Local Overrides” appeared first on CSS-Tricks. Source: CssTricks

Google AdWords Has New Performance Insights for Click-to-Message Ads by @MattGSouthern

Google AdWords is introducing a new set of performance insights specifically for click-to-message ads.The post Google AdWords Has New Performance Insights for Click-to-Message Ads by @MattGSouthern appeared first on Search Engine Journal. Source:

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML goes: <div class=”box”></div> The CSS is also pretty straightforward. We give this box dimensions, a background and position it in the middle horizontally with a margin. $d: 4em; .box { margin: .25*$d auto; width: $d; height: $d; background: #f90; } See the Pen by thebabydino (@thebabydino) on CodePen. Next, with the…

Read More →

Please Don’t Like This the summer of 1962, the world-famous pianist Glenn Gould performed an all-Bach concert at the Stratford Shakespeare Festival in Ontario, Canada. The second half of the program was devoted to The Art of Fugue, and Gould did something radical before he started playing the piece—he asked the audience not to applaud.This wasn’t the first time Gould publicly expressed his discomfort with audience applause. Earlier that year, he published an essay in Musical America called “Let’s Ban Applause!” He argued that the best way to consume art was to internalize it and reflect on it in a quiet, deliberate way, instead of making a flashy public response in the moment.In the essay, he jokingly proposed something he called the Gould Plan for the Abolition of Applause and Demonstrations of All Kinds, or GPAADAK. Under GPAADAK, applause would be allowed only at weekday family concerts, where “the performers, naturally, would be strictly second-team.”…

Read More →

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts! The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so. Preload and font-display are landing in Safari and Firefox. Variable fonts are shipping everywhere. Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be. 1) Reduce the File Size Far from containing only numbers, the Latin alphabet and common punctuation, many fonts support multiple languages and include thousands of additional glyphs, adding significantly to the file size. The Mac tool Font Book can display all the available glyphs in a font. In these cases, subsetting is useful. Subsetting is the removal of characters you don’t need. You can do this using the command line tool…

Read More →

AMP News

AMP is controversial, to say the least. Dave and I did a show on it about a year ago that to me felt fairly balanced in addressing some of the issues. Let’s cover some recent news and responses. One thing that isn’t usually controversial: it’s fast. AMP pages are damn performant. Even that, though, is contentious. Ferdy Christant notes: Technically correct AMP pages will perform very similar to any non-horrible web page. The difference between AMP performing instantly and getting numbers ranging from 2–8s as seen above have to be explained. Part of that answer you can probably guess: the cache is simply very fast. It’s hard to compete with a Google-class CDN. You don’t need AMP to have a fast website. FYI @CityLab article pages load faster than @nytimes AMP pages. Just to show you do not need AMP to have fast loading pages #webperf — Michael Donohoe…

Read More →

Back to Top