Posts Tagged:javascript

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.


Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn’t too difficult. Let’s get started! Server side rendering You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article does really well going into more depth on the subject. My favorite takeaway is: By rendering on the server, you can cache the final shape of your data. Instead of grabbing JSON or other information from the server, parsing it,…

Read More →

​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 →

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 →

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 →

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 →

(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 →

Introducing Microcosm: Our Data Layer For React

One of my favorite things about working in client-services is the interval with which we start new work. As a React shop, this means we build a lot of new apps from the ground up. Along the way, we’ve distilled what we’ve learned and baked it into a tool that I, finally, want to talk about. Microcosm is our general purpose tool for keeping React apps organized. We use it to work with application state, split large projects into manageable chunks, and as the guiding star for our application architecture. Before I go too much further: check it out the project on Github! In this post, I’ll provide a high level overview of Microcosm and some of the features I find particularly valuable. At a glance Microcosm was born out of the Flux mindset. From there it draws similar pieces: Actions Actions are a general abstraction for performing a job.…

Read More →

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 →

Programming languages aren’t a zero sum game

Stop me if you’ve heard these before when people get to talking about programming languages…“These features are copied this from <superior language>.”“Nothing new here. <superior language> has done this for years.”“This language has nothing on <superior language>, but nobody realizes it.”“<superior language> does the same thing, but better.”I bring it up because I’ve been reading and writing a lot about Kotlin lately. And invariably someone posts a snarky comment like one those above, carrying with it a clear innuendo: my preferred programming language is better than yours.And every time I see those I leave with the same reaction. Who gives a shit?Now I’m not talking about people who are having constructive conversations or even just poking fun. Hell, I may have been known to take a jab at Java every once in a while. 👊I’m talking about a subset of programmers who treat languages like it’s a zero sum game — that for one language to succeed, another (or all…

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 →

Local by Flywheel

I’ve switched all my local WordPress development over to Local by Flywheel. I heard about it from y’all when we did a poll not to long ago about local WordPress development. Bottom line: it’s really good. It does everything you want it to, well, with zero hassle, and nothing more. Running Multiple WordPress Installs (PHP, MySQL, Web Server) That’s kind of the whole point. Local by Flywheel spins up a local site for you with all the dependencies that WordPress needs. Just by picking a few options and giving the site a name, you’ve spun up a new WordPress install in a few seconds. And it’s ready to go! Nice UI Surely what Local by Flywheel is doing under the hood is quite complicated, but the UI for the app isn’t at all. I’m a big fan of apps like this. The super clean UI makes everything feel so easy…

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 →

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 →

Back to Top