Posts Tagged:css

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.


An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connections Better UX for loading errors, with translatable copy That’s not even all of it. So much to think about with poor little <img>. I enjoyed Alejandro Sanchez’s response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — PermalinkThe post An Almost Ideal React Image Component appeared first on CSS-Tricks. Source: CssTricks

Using Custom Fonts With SVG in an Image Tag

When we produce a PNG image, we use an <img> tag or a CSS background, and that’s about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you’re spoiled for choices when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade-offs. Problems with inline SVG If you’re inlining SVG, you lose the ability to use browser cache, Gzip compression between servers and browsers, and search engine image indexing (inline SVG is not considered as an image). Even though your image may not have changed one bit, they are always reloaded and this causes slower loading times for your website, a trade-off that most are not willing to tolerate. In addition, inlining SVG also causes complex dependency problems…

Read More →

What is SVG good for?

Y’all probably wouldn’t be surprised if I told you it’s pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I’m a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A lot of people dip their toes in this way. You don’t have to inline the SVG if you don’t want. It could be an <img> or background-image as well. These are really simple things though. At it’s heart, SVG is simply a vector-based image format capable of just about anything. Way higher up the complexity scale, Bustle creates incredibly cool flowcharts using SVG. Try clicking around those flowcharts and seeing all the wonderful animation. SVG is very flexibly scalable. In that example above, part of what is going on there is an animation of the viewBox specifically. Speaking of interactive…

Read More →

UTC is Enough for Everyone, Right?

A good candidate for the Blog Post of the Year from Zach Holman. I think Eric Portis’ “w descriptors and sizes: Under the hood” is up there too, but perhaps even nerdier. Ooooh, also Frank Chimero’s “The Good Room” is up there. But I digress. Zach’s article is as educational as it is funny. But yeah, this UTC initialism doesn’t make any sense. Let’s dig into this a little more. So you’ve got a bunch of scientist types around 1960 who are like, hey, time is all screwy we should totes make a standard. And some of them spoke English, and some of them spoke French, which, of course, is the cause of so much conflict over so many generations. (In hindsight, maybe we should have split all those troublemakers up from the start.) The English-speaking folk were like yo, this definitely sounds like Coordinated Universal Time, boom, ship it.…

Read More →

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

This isn’t a comprehensive guide to centering things. We have that! This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don’t know the width or height of what you are centering. Vertical centering being the extra tricky of the two. Believe it or not, there was a way to do that even in IE 8. The trick was taking advantage of display: table; and that tables had this other property, vertical-align: middle;, which could be used for vertical centering. Say all you wanted to do was center a sentence perfectly in the middle of the browser window: … <body> <span> Centered vertically and horizontally. </span> </body> … You could do that like this: html, body { margin: 0; height: 100%; } body { display: table; width: 100%;…

Read More →

Don’t just copy the @font-face out of Google Fonts URLs

I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean… You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage on your site. You can take a peek in there and see what it returns… It’s just some @font-face declarations, of course! Now your performance-minded brain kicks off. Wait. So, I make one HTTP request for this stylesheet, and then it makes more HTTP requests for those woff2 files it’s linking up. Screw the middle man here, why not just copy those @font-face blocks right out of here and use them. You can! But! The issue is that Google does fancy Google things here and the contents of that original…

Read More →

The Four Big Ways Jetpack Helps with Image Performance

We’ve been working with Jetpack around here as a sponsor. It’s a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here’s one way to think about it: it brings the power of WordPress’ own massive servers to you. For now, let’s just focus on one angle of what Jetpack can do for you: image performance. Jetpack does a ton for you in this regard, solving some non-trivial performance upgrades. Let’s take a look at what I see as the four big boosts you get from Jetpack on your images. 1) WordPress does responsive images for you OK, I cheated with the first one because you don’t actually need Jetpack to benefit from this. But it’s an important and foundational…

Read More →

Building a RSS Viewer With Vue: Part 2

Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an “initial” version. I took some time to work on a few updates, and while I won’t dare call this a “perfect” version, I do think I’ve made some improvements and I’d like to share them with you. Article Series: Setup and first iteration Refinements and final version (This Post) Before I get started, here are links to the completed demo and source code. View Demo View Code Feel free to fork, file PRs, and report bugs to your heart’s content! The Plan When I shared the initial version in Part 1, I outlined some ideas to improve the…

Read More →

Here’s the thing about “unused CSS” tools

There are a lot of tools that aim to help you remove “unused CSS” from your project. Never a week goes by that I don’t see a tool for this being shared or promoted. It must strike some kind of perfect chord for some developers. I care about performance, and I know that reducing file sizes is good for performance. Indeed, it is. I bet we have CSS that is unused in our stylesheets, if we removed that, that’s a performance win. Yep, it would be. We should automate that. Ehhhhhh, I’m not so sure. There are major performance tooling players that play up this idea, like Lighthouse and how it gives you CSS and JS “Coverage”, which will surely tell you that you’re shipping code you don’t need to be. The tools that claim to help you with unused CSS have to perform analysis to be able to tell…

Read More →

Building a RSS Viewer With Vue: Part 1

As I explore, learn, and most importantly, play with Vue.js, I’ve been building different types of apps as a way to get practice with and improve my use of it. A few weeks ago, I was reading about the shut down of Digg’s RSS Reader and while great alternatives exist, I thought it would be fun to build my own with Vue. In this article, I’m going to explain how I put it together and also what’s wrong with it. I knew getting into this that I was going to make some compromises, so the plan is to follow up this version with a nicer one in a follow-up post. Article Series: Setup and first iteration (This Post) Refinements and final version (Coming Soon!) Let’s start by looking at the app and explaining the various components. View DemoView Code A Look at the App When opening the application, you’re presented…

Read More →

Creating your own meme generator

Almost every time a new meme pops up in my Twitter feed, I think of a witty version to create. I’m not alone in this. Memes are often a way to acknowledge a shared experience or idea. In a variation of the “Is this a pigeon” meme that has been making the rounds online, a designer Daryl Ginn joked about the elementary nature of most applications that say they use artificial intelligence. pic.twitter.com/nAHki0YFyV — Daryl Ginn (@darylginn) May 16, 2018 Several people replied to his tweet saying something along the lines of “replace this with this.” Daryl’s version got them thinking about other possible variations. Platforms like imgFlip exist to make meme generations fast and easy. However, there is only so much customization they can allow. For many memes, creating new versions can only be done by people with Photoshop knowledge. But it doesn’t have to be so! For some…

Read More →

More Unicode Patterns

Creating is the most intense excitement one can come to know. —Anni Albers, On Designing I recently wrote a post — that was shared here on CSS-Tricks — where I looked at ways to use Unicode characters to create interesting (and random) patterns. Since then, I’ve continued to seek new characters to build new patterns. I even borrowed a book about Unicode from a local library. (That’s a really thick book, by the way.) It’s all up to your imagination to see the possible patterns a Unicode character can make. Although not all characters are good as patterns, the process is a good exercise for me. And, aside from Unicode itself, the methods to build the patterns may not be so obvious. It usually takes a lot of inspiration and trial and error to come up with new ones. More tiling There are actually many ways to do tiling. Here’s…

Read More →

​Truly understand your site visitors’ behavior

(This is a sponsored post.)Hotjar is a quick and easy way to truly understand your visitors and identify opportunities for improvement and growth. Try the all-in-one analytics and feedback tool for free. Direct Link to Article — PermalinkThe post ​Truly understand your site visitors’ behavior appeared first on CSS-Tricks. Source: CssTricks

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i < nums.length; i++) { value += nums[i] } …to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) => ac + next, 0) They are functionally equivalent and they both sum up all the numbers in the array, but there is a bit of paradigm shift between them. Let’s explore reducers for a moment because they’re powerful, and important to have in your programming toolbox. There are literally hundreds of other articles on reducers out there, and I’ll link up some of my favorites at the end. What is a reducer? The first and most important thing to understand about a reducer is that it will always only return one value.…

Read More →

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull of the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task. Let’s take a look at what I mean. Check out this lovely Dribbble shot for a Food Recipe Website from Riko Sapto Dimo. It’s a very appealing design, and there is loads in there to think about from a front-end web design and development standpoint. We’re going to mostly be talking about design pattern choices and HTML/CSS tech choices. There is much more to the job of front-end development. Accessibility! Performance! Semantics! Design systems! All important stuff as well.…

Read More →

A Quick Roundup of Recent React Chatter

Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.” As Brad does, he clearly outlines his struggles point-by-point: I have invested enough time learning it React and ES6 travel together Syntax and conventions Getting lost in this-land I haven’t found sample projects or tutorials that match how i tend to work I’m less competent at JS than HTML and CSS It seems that Brad’s struggles resonated with others as well, inspiring empathy and help from the community. For example, Kevin Ball touches on the second and third frustrations by supplying a distinction between React and ES6 and examples of the syntax and conventions of each: For each feature, I show a couple examples of what it might look like, identify where it…

Read More →

Creating a Bar Graph with CSS Grid

If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you! Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might consider before getting started. Preface The bar is a pretty basic shape: you can control its dimensions with CSS width, height, number of grid or table cells, etc. depending on how you’ve coded it. As far as graphs go, the main thing we want to control is the height of the bars in the graph. Controlling height with Grid cells (like here) is convenient for designs where the height is incremental by a fixed value — no in-betweens. For example, signal bars in phones or when you don’t mind setting a lot of…

Read More →

Digging Into React Context

You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites. Before Context, when the management of state gets complicated beyond the functionality of setState, you likely had to make use of a third party library. Thanks to recent updates by the awesome React team, we now have Context which might help with some state management issues. What Does Context Solve? How do you move the state from a parent component to a child component that is nested in the component tree? You know that you can use Redux to manage state, but you shouldn’t have to jump to Redux in every situation. There’s a way to do this without Redux or any other third party state management tool. You can use props! Say the feature you want to implement has a tree structure similar to what I…

Read More →

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another. It’s been an item on my bucket list to create my own theme. I was coding very late the one night, well into the small hours of the morning. Everyone in my house was sleeping and so, as usual, the only light was the glow of my screen. I know it’s not necessarily healthy to code like this, but it’s literally the time I’m most productive: there are minimal distractions, I’m not dealing with work stuff, family stuff, friend stuff, or puppy stuff. I can focus. I had some preferences set for the theme I had been using and, though they all worked well for daytime or plane…

Read More →

Back to Top