Posts Tagged:html

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 →

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 →

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 →

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 →

Top Services to Build an Appealing Website in a Short Time

Inspired Magazine Inspired Magazine – creativity & inspiration daily Whether you are a business owner willing to establish secure web presence or a user aiming at finding co-thinkers on the web, you will hardly go without a website of your own. It takes time to create a functional and appealing website, but what if you need the one right now and you don’t have time to look for professional web designers? What if your budget is limited to hire the experts, while the need to get a website is still urgent? In this case, you are bound to find out more about website builders. These services have grown in popularity, which is no wonder, taking into account the amount of non-techies struggling with niche competition nowadays. Advantages of Website Builders Readymade Templates. Most website builders, as it mentioned by Howard Steele at SuperbWebsiteBuilders.com, come with their own collections of readymade…

Read More →

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg> might have a <title>, and you might be appying IDs to both of those elements for various reasons. One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes. Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, like: <!– aria-labelledby pointing to ID’s of title and desc because some browsers incorrectly don’t use them unless we do –> <svg role=”img” viewBox=”0 0 100 100″ aria-labelledby=”unique-title-id unique-desc-id”> <!– title becomes the tooltip as well as what is read to assistive technology –> <!– must be the first child! –> <title id=”unique-title-id”>Short Title (e.g. Add to Cart)</title> <!– longer description if needed –> <desc id=”unique-desc-id”>A friendly looking cartoon cart icon…

Read More →

The Options for Programmatically Documenting CSS

I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that’s the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost. Documentation is a topic that always bugs me. Working on poorly documented codebase is a ticking bomb. It makes the onboarding process a tedious experience. Another way to think of bad documentation is that it helps foster a low truck factor (that is, “the number of people on your team who have to be hit by a truck before the project is in serious trouble”). Recently I was on-boarded into a project with more than 1,500 pages of documentation written in… Microsoft Word. It was outdated and unorganized. A real disaster. There must be a better way! I’ve talked about this documentation issue before. I scratched the…

Read More →

The Structure of an Elm Application

Most languages when they are in their infancy, tend to be considered “toy languages” and are only used for trivial or small projects. But this is not the case with Elm, where its true power shines in complex and large applications. It is not only possible to build some parts of an application in Elm and integrate those components into a larger JS application, but it is also possible to build the entire application without touching any other language making it an excellent alternative to JS frameworks like React. In this article, we will explore the structure of an Elm application using a simple site to manage plain-text documents as an example. Article Series: Why Elm? (And How To Get Started With It) Introduction to The Elm Architecture and How to Build our First Application The Structure of an Elm Application (You are here!) Some of the topics covered in…

Read More →

The Tenth Fourth

We made it a decade! It’s our tenth birthday! 🎉 This is an extra-special one, as we hit those double digits. Each year on July 4th we mark the occasion with a post. In that tradition, allow me to ramble on a bit about the past and present. The very first post ever on this site was literally a CSS trick. It’s a classic, too. “Header Text Image Replacement”: .headerReplacement { text-indent: -9999px; width: 600px; height: 100px; background: url(/path/to/your/image.jpg) #cccccc no-repeat; } Funny, I just used that trick a couple of days ago. The post is interesting to me for a number of reasons. For one, I certainly didn’t come up with that technique. At the time, I was just learning CSS myself and writing down interesting stuff I’d come across and used in my own work. I think I felt like I learned it a little more deeply by…

Read More →

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept deals with animating objects in delayed succession to produce fluid motion. The technique doesn’t only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and “feel”. Google even makes a point to mention staggered animation in its Motion Choreography page, as part of the Material Design guide: While the topic of motion design is truly vast, I often find myself applying bits and pieces even in smallest of projects. During the design process of the Interactive Coke ad on Eko I was tasked with creating some animation to be shown as the interactive video is loading, and so…

Read More →

Why Use a Third-Party Form Validation Library?

We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even showed us that with a litttttle bit more work we can get down to IE 9 support with ideal UX. So what’s up with third-party form validation libraries? Why would you use a library for something you can get for free? You need deeper browser support. All “modern” browsers + IE 9 down is pretty good, especially when you’ve accounted for cross-browser differences nicely as Chris did. But it’s not inconcievable that you need to go even deeper. Libraries like Parsley go down a smidge further, to IE 8. You’re using a JavaScript framework that…

Read More →

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a polyfill to extend support all the way back to IE9 (and plug a few feature holes in some newer versions). Now, let’s take what we’ve learned and apply it to a real example: the MailChimp signup form. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript A Validity State API Polyfill Validating the MailChimp Subscribe Form (You are here!) A simple form with a large footprint When you embed a MailChimp signup form on your site, it comes with a JavaScript validation script named `mc-validate.js`. This file is 140kb (minified), and includes the entire jQuery library,…

Read More →

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Validity State property. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got full support only recently. Today, we’ll write a lightweight polyfill that extends our browser support all the way back to IE9, and adds missing properties to partially supporting browsers, without modifying any of the core code in our script. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript A Validity State API Polyfill (You are here!) Validating the MailChimp Subscribe Form (Coming Soon!) Let’s get started. Testing Support…

Read More →

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type=”email”>) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them with the :invalid pseudo-selector, but you can’t style the error messages themselves. Behavior is also inconsistent across browsers. User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience. Unfortunately, none of the browsers natively behave this way. However, there is a way to get this behavior without depending on a large JavaScript form validation library. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript (You…

Read More →

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. What new tools do we have these days for form validation? What is possible? What is still needed? In this series, I’m going to show you two lightweight ways to validate forms on the front end. Both take advantage of newer web APIs. I’m also going to teach you how to push browser support for these APIs back to IE9 (which provides you with coverage for 99.6% of all web traffic worldwide). Finally, we’ll take a look at MailChimp’s sign-up form, and provide the same experience with 28× (2,800%) less code. It’s worth mentioning that…

Read More →

Stickybits: an alternative to `position: sticky` polyfills

Stickybits is a small JavaScript utility plugin. It’s goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way. Solving the sticky element problem can lead to sticky situations When navigating sites, it is common to see HTML elements, like banners and navigations, sticking to the top and bottom of the browser. There are a couple of ways that can be done. One, there is position: sticky, a native CSS feature. You might use it something like this: header { position: sticky; top: -1px; } MDN explains it well: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Two,…

Read More →

A Pretty Good SVG Icon System

I’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant. I’ve also often advocated for a SVG icon system that is based on <symbol>s (an “SVG sprite”) and the <use> element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is certainly a simpler (and perhaps a little better) way to go. Just include the icons inline. That’s it. Sorry if you were hoping for something fancier. Like this: <button> <svg class=”icon icon-cart” viewBox=”0 0 100 100″ aria-hidden=”true”> <!– all your hot svg action, like: –> <path d=” … ” /> </svg> Add to Cart </button> Or perhaps more practically, with your server-side include of choice: <button> <?php include(“/icons/icon-cart.svg”); ?> Add to…

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 →

Back to Top