Forem: Lost Semicolon 💻🖱

The big secret to being consistent 🤫

Lost Semicolon 💻🖱 — Mon, 11 Apr 2022 13:46:47 +0000

Today marks my 100 days of Duolingo learning - it is also 100 days since the 1st of January!

Three months ago all I could say was “I EAT APPLES” but now I can probably fumble my way to ask for the bill. I can also proudly express that I write letters on the beach (I don’t do that, but the potential to do so is there if the occasion ever presented itself and I had to tell someone about it). Even yesterday I caught some Spanish words on the recently streamed “Yo soy Georgina” - so you could say I will be pro in no time.

But, I have never been a type to stick to something daily, but this time I have - so what was different?

Firstly, I picked something I wanted to do. I always wanted to learn Spanish but I wasn’t sure it was the right “choice”. Were there other languages which were more useful to learn? Maybe bring me more income or job prospects? I used to do German and Japanese, should I not just build on those? But once i put those questions aside I could actually concentrate on learning how to book a table for 2 on my imaginary trip before bed each night. And it is good albeit sometimes frustrating fun.
Secondly, and probably most importantly, Duolingo lets you show up everyday in whatever way you can. One lesson is roughly 16 little exercises and you can do as little or as many of them as you can. Don’t want to do new lessons? You can go over your mistakes.
Don’t have time to do that? That’s okay, there are short stories you can do instead. It is the habit of doing it everyday that is more important than the volume you do on the daily.
Thirdly, Duolingo let’s you fail without too much punishment. It allows you to not loose your streak if you miss a day every once in a while. The app focuses on getting you back on track as soon as possible and so you do not get the dread of “ i just lost my X day streak” and removes the “ What is the point of getting back to it now”.
Will I reach my 365 day streak? Time will tell. But this journey showed how much I can achieve when I show up without expectations of being perfect. And to look back and acknowledge where I am, because looking back, that starting line is not even in sight anymore.

Happy learning !

Get last part of the url

Lost Semicolon 💻🖱 — Thu, 30 Dec 2021 16:41:05 +0000

In js, you can use url.substring(url.lastIndexOf('/') + 1)

Should you read "Don't make me think" by Steve Krug?

Lost Semicolon 💻🖱 — Sun, 31 Oct 2021 13:56:20 +0000

TLDR: Yes, Its a short, well written and insightful book with messages that still stand true today.

The Review

"Don't Make Me Think" is a simple and fun book about designing web pages written by a usability consultant Steve Krug. I picked it up as it was short, full of illustrations and most importantly it seemed like an entertaining read about a topic I didn't really give much thought to previously. I can't be the only one not spending my time thinking about breadcrumbs - some ducks might disagree though(1).

The book is filled with simple concepts, explained well and without buzzwords or hype. Heck, even Steve manages to divide the usual business into "Hype" and "craft" folk and identifies himself as the latter. Maybe this is why his book is so simple. Or maybe it is because the book is written in a way in which follows his definition of usability:

"A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth"

It's funny, that almost 7 years since the revisited edition, even though the world of the web and mobile has changed so much, the base concept still remains the same: Make your product achieve a goal and simply.

Apart from the more obvious design tips like the importance of visual hierarchies or omitting useless words, Steve also talks about some general behavioural lessons whether it is from users or your managers. I think this is why I liked it so much - He doesn't just give you a tick list of things you can do to make your website or app more usable but talks about how there is no average user, how to be better at continuous usability testing and why people do what they do.

My 3 things

With that in mind, My 3 favourite takeaways from the book are:

People pick the first "good enough option" and muddle through. It is highly unlikely a user will read instructions or help text.
Use conventions and don't reinvent the wheel unless you will make something much clearer. Clarity trumps consistency.
A good shared resource will be destroyed by overuse, if it is not managed. Think the front page of a website.

Negatives

As for the negatives.... I think the mobile experience has changed so much, It deserves more space. The revisited book came out in 2014, just as the era of mobile was getting into the big swing of things.

So.... should you read it?

Yes. I would absolutely recommend the book and I think it will be one I come back to again and again.

Where to buy

You know the green shpiel → Check if your local library has a copy of the book, if not buy books locally or buy them 2nd hand : https://www.abebooks.co.uk/servlet/BookDetailsPL?bi=31017851480&searchurl=an%3Dsteve%2Bkrug%26sortby%3D17&cm_sp=snippet--srp1--title8

Footnotes

please don't feed bread to ducks, its bad for them.)

What's your type? A short guide to data typing.

Lost Semicolon 💻🖱 — Mon, 16 Nov 2020 18:56:43 +0000

TLDR

Typing - way in which computers determines different data formats.

Static Typing - Type defined at compile time
Dynamic Typing - Type defined at run time
Weakly Typed - Variables can change type at run time
Strongly Typed - Variables cannot change type at run time

Read on....

When I first stated learning development, I used to think of "typing" as "typing on a keyboard" rather than "data typing"
which is why everything was a little bit more confusing at the start. You live and learn tho.

What is typing?

Data typing is a way of describing the type of data we are using. For example, we know that a boolean can only be True or False, or 0 and 1.
This process allows the compilers to determine the required memory to hold data and ensure that the program can be run with no type errors.

Types, types, types

Static and Dynamic typing

If we define the type of data when we declare a new variable such as :

//Java
boolean isValid = true;
int number;

then this is known as Static Typing where type is explicitly typed before the compiler. Languages such Java or C# as do this.
Attempts to re-assign the variable type will result in an error:

//Java
boolean isValid = "naw, mate"; //compilation error

The type checking in this case, is done at Compile Time ( although many IDE's will let you know ahead of time, they are good that way).

If we do not need to specify the type which we want our data to be, it is determined at run time. The language then has Dynamic Typing and examples include JavaScript or Python.

//javascript
isValid = true;

Strongly and Weakly typed languages

Some languages allow you to re-assign the type a variable can hold at runtime - for example Javascript. This a quality of weakly typed languages.

//javascript
isValid = true;
isValid = "I am";

Where as in others, this is not the case:

boolean hello = true; 
hello = "hello";
//error: incompatible types: String cannot be converted to boolean

Some flexible languages

Sometimes, languages are super flexible, like Go. Whilst being usually considered a strongly typed static language, it allows the compiler to determine the type, but once its set, you cannot change it:

isValid := true
isValid = 1

//cannot use 1 (type untyped int) as type bool in assignment

Is static faster than dynamic?

In theory, yes, because the compiler doesn't need to work out what data type it needs.

In practice, this is not the only way to measure performance. In Java vs Go comparison, both languages are statically and strongly typed and yet the performance varies due to a multitude of other factors.
In addition, different languages have different use cases, and have been developed with different purposes in mind
(whether they have kept to it 10yrs down the line, thats a different issue) and so sometimes its like comparing Apples and Oranges.

Should I change the type during the running of my code?

As always, it depends.

But in majority of the cases, I would argue that this is a code smell and show be avoided where possible. Typescript was created in the big part, to help JS devs eliminate type bugs!

In certain cases it does make sense.

Happy coding!

Find the length of a loop in a linked list

Lost Semicolon 💻🖱 — Sat, 12 Sep 2020 22:12:04 +0000

I have been doing some katas, to improve my coding skills. I am now at 6kyu on CodeWars.
This week my interesting problem was :

You are given a node that is the beginning of a linked list. This list always contains a tail and a loop. Your objective is to determine the length of the loop. The loop looks like this:

How to Solve

There are 2 parts of this question:

Figure out when you are in the loop
Count the nodes in the loop

Figure when you are in the loop

After a quick google, I have discovered the Floyd's Cycle Detection algoritm - which, as it says, finds whether you are stuck in a loop. You can also use it to find exactly where the start of the loop is, but this is outwith the scope of this question.

The basic idea is that you have 2 pointers:

one moving to the next node by 1 ( slow pointer)
second pointer which moves by 2 nodes (fast pointer)

If the list you are in is indeed a loop, both should meet at some point as both will be going round-and round.

The code therefore is as follows:

function getNodeInLoop(node){
   let slow = node;
   let fast = node.next;

//problem assumes there is always going to be a loop
//so no need to check
   while(slow !== fast){ 
        slow = slow.next; //move by 1
        fast = fast.next.next; //move by 2
    }

  return slow; 
}

We therefore return a known location of a node in the loop.

Count

We can start counting the nodes! We take our node in which both slow and fast pointers matched (in here seenNode) as treat it as the root node in the loop. We use a "pointer" variable to keep track of there we are in our while loop and "count" to count the number of nodes we have went through:

    let size = 1
    let seenNode = getNodeInLoop(node); 
    let pointer = seenNode.next; 

    while(pointer !== seenNode ){
        size++; 
        pointer = pointer.next;
    }

    return size;

Solution

The Full solution is as follows:

function loop_size(node){
    let size = 1;
    let seenNode = getNodeInLoop(node); 
    let pointer = seenNode.next; 

    while(pointer !== seenNode ){
        size++; 
        pointer = pointer.next;
    }

    return size;
}

function getNodeInLoop(node){
   let slow = node;
   let fast = node.next;

//problem assumes there is always going to be a loop
//so no need to check
   while(slow !== fast){ 
        slow = slow.next; //move by 1
        fast = fast.next.next; //move by 2
    }

  return slow; 
}

Ta-dah!

Links

CodeWars Question
Floyd's Cycle Detection algoritm - clear explanation on hackerrank

p.s I am not sure why but codewars does not like separate functions for a solution, and therefore most of my coding solutions are just written as one function.
p.p.s As always, this is only my solution and I know there are other implementations out there. Feel free to comment your one to start a discussion :) !

Return Boolean or Element in .filter()?

Lost Semicolon 💻🖱 — Wed, 02 Sep 2020 19:54:35 +0000

I have been doing codewars in order to improve my JS skills. I am now at 7 kyu - graduated from 8 kyu -and I have been enjoying solving programming puzzles.

My recent challenge which caused me some bother concerned arrays. The task was as follows:

Given an arrays a and b, return values from array a which are not present in array b.

Seems simple at first sight. Essentially, we require a .filter() which will return an element. Such as:

function arrayDiff(a, b) {
  let newArray = a.filter(element => {
                      if(!b.includes(element)){
                        return element; 
                 }})
  return newArray;
}

However, when we run the test below, we are missing the 0 value.

Test.assertDeepEquals(arrayDiff([-20,16,6,3,-2,0],[-2,-20,16,3]), [6,0]) 
//output is [6]

It took me a while to figure out why this was happening.
In JavaScript, 0 can represent false and 1 can represent true.

By returning the value 0, we are indivertibly returning false, telling the .filter() function that there is no match and the element shouldn't be added to the new array.

Instead of returning the element, in this case, we should return a boolean.

And so the solution is:

function arrayDiff(a,b){
    return a.filter(element => !b.includes(element));
}

But when can I use element and not a boolean?

You should use "element" when you would like omit anything, which may be interpreted by JS as falsey. One of these examples could be removing undefined values from an array or empty strings.

Values which can be interpreted as falsy are:

false
null
undefined
0
NaN
''

Why .reduce() caused me so much confusion over the past 2 days.

Lost Semicolon 💻🖱 — Sun, 30 Aug 2020 19:03:22 +0000

This month I started doing coding katas to improve my JavaScript skills. I do puzzles and quizzes on my phone a lot anyway, and coding is not that far off solving puzzles.

I am using Code Wars - the site is free, you can see other folks' solutions and there is a level system to see you progress. It also encourages you to participate in the community, which is a great mindset to install in people.

I found it to be a great tool, even though the interface can be a lot and I had to familiarise myself with the ranks.

I was doing a simple kata of adding arrays. The kata requested that, given an array of items, I had to return a sum of all positive values in the array.

Initially, and I thought that adding all items in the array would be an easy task, as this can be done using the .reduce() function. But not all of the tests were passing.

function positiveSum(arr) {
  return arr.length > 0 ? arr.reduce(addAll) : value;
}

function addAll(total, value) {
  return value > 0 ?  total + value : total;
}

When the input arrays started with a negative values, my tests failed. In a test where an array had all negative values, I would expect the value of 0 to be returned as no values would be added. However, I would be finishing up with the arr[0] value instead.

Unfortunately, I have wrongly assumed that the total value (also known in js land as the accumulator) started at 0. This is not the case - the accumulator starts as the first value in the array. AND the first loop starts on the 2nd item in the array (arr[1]). For example:

function positiveSum(arr) {
  return arr.length > 0 ? arr.reduce(addAll) : value; 
}

function addAll(total, value) {
  console.log('Total is ' + total + ' and current value is ' + 
  value) 
  return value > 0 ?  total + value : total;
}

let testArray = [-1,-2,-3,-4,-5]; //we expect 0 as all are negative values

positiveSum(testArray); //we get -1

//Output
//Total is -1 and current value is -2
//Total is -1 and current value is -3
//Total is -1 and current value is -4
//Total is -1 and current value is -5

So, as you can see, the function is only called 4 times, with -1 being the initial accumulator value. This meant that the arrays which were starting with a negative value, would have incorrect totals.

In addition to the above, when arrays were empty, I had to put in a safety check for that as well.

Defeated, I have used a simple .forEach() to finish my kata - which, admittedly, worked like a charm.

BUT PLOT TWIST!

When I have looked at solutions for my fellow coders, I have realised that .reduce() method can, in fact, take an initial accumulator value!

The only thing I had to correct was adding a 0 as an argument in my reduce() function :

 return arr.reduce(addAll,0);

What does this do to iterations? Well, there is now an iteration per element in the array, starting at the 1st element (arr[0]).

The problem of reductions on empty arrays was also solved this way!

The final solution is as follows:

function positiveSum(arr) {
  return arr.reduce(addAll, 0); 
}

function addAll(total, value) {
  return value > 0 ?  total + value : total;
}

So moral of the story is.... Always look for improvements to your solutions :)

Doc

MDN docs

Netlify and Google Domains

Lost Semicolon 💻🖱 — Mon, 01 Jun 2020 20:25:27 +0000

I have bought my own domain for a blog! I have always wanted to do and now i did! I went with google domains as it was the cheapest domain I could find. There was a good £15 difference between sites so make sure to shop around!

The buying process was very simple - i just had to put in my card details and address. The set up.... should have been simpler.

I have hosted my site on netlify but the process should be similar.

Netlify

In your netlify console, go to your site and then click Domain Settings. Click the green button "Add custom domain".
Alternatively, there will be a "getting started" banner with option 2 being "Set up your custom domain". Click that.
You will now be asked to provide the name of the domain you have bought. In my case it was "ewa.dev".
If you own the domain the site will ask you to verify that you are the owner. Bare in mind Netlify can also provide you with a domain.
Click "verify".
Netlify will now redirect you to your domain settings where you will see your domain. You will see that your domain will have have a warning, to ask you to "check your DNS configuration". Click to Options -> Set Up Netlify DNS.
There is now 3 steps:
5.1 Add domain - Netlify will ask you to re-verify your domain name
5.2 Add DNS records - The DNS records for your Netlify sites will be configured automatically. Unless you have email set up with your domain, you can skip this bit.
5.3 Activate Netlify DNS - Nelify will give you names of their name savers. Keep them open and head to your domain name provider.

Google Domains

Go to your domain settings
Click DNS
In the NameServers box, select option "Use custom nameservers". For googlr domains, before I was able to add my own custom domains, I had to disable DNSSEC.
Add the name servers from Netlify to the google nameservers.

And Thats it! Your domain is set up - it says it can take up to 48 hours, but in my experience its pretty speedy. Ewa.dev took only 15 min to kick in.

Happy Coding!

Quarantine Games - Pictionary!

Lost Semicolon 💻🖱 — Wed, 08 Apr 2020 14:04:03 +0000

It is easy to feel demotivated or disconnected from your team when we are all isolating. We have started doing weekly games at work to be more connected in the team. First one is Pictionary :

You will need:

*Drawing software (paint)
*Calling + Screen Share Software (Teams, Zoom, Slack etc)

How it runs:

Split into 2 random teams on the call.
A person from each team will draw for their own team ( I think that’s the easiest).

Team 1 – a person from team one uses a random generator to pick a word. I suggest starting with "medium" difficulty.
Person then shares their screen with paint opened ready to draw.

Team 2 starts 1 min timer and GO !
Person from Team 1 draws the picked word
Team 1 guesses the word.

If they guess correctly, team gets a point. If not then :(
Team 1 and Team 2 swap roles.

Track your score! Do 5 rounds and see how it goes - you can do movie categories or something harder later on. Its quite hard to draw with a mouse - start small and improve over time :)

How to quit vim

Lost Semicolon 💻🖱 — Wed, 08 Jan 2020 16:31:20 +0000

Its okay, happens to all of us :D

press esc
type :q
press enter

Global Diversity CFP Day

Lost Semicolon 💻🖱 — Fri, 03 Jan 2020 15:15:14 +0000

On Saturday 18th of January, at Skyscanner offices, in Glasgow, and in other 80+ locations around the world, the Global Diversity Call For Proposals(CFP) Day workshop will take place. The aim of the day is to help people from underrepresented and marginalized groups, to apply to speak at tech conferences with the goal to elevate new ideas and perspectives onto the center stage.
The set up is simple - attendees get access to mentors and resources to allow them to identify a topic, write a proposal and map out the talk. And most importantly, the whole event is free!

Origins

The idea came about in 2015 when the organiser of ScotlandJS and ScotlandCSS, Peter Aitken noticed that the number of applicants from varying backgrounds applying to speak at the conference, was incredibly low.

Peter explains:

"In 2015, 6% of CFP applicants were from underrepresented and marginalised groups. That needed to change."

At the time, the conference had anonymous voting in order to prevent speaker bias, but when the percentage of applicants is so low, the chances of being picked, are also very low. As a response to that, an idea was born to help people from underrepresented and marginalised groups to write their proposals.

The result? Well it is rather remarkable. In just 3 years the number of applicants from diverse groups to ScotlandJS shot up to 35% and Global Diversity CFP Day has increased from 6 to over 80 workshops around the world.

“The key for me is that people are wanted, welcomed, and that their voice and perspectives are valued. If more people see people like themselves on stage, it will encourage them to apply also”

Why do it?

Conferences are places where people come to learn and have interesting conversations. If the same people present similar talks, there is a limit on how much we learn and discover. In addition to the above, if the experts as viewed as coming from one particular group of people, then the decisions may not take into consideration the “invisible” section of the user base.

Recently I learned a lot as I was trying to organised a note taker for the day to allow people who are hard of hearing to attend the workshop. I knew about barriers for people who were hard of hearing, or deaf but I have never considered how this impacts the day-to-day work environment. The same thing happened when my friend let me listen to her screen reader, and read code to me as she is visually impaired. Or I heard another speaker who talked about how the block chain model is a reflection of the old system for keeping records, in villages, before record keeping was centralized.

These stories are worth hearing, and I am hoping that by organizing initiatives such as the Global CFP Day, more and more people will have the opportunity to tell theirs.

The Glasgow workshop will include some of the community’s very best mentors especially organisers from communities such as Agile Scotland, Ladies of Code and CodeCraft

Find a workshop near you here.

How many unique CSS properties can a div have 🤔?

Lost Semicolon 💻🖱 — Fri, 26 Jul 2019 21:12:16 +0000

There are a lot of CSS properties! But just how can a div have? Let's find out!

const element = document.createElement("div");
let  totalCssProperiesNo = 0;

_.forEach(element, function(e){
   totalCssProperiesNo++
});

console.log(totalCssProperiesNo);

You get 522! As of today.

Thanks to JavaScript teacher for his CSS Dictionary book where he ran his code last year and got 415.