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.


Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting. If you haven’t experimented with any of the various performance APIs, it may help if you brush up a bit on them, as the syntax of this API has much in common with those APIs (particularly the Resource Timing API). That said, you can read on and get something out of this article even if you don’t. Before we dive in, however, let’s talk about painting and the specific timings this API collects. Why do we need an API for measuring paint times? If you’re reading…

Read More →

Designers Tooling Around: Figma

There are already several articles out there explaining Figma and its wide array of features. So I won’t spend too much time explaining what it is, except to say it’s an interface design tool similar to Sketch or, to a lesser extent, Photoshop. But there’s something special that sets it apart. It’s based in the browser and allows for real-time collaboration. For real.  We’ve been using Figma more and more over the past several months and I wanted to give a brief breakdown of how we’ve been using it at Viget and what we love about it. Remote Whiteboarding With teams often spread across three offices, we’ve tried everything to make brainstorming, sketching, and whiteboarding without being together in person feel natural and efficient. Thanks to Hangouts, we have talking and seeing each other down. But drawing and writing together has been harder. Working together in a Google Drawing file…

Read More →

Using ES2017 Async Functions

ES2017 was finalized in June, and with it came wide support for my new favorite JavaScript feature: async functions! If you’ve ever struggled with reasoning about asynchronous JavaScript, this is for you. If you haven’t, then, well, you’re probably a super-genius. Async functions more or less let you write sequenced JavaScript code, without wrapping all your logic in callbacks, generators, or promises. Consider this: function logger() { let data = fetch(‘http://sampleapi.com/posts’) console.log(data) } logger() This code doesn’t do what you expect. If you’ve built anything in JS, you probably know why. But this code does do what you’d expect. async function logger() { let data = await fetch(‘http:sampleapi.com/posts’) console.log(data) } logger() That intuitive (and pretty) code works, and its only two additional words! Async JavaScript before ES6 Before we dive into async and await, it’s important that you understand promises. And to appreciate promises, we need go back one more…

Read More →

The Best Way to Implement a “Wrapper” in CSS

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page. I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I’m not the only one wondering! I’ll sum up my latest thoughts in this article. Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”. “Wrapper” vs “Container” I believe there is a difference between wrapper and container elements. In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object…

Read More →

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

According to an article from A List Apart about CSS Grid, a “new era in digital design is dawning right now.” With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There’s an entirely new system available for creating layouts, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let’s look at how we can make the fundamental aspects of Grid work across the browsers that support it, including older versions of Internet Explorer that supported an older and slightly different version of Grid. The Sales Pitch If you visit caniuse.com, you’ll see that CSS Grid is supported in current versions of all major browsers except Opera Mini. So why not start using it? Rachel Andrew wrote extensively on the subject of if it’s “safe to use” or not. It…

Read More →

Making Better HTML Tables

Inspired Magazine Inspired Magazine – creativity & inspiration daily Strangely enough, one of the most difficult web technologies to master is one of the earliest ones to be available for the browser after plain text and images. The problem is even greater today with so many different device types that need to be thought about. Perfect tables are nearly impossible to create unless they contain so few items that no problems are likely to be triggered. The kinds of errors that can arise include: Text wrapping incorrectly Justification errors Table rendering off screen Scroll problems Row height errors Column width errors General ugliness or untidiness In this article we’ll take a look at how to avoid problems like that, so your tables have the best chance of creating a good impression. Avoidance strategies to avoid Because tables are so difficult to get right, some people try to avoid using them.…

Read More →

All About React Router 4

I met Michael Jackson for the first time at React Rally 2016, soon after writing an article on React Router 3. Michael is one of the principal authors of React Router along with Ryan Florence. It was exciting to meet someone who built a tool I liked so much, but I was shocked when he said. “Let me show you our ideas React Router 4, it’s way different!” Truthfully, I didn’t understand the new direction and why it needed such big changes. Since the router is such a big part of an application’s architecture, this would potentially change some patterns I’ve grown to love. The idea of these changes gave me anxiety. Considering community cohesiveness and being that React Router plays a huge role in so many React applications, I didn’t know how the community would accept the changes. A few months later, React Router 4 was released, and I…

Read More →

Aziz Ansari

This is some of the smartest stuff that Aziz has ever said (or at least the stuff that I’ve heard him speak about): He’s off social media. He deleted the Internet browser from his phone and laptop. No e-mail, either. Technologically speaking, he’s living in, like, 1999. Really…? As the writer ponders, did he unplug or “unplug”? Whenever you check for a new post on Instagram or whenever you go on The New York Times to see if there’s a new thing, it’s not even about the content. It’s just about seeing a new thing. You get addicted to that feeling. You’re not going to be able to control yourself. So the only way to fight that is to take yourself out of the equation and remove all these things. So, he has removed them. Entirely. He continues: What happens is, eventually you forget about it. You don’t care anymore. When I…

Read More →

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya, 3Ds Max or Houdini and do long hours of offline rendering on Render Farms that consisted of hundreds of machines. It’s because I worked with these tools for so long that I am now amazed by the state of the current web technology. We can now create and display high-quality 3D content right inside the web browser, in real time, using WebGL and Three.js. Here is an example of a project that is built using these technologies. You can find more projects that use three.js on their website. Some projects using three.js As the examples on the three.js website demonstrate,…

Read More →

If you really dislike FOUT, `font-display: optional` might be your jam

The story of FOUT is so fascinating. Browsers used to do it: show a “fallback” font while a custom font loads, then flop out the text once it has. The industry kinda hated it, because it felt jerky and could cause re-layout. So browsers changed and started hiding text until the custom font loaded. The industry hated that even more. Nothing worse than a page with no text at all! Font loading got wicked complicated. Check out this video of Zach Leatherman and I talking it out. Now browsers are saying, why don’t we give control back to you in the form of API’s and CSS. You can take control of the behavior with the font-display property (spec). It seems like font-display: swap; gets most of the attention. It’s for good reason. That’s the value that brings back FOUT in the strongest way. The browser will not wait at all…

Read More →

Designing Between Ranges

CSS is written slowly, line by line, and with each passing moment, we limit the space of what’s possible for our design system. Take this example: body { font-family: ‘Proxima-Nova’, sans-serif; color: #333; } With just a couple of lines of CSS we’ve set the defaults for our entire codebase. Most elements (like paragraphs, lists and plain ol’ divs) will inherit these instructions. But what we rarely think about when we write CSS is that from here on out we’ll have to continuously override these rules if we want another typeface or color. And it’s those overrides that cause a lot of issues in terms of maintenance and scalability. And it’s those issues that cost us heartbreak, time and money. In the example above that’s probably not an issue but I think in general we don’t recognize the true strength and dangers of the cascade and what it means to our…

Read More →

The Browser Statistics That Matter

In which I argue that the only browser usage statistics that make sense use for decision making are the ones gathered from the website being worked on itself. The reason you can’t use global statistics as a stand-in for your own is because they could be wildly wrong … Sites like StatCounter that track the worldwide browser market are fascinating, but I’d argue largely exist as dinner party talk. Direct Link to Article — Permalink The Browser Statistics That Matter is a post from CSS-Tricks Source: CssTricks

9 Simple Ways To Get Better At Design

Design is always subject to appreciation or criticism. As a web designer, you might feel that your designs are poor or that you can do better. Well, there’s no need to worry. There are various things you can do to improve. Here, we’ll be taking a look at some of the simplest ways to get better at design. 1. Be Organised Organisation is a key aspect in helping you become great at designing. First and foremost, make sure that your workstation is clean and provides a fitting environment for you to work in. This will make you feel relaxed and make it easier for you to work more efficiently. The files in your computer should also be organised. Ensure that you group similar projects together to make them easily accessible. You could also create three areas where you can place files that are pending, current and processed for both physical…

Read More →

How to be evil (but please don’t!) – the modals & overlays edition

We’ve all been there. Landed on a website only to be slapped with a modal that looked something like the one below: Hello darkness, my old friend. For me that triggers a knee-jerk reaction: curse for giving them a pageview, close the tab, and never return. But there’s also that off case when we might actually try to get to the info behind that modal. So the next step in this situation is to bring up DevTools in order to delete the modal and overlay, and maybe some other useless things that clutter up the page while we’re at it. This is where that page starts to dabble in evil. We may not be able to get to the DevTools via “Inspect Element” because the context menu might be disabled. That one is easy, it only takes them one line of code: addEventListener(‘contextmenu’, e => e.preventDefault(), false); But hey, no…

Read More →

Debugging Your Website with Chrome Developer Tools

If you’re using Chrome and want to debug your site’s design, this browser already comes with a great built-in feature called Developer Tools. In this tutorial we will show you how to start using Chrome Developer Tools. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

Debugging Your Website with Firefox Dev Tools

In previous years, we often talked about using browser add-ons like Firebug to help bugshoot your websites. However, the major browsers now all include their own built-in inspect tools to debug websites. Firebug was retired at the end of 2016. If you’re using Firefox, Dev Tools is the tool that will help you to debug your site’s design. In this tutorial we will show you how to start using Firefox Dev Tools. [[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]] Source: https://www.ostraining.com/

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: 1 and grid-column-end: -1 (or the shorthand grid-column: 1 / -1) to span an element from the first line to the last. My friend Max made me aware that it’s possible to use lower values than -1 as well. .grid-item { grid-column: 1 / -2; } For example, you can set grid-column: 1 / -2 to span the cells between the first and the second to last line. See the Pen…

Read More →

Back to Top