Posts Tagged:browser

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.


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 →

Gotchas When Publishing Modules in npm and Bower

Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven’t heard of them or used them to manage dependencies. Whilst many of us use them as consumers, one day you might decide to share a project of your own and become a contributor! This happened to me recently. I had the experience of publishing my open-source library on npm and Bower. Although their official docs were quite good, I still ended up struggling with three little known gotchas. I won’t focus on the basics in this post. You can always find and read about them. I’ll instead focus on the gotchas. Nowadays, it looks like even Bower tells people not to use Bower. However, in 2018, there are still many projects that depend on it. The state of JavaScript in 2017 survey shows that around 24% of surveyed…

Read More →

Get your HTTPS on

“Get your HTTPS on” because Chrome will mark all HTTP sites as “not secure” starting in July 2018. Chrome currently displays a neutral icon for sites that aren’t using HTTPS, but starting with Chrome 68, the browser will warn users in the address bar. Fortunately, HTTPS has become easier to implement through services like Let’s Encrypt, who provide free certificates and aim to eliminate to complexity of setting up and maintaining HTTPS encryption. Source: Dries Buytaert www.buytaert.net

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is: I’d like to use the Lato font here, please. If you don’t have that, try “Lucida Grande” next. If you don’t have that, try Tahoma. All else fails, use whatever you’ve got for the generic keyword Sans-Serif So in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web…

Read More →

My POSSE plan for evolving my site

In an effort to reclaim my blog as my thought space and take back control over my data, I want to share how I plan to evolve my website. Given the incredible feedback on my previous blog posts, I want to continue the conversation and ask for feedback. First, I need to find a way to combine longer blog posts and status updates on one site: Update my site navigation menu to include sections for “Blog” and “Notes”. The “Notes” section would resemble a Twitter or Facebook livestream that catalogs short status updates, replies, interesting links, photos and more. Instead of posting these on third-party social media sites, I want to post them on my site first (POSSE). The “Blog” section would continue to feature longer, more in-depth blog posts. The front page of my website will combine both blog posts and notes in one stream. Add support for Webmention,…

Read More →

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets. While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet. The Sheet Contains the Styles The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the “sheet” of CSS is the digital file where styles are coded. If we were to illustrate this, the relationship between the three sort of forms a cascade: The sheet holds the styles. There can be multiple…

Read More →

Using Default Parameters in ES6

I’ve recently begun doing more research into what’s new in JavaScript, catching up on a lot of the new features and syntax improvements that have been included in ES6 (i.e. ES2015 and later). You’ve likely heard about and started using the usual stuff: arrow functions, let and const, rest and spread operators, and so on. One feature, however, that caught my attention is the use of default parameters in functions, which is now an official ES6+ feature. This is the ability to have your functions initialize parameters with default values even if the function call doesn’t include them. The feature itself is pretty straightforward in its simplest form, but there are quite a few subtleties and gotchas that you’ll want to note, which I’ll try to make clear in this post with some code examples and demos. Default Parameters in ES5 and Earlier A function that automatically provides default values…

Read More →

Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell. Not all browsers support this so, to do a fallback, the <picture> element is ready. Bruce Lawson shows how easy it can be: <picture> <source type=”video/mp4″ srcset=”adorable-cat.mp4″> <!– perhaps even an animated WebP fallback here as well –> <img src=”adorable-cat.gif” alt=”adorable cat tears throat out of owner and eats his eyeballs”> </picture> Šime Vidas notes you get wider browser support by using the <video> tag: <video src=”https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4″ muted autoplay loop playsinline></video> But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, <video> it is for now,…

Read More →

A Short History of WaSP and Why Web Standards Matter

In August of 2013, Aaron Gustafson posted to the WaSP blog. He had a bittersweet message for a community that he had helped lead: Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality. While there is still work to be done, the sting of the WaSP is no longer necessary. And so it is time for us to close down The Web Standards Project. If there’s just the slightest hint of wistful regret in Gustafson’s message, it’s because the Web Standards Project changed everything that had become the norm on the web during its 15+ years of service. Through dedication and developer advocacy, they hoisted the web up from a nest of browser incompatibility and meaningless markup to the standardized and feature-rich application platform most of us know today.…

Read More →

Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year. Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C: Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. In my own words, CSS Grid is a mesh of invisible horizontal and vertical lines. We arrange elements in the spaces between those lines to create a desired layout. An easier, stable, and standardized way to structure contents in a web…

Read More →

Sketching in the Browser

Mark Dalgleish details how his team at seek tried to build a library of React components that could then be translated into Sketch documents. Why is that important though? Well, Mark describes the problems that his team faced like this: …most design systems still have a fundamental flaw. Designers and developers continue to work in entirely different mediums. As a result, without constant, manual effort to keep them in sync, our code and design assets are constantly drifting further and further apart. For companies working with design systems, it seems our industry is stuck with design tools that are essentially built for the wrong medium—completely unable to feed our development work back into the next round of design. Mark then describes how his team went ahead and open-sourced html-sketchapp-cli, a command line tool for converting HTML documents into Sketch components. The idea is that this will ultimately save everyone from…

Read More →

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff that works across the board. Sadly, it doesn’t work with CSS variables and CSS variables have become a key component of writing efficient code these days. The good news is that things have moved a bit over the past two years and a half. Chrome and, in general, browsers using Blink…

Read More →

Building a Good Download… Button?

The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend <p> is here, loyal as ever. Want a download? Well, you’re going to want… hmm. What best describes a download? Is it a triggered action, and therefore should be in the domain of the <button> element? Or is it a destination, and therefore best described using an <a> element? Buttons Do Things, Links Go Places There seems to be a lot of confusion over when to use buttons and when to use links. Much like tabs versus spaces or pullover hoodies versus zip-ups, this debate might rage without end. However, the W3C provides us with an important clue as to who is right: the download attribute. The What Now? The internet as we know it couldn’t exist without links. They form…

Read More →

Set Up AWS CLI and Download Your S3 Files From the Command Line

The other day I needed to download the contents of a large S3 folder. That is a tedious task in the browser: log into the AWS console, find the right bucket, find the right folder, open the first file, click download, maybe click download a few more times until something happens, go back, open the next file, over and over. Happily, Amazon provides <span <the=”” other=”” day=”” i=”” needed=”” to=”” download=”” the=”” contents=”” of=”” a=”” large=”” s3=”” folder.=”” that=”” is=”” tedious=”” task=”” in=”” browser:=”” log=”” into=”” aws=”” console,=”” find=”” right=”” bucket,=”” folder,=”” open=”” first=”” file,=”” click=”” download,=”” maybe=”” few=”” more=”” times=”” until=”” something=”” happens,=”” go=”” back,=”” next=”” over=”” and=”” over.=”” happily,=”” amazon=”” provides=”” AWS CLI, a command line tool for interacting with AWS. With AWS CLI, that entire process took less than three seconds: $ aws s3 sync s3://<bucket>/<path> </local/path> Getting set up with AWS CLI is simple, but the documentation…

Read More →

Stimulus 1.0: A modest JavaScript framework for the HTML you already have

Modern JavaScript doesn’t have to mean single-page, client-side MVC apps.We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary sense. All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle.This is the way of the majestic monolith. Basecamp runs across half a dozen platforms, including native mobile apps, with a single set of controllers, views, and models created using Ruby on Rails. Having a single, shared interface that can be updated in a single place is key to being able to perform with a small team, despite the many platforms.It allows us to party with productivity like days of yore. A throwback to when a single programmer could make rapacious progress without getting stuck in layers of indirection or distributed systems. A time before everyone thought the holy grail was to confine their…

Read More →

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at a pretty intense level and have learned a lot about them. This has ranged from building dynamic form builders to high-level spam protection for a Harley-Davidson® website platform. Each different project has given me a look at the front-end and back-end of the process. Each of these projects has also picked…

Read More →

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every font-weight, a wider variety than bold and normal adds visual hierarchy and interest to a page. The Google Fonts GUI makes clear: the more weights you choose, the slower your site There’s more than various weights to consider. CSS3 introduced the font-stretch property, with values from ultra-condensed to ultra-expanded. Until now,…

Read More →

How to use variable fonts in the real world

Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though: Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now. And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too: Variable font capable software is already more pervasive than you might think. For example, the latest versions of Photoshop and Illustrator support them, and if you’re using macOS 10.13+ or iOS 11+ the system font San Francisco uses font variations extensively. That said, the availability…

Read More →

Bend any Website’s CSS to Your Will With Stylish or Stylebot

As a self-professed CSS nerd, I take it upon myself to inject my own CSS onto websites when I need to to fix bugs or just fiddle them up to my liking. This is a post that details how I do that using the Stylish and Stylebot browser extensions. Direct Link to Article — Permalink Bend any Website’s CSS to Your Will With Stylish or Stylebot is a post from CSS-Tricks Source: CssTricks

Back to Top