I think I’ve written about CodePen before, its a site that allows users to quickly put together HTML, CSS & JS and see the results as they edit. Users ‘pens’ are public and can be tagged, so it also serves as a repository of examples.
It’s possible to host incredibly complex artefacts, such as this 3D Sony Walkman , but what I mostly use it for is to work out simple things - like how to collapse a row of text into a column with a media query.
You can’t always successfully google problems when you’re starting out - usually because you don’t know the correct terminology for the issue or solution. Often you might still get a newbie StackOverflow hit, but when there’s not even that, you need a human to help out.
One of the things ZTM do with their courses is to have a Discord based community, then set tasks to encourage it’s use - for example one of the exercises I’ve already had was to go there and answer a question. Earlier ones were to introduce yourself and to find a partner to work with - both of which would have forced anyone not used to Discord to figure it out.
In Randy Pausch’s last lecture he talks about the benefit of brick walls in our lives - they tell us how much we really want something. Software development is full of these brick walls - things we want to do, but there’s a barrier to achieving it. Will we persevere and accomplish the thing, give up, or some other compromise.
<img src="/images/screen-shot-2023-01-16-at-4.45.53-pm.jpg alt=“Mixed Content: The page at ‘
Ran into a little bump today - I was calling a cool API that gives the current location of the International Space Station. In a classic case of “it worked on my machine” it worked perfectly in the Live server in VS Code on my laptop, but when I pushed it up to my GitHub space, it didn’t work - throwing the error:
I was looking at this ugly code in a React app:
<div style={{overflow: 'scroll', border: '1px solid black', height: '600px' }}>
{ props.children }
</div>
Since I don’t need any of those CSS properties to change at any stage, I could just convert it to pure HTML/CSS right? Well no:
The newbie trap I’ve fallen for here is that although that <div style= tag looks like HTML, it’s actually not. It’s not a template that will be filled out in the build step, it’s React code that will be used to mutate the virtual DOM.
I’ve worked through my first React tutorial app, and obviously that’s a lot - I’m struct by how messy mixing HTML, JS and React is.
One language feature that’s being used quite a bit, and that is apparently a JS ability I’d never seen is ‘destructuring’ object properties. It’s very cool and obviously useful. It’s a way of extracting just the properties you need from an object and then using them without accesing them via the object. An example will make it clearer.
For the Calculator project, I needed to know the exact RGB values for the colours on the iOS calculator buttons so I could reproduce them. Assuming a tool for reading colours from the screen exisited, I googled it, and was surprised to find this exact tool is already installed by default on MacOS.
It’s called Digital Color Meter and just shows the RGB values for anything on the screen under the cursor.
I’ve been doing a bit of driving during the holidays, which means a lot of podcast listening. An episode of JavaScript Jabber about JS features you should never use sparked my interest in [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). eval() takes whatever you pass it in a string and executes it in the JS engine. This is a crazy concept if you’ve come from complied languages, and has obvious security implications. As with dynamic typing, I’m trying to force myself out of my comfort zone to embrace JS’s unique talents so I was keen to try eval().
/*
Question 1: Clean the room function: given an input of [1,2,4,591,392,391,2,5,10,2,1,1,1,20,20],
make a function that organizes these into individual array that is ordered. For example
answer(ArrayFromAbove) should return: [[1,1,1,1],[2,2,2], 4,5,10,[20,20], 391, 392,591].
*/
function ctrFunction1(inputArray) {
// copy the array since we're mutating it
const array = [...inputArray];
array.sort();
const numberObject = {};
for (const number of array) {
if (numberObject[number] === undefined) {
// this property does not exist, so add it
numberObject[number] = [];
}
numberObject[number].push(number);
}
// object now contains arrays for each number, but the ones with a
// single element need degloved
for (property in numberObject) {
if (numberObject[property].length === 1) {
numberObject[property] = numberObject[property][0];
}
}
// now turn back to array
return Object.values(numberObject);
}
const array1 = [1, 2, 4, 591, 392, 391, 2, 5, 10, '2', 1, 1, 1, 20, 20];
const transformedArray1 = ctrFunction1(array1);
console.log(transformedArray1);
// [1, 1, 1, 1], [2, 2, '2'], 4, 5, 10, [20, 20], 391, 392, 591]
When I’m looking at a function, I’d prefer not to also have to hold global state in my head - so I’m all for functional programming as far as that goes. I’m less concerned about side effects, so I wouldn’t always bother to copy a parameter like this, but the argument is stronger for an array than an object since in other languages an array might be a value type.
I am still struggling with the dynamic typing of JS. I guess the benefit of such an approach is needing less characters - which makes sense in a scripting language like bash, but in real programming it opens us up to a whole class of avoidable errors.
To program defensively in JS would mean loading the start of function with a series of type checks. I don’t see much of that in other people’s code, so I assume we just, don’t?
We’re in a pretty good place now (compared to a few years ago) in terms of being able to rely on JavaScript behaving the same on different platforms. There’s still some differences (mostly in when things are implemented) but overall, not to bad once you decide to no longer support Internet Explorer.
In times past, it was a lot more painful . A few of approaches to deal with this arose. One is to let a library, such as jQuery or a polyfill deal with it, and the other is use a translation utility such as Babel to down convert (transpile) your modern JavaScript to something that will run in more browsers.
As with other languages, functions are a little lumps of code with their own scope. They can optionally take some arguments, and optionally return a value.
In JavaScript they often have names, can be passed around as types and have a condensed form suitable for functional programming.
function addNums(a, b) {
return a+b;
}
console.log(addNums(3,4)) // 7
Arguments are passed in by value so they have local scope only in the function body.
I quite often leave a link to a GitHub repo to share my source in these posts, and on a few recent ones, a link to a live version of a page on my github.io. In a recent installment of CWD , Andrei shared some previous students’ solutions, and some were hosted on CodePen.io which I hadn’t seen before.
It’s a cute concept, you can enter HTML, CSS & JS and see a live view of the page below. It looks super extensible - there’s mentions of SCSS, Typescript and preprocessors for JS in the settings.
I was a bit pleased with myself when I started the next content element in the Complete Web Developer course to find that one and a half of the extensions I’d made to the tutorial app for my own fun were specified as the next task.
In my previous post, I’d talked about using a class to denote if an item was completed, and using a style to indicate this by crossing it out. What I haven’t discussed was that I’d captured right click events on the list items to make this delete them. I wasn’t entirely happy with that for a couple of reasons:
There is no shortage of places to reference material to help when developing web apps, including a gazillion tutorials and blog posts (like mine) of various quality, and more importantly - based on the state of play at the time they were written, which could be any time in the last twenty years. I keep bumping up against this - great, clear explanations addressing whatever I was googling, but which turn out to use out of date bits.
I’m up to Section 12 of the Complete Web Developer course “DOM Manipulation” and it feels like we’re finally at the stage of pulling everything (HTML, CSS & JavaScript) together to make minimal web apps. Since the course is light on building challenges, I’ve set myself one - to make a simple todo list (the classic step up from “hello world”).
The Document Object Model is an entity representing the HTML with attached CSS for a page. The magic is that we can access this in JavaScript, and therefore change it, including hooking into events on it - such as a user pressing a button.
As a visitor from sensible type-safe land, this makes me uncomfortable:
As I keep learning, I’m interested to find out if JavaScript objects turn out to just be arrays. To get from here to there, you’d just need to be able to use some sort of self[2] notation to access properties from inside the functions.
I was listening to a JavaScript podcast today (JavaScript Jabber ) and in one of the discussions a point was made about how HTML, CSS and JavaScript have all had to maintain considerable legacy behaviors that compile-able languages do not have to. For instance, when Swift underwent some substantial changes from Swift 2 to Swift 3 - some code broke for developers and needed reworking because things had changed or been removed. Nothing broke for users - they could either still use their previously compiled applications, or they were delivered new ones from the app store.
I’ve been using the Live Server plugin to see HTML & CSS updated as I edit, and that will also be useful when I start using Javascript for web development, but as you can see above, I’m not quite up to that. It seemed there should be a way to run JS in VS Code, and it turns out it’s easy.
You just need something installed that can run Javascript. Node.js is the obvious choice, and you’re going to need it later in your development journey. Just install Node.js then the first time you try to run some JS in VS code, it will ask you what to use, select Node and you’re in business.
In the Zero To Mastery Complete Web Developer course, I’m up to the first practical challenge - to use CSS to layout a reasonably standard looking web page using flex-box and grid to make it responsive.
Frustratingly, both for writing this, and while I was trying to build the page, I’m unable to screenshot the example of the page I was supposed to be building, and instead had to keep opening the video and seeking the two second flash of the completed project, and eventually being reduced to photographing my laptop screen like a boomer relative sending me a meme: