DEV Community: tris timb

Websites of the three richest people in the world

tris timb — Fri, 06 Mar 2020 01:03:33 +0000

Everyone knows that a good website is a key requirement for any successful business. Maybe you can learn some from America's most successful businessmen.

1) Jeff Bezos - amazon.com

2) Bill Gates - microsoft.com

3) Warren Buffet - berkshirehathaway.com

(This post post was made as an excuse to share Berkshire Hathaway's 90's site still chugging along)

A simple way to specify In/Out css transitions

tris timb — Tue, 17 Dec 2019 17:43:24 +0000

The CSS `transition` property

The transition property quickly brings animation to state changes on your page. It's simplicity is greatly appreciated when what you're animating is also simple. Consider the following:

.NavDrawer {
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
}

.NavDrawer.is-active {
  transform: translateX(0);
}

With one property the mobile navigation drawer animates back and forth between its active position.

Cascading properties

What I want to focus on is the timing and easing parts of the property, and how we can specify different values based on direction.

.NavDrawer {
  transform: translateX(100%);
  transition: transform 300ms ease-in;
}

.NavDrawer.is-active {
  transform: translateX(0);
+ transition: transform 600ms ease-out;
}

Taking advantage of CSS's cascading nature, we can specify a second transition property within the active selector. Here we can specify the 'in' transition, leaving the original one for the 'out' transition. This works because the .NavDrawer styling is overridden by the subsequent .is-active, then once the active state is removed it reverts back.

Takeaway

For many transitions animating out the same way they came in is desired, but I believe there are also instances of compromise for convenience. For example ease-in-out type easings are largely popular just for looking good in both directions. Now by specifying the direction usage of a simple transition is expanded, helping to easily make more desired transitions.

Domain recognition in the address bar

tris timb — Sat, 23 Nov 2019 18:03:07 +0000

Technologies goal to make our lives easier, is a common sentiment shared throughout the world. Competition in convenience is probably no where as fickle as the software industry, where a poor user experience can easily lose the user. That is why establishing direct contact between the product and users has been considered so valuable for businesses. You may remember pre-installed services like ask.com's toolbar, but the more modern requests of notification permissions or 'add to home screen' buttons are the same thing. Businesses are trying to establish user habits, through on device shortcuts.

This leads me to a realization I had shortly after I started using Netlify. At the time I didn't have cable or an internet tv, so when I wanted to watch something I'd plug-in my computer and watch from netflix.com. In doing this I built up a pretty strong user habit of:

Plug computer into the TV
Open Firefox
Type 'n' in the address bar (netflix.com is the top suggestion)
Press enter
Pick a show, sit back, and relax

Once netlify.com became my most visited 'N' site, my habit was broken. For weeks I would first go to Netlify when trying to watch a show, sometimes it would even get me to switch to coding that evening instead. The impact this seemingly small pattern had on my activity, got me thinking about the business value it must have had on me as a user. This thinking would be considered part of UX, and I think it is a valid consideration for anyone building an internet product.

Ideas of Domain UX

A few considerations for choosing a domain name, that promotes discoverability and builds habits.

Shortcuts

It's every business's dream to have their product just a click away, anti-trust suits in Europe gave a glimpse of this value last year with Android. Common developer shortcuts might be 'g' for Github or 's' for Stack Overflow. Consider what your target users natural shortcuts might already be, and what would be available.

Avoid competitors

Hosting your ecommerce store at amazing____.com is probably a bad idea. A new product/service should avoid their competition, you don't want your users being suggested amazon.com for the first four letters they type in when looking you up.

Align with partners

If your business is built around something more popular, leading with it may be valuable. For example vuemastery.com has courses on learning Vue.js, once the sites in your history it will be suggested every time you start a query with 'vue' (which I can attest is a lot when you're learning).

Prepending domains

Don't add 'get', 'go', or other action words to the beginning of your domain. I believe these domains disrupt the natural shortcuts people want to make with your product. A left edge search of what users associate your site as should be your domain. With hundreds of new gTLD's theres a lot more domain options now, prepending shouldn't be necessary.

Subdomains

I'm all for building out proper site architecture that matches breadcrumb structure for SEO required applications, but SPA's can definitely use subdomains to get their naming pick. Two of my strongest address habits mail.google.com and drive.google.com have become second nature.

Thanks for reading my first post on here!