Category Archive for: 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.


Creating a Design System Process with UXPin

There’s never a better time to work in software. Developers and designers are among the most desired people on the market. Companies all over the world seem to have a never-ending thirst for software experts. In 2003 the U.S. Bureau of Labor Statistics estimated the number of software engineers working in the US to be 677,900 people. In 2016, this number increased over 5× to 3,870,000. At the same time, design teams grew faster than software development. In the last 5 years, the design-developer ratio increased by an average of 2.5×. These changes put enormous pressure on designers and developers to take on more projects while delivering higher quality faster. But the challenge is that software development doesn’t scale easily. Scaling through hiring, without first putting standards in place, doesn’t usually end well. With every new hire, the technical and design debt increases. New ideas for color palettes, typography, patterns,…

Read More →

Server-Side React Rendering

React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side? Suppose you’ve built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren’t showing up on Google and don’t look good when posted to Facebook. Seems solvable, right? You figure out that to solve this you’ll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter. In this…

Read More →

Reactive UI’s with VanillaJS – Part 2: Class Based Components

In Part 1, I went over various functional-style techniques for cleanly rendering HTML given some JavaScript data. We broke our UI up into component functions, each of which returned a chunk of markup as a function of some data. We then composed these into views that could be reconstructed from new data by making a single function call. This is the bonus round. In this post, the aim will be to get as close as possible to full-blown, class-based React Component syntax, with VanillaJS (i.e. using native JavaScript with no libraries/frameworks). I want to make a disclaimer that some of the techniques here are not super practical, but I think they’ll still make a fun and interesting exploration of how far JavaScript has come in recent years, and what exactly React does for us. Article Series: Pure Functional Style Class Based Components (You are here!) From functions to classes Let’s…

Read More →

Naming Things is Only Getting Harder

I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment. They’re not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows. What caught me was the fact that I can name these lines. It’s not a requirement (you can use numbers), but the ability to name the grid lines is something we can do here. In fact, naming lines can open up neat CSS tricks. Grid lines are another item in a long list of examples where front end developers have the power to name things. Class names and IDs have always been things we need to name in CSS, but consider a few of the more historically recent things where naming is important when it comes to styling: Variables: Naming values for context, such as re-usable colors…

Read More →

New Class: The Wright Framework for Joomla Templates

Wright is bootstrapped, responsive and lightweight. It’s the best Joomla framework you’ll find anywhere. In this week’s class, “The Wright Framework for Joomla templates”, you’ll learn how to use Wright to quickly create your own custom Joomla templates. Simon Kloostra shows you how to install Wright and use Wright’s default styles to quickly set up your template. You’ll learn how Wright provides you with many of the Bootstrap’s key features and components. You’ll also be able to safely customize your template using custom CSS and PHP files that won’t be overrridden during any updates. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

What Does a Well-Documented CSS Codebase Look Like?

In the front-end community, there is a lot of attention related to documenting JavaScript. That’s not so much the case with CSS. Often times I feel like lost when I join a project with minimal or no CSS documentation. Even though CSS is relatively easy to write, it can be quite hard to maintain. The specificity, the global scope of everything, and the lack of guidance can easily lead to inconsistency, code duplication, and over-complication. I’ve long been curious what a really well-documented CSS codebase looks like. Here, I’ll share my experience, along with the expectations I have towards my vision of well-documented stylesheets. It surprises me where I hear people say that commenting CSS is not that important. I imagine none of them have had to deal with 10,000+ line stylesheets! Often I’ve struggled with what HTML results in what specific style. Without having a solid context about the…

Read More →

Connect: behind the front-end experience

Some fantastic behind-the-scenes stuff about Stripe’s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques. Using CSS grid for their iconic background stripes Using 3D cubes for aesthetic flair Using reduced motion media queries to accommodate that preference Using the Web Animation API for event-triggered keyframe-like animations in JavaScript Plus one I’d never seen before: Connect’s landing page uses the new Intersection Observer API which provides a much more robust and performant way to detect the visibility of an element … The observeScroll helper simplifies our detection behavior (i.e. when an element is fully visible, the callback is triggered once) without executing anything on the main thread. Direct Link to Article — Permalink Connect: behind the front-end experience is a post from CSS-Tricks Source: CssTricks

Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem)

This is a real worry these days. I’ve heard it from lots of lots of developers. The years tick by on their projects, and all they ever seem to do is add to their CSS, never remove. It’s not just a feeling, I’ve talked with companies before that track hard data on this. Over five years of tracking the size of their stylesheet, and all it’s ever done is tick upwards in size. This could be considered problematic for several reasons: Files getting bigger is worse for performance The developers are afraid of the CSS #2 being, in my opinion, a much bigger deal than #1. The overall file size of CSS is likely to be fairly small compared to things like image assets and even the JavaScript payload these days. Fancy tooling and the world’s internet speed ever-lurching faster will probably make #1 not that big of a deal.…

Read More →

10 Steps to Building Faster Websites

Google says websites should load in less than 2-3 seconds and when Google speaks you better damn well listen. Actually, it’s not only Google that comes up with numbers like this; countless studies say you want to be hitting the 2-second benchmark to stop traffic and valuable leads running out the door. There’s a problem, though. As the web becomes a more complex medium, performance tends to take a backseat to glitzy features. Which is fine, if you want a fancy website hidden behind that blank loading screen, but not so good when most people quit the session before your first line of content loads. So how do you find that sweet-spot between a fully-featured website and one that hits the 2-second benchmark? #1: Be careful with website builders Website builders are great for building websites quickly but quite so good when it comes to loading times. Bulky code working under the…

Read More →

The $1,000 Podcasting Setup

I figure between (as I write) the 267 episodes of ShopTalk, 134 episodes of CodePen Radio, 154 video screencasts (and many hundreds more as part of the different series), and all my guest podcast apperances, I’m edging on 1,000 things I’ve voice-recorded for public consumption. 98% of that was with the Rode Podcaster, the same exact microphone I documented using in 2008. I figured it was about time for an upgrade, as I plan to continue podcasting and screencasting for another 10 years! I know audio quality is a big deal. I don’t quite consider myself an audiophile, but I know I prefer listening to podcasts with good audio quality, and I’d like to make sure what I produce is as good of quality as is practical for me right now. I had our podcast editor Chris Enns on ShopTalk to talk gear’n’stuff, and this setup is largely his recommendations.…

Read More →

Handling Long and Unexpected Content in CSS

When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn’t account for that possibility, our design could break. We can’t guarantee that our CSS will always work as expected, but at least we can reduce that by testing different types of content. When you code CSS, you’re writing abstract rules to take unknown content and organize it in an unknown medium. – Keith J. Grant In this article, we will go through different UI bugs from real-world websites so we can account for them from the beginning. Ready? Let’s go! A button with an icon placed on the right/left side This is a toggle button for an accordion. There is an icon on the right side to emphasize that it is clickable. However, when the area is not big enough, the text will…

Read More →

How the minmax() Function Works

Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we’ve been experimenting with lately. What’s especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts. Direct Link to Article — Permalink How the minmax() Function Works is a post from CSS-Tricks Source: CssTricks

Using Images as Backgrounds with CSS

Using images as backgrounds is a common practice in the web industry. Depending the case, you may need to completely fill a container with an image, or just partially. In this post, we’ll show you three examples of background-size usage. Let’s start… [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Free Guide to Using cPanel & WordPress​

Managed WordPress hosting is a great choice if you need a hosting solution that’s optimized for WordPress. But it’s only for WordPress. What if you need more? What if you need email hosting? What if you need to run other software alongside WordPress? What if you need more control than what managed WordPress hosting allows, but without the complexity of a VPS? There’s an easy solution: host everything in one place, and manage it all with the powerful cPanel dashboard. You’ll learn how in this free guide to cPanel & WordPress. Direct Link to Article — Permalink Free Guide to Using cPanel & WordPress​ is a post from CSS-Tricks Source: CssTricks

Using Mixins in Vue.js

It’s a common situation: you have two components that are pretty similar, they share the same basic functionality, but there’s enough that’s different about each of them that you come to a crossroads: do I split this component into two different components? Or do I keep one component, but create enough variance with props that I can alter each one? Neither of these solutions is perfect: if you split it into two components, you run the risk of having to update it in two places if the functionality ever changes, defeating DRY premises. On the other hand, too many props can get really messy very quickly, and force the maintainer, even if it’s yourself, to understand a lot of context in order to use it, which can slow you down. Enter mixins. Mixins in Vue are useful for writing in a functional style because ultimately, functional programming is about making…

Read More →

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series. In this article, we’ll compare WAAPI and animations done in CSS. A note on browser support WAAPI has a comprehensive and robust polyfill, making it usable in production today, even while browser support is limited. As ever, you can check Can I Use for browser support data. However, that doesn’t provide very good info on support of all the sub features of WAAPI. Here’s a checker for that: See the Pen WAAPI Browser Support Test by Dan Wilson (@danwilson) on CodePen. To experiment with all features without a polyfill, use Firefox Nightly. The basics of WAAPI If you’ve ever used jQuery’s .animate(), the basic syntax of WAAPI should look pretty familiar.  var element = document.querySelector(‘.animate-me’);…

Read More →

An Introduction to the `fr` CSS unit

With all the excitement around CSS Grid, I haven’t seen as much talk about the new fr CSS length unit (here’s the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch. To get started, let’s take a look at how we’d typically think of building a grid in CSS. In the example below, we’re creating a four column grid where each column has an equal width: <div class=”grid”> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> </div> .grid { display: grid; grid-template-columns: repeat(4, 25%); grid-column-gap: 10px; } See the Pen CSS-Tricks: Grid Example 1 by Robin Rendle (@robinrendle) on CodePen. If you’ve never…

Read More →

A Little Example of Data Massaging

I’m not sure if “data massaging” is a real thing, but that’s how I think of what I’m about to describe. Dave and I were thinking about a bit of a redesign for ShopTalk Show. Fresh coat of paint kinda thing. Always nice to do that from time to time. But we wanted to start from the inside out this time. It didn’t sound very appealing to design around the data that we had. We wanted to work with cleaner data. We needed to massage the data that we had, so that it would open up more design possibilities. We had fallen into the classic WordPress trap Which is… just dumping everything into the default content area: We used Markdown, which I think is smart, but still was a pile of rather unstructured content. An example: If that content was structured entirely differently every time (like a blog post probably…

Read More →

Back to Top