Starlifter.NZ

Resources I’m using to upskill my #MadWebDevSkillz

Posted
June 29, 2018
Categories
Web Dev

Bill Gates showing you that you don’t have to know how to dance to code.

Kia ora koutou,

I was just about to start an txt file to list all the resources I’m using or finding helpful for upgrading my #MadWebDevSkillz but thought it’d be better placed online for anyone else on a similar path.

  • Tutorials
    • Wes Bos
      • React for Beginners
      • I’ve found Wes to be an excellent communicator who sets things at a steady pace. He has courses on CSS Grid, Javascript, React.js, Node.js, Sublime Text, and Flexbox just to name a few.
    • React Introduction from JenOfDoom
      • A React tutorial from a talented wee web kiwi who works for the top notch tech shop Catalyst IT.
    • Alligator.io
      • I haven’t had a chance to get into any here yet but it seems like a good resource. They cover Vue.js, React, JavaScript, and CSS.
    • Serverless Stack
  • Resources
    • Mozilla Developer Network
      • The bosses of the free web, word. It’s your essential resource for all things web dev.
    • DevDocs.io
      • Your one stop shop for any documentation you’ll ever need. They even have a sweet offline mode for when you wanna get your code up on those long haul flights or bus trips.

That’s it for the mo. See you online!

Benet.

Sticky Nav using vanilla JavaScript

Posted
June 3, 2018
Categories
Javascript
Screenshot of a sticky nav bar that uses vanilla Javascript.
Screenshot of a sticky nav bar that uses vanilla Javascript.

I didn’t realise how easy it would be to make a sticky nav bar that uses vanilla Javascript.

This is something I’ve been wanting to learn for a long time. I was surprised how easy it is to make a sticky nav using vanilla JavaScript.

The method querySelector is used to target the navigation bar which has an ID of main, this is assigned to the variable nav. The distance between the the nav bar and the top of the window is calculated using the offsetTop property of the element.

A function named fixNav is created with an if…else statement inside it. If the distance that the page has scrolled is greater or equal to the value set in the topOfNav variable two things happen; a class of fixed-nav is added to the body tag and the height of the nav bar is added to the stop of the window to account for it coming out of the flow of the page. If the distance that the page has scrolled is less than value set in topOfNav the class is removed the padding-top is set to 0.

On the css side of things the nav bar with the newly appended class of fixed-nav is given a position of fixed and a subtle shadow.

Icecast Connected Devices Widget ????

Posted
May 31, 2018
Categories
Javascript
Number of connected listeners widget for 8K.NZ

Number of connected listeners widget for 8K.NZ

With all the mad knowledge and skills I’ve been learning lately I thought it’d be a good time to try writing my own thing. So I decided to have a go at writing my own widget to display how many devices are connected to the Icecast server for the online radio station I help run, 8K.NZ ????

The live widget is here: http://8k.nz/current-listeners/
The code is up on Github here: https://github.com/starlifter-nz/icecast-device-stats

I’m going to attempt to describe what I did with the JavaScript. The Icecast server has a publicly accessible JSON object of live stats, I assigned this to a variable called endpoint. I accessed the object via a new DOM API called Fetch. This was then put in a function called blob which was then deconstucted into a constant called source. The value of the number of listeners is then assigned to the numbers variable.

Due to how the English language deals with singularity and pularity I needed to write an if statement to accommodate this. If the value of the variable number is 0, or 2 or greater, the first section of HTML is displayed inside the element with the id of noOfListeners. Otherwise if there is only 1 listener the second section of HTML is displayed.

This all gets wrapped in a getStreamStats function which is then called. The setTimeout method is then used in conjunction with a repeat method so that the getStreamStats function is run every 44 seconds. At 8K we like to have fun with numerology around the number 8 ????

I learnt so much building what from the surface looks like a simple widget. Thanks to the follow people for their help and support:

Jeff Knaggs
charlietfl

1 2 3 … 7