Category Archive for: html5

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.

Old Timey Terminal Styling

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it’s just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice! Let’s re-create that, bit-by-bit. A radial gradient is perfect for the glowing green background: body { background-color: black; background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 120% ); height: 100vh; } I’m so used to using <pre><code> to display space-formatted text (like code), but you could say terminal text isn’t always code, so I like the use of <pre><output> here. Might as well use a nice monospace font: body { … color: white; font: 1.3rem Inconsolata, monospace; } The text on the demo appears a bit blurry. We could go with a slight filter like filter: blur(0.6px);, but it seems blurring that way comes out…

Read More →

Web Application Developer – OpenEye – Liberty Lake, WA

Java, Spring, MySQL, AWS, Javascript, ReactJS, AngularJS, Memcached, Redis, HTML5, CSS3, Git, Mercurial, Docker, Drupal, PHP….From OpenEye – Sat, 08 Sep 2018 11:30:50 GMT – View all Liberty Lake, WA jobs Source:

Front-End Web Developer – Herkimer Media – Madison, WI

Experience with Drupal CMS. Work within Drupal and some basic HTML sites to update client content. A successful Front End Developer will already know some HTML5… $40,000 – $50,000 a yearFrom Herkimer Media – Fri, 31 Aug 2018 02:12:25 GMT – View all Madison, WI jobs Source:

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 →

Drawing Images with CSS Gradients

What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. You can find a lot of great examples if you search daily css images” on CodePen. I drew some myself, including this Infinity Gauntlet, but in one element with only backgrounds and minimal use of other properties. Let’s take a look at how you can create CSS images that way yourself. The Method Understanding the shorthand background syntax as well as how CSS gradients work is practically all you need to draw anything in one element. As a review, the arguments are as follows: background: <‘background-color’> || <image> || <position> [ / <size> ]? || <repeat> || <attachment> ||…

Read More →

Creating your own meme generator

Almost every time a new meme pops up in my Twitter feed, I think of a witty version to create. I’m not alone in this. Memes are often a way to acknowledge a shared experience or idea. In a variation of the “Is this a pigeon” meme that has been making the rounds online, a designer Daryl Ginn joked about the elementary nature of most applications that say they use artificial intelligence. — Daryl Ginn (@darylginn) May 16, 2018 Several people replied to his tweet saying something along the lines of “replace this with this.” Daryl’s version got them thinking about other possible variations. Platforms like imgFlip exist to make meme generations fast and easy. However, there is only so much customization they can allow. For many memes, creating new versions can only be done by people with Photoshop knowledge. But it doesn’t have to be so! For some…

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 →

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input type=”number”>. This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type=”number” isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does, however, make this kind of input totally inappropriate for a credit card number, for example. The default UI for number inputs looks something like this in all desktop browsers The spec itself makes this clear. The type=number state is not appropriate for input that happens to only consist of numbers…

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 →

Displaying the Weather With Serverless and Colors

I like to jog. Sometimes it’s cold out. Sometimes it’s cold out, but it looks like it isn’t. The sun is shining, the birds are chirping. Then you step outside in shorts and a t-shirt and realize you have roughly 2 minutes before exposure sets in. I decided to solve this first world problem using a lightbulb to display a certain color based on what the temperature outside is. It works better than I expected, and that’s saying something because usually nothing works out like I want it to. This was a fun project to build, and since it is essentially a hosted service running on a timer, it’s a perfect use case for Serverless. Now you might be thinking, “um, wouldn’t it be easier to just check the weather?” Well it would, but then I wouldn’t have an excuse to buy an expensive lightbulb or write an article with…

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 →

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) 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 – – 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 →

Creating a Parking Game With the HTML Drag and Drop API

Among the many JavaScript APIs added in HTML5 was Drag and Drop (we’ll refer to it as DnD in this article) which brought native DnD support to the browser, making it easier for developers to implement this interactive feature into applications. The amazing thing that happens when features become easier to implement is that people start making all kinds of silly, impractical things with it, like the one we’re making today: a parking game! DnD requires only a few things to work: Something to drag Somewhere to drop JavaScript event handlers on the target to tell the browser it can drop We’re going to start by creating our draggables. Dragging Both <img> and <a>(with the href attribute set) elements are draggable by default. If you want to drag a different element, you’ll need to set the draggable attribute to true. We’ll start with the HTML that sets up the images…

Read More →

WEB QUALITY ASSURANCE (QA) ENGINEER – University of Washington – Seattle, WA

Proficient in PHP, HTML5, CSS3 and JavaScript, Drupal. Collaborate with front-end and back-end developers, web designers, business analysts and project managers…From University of Washington – Wed, 07 Mar 2018 00:49:49 GMT – View all Seattle, WA jobs Source:

Essential Web Technologies to Learn (2018 Edition)

Becoming a web developer is easy, so they say. What most people feeding you that line neglect to mention is that while almost anyone can be a web developer, not everyone using that title is good at web development. All of us must make a start somewhere, and if you’re just getting started in your web developer career, this article is for you. It is also an article for seasoned web developers who may not have kept up with the latest essential skill sets and want to discover what they are for 2018. 1. HTML This is the most obvious essential skill that any web developer needs to know. At the least, you’ll need to be an expert in HTML5. HTML is the “language of the web”, and it’s what all sites are built in, even sites that aren’t built in it. What does that mean? It means sites that…

Read More →

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much. Let’s dive in! Document Structure and Semantics It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in order to follow a coherent narrative, so make sure that you’re using the elements that the HTML5 spec provides responsively and effectively. If you’re unsure about how to markup your work correctly, check out resources such as HTML5 Doctor, Code…

Read More →

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up: Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of their applications. There are also semantic changes to HTMl elements that are worth noting: Clarifications and bug fixes bring the HTML Recommendation closer to what has been deployed recently. The definition for the main element has been updated to support…

Read More →

Improving the Accessibility of 24 ways

I’ve been thinking recently about the nature of my work and which aspects of it I enjoy the most. In a role that will often straddle the realms of design and development, whether editing copy, evaluating the design of an interface or refactoring code, I’ve come to realize that my interests lie in the act of review and refinement. My work on 24 ways is a case in point. Since Drew McLellan asked me to redesign the site in 2013, I’ve stayed on as part of the team, helping to review, edit and format articles. But I’ve also been able to fulfil the desire I expressed upon launching the redesign: I’m a big believer in iteration and not treating a website as ever being finished. I hope what’s been released this year can act as a foundation, and that the design will evolve in the years to come. In the…

Read More →

Back to Top