Posts Tagged:firefox

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.


Celebrate the web by using another browser than Google’s Chrome

I like Chrome. It’s a great browser. But it’s not so good that it deserves to be the only browser. And that’s the unfortunate opportunity we, people browsing the web, are opening for Google by so overwhelmingly choosing to use it in face of the alternatives.And this is what we get by doing so: DirecTV just announced that they’ll be turning their website into a Chrome desktop app on June 1st. They don’t actually say that, but that’s what they mean. You can’t call directvnow.com a website if it only works in a single browser.You don’t have to be that old to remember the dark days when Internet Explorer strangled the web by its utter domination. When large swaths of the web was only accessible through Redmond. Those were not happy days.Ironically, it was Google’s Chrome that helped fight back the scourge of Internet Explorer’s monopoly. Well, that plus the utter neglect…

Read More →

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos. Before anything else, this is the animation we’re trying to achieve here: The desired result: a rotating ☯ symbol, with its two lobes increasing and decreasing in size. No matter what method we choose to use to recreate the above animation, we always start from the static yin and yang shape which looks as illustrated below: The static yin and yang symbol (live demo). The structure of this starting shape is described by the following illustration: The structure of the static symbol (live demo). First…

Read More →

Online Ads: Simple Mistakes That Might Be Costing You

Inspired Magazine Inspired Magazine – creativity & inspiration daily The world of online advertising is segregated into publishers and advertisers. The publisher is the owner of a site who allows somebody else to advertise on it, while the advertiser is obviously the one doing the advertising.  In some cases the publisher may also be the advertiser, and when this happens it is called internal advertising.  Everything else is external advertising. Why these terms need to be defined is because they strongly affect how much tolerance and acceptance an audience is likely to have for being exposed to the ad.  In general, an audience will have much higher levels of trust and acceptance in the case of internal advertising, and in turn they are more likely to let their guard down and potentially engage with the advertisement. On the other hand, external advertising can generate a wide range of responses, but…

Read More →

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this: Clockwise circular (cyclic) distribution with partially overlapping items. At first, this doesn’t seem too complicated. We start with 12 numbered items: – 12.times do |i| .item #{i} We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice. $d: 2em; .item { position: absolute; margin: calc(50vh – #{.5*$d}) 0 0 calc(50vw – #{.5*$d}); width: $d; height: $d; box-shadow: inset 0 0 0 4px; background: gainsboro; font: 900 2em/ #{$d} trebuchet ms, tahoma, verdana, sans-serif; text-align: center; } So far, so good: See the Pen by thebabydino (@thebabydino) on CodePen. Now all that’s left is to distribute them on a circle, right? We get a base angle $ba for our distribution, we rotate each item by its index…

Read More →

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let’s get started! HTML structure The HTML structure is the following: a .cube element with .cube__face children (6 of them). We’re using Haml so that we write the least amount of code possible: .cube – 6.times do .cube__face We’re not using .front, .back and classes like that. They’re not useful because they bloat the code and make it less logical. Instead,…

Read More →

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone. Most of the power comes from two unique abilities of Custom Properties: The cascade The ability to modify values with JavaScript Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() . The Basics You can use Custom Properties to do effectively what variables in preprocessors like Sass provide – set a global or scoped variable value, and then use it later in your code. But…

Read More →

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong. The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap). Then the pseudo-element with the white text above gets clipped to the shape of the black dress. However, this means we need to change the clipping path if we change the image and, at this point, it’s anything but easy…

Read More →

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger. But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface. I’ll take you on a journey through the land of Media Query Level 4 and explore the opportunities that the W3C CSS WG has drafted to help us deal with all the device fruit salad madness. Media queries Media queries, in a nutshell, inform us about the context in which our content is being displayed, allowing us to scope…

Read More →

ECMAScript Modules in Browsers

As Jake Archibald says, they are starting to land! The support landscape is already: Safari 10.1. Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags. Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config. Edge 15 – behind the Experimental JavaScript Features setting in about:flags. There are plenty of weird gotchas to be aware of, like minor syntax things that are intentionally not supported, and the order of script execution. We covered Stefan Judis’s post, who’s sure we’ll continue to bundle: Just because we might have support for ES6 modules in browsers soon, it doesn’t mean that we can get rid of a build process and a proper “bundle strategy”. But there are folks who wish all this wasn’t so complicated, like Pawel Grzybek: Three things that I wish I could ditch from my everyday front-end workflow: CSS preprocessors, JavaScript transpilers and module bundlers. Direct Link to…

Read More →

The 5 Best Email Tracking Tools: Know When Your Email Has Been Opened

When it comes to your business or your job, being able to monitor as many factors as possible is typically a good thing. Google Analytics allows you to track how many visitors are coming to your site, for example, enabling you to know which channels are sending the most traffic to you and what content is performing best. Email tracking is another great example of a tool that can give you great insight into an important part of your business. There are a ton of tracking services available, some free and some paid for, and these are the most reliable and best email tracking tools available, so you don’t have to leave this important part of your business to guesswork. While social media marketing is growing in importance and popularity as a medium to distribute information to users, email is a crucial form of both information distribution and personal contact…

Read More →

Ordered Lists with Unicode Symbols

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <ol> tag is there to help. The default appearance of the <ol> tag presents numbers next to each item in the list. You can use the list-style-type property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like Hebrew or Greek. The full list of available values is well-documented and easy to use. Recently, I saw an opportunity to use dice in place of numbers for several ordered lists explaining the features of an HTML5 game I created called Triple Score Bopzee. To accomplish my goal, I first experimented with a now-familiar technique for using a small image file as the background for the li::before selector in a…

Read More →

Think you know the top web browsers?

If I had to blindly guess about global marketshare, I would have gotten it wrong. I probably would have forgotten about UC browser (kind of the point of Peter O’Shaughnessy’s article) that’s so huge in Asia. I would have guessed Firefox has a slight edge on Safari (turns out Firefox is half the share of Safari), and that Edge would be outpacing IE by now (also only half). This is good dinner party conversation fodder, but I wouldn’t base any major decision making on it. The only stats that matter at your websites stats. Here’s this sites, in the last 7 days. There is always the chicken-or-egg conundrum though. If you support a browser that you didn’t before, doesn’t it stand to reason the numbers would go up for it? The time-on-site and bounce rate stuff would get better, anyway. Direct Link to Article — Permalink Think you know the…

Read More →

ES6 modules support lands in browsers: is it time to rethink bundling?

Modules, as in, this kind of syntax right in JavaScript: import { myCounter, someOtherThing } from ‘utilities’; Which we’d normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge. It’s designed to support progressive enhancement, as you can safely link to a bundled version and a non-bundled version without having browsers download both. Stefan Judis shows: <!– in case ES6 modules are supported –> <script src=”app/index.js” type=”module”></script> <!– in case ES6 modules aren’t supported –> <script src=”dist/bundle.js” defer nomodule></script> Not bundling means simpler build processes, which is great, but forgoing all the other cool stuff a tool like Webpack can do, like “tree shaking”. Also, all those imports are individual HTTP requests, which may not be as big of a deal in HTTP/2, but still isn’t great: Khan Academy discovered the same thing a while ago when experimenting with HTTP/2. The idea…

Read More →

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We’ll start with some core tenants and then drill down to more specific examples. Main Concepts Isolate the Problem Isolation is possibly the strongest core tenant in all of debugging. Our codebases can be sprawling, with different libraries, frameworks, and they can include many contributors, even people who aren’t working on the project anymore. Isolating…

Read More →

Does CSS Grid Replace Flexbox?

No. Well. Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox. To put a point on it: Grid can do things Flexbox can’t do. Flexbox can do things Grid can’t do. They can work together: a grid item can be a flexbox container. A flex item can be a grid container. Even though Grid is pretty new, we have lots of articles about it, including a getting started article, an article about a basic layout done multiple ways, and a complete guide. If you hadn’t heard the trumpets blaring, March 2017 was the banner month for Grid. It was released, completely unprefixed and ready-to-go, in Chrome, Opera, Firefox, and Safari. Even Edge supports it, albiet an older version of the spec, which you can get some…

Read More →

Are you making customers too happy?

I graduated from the University of Illinois (Champaign-Urbana). Marc Andreessen was an alum. That’s where he created the Mosaic web browser which in turn led to creating Netscape. As you can imagine, I had a loyalty to Netscape coming out of school.But everyone knows how that story turns out. Microsoft won. We were stuck with IE.IE just got worse and worse. And work was bad about keeping us updated with laptops with enough horsepower, so I was constantly trying to keep my machine running lean.I remember when a friend showed me something called the Phoenix web browser. I loved it. It was fast. It didn’t make my computer crawl. I was a convert. I used it all day long.Today Phoenix is called Firefox. And I never open the thing up anymore.Phoenix/Firefox just got more and more things, and it got slower and slower. It started eating up a ton of memory. All things I was…

Read More →

Using DevTools to Tweak Designs in the Browser

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools. To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for a banner design, we could so something like: .banner-1 { /* Style variation */ } .banner-2 { /* Style variation */ } Google Chrome gives us the ability to add all of these classes and toggle (show/hide) them with a checkbox to make a quick comparison between them. See the demo Pen. Editing Content with designMode Web content is dynamic, so our design should be flexible and we should test…

Read More →

Avoidable Design Flaws That Can Hurt Your Site

Inspired Magazine Inspired Magazine – creativity & inspiration daily The web was supposed to get better,  that was the promise.  And you’d think it would have, with all the increased awareness of accessibility and usability considerations.  But strangely enough, we’re more than 25 years in, and things are actually getting worse in general.  How could this be so? It can’t be blamed on education.  Every course in Internet Design and Development worth its salt covers the fundamentals of good design principles, usability, and accessibility.  It can’t be blamed on the engineering standards, because the W3C guidelines are stricter and more clearly defined than ever before.  Nor can it be blamed on technology, because the technology is more supportive of developing high quality sites, not less. No, the answer to this paradox is actually quite simple.  It’s because designers have had their power stripped away by the demands of marketers and…

Read More →

Minecraft in WebVR with HTML Using A-Frame

I’m Kevin Ngo, a virtual reality web developer on the Mozilla VR team and a core developer of A-Frame. Today, we’ll go over how to build a room scale WebVR Minecraft demo that works on HTC Vive, Oculus Rift, Samsung GearVR, Google Cardboard, desktop, and mobile. The demo will be built with A-Frame in just 11 HTML elements! A-Frame A few years ago, Mozilla invented and pioneered WebVR, a JavaScript API for creating immersive VR experiences in your browser, in an experimental build of Firefox. Since then, WebVR has gained wide support from other companies such as Google, Microsoft, Samsung, and Oculus. And it’s now set to release enabled by default in Firefox within a few months! Why WebVR? The Web brings openness to VR; on the Web, content isn’t controlled by gatekeepers, and users aren’t kept in walled gardens. The Web also brings connectedness to VR; on the Web,…

Read More →

Back to Top