Category Archive for: jquery

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.


A Minimal JavaScript Setup

Some people prefer to write JavaScript with React. For others, it’s Vue or jQuery. For others still, it is their own set of tools or a completely blank document. Some setups are minimal, some allow you to get things done quickly, and some are crazy powerful, allowing you to build complex and maintainable applications. Every setup has advantages and disadvantages, but positives usually outweigh negatives when it comes to popular frameworks verified and vetted by an active community. React and Vue are powerful JavaScript frameworks. Of course they are — that’s why both are trending so high in overall usage. But what is it that makes those, and other frameworks, so powerful? Is it the speed? Portability to other platforms like native desktop and mobile? Support of the huge community? The success of a development team starts with an agreement. An agreement of how things are done. Without an agreement,…

Read More →

Control the Internet With Chrome Extensions!

As a web UI developer and designer, there are countless things to learn and only so many hours in the day. There are topics I’ve purposefully avoided, like mobile and offline application development because, at some point, you have to draw a line somewhere in the millions of shiny new topics and get some work done. One of the areas I’ve avoided in the past is browser extension development. I didn’t understand how they worked, what the development environment was, or how permissions interacted with overriding pages because, frankly, I didn’t think I was interested. Then one day, my very talented designer/developer friend Natalie Schoch asked me to get her Chrome Extension across the finish line. She had the front-end prototyped, but needed some help plugging in the data set and with interactive JavaScript. The project is called Wordsmith and it’s out now at the Chrome Extension Store. It’s a…

Read More →

Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned

In the summer of 1998, when President Clinton fended off allegations of sexual impropriety and Donald Trump filmed a cameo in a Woody Allen movie, I embarked on my career as a freelance web developer. Twenty years and more than 300 websites later, I’m still at it—always working on my own and always from home. Over that time, I’ve had the pleasure of partnering with many prominent advertising agencies and boutique design firms as well as scores of local businesses and individuals. Those interested in making the switch to freelancing have often asked me for advice, and I’ve been happy to help with whatever words of wisdom I can provide. This article is a distillation of much of that. And it may prove helpful not only to developers and programmers who wish to freelance, but also designers, project managers, copywriters—anyone who desires to work independently from home in our industry.…

Read More →

The dialog element

Let’s talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content. Problem Implementing solutions for pop-ups can be difficult. What seems trivial on the surface can become more complicated in a hurry. You may need to account for modal and popover designs. And animations. How about custom behavior on form submissions? What happens if there is more than one modal trying to display at the same time? To help with that, you may reach for a plugin solution. But there are so many choices, and a lot of topics to consider: APIAccessibilityDependencies. You might not want jQuery, React, or similar.Support. Who is maintaining…

Read More →

Removing jQuery from GitHub.com frontend

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs. The team explores how using tools like eslint-plugin-jquery discourages developers at GitHub from using jQuery, but the team also notes that they decided to remove certain design behaviors altogether to help them achieve this goal:…

Read More →

Prototyping in the Browser

Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now unclickable? How long do they have to wait until they can perform an action? At Gusto, I’ve been working on a lot of tiny interaction details and prototypes lately for these very reasons — sadly there’s not much that I can show you all in detail just yet. But, I think the process of how I’m doing this is far more interesting than what I’m actually working on so that’s what I’m going to share here. The problem I’ve faced with prototyping animations comes down to the tools because they ultimately feel restrictive to me. Whenever I’ve experimented with them…

Read More →

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways. Magic Number it with viewport units If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number. In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier (@chriscoyier) on CodePen. This is kind of a less exotic version of fluid typography, which involves more of a sprinkling of viewport units and min/max sizes. FitText Dave Rupert’s FitText is up for the job. You still…

Read More →

A Quick Roundup of Recent React Chatter

Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.” As Brad does, he clearly outlines his struggles point-by-point: I have invested enough time learning it React and ES6 travel together Syntax and conventions Getting lost in this-land I haven’t found sample projects or tutorials that match how i tend to work I’m less competent at JS than HTML and CSS It seems that Brad’s struggles resonated with others as well, inspiring empathy and help from the community. For example, Kevin Ball touches on the second and third frustrations by supplying a distinction between React and ES6 and examples of the syntax and conventions of each: For each feature, I show a couple examples of what it might look like, identify where it…

Read More →

The web can be anything we want it to be

I really enjoyed this chat between Bruce Lawson and Mustafa Kurtuldu where they talked about browser support and the health of the web. Bruce expands upon a lot of the thoughts in a post he wrote last year called World Wide Web, Not Wealthy Western Web where he writes: …across the world, regardless of disposable income, regardless of hardware or network speed, people want to consume the same kinds of goods and services. And if your websites are made for the whole world, not just the wealthy Western world, then the next 4 billion people might consume the stuff that your organization makes. Another highlight is where Bruce also mentions that, as web developers, we might think that we’ve all moved on from jQuery as a community, and yet there are still millions of websites that depend upon jQuery to function properly. It’s an interesting anecdote and relevant to recent…

Read More →

When should we release Drupal 9?

Since the release of Drupal 8.0.0 in November 2015, the Drupal 8 core committers have been discussing when and how we’ll release Drupal 9. Nat Catchpole, one of Drupal 8’s core committers, shared some excellent thoughts about what goes into making that decision. The driving factor in that discussion is security support for Drupal 8’s third party dependencies (e.g. Symfony, Twig, Guzzle, jQuery, etc). Our top priority is to ensure that all Drupal users are using supported versions of these components so that all Drupal sites remain secure. In his blog, Nat uses Symfony as an example. The Symfony project announced that it will stop supporting Symfony 3 in November 2021, which means that Symfony 3 won’t receive security updates after that date. Consequently, by November 2021, we need to prepare all Drupal sites to use Symfony 4 or later. Nothing has been decided yet, but the current thinking is…

Read More →

Learning Gutenberg: Series Introduction

Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it. Who this is for This series is more for developers who are curious about this new world and wanna get started working with it. This series isn’t necessarily for site owners who want to know how it’s going to affect their site or who are worried about it for any reason. It’s clear there is a lot of possibility with Gutenberg. Yes, it’s aiming to be a better editing experience, but it also likely to change how people think of what’s possible with WordPress. With the custom “blocks”…

Read More →

The State of Web Animation: Part 2

In Part 2, we’re picking up where I left off with current tools for animation with JavaScript (mostly in the form of JavaScript libraries). Be sure to check out Part One. Javascript is admittedly a more controversial method of animation than the methods I mentioned previously (Video, Gifs, CSS Transitions + Keyframes). There was once a day when we longed for CSS support of animation and, when that day came to pass, many disregarded JavaScript animation as non-performant and outdated. But now, JavaScript animation is making a come-back in a few different forms (and no, none of them are just changing CSS classes). There are far too many libraries out there to cover them all, so I’ll try to cover more broad techniques with some notable libraries: jQuery Using jQuery as an animation tool (with .animate()) is pretty outdated. Unless you really need your animations to work in IE versions 9 or…

Read More →

The State of Web Animation: Part 1

We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit: Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next? I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m…

Read More →

How to use Drupal 8's off-canvas dialog in your modules

The goal of this tutorial is to show how to use Drupal 8.5’s new off-canvas dialog in your own Drupal modules. The term “off-canvas” refers to the ability for a dialog to slide in from the side of the page, in addition to resizing the page so that no part of it is obstructed by the dialog. You can see the off-canvas dialog in action in this animated GIF: This new Drupal 8.5 feature allows us to improve the content authoring and site building experience by turning Drupal outside-in. We can use the off-canvas dialog to enable the content creator or site builder to seamlessly edit content or configuration in-place, and see any changes take effect immediately. There is no need to navigate to the administrative backend to make edits. As you’ll see in this tutorial, it’s easy to use the off-canvas dialog in your own Drupal modules. I use…

Read More →

SANDcamp: Introduction to Site Building

Start:  2018-03-23 09:00 – 17:00 America/Los_Angeles Organizers:  rainbreaw cstauffer Event type:  Training (free or commercial) https://www.sandcamp.org/introduction-drupal-8-site-building Description Learn the basics of building a CMS (content management system) based website using Drupal 8 — a completely customizable, flexible, and scalable open-source framework. This introduction will give you all of the essentials required to produce a straightforward site, customize your content and displays, and enough knowledge to find more targeted information for unique customizations as you progress through your Drupal site building adventures. This training is being offered by STAUFFER – www.stauffer.com – for free as part of the Drupal Global Training Days initiative. Training Agenda Morning: Part I Introduction: What is Drupal? Getting Set Up Quickly Basic Site Configuration Basic Content Creation Navigation / Structure: — The Menu System — Taxonomy Morning: Part II Going beyond OOTB (out of the box) Options — Changing functionality with Contributed Modules — Customizing your…

Read More →

The JavaScript Learning Landscape in 2018

Raise your hand if this sounds like you: You’ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, “It’s time for something new, for the next step in your career. You need to learn programming.” Yep, same here. I’ve served in a variety of roles in the tech industry for close to a decade. I’ve written a bunch of articles on design, coding, HTML, and CSS. Hell, I’ve even written a few books and spoken at conferences around the world. But there’s still that voice that keeps telling me I need to tackle programming; that I’ll never be fulfilled until I learn how to develop my own ideas and projects from scratch. Being a web guy, the obvious language to learn: JavaScript.…

Read More →

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

Back to Top