Category Archive for: 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.


GraphQL in Drupal: An Exclusive Excerpt from the Forthcoming Book, Decoupled Drupal in Practice

Over the last few years, I have had the privilege of sharing insights and tutorials on decoupled Drupal, which was originally unknown territory with shifting sands but today is a widely adopted approach, including by some of Acquia’s most influential customers. Nonetheless, the relative unavailability of developer-focused resources that are both authoritative and current has hindered architects’ and developers’ ability to evaluate and explore decoupled Drupal for themselves. Luckily, next month, my new book Decoupled Drupal in Practice will be officially on the market. With a foreword by Acquia CTO and co-founder and Drupal project lead Dries Buytaert, it is the first and only holistic guide available for developers interested in architecting and implementing decoupled Drupal across the stack. You can now preorder Decoupled Drupal in Practice on Amazon and on Apress, and it is an absolute necessity for any Drupal developer investigating decoupled Drupal. Wherever on the stack you…

Read More →

23 SEO & Search Takeaways from Google’s Gary Illyes by @MrDannyGoodwin

Gary Illyes, Google Webmaster Trends Analyst, opened up Pubcon in Las Vegas this morning talking about what’s new with Google and what you need to know about optimizing for search. Here are the highlights from the keynote. The Basics 1. Good URLs Are Critical Illyes started by reminding everyone the importance of good URL structure and warned not to use hashtags in URLs. Typically, JavaScript frameworks are to blame for hashtags in URLs. While it may slightly increase your loading time, it’s really bad for search because no search engine will understand anything in the URL after the hashtag. For […]The post 23 SEO & Search Takeaways from Google’s Gary Illyes by @MrDannyGoodwin appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Introducing GitHub Actions

It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you’re not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment… all in one place. Previously, there were only few options here that could help with that. You could piece together other services, set them up, and integrate them with GitHub. You could also write post-commit hooks, which also help. But now, enter GitHub Actions. Actions are small bits of code that can be run off of various GitHub events, the the most common of which is pushing to master. But it’s not necessarily limited to that. They’re all directly integrated with GitHub, meaning you no…

Read More →

Why Using reduce() to Sequentially Resolve Promises Works

Writing asynchronous JavaScript without using the Promise object is a lot like baking a cake with your eyes closed. It can be done, but it’s gonna be messy and you’ll probably end up burning yourself. I won’t say it’s necessary, but you get the idea. It’s real nice. Sometimes, though, it needs a little help to solve some unique challenges, like when you’re trying to sequentially resolve a bunch of promises in order, one after the other. A trick like this is handy, for example, when you’re doing some sort of batch processing via AJAX. You want the server to process a bunch of things, but not all at once, so you space the processing out over time. Ruling out packages that help make this task easier (like Caolan McMahon’s async library), the most commonly suggested solution for sequentially resolving promises is to use Array.prototype.reduce(). You might’ve heard of this…

Read More →

WordPress.com

Hey! Chris here, with a big thanks to WordPress, for not just their sponsorship here the last few months, but for being a great product for so many sites I’ve worked on over the years. I’ve been a web designer and developer for the better part of two decades, and it’s been a great career for me. I’m all about learning. The more you know, the more you’re capable of doing and the more doors open for you, so to speak, for getting things done as a web worker. And yet it’s a dance. Just because you know how to do particular things doesn’t mean that you always should. Part of this job is knowing what you should do yourself and what you should outsource or rely on for a trustworthy service. With that in mind, I think if you can build a site with WordPress.com, you should build your…

Read More →

Google’s John Mueller Predicts Much More JavaScript in SEO in the Coming Years by @MattGSouthern

Google’s John Mueller predicts technical SEOs will run into more JavaScript in the coming years than they’ve encountered so far.The post Google’s John Mueller Predicts Much More JavaScript in SEO in the Coming Years by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates). Very recently, Rahul Nanwani wrote up an extensive guide on lazy loading images. I’d like to cover the same topic, but from a different approach: using data attributes, Intersection Observer and custom directives in Vue.js. What this’ll basically do is allow us to solve two things: Store the src of the image we want to load without loading it in the first place. Detect when the image becomes visible to the user and trigger the request to load the image. Same basic lazy…

Read More →

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type=”checkbox”>) that isn’t checked. Nor is it not checked. It’s indeterminate. We can even select a checkbox in that state and style it with CSS! Some curious points though: It’s only possible to set via JavaScript. There is no HTML attribute or value for it. It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked. So, say you had a form like this: <form action=”” method=”POST” id=”form”> <input name=”name” type=”text” value=”Chris” /> <input name=”vegetarian” type=”checkbox” class=”veg”> <input type=”submit” value=”Submit”> </form> And, for whatever reason, you make that checkbox indeterminate: let veg = document.querySelector(“.veg”); veg.indeterminate = true; If you serialize that form and take a look at what will POST, you’ll get “name=Chris”. No value for the checkbox. Conversely, had you checked the checkbox in the HTML and didn’t touch it…

Read More →

The Way We Talk About CSS

There’s a ton of very quotable stuff from Rachel Andrew’s latest post all about CSS and how we talk about it in the community: CSS has been seen as this fragile language that we stumble around, trying things out and seeing what works. In particular for layout, rather than using the system as specified, we have so often exploited things about the language in order to achieve far more complex layouts than it was ever designed for. We had to, or resign ourselves to very simple looking web pages. Rachel goes on to argue that we probably shouldn’t disparage CSS for being so weird when there are very good reasons for why and how it works — not to mention that it’s getting exponentially more predictable and powerful as time goes by: There is frequently talk about how developers whose main area of expertise is CSS feel that their skills…

Read More →

Update on the Admin UI / JavaScript Modernization Initiative

Mike and Matt interview members of the Drupal 8 JavaScript modernization initiative to find out what’s going on, and the current status. Source: https://www.lullabot.com

Valid CSS Content

There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. Here’s an example: <div data-done=”✅” class=”email”> [email protected] </div> .email::before { content: attr(data-done) ” Email: “; /* This gets inserted before the email address */ } The property generally takes anything you drop in there. However, there are some invalid values it won’t accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things. This works fine: /* Valid */ ::after { content: “1”; } …but this does not: /* Invalid, not a string */ ::after { content: 1; } I’m not entirely sure why, but I imagine it’s because 1 is a unit-less number (i.e. 1 vs. 1px) and not a string. You can’t trick it either! I tried to…

Read More →

Website Developer & Designer – Image Makers Advertising, Inc. – Brookfield, WI

Website Developer &amp; Designer. Proficiency in WordPress, Joomla, Drupal, Magento, and other content management systems, plus HTML, CSS, Markdown, JavaScript,…From Image Makers Advertising, Inc. – Thu, 11 Oct 2018 10:19:54 GMT – View all Brookfield, WI jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Decoupled Drupal Authentication with OAuth 2.0

Perhaps the most critical component of any decoupled Drupal architecture is a robust authentication mechanism that protects data transmitted between a Drupal site and API consumers like JavaScript applications and native mobile applications. While Drupal core makes available HTTP Basic Authentication and cookie-based authentication, both easy to use, neither of these approaches is sufficiently secure when it comes to best practices. Fortunately, the Drupal contributed ecosystem contains several highly useful modules that leverage more recent authentication standards like OAuth 2.0 Bearer Token and JSON Web Tokens (JWT), both of which are seeing wide use in the Drupal community among decoupled Drupal practitioners. In the next two installments of Experience Express, we take a breather from voyaging to conferences and inspect authentication best practices in decoupled Drupal, starting with OAuth 2.0. OAuth 2.0 Bearer Token authentication At present, OAuth represents one of the most commonly found authentication methods as an open…

Read More →

Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you’re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it’s extremely likely you’ll be styling buttons anyway. Scott O’Hara has taken a look as well. I think the solution offered to use a <span role=”button” tabindex=”0″ onClick=”…”> is a little bizarre since you need bring your own keyboard handling with is non-trivial and requires JavaScript. But there are a couple of interesting other CSS explorations, neither of which stacked up for different reasons: display: contents; – some semantics-based accessibility problems. all: unset; – doesn’t reset display value, not good enough browser support. Direct Link to Article — PermalinkThe post Unbuttoning Buttons appeared first on CSS-Tricks. Source: CssTricks

Website Developer & Designer – Image Makers Advertising – Brookfield, WI

Website Developer &amp; Designer*. Proficiency in WordPress, Joomla, Drupal, Magento, and other content management systems, plus HTML, CSS, Markdown, JavaScript,…From Indeed – Fri, 05 Oct 2018 20:41:56 GMT – View all Brookfield, WI jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Moving Backgrounds With Mouse Position

Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: <div class=”module” id=”module”></div> And you toss a background on it: .module { background-image: url(big-image.jpg); } You can adjust the background-position in JavaScript like this: const el = document.querySelector(“#module”); el.addEventListener(“mousemove”, (e) => { el.style.backgroundPositionX = -e.offsetX + “px”; el.style.backgroundPositionY = -e.offsetY + “px”; }); See the Pen Move a background with mouse by Chris Coyier (@chriscoyier) on CodePen. Or, you could update CSS custom properties in the JavaScript instead: const el = document.querySelector(“#module”); el.addEventListener(“mousemove”, (e) => { el.style.setProperty(‘–x’, -e.offsetX + “px”); el.style.setProperty(‘–y’, -e.offsetY + “px”); }); .module { –x: 0px; –y: 0px; background-image: url(large-image.jpg); background-position: var(–x) var(–y); } See the Pen Move a background with mouse by Chris Coyier (@chriscoyier) on CodePen. Here’s an example that moves the background directly in JavaScript,…

Read More →

The next big jump in Basecamp accessibility!

How we made the Basecamp 3 Jump Menu accessibleThe Basecamp 3 Jump MenuEarlier this year I wrote about How we stopped making excuses and started improving Basecamp’s accessibility. Accessibility improvements in Basecamp 3 have come in two ways: All new features we’ve shipped over the past year and a half have been designed and tested to meet WCAG AA guidelines (The Web Content Accessibility Guidelines, or WCAG, provides a shared standard that web developers can follow to make sure their products are accessible).At the same time, we’ve gone back and retrofitted existing features and interactions for better accessibility. Today I’m excited to announce that we just completed some significant improvements to the Basecamp 3 Jump Menu!The jump menu has always been the quickest way for getting to a person, project, recently visited page, and My assignments/bookmarks/schedule /drafts/latest activity. Here’s a look at it in action:Note the small-ish “Press ⌘+J to show the menu” labelIn…

Read More →

Using Drupal 8 and AWS IoT to Power Digital Signage for New York’s Subway System

Intro: About Digital Experiences and Signs (Special thanks to Gerardo Gonzalez and Andy Hawks, engineers at CivicActions, who worked on this project — and this post — with me.) “Digital Experiences” are the next big thing someone at your company is almost certainly talking about. These include visionary technology that operates based on rich data that is timely and location-based, interactions between other services and products, and perhaps most importantly: content that is not reliant on a user manually driving the experience (as they usually might on a website or mobile application). One common form factor for these experiences is the digital sign. Not all signs constitute a digital experience, but there is an emerging market for such devices and the management of the content / data that is flowing to them. This challenge is particularly exciting when considering the potential for massive scale, as digital signage is installed across…

Read More →

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That’s harder than it might seem at first glance. The main reason being that… <!– this is invalid and won’t render as expected –> <a href=”#one”> Outside <a href=”#two”> Inside </a> </a> Eric Meyer once called for more flexible linking, but even that doesn’t quite handle a situation where one link is nested inside another. Here’s what happens with that HTML, by the way: The nested link gets kicked out. My first inclination would be to simply not nest the links in the markup, but make them appear nested visually. Some folks replied to the tweet, including Nathan Smith, who shared that same…

Read More →

Back to Top