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.


SVG as a Placeholder

It wasn’t long ago when Mikael Ainalem’s Pen demonstrated how you might use SVG outlines in HTML then lazyload the image (later turned into a webpack loader by Emil Tholin). It’s kind of like a skeleton screen, in that it gives the user a hint of what’s coming. Or the blur up technique, which loads a very small image blurrily blown up as the placeholder image. José M. Pérez documents those, plus some more basic options (nothing, an image placeholder, or a solid color), and best of all, a very clever new idea using Primitive (of which there is a mac app and JavaScript version), which creates overlapping SVG shapes to use as the placeholder image. Probably a bit bigger-in-size than some of the other techniques, but still much smaller than a high res JPG! Direct Link to Article — Permalink SVG as a Placeholder is a post from CSS-Tricks …

Read More →

Robust React User Interfaces with Finite State Machines

User interfaces can be expressed by two things: The state of the UI Actions that can change that state From credit card payment devices and gas pump screens to the software that your company creates, user interfaces react to the actions of the user and other sources and change their state accordingly. This concept isn’t just limited to technology, it’s a fundamental part of how everything works: For every action, there is an equal and opposite reaction. – Isaac Newton This is a concept we can apply to developing better user interfaces, but before we go there, I want you to try something. Consider a photo gallery interface with this user interaction flow: Show a search input and a search button that allows the user to search for photos When the search button is clicked, fetch photos with the search term from Flickr Display the search results in a grid…

Read More →

CSS Code Smells

Every week(ish) we publish the newsletter which contains the best links, tips, and tricks about web design and development. At the end, we typically write about something we’ve learned in the week. That might not be directly related to CSS or front-end development at all, but they’re a lot of fun to share. Here’s an example of one those segments from the newsletter where I ramble on about code quality and dive into what I think should be considered a code smell when it comes to the CSS language. A lot of developers complain about CSS. The cascade! The weird property names! Vertical alignment! There are many strange things about the language, especially if you’re more familiar with a programming language like JavaScript or Ruby. However, I think the real problem with the CSS language is that it’s simple but not easy. What I mean by that is that it…

Read More →

​BugReplay

(This is a sponsored post.)Let’s say you’re trying to report a bug and you want to do the best possible job you can. Maybe it’s even your job! Say, you’re logging the bug for your own development team to fix. You want to provide as much detail and context as you can, without being overwhelming. You know what works pretty well? Short videos. Even better, video plus details about the context, like the current browser, platform, and version. But if you really wanna knock it out of the park, how about those things plus replayable network traffic and JavaScript logs? That’s exactly what BugReplay does. BugReplay has a browser extension you install, and you just click the button to record a session with everything I mentioned: video, context, and logs. When you’re done, you have a URL with all that information easily watchable. Here’s a demo. A developer looking at…

Read More →

“a more visually-pleasing focus”

There is a JavaScript library, Focusingly, that says: With Focusingly, focus styling adapts to match and fit individual elements. No configuration required, Focusingly figures it out. The result is a pleasingly tailored effect that subtly draws the eye. The idea is that if a link color (or whatever focusable element) is red, the outline will be red too, instead of that fuzzy light blue which might be undesirable aesthetically. Why JavaScript? I’m not sure exactly. Matt Smith made a demo that shows that the outline color inherits from the color, which yields the same result. a:focus { outline: 1px solid; outline-offset: .15em; } Direct Link to Article — Permalink “a more visually-pleasing focus” is a post from CSS-Tricks Source: CssTricks

Adapting JavaScript Abstractions Over Time

Even if you haven’t read my post The Importance Of JavaScript Abstractions When Working With Remote Data, chances are you’re already convinced that maintainability and scalability are important for your project and the way toward that is introducing abstractions. For the purposes of this post, let’s assume that an abstraction, in JavaScript, is a module. The initial implementation of a module is only the beginning of the long (and hopefully lasting) process of their life-being. I see 3 major events in the lifecycle of a module: Introduction of the module. The initial implementation and the process of re-using it around the project. Changing the module. Adapting the module over time. Removing the module. In my previous post the emphasis was just on that first one. In this article, think more about that second one. Handling changes to a module is a pain point I see frequently. Compared to introducing the…

Read More →

The Contrast Swap Technique: Improved Image Performance with CSS Filters

With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn’t all that filter effects are good for. You can use filters to indicate hover state, hide passwords, and now—for web performance. While playing with profiling performance wins of using blend modes for duotone image effects (I’ll write up an article on this soon), I discovered something even more exciting. A major image optimization win! The idea is to reduce image contrast in the source image, reducing its file size, then boosting the contrast back up with CSS filters! Start with your image, then remove the contrast, and then reapply it with CSS filters. How It Works Let’s put a point on exactly how this works: Reduce image contrast using a linear transform function (Photoshop can do this) Apply a contrast filter in CSS to the…

Read More →

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to draw this mouth. Manipulating the path data can be taken to the next level to give us more interesting results, like a star morphing into a heart. The star to heart animation we’ll be coding. The idea Both are made out of five cubic Bézier curves. The interactive demo below shows…

Read More →

Apple’s Proposal for HTML Template Instantiation

I’m sure I don’t have the expertise to understand the finer nuances of this, but I like the spirit: The HTML5 specification defines the template element but doesn’t provide a native mechanism to instantiate it with some parts of it substituted, conditionally included, or repeated based on JavaScript values — as popular JavaScript frameworks such as Ember.js and Angular allow. As a consequence, there are many incompatible template syntaxes and semantics to do substitution and conditionals within templates — making it hard for web developers to combine otherwise reusable components when they use different templating libraries. Whilst previously we all decided to focus on shadow DOM and the custom-elements API first, we think the time is right — now that shadow DOM and custom-elements API have been shipping in Safari and Chrome and are in development in Firefox — to propose and standardize an API to instantiate HTML templates. Let…

Read More →

So you need to parse an email?

Say you have a website with users who have accounts. Those users email you sometimes. What if you could parse that email for more context about that user, their account, and what they might want? There are email parsing services out there. For example, Zapier offers Parser, which is free, with the idea being that you use Zapier itself to interconnect that data with other apps. You teach it about your emails and then get programatic access to those data bits. mailparser.io is another service just for this. Same deal, you send the emails to them, and from within that app you set up parsers and do all the processing you need to do. That might not be exactly what you need. Perhaps your goal in parsing an email is to extend the data available to you right in your email client. Gmail is a pretty huge email client. I…

Read More →

The CSS attr() function got nothin’ on custom properties

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn’t know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element. It’s like this: div::after { content: attr(data-whatever); } That’s certainly interesting. You could use it for (rather inaccessible) tooltips, for example: <button data-tooltip=”Information only mouse-having sighted people will see.”> Button </button> button:hover::after { content: attr(data-tooltip); /* positioned and styled and whatnot */ /* ya, a :focus style would buy you a tad more a11y */ } But you can’t put HTML in the attribute value, so those tooltips are limited to a string value, and couldn’t have a title, link, or anything like that inside them. Here’s a better use case. There is an…

Read More →

Can VS Code Do Emmet?

As in, does Visual Studio Code, the free code editor from Microsoft, work with Emmet, the free and open source code expansion tool? The answer is of course! In fact, you don’t have to do anything at all to get it going. Emmet is built-in to VS Code. Let’s take a look at what Emmet can do and some VS Code specific stuff to make the most of it. In this article, I’ll use ⌘ to denote  the command key on Apple and the control key on Windows. I’ll also use ⇧  for the shift key. What Is Emmet? Emmet is a code expansion tool that is designed to dramatically speed up the creation of HTML and CSS. It works like this. Say you wanted to create a div. Normally, you would type out each character: < … d … i … v … > Your text editor might even…

Read More →

Emulating CSS Timing Functions with JavaScript

CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position, background-size, background-blend-mode or even opacity and transform on a pseudo-element/ child, but sometimes these are just not enough. Not to mention that we run into similar problems when wanting to animate SVG attributes without a CSS correspondent. Using a lot of examples, this article is going to explain how to smoothly go from one state to another in a similar fashion to that of common CSS timing functions using just a little bit of JavaScript, without having to rely on a library, so without including a lot of complicated and unnecessary code that may become a big burden in the future. This is not how the CSS timing functions work.…

Read More →

10 Web Design Choices That Can Kill Your Clients’ Search Ranking

As a web designer, there’s no getting away from your responsibility to make design choices with SEO in mind. Your clients want their sites to rank well in search engines – there’s not much point in having one otherwise – and this means we sometimes have to make compromises. Compromise really is the key term, too. There’s no perfect way to design a website for search and your all your other priorities (user experience, conversions, etc.). You have to make the call on a number of design choices and come to the best overall result you can. Here are 10 design choices to avoid for the sake of your clients’ search ranking. Indexability killers The first thing to think about with search optimisation indexability and there are a number of potential issues you can come across as a designer. #1: One page, too much content Even basic apps like IFTTT and Pocket break…

Read More →

WordPress + PWAs

One of the sessions from the Chrome Dev Summit, hosted by Das Surma and Daniel Walmsley. It’s not so much about WordPress as it is about CMS powered sites that aren’t really “apps”, if there is such a thing, and the possibility of turning that site into a Progressive Web AppSite. I find the CMS + PWA combo interesting because: If you aren’t stoked about AMP, and let’s face it, a lot of people are not stoked about AMP, but do like the idea of a super fast website, a PWA is likely of high interest. Whereas AMP feels like you’re making an alternate version of your site, PWAs feel like you’re making the website you have much better. Some PWA work is generic and easy-ish (use HTTPS) and some PWA is bespoke and hard (make the site work offline). For lack of a better way to explain it, CMS’s…

Read More →

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called <output> that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. <input type=”range” name=”quantity” id=”quantity” min=”0″…

Read More →

Code Review Etiquette

Code reviews are a big part of writing software, especially when working within a team. It is important to have an agreed-upon etiquette for reviewing code within a team. A code review is a critique and a critique can often feel more personal than the code writing itself. A sloppy, under-researched, or insensitive code critique can cause difficulties between team members, reduce overall team productivity, and diminish code quality over time. This post will briefly define code reviews, describe some common mistakes, and provide some quick tips for improving a code review process. What are code reviews? Code reviews are the process of sharing code so that other engineers can review it. Code reviews can happen verbally during pair programming sessions, or through reviewing code on websites like CodePen and GitHub. Mainly, code reviews happen in tools like GitHub when engineers submit pull requests. Critiques are hugely beneficial. Convening engineers…

Read More →

Creating Vue.js Transitions & Animations

My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps. The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my peers had unfruitful experiences with React, I was given the green light to prototype a few apps in Vue. This prototyping morphed into full-blown Vue apps for Spektrum connected to a headless CMS. First, I spent time figuring out how to model and render our data appropriately. Then I dove head first into Vue transformations to apply a much-needed layer of polish on our two projects. I’ve prepared live demos on CodePen…

Read More →

React in Drupal Core?

Matt and Mike talk with Drupal core committter Lauri Eskola, Drupal JavaScript maintainers Théodore Biadala, and Matthew Grill, and Lullabot’s own Senior Technical Architect Sally Young about adopting a front-end JavaScript framework, specifically React into Drupal core. Source: https://www.lullabot.com

Back to Top