Posts Tagged:3D

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.


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 →

How to make a modern dashboard with NVD3.js

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations. For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post. Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time. Real-world use case: A data dashboard Dashboards can be used for pretty much anything. As long as you’ve got data to analyze, you’re good…

Read More →

Anatomy of a malicious script: how a website can take over your browser

By now, we all know that the major tech behemoths like Facebook or Google know everything about our lives, including how often we go to the bathroom (hence all the prostate medication ads that keep popping up, even on reputable news sites). After all, we’ve given them permission to do so, by reading pages and pages of legalese in their T&C pages (we all did, didn’t we?) and clicking on the “Accept” button. But what can a site do to you, or to your device, without your explicit consent? What happens when you visit a slightly “improper” site, or a “proper” site you visited includes some third-party script that hasn’t been thoroughly checked? Has it ever happened to you that your browser gets hijacked and innumerable pop-ups come up, and you seem to be unable to close them without quitting the browser altogether, or clicking 25 times on the “Back”…

Read More →

Animate Images and Videos with curtains.js

While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also tend to use libraries built on top of WebGL such as three.js or pixi.js. Both are very powerful tools to create respectively 2D and 3D scenes. But, you should keep in mind that those libraries were not originally designed to create slideshows or animate DOM elements. There is a library designed just for that, though, and we’re going to cover how to use it here in this post. WebGL, CSS Positioning, and Responsiveness Say you’re working with a library like three.js or pixi.js and you want to use it to create interactions, like mouseover and scroll events on elements. You might run into trouble! How do you position your WebGL elements relative…

Read More →

Combining the Powers of SEM and BIO for Improving CSS

CSS is easy, some might argue, but that “easiness” can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell. If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now! In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy. See the Pen by thebabydino (@thebabydino) on CodePen. Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purpose of both SEM and BIO is to better handle…

Read More →

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement! Here’s what we’ll be building: Demo Site GitHub Repo We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in. Today we’ll be discussing how to create them with Vue and Nuxt. There are a lot of moving parts in page transitions and animations (lol I kill me), but don’t worry! Anything we don’t have time to cover in the article,…

Read More →

How Does Free Graphic Design Software Stack Up?

Graphic design is an easy kind of business to manage, but a difficult one to get started in. Until you have built up a decent number of regular clients, you may find you must watch every penny closely. If you are in this situation, the prices of popular graphic design software will be quite a shock. One of the true luxuries of running your own graphic design studio, however, is that you’re not locked in to using any particular software as you would probably be if you were an employee of somebody else. That means you’re at liberty to use whatever helps you get the job done efficiently. The idea of free graphic design software may sound exciting, but is it really up to the task? Will it allow you to create professional quality work without the high cost? Let’s find out. 1. PhotoShop vs GIMP  GIMP default interface GIMP…

Read More →

Running Hardware Hackathons

A while ago we ran the Pebble Rocks Boulder (PRB) hardware hackathon here in Boulder, Colorado. This was a 48 hour non-stop hackathon focused on the then freshly announced Pebble smart strap. Collectively the goal had been to bring together talented folks and technology in the hopes of generating a handful of clever ideas and projects. However after the dust settled, and the antics were over, what was created was far more than we had expected. We invited teams from around the nation to compete, but instead they ended up collaborating. Teams cannibalized a 3D printer farm, sprawled into one another’s spaces, stayed up late debugging each others problems. As organizers we had unexpectedly stumbled into a world that could, in truth, only survive for two full days. It was a taste of festival life but without the extremes. Along the way we picked up some tips and tricks for…

Read More →

Animate a Container on Mouse Over Using Perspective and Transform

I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it. Here’s the final version: See the Pen MrLopq by Mihai (@MihaiIonescu) on CodePen. This effect is achieved through CSS and JavaScript. I figured I’d make a little tutorial explaining how each part works so you could easily reproduce it or extend it. I recommend reading up on the almanac entries for perspective and transform before we get started. We’re going to refer to these properties through the post and it’s a good idea to be familiar with them. Let’s get down to it. Setup First, we need a…

Read More →

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML goes: <div class=”box”></div> The CSS is also pretty straightforward. We give this box dimensions, a background and position it in the middle horizontally with a margin. $d: 4em; .box { margin: .25*$d auto; width: $d; height: $d; background: #f90; } See the Pen by thebabydino (@thebabydino) on CodePen. Next, with the…

Read More →

Talks, Thoughts, and Texas: Viget at SxSw 2018

While Olympics highlights and Valentine’s day memories are fresh in our minds, I’m here to ease you into the impending month of March. Not for the basketball madness, or St. Patrick’s day traditions — but for the tech tradition of SXSW and next week’s festivities. And in what will be our third consecutive year with multiple talks, we’ll be sending our own small crew to Texas — including some fresh faces — for the knowledge, for the sharing, and for the free things they hand you while walking around. In addition to our two workshops, here are a few talks, and thoughts on SXSW 2018: Thought: “I think the implications of AI are growing and being discovered at, or behind the pace of, AI tech which makes it an increasingly interesting, albeit a little scary at times, technology to learn about and work with.” – Ian Brennan, Viget Developer Talk: Regulating AI:…

Read More →

CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase. Links in HTML even look different from regular text without any CSS styling at all. See the Pen Default Link by CSS-Tricks (@css-tricks) on CodePen. They are blue (purple if visited). They are underlined. That’s a link in it’s purest form. But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the <a> element in our stylesheet. Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not? a { color: red; text-decoration:…

Read More →

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

Fragmented HTML5 Video

I have seen various implementations of the Voronoi Diagram. Perhaps you’ve seen one without knowing what it was. It almost looks like random stained glass: Wikipedia: In mathematics, a Voronoi diagram is a partitioning of a plane into regions based on distance to points in a specific subset of the plane. It’s even possible to create a Voronoi diagram by hand, as eLVirus88 has documented. I wanted to give it a try. The Idea My idea is to chop up a video into fragmented parts (called cells) and put them into 3D space on a slightly different z-axis. Then, by moving the mouse, you would rotate the whole experience so you would see the cells in different depths. The Code Building on top of Raymond Hill’s and Larix Kortbeek’s JavaScript implementation, the first thing I needed to was split up the cells. I choose to use the <canvas> element, and…

Read More →

Comparing Novel vs. Tried and True Image Formats

Popular image file formats such as JPG, PNG, and GIF have been around for a long time. They are relatively efficient and web developers have introduced many optimization solutions to further compress their size. However, the era of JPGs, PNGs, and GIFs may be coming to an end as newer, more efficient image file formats aim to take their place. We’re going to explore these newer file formats in this post along with an analysis of how they stack up against one another and the previous formats. We will also cover optimization techniques to improve the delivery of your images. Why do we need new image formats at all? Aside from image quality, the most noticeable difference between older and newer image formats is file size. New formats use algorithms that are more efficient at compressing data, so the file sizes can be much smaller. In the context of web…

Read More →

Back to Top