Code | Austin Drupal Development and Support | Drupal Development Austin

Posts Tagged:code

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.


Level up your .filter game

.filter is a built-in array iteration method that accepts a predicate which is called against each of its values, and returns a subset of all values that return a truthy value. That is a lot to unpack in one statement! Let’s take a look at that statement piece-by-piece. “Built-in” simply means that it is part of the language—you don’t need to add any libraries to get access to this functionality. “Iteration methods” accept a function that are run against each item of the array. Both .map and .reduce are other examples of iteration methods. A “predicate” is a function that returns a boolean. A “truthy value” is any value that evaluates to true when coerced to a boolean. Almost all values are truthy, with the exceptions of: undefined, null, false, 0, NaN, or “” (empty string). To see .filter in action, let’s take a look at this array of restaurants.…

Read More →

Working with refs in React

Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an <input> element, but without using props or re-rendering the whole component. That’s the sort of thing refs are good for and what we’ll be digging into in this post. How to create a ref createRef() is a new API that shipped with React 16.3. You can create a ref by calling React.createRef() and attaching a React element to it using the ref attribute on the element. class Example extends React.Component { constructor(props) { super(props) // Create the ref this.exampleRef = React.createRef() } render() { return ( <div> // Call the ref with the `ref` attribute <input type=”text” ref={this.exampleRef} /> </div> ) } } We can “refer” to the node…

Read More →

Building Battleship in CSS

This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players. Wanna see the complete game? View Repo View Demo Oh, you wanna learn how it works? Let’s dig in. I could tell right away there was going to be a lot of repetitive HTML and very long CSS selectors coming, so I set up Pug to compile HTML and Less to compile CSS. This is what all the code from here on is going to be written in. Interactive elements in CSS In order to get the game mechanics working, we need some interactive elements. We’re going to walk through each…

Read More →

Understanding why Semantic HTML is important, as told by TypeScript

What a great technological analogy by Mandy Michael. A reminder that TypeScript… makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type. In other words, you have a variable age that you declare to be a number, the value for age has to stay a number otherwise TypeScript will yell at you. That type checking is a valuable thing that helps thwart bugs and keep code robust. This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>. And hey, if you’re into TypeScript, it’s notable…

Read More →

Drupal Global Training Days #7 Omsk, Russia

Start:  2018-09-08 10:00 – 2018-09-09 16:00 Asia/Omsk Organizers:  adcillc paych Event type:  Training (free or commercial) https://drupal-omsk.timepad.ru/event/manage/787380/ Drupal Global Training Days is a great opportunity for newcomers to learn about web development. We know Drupal and now we want to share our knowledge. The next meeting will be held on September, 8-9. The first day of the event includes a rich theoretical agenda. And for those who want to try something new for them, we made a practical part on the second day. At the free GTD sessions we will talk about: stages of a project; how to communicate within your team and with clients; front end and back end in Drupal; sites and modules development; Drupal community and its benefits. Welcome to GTD if you are: a student with programming major; a developer who want to try other technologies; somebody who just wants to code. See you at Global…

Read More →

An Event Apart

Just the other day in a Slack group I hang out in someone asked “what web design events is everyone going to and loving?” An Event Apart is always my immediate answer. I’ve gotten to speak a number of An Event Apart events, which is an incredible honor and always a good time. So from that perspective, I love it. I can tell you that it’s the most well-run conference I go to that gets all the details right. But I’ve also attended An Event Apart as a paying attendee and loved that. There is something about An Event Apart that gets the speakers to really bring their A-game, and you get to watch that A-game over and over for a couple of days. Upcoming Events in 2018: July 30 – August 1: Washington DC August 27 – 29: Chicago October 8 – 10: Orlando December 10 – 12: San…

Read More →

A Dozen Reasons Why You Should Attend DrupalEurope in Darmstadt, Germany this September

DrupalEurope, which will be happening from September 10 through 14, 2018 in Darmstadt, Germany, describes itself as “both a technology conference and a family reunion for the Drupal community.” 1600+ attendees are expected. The buzz around this event has been unusually high, especially in the greater Acquia metaverse, for 12 reasons. Here they are: 1. Drupal Europe is put on by a group of community volunteers in collaboration with the German Drupal Association and the Drupal Europe Foundation. The fact that this is an 100% community-spun, DrupalCon-scale event is amazing, and shows how the community in Europe is committed to support it on its own. One of those community organizers, btw, is Acquian Gábor Hojtsy. Another Acquian volunteer is Ricardo Amaro, who is chairing the DevOps + Infrastructure track. A big bunch of Acquians are speaking, but we’ll get to them later in this post. 2. But first, back to…

Read More →

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript! AI got the following result down to a single HTML element for the chart and very little JavaScript. The future should completely eliminate the need for any JavaScript, but more on that later. The final pie chart result. Some of you may remember Lea Verou’s Missing Slice talk—my solution is based on her technique. This article dissects how it all works, showing what we can do in terms of graceful degradation and other ways this technique can be put to use. The…

Read More →

Melodies and Metrics: Musical Attributes and the Stories They Tell

Yasiin Bey, formerly known as Mos Def, once advised that if “you want to know how to rhyme, you better learn how to add — it’s mathematics.” The music-as-math analogy extends to my university’s campus, where Penn allows both “Calculus I” and “Making Sense of Music” to satisfy the Formal Reasoning & Analysis requirement. Machine learning has even allowed a computer to imitate Bach. So, with the hope of better understanding my favorite artists and possibly even finding some new jams, I decided to analyze the data buried within my music. A couple of existing datasets attempt to quantify a song’s sound. One such example, Pandora’s vaunted Music Genome Project, unfortunately keeps its data confidential. Luckily, in 2014, Spotify acquired a music data analysis company, The Echo Nest, and now makes available on its public API a set of automatically generated “audio features.” The list of audio features includes not only objective statistics…

Read More →

The Cost of JavaScript in 2018

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more. In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to “Time-to-Interactive” measurements and auditing your JavaScript bundles. Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget of < 170KB minified/compressed. Uncompressed this is still ~0.7MB of code. Budgets are critical to success, however, they can’t magically fix perf in isolation. Team culture, structure and enforcement matter. Building without a budget invites performance regressions and failure. Super specific and super practical! Surprisingly, Addy mentions that “the median webpage today currently ships about 350KB of minified and compressed JavaScript,” which seems like an awful lot lower than I’d…

Read More →

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!” moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018. They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They used an elegant approach and solved the issue using the “color” npm package, adding conditional borders and automatic…

Read More →

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together. Fadeout vector pattern One of the things I thought was super classy was the way that vector wallpaper-eque pattern was not only there but faded out sort of radially. I didn’t try to match the pattern exactly—I just grabbed one from the Assets Panel in CodePen and dropped it onto the <html> element as a SVG data URL background-image with a low fill-opacity. Then a radial gradient sits on top and creates the fading effect—a radial gradient with the same base…

Read More →

Introducing This or That

The 2018 Viget intern class is proud to unveil an exciting new decision-making platform: This or That. Powered by seltzer alone, 6 young professionals took an idea from the ether to the Internet in just eight weeks. Here’s how we did it. Ideation It began, as all good products do, with an idea. In a brainstorming session, we popped ideas onto a board of virtual sticky notes. We added 21 distinct ideas and not one of them was This or That. Many ideas…not one of them This or That. As we came back for a second day of ideation, we distilled each idea to its warm gooey center. At the heart of several ideas was the concept of voting. We pivoted and began to flesh out what a voting platform might look like. Without realizing, we began referring to the idea as This or That. With a flashy name in…

Read More →

Browser painting and considerations for web performance

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen. In this article, I’d like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load… and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web developers tend to partially solve this by using…

Read More →

Ceci n’est pas une prototype.

Recently, I’ve been inundated with promotions for new design tools, all promising that they will bridge the gap between design and code. While that is a noble endeavor, I disagree with their premise. Colm Tuitte from Modulz sums up the supposed problem: “Even the most powerful UI design tools are just drawing tools that export disposable assets.” It’s a common critique. Even the most “advanced” digital design tools are based on workflows for drawing mere pictures of interfaces.— Daniel Eden (@_dte) July 28, 2017 These statements imply that UI design work that can’t be exported directly into code is a wasted effort. I think we’ve lost sight of what design tools are actually for. Magritte’s The Treachery of Images, which includes the statement “This is not a pipe,” reveals that this is a representation of a pipe, not the pipe itself. Similarly, current critique of design tools asserts that they are…

Read More →

How much fun can you have with $25 worth of ETH?

“I think there must be a MetaMask seed somewhere that I forgot to properly back up, all the ether in it lost forever.” – Me, upon realizing I don’t own any ether. Toshi and Status are two browsers I wrote about in Are These Browsers Going to the Moon?. To get the full experience of using them you need bit of ether (the Ethereum blockchain native token, also referred to as ETH.) Unfortunately, I had none. I had no choice but to head over to Coinbase and buy $25 worth of the stuff, for science. What follows is what I did with those $25 dollars while testing out Toshi and Status. 16 July, 2018 I bought $25 worth of ether at $481.37 per ETH minus Coinbase’s fee, a whopping $1.49. Right off the bat Coinbase took about 6% of my money, that was the first bit of fun I had…

Read More →

Let’s make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them. For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I’ve had most of my orders returned because my address (which I thought was the right…

Read More →

Using data in React with the Fetch API and axios

If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you’ll need to do this, as React apps are most well suited for situations where you’re handling both data and state. The first set of data you may need to handle might be hard-coded into your React application, like we did for this demo from our Error Boundary tutorial: See the Pen error boundary 0 by Kingsley Silas Chijioke (@kinsomicrote) on CodePen. What if you want to handle data from an API? That’s the purpose of this tutorial. Specifically, we’ll make use of the Fetch API and axios as examples for how to request and use data. The Fetch API The Fetch API provides an interface for fetching resources. We’ll…

Read More →

VS Code extensions for the discerning developer palette

I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code — the ones that nobody knows about — and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities… then watch as they look around desperately for someone else to talk to. It’s like the “Sideways” of VS Code. In my endless pursuit of the perfect VS Code setup, I reached out to my colleagues here on the Azure team and asked them to share their favorite extension in their own words. So clear your pallet and breathe in the aromatic flavors of productivity; I am your VS Code Extension Sommelier. Christina Warren – Settings Sync I cannot live without this extension. If you use multiple machines (especially on multiple platforms, where a sym-linked Dropbox folder won’t really work), this extension is for you. It syncs…

Read More →

Back to Top