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.

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 →

Getting Ready for Web Video

Inspired Magazine Inspired Magazine – creativity & inspiration daily Video is one of those really contentious points about web design. There are some people who feel like web pages should not have embedded video at all. These people are wrong. Like any technology, however, we should respect it and not abuse it. The two worst things you can do are: AutoPlay videos, without express consent from the user Embed too many videos in one page Both of these things are likely to cause annoyance to users and should be avoided unless you have a very good reason. Knowing what not to do will only get you so far. The rest of your online video success story will depend on knowing the things you ought to do, which is what we’ll cover in the rest of this article. Video categories There are six different types of videos that are commonly used…

Read More →

You Just Changed My Workflow

Good products challenge people to rethink their existing workflows and consider changing them so that they might adopt the new tool. This requires time and patience, trial and error, and can even create a lot of anxiety. The difference between a good product and a great one is that a great one simply changes the user’s workflow magically. And, it really does feel like magic when it works well. Instead of anxiety it can create excitement. Instead of the user feeling as if their investing time that they can’t afford to invest they, instead, feel that their time is well-spent. This is the aim of any good product designer and developer. Our goal is to fundamentally transform your existing workflow(s) for the better. And, if we do our job well, then, we can be handsomely rewarded for it. CryptoYum Development — Nov, 2017 I’m working on two current mobile (iOS) applications right now…

Read More →

Creating Vue.js Transitions & Animations

My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps. The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my peers had unfruitful experiences with React, I was given the green light to prototype a few apps in Vue. This prototyping morphed into full-blown Vue apps for Spektrum connected to a headless CMS. First, I spent time figuring out how to model and render our data appropriately. Then I dove head first into Vue transformations to apply a much-needed layer of polish on our two projects. I’ve prepared live demos on CodePen…

Read More →

Exploring Data with Serverless and Vue: Filtering and Using the Data

In this second article of this tutorial, we’ll take the data we got from our serverless function and use Vue and Vuex to disseminate the data, update our table, and modify the data to use in our WebGL globe. This article assumes some base knowledge of Vue. By far the coolest/most useful thing we’ll address in this article is the use of the computed properties in Vue.js to create the performant filtering of the table. Read on! Article Series: Automatically Update GitHub Files With Serverless Functions Filtering and Using the Data (you are here!) You can check out the live demo here, or explore the code on GitHub. First, we’ll spin up an entire Vue app with server-side rendering, routing, and code-splitting with a tool called Nuxt. (This is similar to Zeit’s Next.js for React). If you don’t already have the Vue CLI tool installed, run npm install -g vue-cli…

Read More →

Back to Top