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.


​Edit your website, from your website

Stuck making “a few easy changes” to the website for someone? Component IO makes it quick and simple for you or your team to make edits (even for non-technical users). You can manage content with a WYSIWYG editor or instantly update HTML, CSS, and JavaScript right from your website. Make changes faster, empower your team, and avoid redeployment bugs. Works with every web technology, from WordPress to Rails to React. Join hundreds of projects already using Component IO, with a free tier and plans from $7.95/mo. It’s built to make web development easier for everyone. Try it free Direct Link to Article — Permalink ​Edit your website, from your website is a post from CSS-Tricks Source: CssTricks

Playing with Shadow DOM

About a year ago, Twitter announced it would start displaying embedded tweets with the shadow DOM rather than an <iframe>, if the browser supports shadom DOM? Why? Well, speed is one reason. They say: Much lower memory utilization in the browser, and much faster render times. Tweets will appear faster and pages will scroll more smoothly, even when displaying multiple Tweets on the same page. Why the choice? Why is it necessary to use either iframes or shadow DOM? Why not just inject the content onto the page? It’s a totally understandable need for control. An embedded Tweet should look and behave just exactly like an embedded Tweet. They don’t want to worry about the styles of the page bleeding in and messing that up. An <iframe> makes style scoping very easy. Point the src of the iframe at a URL that displays what you want an embedded tweet to…

Read More →

Implementing Webmentions

We get a decent amount of comments on blog posts right here on CSS-Tricks (thanks!), but I’d also say the hay day for that is over. These days, if someone writes some sort of reaction to a blog post, it could be on their own blog, or more likely, on some social media site. It makes sense. That’s their home base and it’s more useful to them to keep their words there. It’s a shame, though. This fragmented conversation is slightly more useful for each individual person, it’s less useful as a whole. There is no canonical conversation thread. That’s what Webmentions are all about, an official spec! In a sense, they allow the conversation to be dispursed but brought all together in a canonical conversation thread on the main post. Webmentions don’t need to be an alternative to comments, although when you pop over to real Drew McLellan’s post…

Read More →

Intro to Hoodie and React

Let’s take a look at Hoodie, the “Back-End as a Service” (BaaS) built specifically for front-end developers. I want to explain why I feel like it is a well-designed tool and deserves more exposure among the spectrum of competitors than it gets today. I’ve put together a demo that demonstrates some of the key features of the service, but I feel the need to first set the scene for its use case. Feel free to jump over to the demo repo if you want to get the code. Otherwise, join me for a brief overview. Setting the Scene It is no secret that JavaScript is eating the world these days and with its explosion in popularity, an ever-expanding ecosystem of tooling has arisen. The ease of developing a web app has skyrocketed in recent years thanks to these tools. Developer tools Prettier and ESLint give us freedom to write how…

Read More →

More Gotchas Getting Inline SVG Into Production—Part II

The following is a guest post by Rob Levin and Chris Rumble. Rob and Chris both work on the product design team at Mavenlink. Rob is also creator and host of the SVG Immersion Podcast and wrote the original 5 Gotchas article back in ’14. Chris, is a UI and Motion Designer/Developer based out of San Francisco. In this article, they go over some additional issues they encountered after incorporating inline SVGs in to Mavenlink’s flagship application more then 2 years ago. The article illustrations were done by Rob and—in the spirit of our topic—are 100% vector SVGs! Wow, it’s been over 2 years since we posted the 5 Gotchas Getting SVG Into Production article. Well, we’ve encountered some new gotchas making it time for another follow up post! We’ll label these 6-10 paying homage to the first 5 gotchas in the original post 🙂 Gotcha Six: IE Drag &…

Read More →

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts. I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion with caveats in her article. To be fair, it’s not bad advice in theory. HTTP/2’s multiplexing ability gives us leeway to avoid bundling without suffering the ill effects of head-of-line blocking (something we’re painfully familiar with in HTTP/1 environments). Unraveling some of these HTTP/1-specific optimizations can make development easier, too. In a time when web development seems more complicated than ever, who wouldn’t appreciate a little more simplicity? As with anything…

Read More →

Did CSS get more complicated since the late nineties?

Hidde de Vries gathers some of the early thinking about CSS: There is quite a bit of information on the web about how CSS was designed. Keeping it simple was a core principle. It continued to be — from the early days and the first implementations in the late nineties until current developments now. The four main design principles listed are fascinating: Authors can specify as much or little as they want It is not a programming language by design They are agnostic as to which medium they are used for It is stream-based So… did it? I think lots has changed since the early nineties, but not really things that touch on how we apply CSS to structured markup. Direct Link to Article — Permalink Did CSS get more complicated since the late nineties? is a post from CSS-Tricks Source: CssTricks

Let’s say you wanna open source a little thing…

Let’s say you’ve written a super handy little bit of JavaScript. Nice! Well done, you. Surely, the world can benefit from this. A handful of people, at least. No need to keep this locked up. You’ve benefitted from open source tremendously in your career. This is the perfect opportunity to give back! Let’s do this. You’re going to need to chuck it into a GitHub repo. That’s like table stakes for open source. This is where people can find it, link to it, see the code, and all that. It’s a place you can push changes to if you need to. You’ll need to pick a license for it. If the point of this is “giving back” you really do need to, otherwise, it’s essentially like you have the exclusive copyright of it. It’s somewhat counter-intuitive, but picking a license opens up usage, rather than tightening it. You’ll need to…

Read More →

PWA Stats

A community-driven list of stats and news related to Progressive Web Apps Things like: Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and a 20% decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks. It’s in the same veins as WPO Stats, which is focused solely on web performance and positive effects of doing a good job. Direct Link to Article — Permalink PWA Stats is a post from CSS-Tricks Source: CssTricks

Media Temple

Media Temple has always been huge supporters of the web design and development communities. They got some deals cookin’ right now to celebrate the 20th anniversary of CSS itself. Funny to think this site is just about exactly half as old as its namesake. Over on their blog, Alex Rojas rounded up some highlights of those first 20 years, and I did similarly. I’ve used Media Temple for hosting for this site, and dozens and dozens of others, throughout my years in web development. One of the things I always think about with hosting is speed. To be perfectly honest, a host can only do so much for you. As long as you’re on good hardware that is appropriate for your site, the rest of that, say 90%, is on you. You need to make good choices, write good code, do persistent monitoring, and all that. When you’re working on…

Read More →

Methods to Organize CSS

Developer Ben Frain once remarked that it’s easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem. OOCSS OOCSS stands for object-oriented CSS. This approach has two main ideas: Separation of structure and design Separation of container and content Using this structure, the developer obtains general classes that can be used in different places. At this step, there are two pieces of news (as usual, good and bad): Good: reducing the amount of code by reusing it (DRY principle). Bad: complex support. When you change the style of a particular element, you will most likely have to change not only CSS (because most classes are common), but also add classes to the markup. Also, the OOCSS approach itself does not offer specific rules, but abstract recommendations, so how this method ends up…

Read More →

Empathy Prompts

Activities to help you develop empathy for the variety of people that use your thing. Eric Bailey: This project is geared towards anyone involved with making digital products. It is my hope that this reaches both: People who are not necessarily involved in the day-to-day part of the process, but who help shape things like budget, timeline, and scope, and People who work every day to help to give these products shape and form These prompts are intended to help build empathy, not describe any one person’s experience. These prompts are not intended to tokenize the experience of the individuals experiencing these conditions. I love the “share” link on the page. It’s basically window.prompt(“go ahead”); Direct Link to Article — Permalink Empathy Prompts is a post from CSS-Tricks Source: CssTricks

Net Neutraility

I’m linking up a “call to action” style site here as it’s nicely done and explain the situation fairly well. Right now, there are rules (in the United States) against internet providers prioritizing speed and access on a site-by-site basis. If they could, they probably would, and that’s straight up bad for the internet. In other “good for the internet” news… does my site need HTTPS? Direct Link to Article — Permalink Net Neutraility is a post from CSS-Tricks Source: CssTricks

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API’s have improved by leaps and bounds since jQuery’s release all the way back in 2006. People have been writing “You Might Not Need jQuery” articles since 2013 (see this classic site and this classic repo). I don’t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new APIs that take the pain away from library-free development, many of them directly copied from jQuery. Let’s go through some new vanilla alternatives to jQuery methods. Remove an element from the page Remember the maddeningly roundabout way you had to remove an element from the page with vanilla DOM? el.parentNode.removeChild(el);? Here’s a comparison of the jQuery way and the new improved vanilla way. jQuery: var $elem = $(“.someClass”) //select the element $elem.remove(); //remove the…

Read More →

Transitioning Gradients

Keith J. Grant: In CSS, you can’t transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element. You also need a little z-index trickery to ensure any content inside stays visible. Gosh, I remember a time not so long ago pseudo elements weren’t transitionable! I figured as long as we’re using a pseudo element here, I’d document a few others ways as well. We could always move the position of a longer element, making it look like a gradient transition. Or, we could use a half-transparent gradient and transition a solid background behind it. Direct Link to Article — Permalink Transitioning Gradients is a post from CSS-Tricks Source: CssTricks

Let’s Talk About Speech CSS

Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements. Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities—again, kind of repetitive and not worth paying attention to after the first time. Most important are service alerts, which typically deliver direct and immediate information riders need to take action on. An informal priority A regular rider’s ear gets trained to listen for important announcements, passively, while fiddling around on a phone or zoning out after a hard day of work. It’s not a perfect system—occasionally I’ll find myself trapped on a train that’s been pressed into express service. But we shouldn’t remove lower priority announcements. It’s unclear what kind of information will be important to whom: tourists, new residents, or visiting friends and…

Read More →

Jekyll Includes are Cool

Dave Rupert: When cruising through the Includes documentation I noticed a relatively new feature where you can pass data into a component. I was similarly excited learning about Macros in Nunjucks. Then: After a couple days of writing includes like this I thought to myself “Why am I not just writing Web Components?” Direct Link to Article — Permalink Jekyll Includes are Cool is a post from CSS-Tricks Source: CssTricks

Designed Lines

Ethan Marcotte on digital disenfranchisement and why we should design lightning fast, accessible websites: We’re building on a web littered with too-heavy sites, on an internet that’s unevenly, unequally distributed. That’s why designing a lightweight, inexpensive digital experience is a form of kindness. And while that kindness might seem like a small thing these days, it’s a critical one. A device-agnostic, data-friendly interface helps ensure your work can reach as many people as possible, regardless of their location, income level, network quality, or device. Direct Link to Article — Permalink Designed Lines is a post from CSS-Tricks Source: CssTricks

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don’t get used that much in the wild – the likes of CSS Grid, custom properties, blend modes, and even SVG. SVG was used in order to create the irregular images that appear as if they were glued onto the page with the pieces of neon sticky tape. This article is going to explain how to recreate that in the simplest possible manner, without ever needing to step outside the browser. Let’s get started! The first thing we do is pick an image we start from, for example, this…

Read More →

Back to Top