Dealing with overscroll behaviour on Chrome

When you use your phone and you reach the top of website you should be familiar with the above behaviour. According to Google this is called browser overscroll and there is a way to control how it behaves with CSS.

#modal {
  overscroll-behavior: contain;
}

When overscroll-behavior is added to an internal element the scrolling action will not be chained up to the parent. So for my problem in which I have a modal that is fixed and has a longer height then the body content. I do not want the browser to handle my over-scroll behaviour on this element. This stops my rubber-banding issues.

Another cool example from the spec is when you have a infinite scroller element and you just want to turn off all browser overscroll behaviour so you don’t make the confusing rubber banding effect in addition to scroll chaining.

#infinite_scroller {
  overscroll-behavior-y: none;
}

While adoption of this spec is available on Firefox and Chrome, Safari currently has no plans of adopting this rule yet. heres the can i use page

How to check for undefined in Javascript

So this was a fun issue I ran in to today. I had a list that allowed users to drag and drop items or double click to add a component to the bottom of the list. The code looked something like this:

addItems(item, index){
 if(index){
   // Splice in to correct position
 } else{
   // Push to the bottom
 }
}

The thinking here is that if the user had dragged and dropped the element we would provide this function with the index position of where the element was dropped. If that index was not provided then we would push the value to the bottom of the list.

This is all fine and dandy until you consider what if you have an index of zero. Zero to Javascript is both the start index of an array, and also a falsely value when you check it in an if statement. So what do we do.

Well for this example, where the presence of an argument dictates functionality we can use the undefined keyword to resolve our issue

if(index !== undefined){
 // Splice in to correct position
} 

Now this if statement reads, IF the variable index IS NOT the value of undefined THEN run the functionality in the block

Coding Music: p l a y s t a t i o n w a v e

Some new coding music that I’m listing to.

So heres the deal I have a lot of music that I find or gets send to me that is just solid coding music. Typically they are long sets ( > 30 mins ) and they are just great lists to loose yourself in a state of flow if you are anything like me.

My interests typically lead me to gaming or anime inspired music across all genres.

p l a y s t a t i o n w a v e is a set I’ve had on the background on repeat now for the past 2 days. Sporting a chilled out remix of some classic PlayStation tracks from Metal Gear Solid, Final Fantasy and many more. I’d say the first 10 mins are solid tunes to loose your self to, however I find myself looking to skip tracks near the end of the set.

Hey if you liked this please share this around. If you have questions hit me up on Twitter @BrianBest

How To Remove Default Styles on Select Tags

To remove the default styles on a select tag apply the rule

select {
  -webkit-appearance: none;
}

However some browsers can have there own vendor prefixes so for those of you using Sass heres a handy mixin you can include for your convenience

@mixin appearance ($value: none) {
    -webkit-appearance:     $value;
    -moz-appearance:        $value;
    -ms-appearance:         $value;
    -o-appearance:          $value;
    appearance:             $value;
}

See the Pen Remove Default appearance in select by Brian Best (@brianbest) on CodePen.5308

Further Reading

This past week I gave a presentation at Sheridan College were I talked to the students of the Interactive Multimedia Managment (IMM) program. We talked about how they should best utilize their remaining time left in school to get better jobs, and to start their own companies.

If you are one of those students reading this, I hope my talk helped you.

The key take away for all students is to build up proof online that you do know what it says you know on paper. Then for those who want to jump in to startup is to build up validation prior to building your product.

To that end here are some books and podcast that can help you learn more about these lessons

Books

The Lean Startup By Eric Ries

The lean startup

The Inevitable By Kevin Kelly

The Inevitable

Crushing It By Gary Vaynerchuk

Crushing it

Extreme Ownership By Joko Willink and Leif Babin

Extreme Ownership

Podcasts:

Masters Of Scale With Reid Hoffman

Masters of scale

Front End Happy Hour

frontend

Syntax

syntax podcast

Earning Curve

earning

Internet Explorer 11 is the new Internet Explorer 6

I think if you are developing for the modern web these days life is pretty good for you. Javascript has the proper standards, CSS has an easy to understand templating system now ( grid ), and sites have never been more engaging with considerable browser API and now Progressive Web Apps ( PWA ). We as web developers have never had this much power.

But ah yes, there is this one dark spot. Our mutually shared pain. Microsoft’s Internet Explorer.

Internet Explorer, or IE, is a pain for support. The web is on a fast track of innovation right now, with the upgrade cycle of CSS streamlined into modules, as well as new features coming down the pipe with Javascript and PWA support. However Microsoft caped development of IE 11, the most up to date version, in July of 2015. Meaning, outside of security updates IE11 would not be receiving any more feature updates. Seemingly Microsoft’s plan is to sunset the service pushing users to switch to its evergreen browser Edge, by making it the default browser on Windows 10.

But was this the right move?

Today IE in all its versions still makes up around 6 percent of global browser market share and is the second most used browser on the desktop after Google’s Chrome browser. That is a lot of people using a browser that is missing what we would consider being the modern web standard. I mean here’s a list of things you can’t do on IE 11:

  1. Classes, Arrow functions, and more syntactic sugar
    The web has forced Javascript to get so much more potent with web apps consisting of thousands of lines of Javascript. One of the better features of ECMAScript 6 or ES6 is that it has become so much easier for developers to understand what is happening in their code while writing less of it.

  2. Async/Await
    Async/Await is the savior of callback hell. Await allows developers to hold up the main thread in JS for an asynchronous function to resolve before continuing. I can’t tell you how many lines of code this has saved me.

  3. PWA
    Progressive Web Apps are now the reality we live with today. Service workers are a dream to work with because they enable so many deep integrations to the browser allowing us to make compelling experiences on the web. Being a PWA and having offline support is something that Google will start weighing heavily in their SEO algorithms soon.

  4. CSS Grid
    Another quality of life thing for developers. See the less code we have to write the less likely there are to be bugs, and we can make experiences everyone can enjoy. The grid makes the layout so simple for any developer and is one of the more powerful features of modern CSS.

  5. CSS variables
    CSS variables is a big one if you build page templates. I’ve been using variables in my CSS for years thanks to Sass. However native support for variables in CSS adds a whole other level of awesome and can, for some projects, remove a build step simplifying projects.

Seeing this divide in features reminds me of the IE 6 days. A time when the web was stagnant because of the absolute monopoly Microsoft had over the browser market. Supporting IE 6, later on, was hell because everything that was the standard did not work. Very little JS support and CSS features were limited to CSS2, but even that was not correctly implemented. The only thing that saved us from the tyranny of IE 6 was time, the time unwilling users took to update their browser. At least this time around Microsoft is a willing partner in making the transition to at least edge for all its users. However till that time, we can call Internet Explorer 11 dead, IE 11 is the new IE 6.

Moving Background with Polygon

See the Pen Moving Background with Polygon by Brian Best (@brianbest) on CodePen.5308

This has been something I wanted to do for a loooooong time. Ever since I saw @wearejam3 make some cool sites with it in them years ago. Angled divs. They look amazingly cool! I’ve never really made one before that was used to section off to different spots but I was inspired by @richardcodes who happens to be building his site with some of this divisions on his home page. I’m not really reinventing the wheel here but I did find some cool resources to help others make something like this themselves. https://bennettfeely.com/clippy/ can help you make clipping masks to make this exact kind of angle for a div or other elements. This was a quick make but really fun to do!

Bouncing logo reveal

See the Pen bouncing logo show by Brian Best (@brianbest) on CodePen.5308

I accidentally found this neat idea when I was playing around with my bouncing switches idea inspired by @sasha.codes. Making white squares that bounce up when you hover over them kinda have this cool effect of the webpage coming alive in some way. I showed Elva this and she suggested coloring in a logo or something, so I put my company logo (Digicraft Software Consultants) in and with an added twist the logo squares stay colored when hovered over once and don’t animate again. So this makes for a fun way to reveal a hidden message!

Bouncing Switches

See the Pen bouncing switches by Brian Best (@brianbest) on CodePen.5308

Today I wanted to do a little CSS of my own after work. I’ve been posting a lot on Instagram and I was checking out one of my followers @uncognition and he gave a shout out to @sasha.codes in his story. Anyway, Sasha is, from what I gather, a designer in the bay area and she posts some really cool animations and Sass snippets. Her first post on the page is of some bouncing colored boxes. I wanted to recreate that post my own way and put my own spin on it. So I present to you the bouncing switches! Fun note I used transform3d here to enable some hardware accelerated animations, however, I think I undo some of that with the box shadow. No matter still looks really smooth on my screens

#7daysofbuttons Milk bar bakery button

See the Pen Milk Bar Button by Brian Best (@brianbest) on CodePen.5308

In all seriousness, I think if I was born in another time before computers I’d probably be a chef. Last night Elva and I watched the first episode of the new season of Chef’s Table. I love this show. The first episode is about a chef named Christina Tosi and It’s a powerful first episode. It has one of those endings that leave you inspired to do something. So this button is inspired by Christina and the bakery she created called Milk Bar. They make a whole range of cakes and other sweets so I decided to make the button into one of those cakes. So here’s an order button where your cake gets eaten right after you order it!