DEV Community: Rhymes Toasterface

Day three - async/await and db refactor

Rhymes Toasterface — Sun, 10 May 2020 20:16:51 +0000

10/5/20 Step one. Still

The async/await thing has been bothering me. I didn't do it because I had never used it and never really bothered/had the time to figure it out.

So, I figured now was as good a time as any - I'm supposed to be learning, right?

So for this instalment, dear reader, I went for the async thang.

Turns out it wasn't really all that difficult. I changed the connection/client - added an async keyword:

The bigger changes happened in the db functions, although they weren't really that big:

Other than this, I made some changes to the recipe interface:

I also changed the recipe db functions - mostly, I wasn't happy with the db and collection names.

I was working with a db called 'Recipes'. Which kind of forced me to use collections by recipe type - main, dessert, whatever.

I wasn't happy with this - what if I wanted to change the type of a recipe - who knows why, but I might want to. I would have to change the recipe type AND migrate it across collections.

This wasn't the one - I now settled for a 'Toasterfaves' db and a recipes collection. Maybe there will be other things to save with this site? As well as this, you might note I added the dbName argument to the db functions. This will open up those functions to be usable later on if/when we add more dbs.

That's pretty much it for now. I'm happier these things are done and I don't need to come back and refactor them further down the line.

I guess next, I will have to expose these functions - I assume using express. Then, I will have to get that api running on the cpanel server. That'll be fun...

Stay tuned...

one thing worth noting - I can't be sure any of this is correct! But it works. And I'm pretty happy with it. If you have any suggestions, let me know.

Day two - envs, directory structure and db connections

Rhymes Toasterface — Thu, 07 May 2020 13:45:13 +0000

4/5/20 Step one. Still

This evening, I did a bit more work - I started on the database connection and functions. Brave, huh?

First things first - I found the connection details from Mongo Atlas for the new cluster I had created previously. Then, I set up some environment variables in my server terminal:

I edited the .bash_profile using the text editor of my choice (nano, what of it?). I added a few exported variables in there:

export MONGO_USER=<user name from mongo>
export MONGO_PASSWORD=<password from mongo>
export MONGO_PREFIX=<from the connection string>

If you choose this route (I chose it because it is slightly more secure than plain text strings in my code base - I imagine it will go up to github at some point), don't forget to source ~/.bash_profile after you have updated and saved it - this will make these new environment variables available to you on the server.

Next, I created a bit of a file structure. By the way, it is probably time to mention I decided to use TypeScript for this project. We use it at work, I like it, maybe you will too! Anyway, I have a main index.ts in the root directory. I then have a src directory as well. Within that, I have a db directory, recipes directory and an interfaces.ts file.

Inside the db directory, I have an index.ts and a client.ts. In a brave move, I am going to introduce some images. This will give you a better idea of the starting structure (this may be refactored later, but I am making hay while the mental sun is shining):

You can see I also added a recipes directory with an index of its own as well.

Inside the client file, I set up a Mongo connection using those environment variables I set in the server earlier:

There is nothing out of the ordinary here - I followed the Mongo docs for connecting with the nodejs driver.

I guess the only sadness is not using async/await, but I am too tired to think about that. This works, and a refactor later won't hurt as both will still return a promise-y value. Let's just be happy there are no callbacks...

I did it this way because I would have a reusable connection that I could use without having to reference the variables etc. every time. You might want to do it a different way, but I have written and reusable connection this way before and like it. shrugs

You can see the db functions I added to use this connection in the next instalment. Same Bat-time, same Bat-channel.

Day one pt2 - initial setup, cpanel, mongo, node

Rhymes Toasterface — Thu, 07 May 2020 09:26:06 +0000

Episode two - electric boogaloo

3/5/20 Step one...still

So, I cheated a bit....

I started last night, but in the interest of documenting the process, I am retrospectively adding this information.

I started thinking about this more properly last night. I logged in to cpanel and checked for terminal access - I think I had to request it through my provider before as they locked access down by default, but they seemed fine about adding it.

I accessed that through the cpanel page and was presented with a terminal window. There, I was able to install nvm. Easy step one - once done, I could type nvm use node to make sure I had a version installed and then nvm alias default node to make sure the nvm version of node was the one accessed by new versions of the terminal.

This all went swimmingly...

Then I looked into installing mongo on the server. This looks like it needs sudo or su permissions to do it the easy way. This is when I started thinking about Atlas instead of installing on the server. This seems like it might be useful to learn anyway - we use all of these tools at work, but (probably similarly for most of you), it is already set up and we just build on it

Fortunately, I already have a mongo account, but if you don't you will need to set one up - as I said, there is a free tier you can take advantage of.

You will have to create a new cluster. Once this is provisioned, you can connect to it - mongo will ask you to whitelist an ip and set up a user. Once that is done, you should be good to go.

At this point, you don't need to worry about creating any collections, tables or schemas - as soon as you insert from your app (as long as the connections are all set up correctly), mongo will allow you to connect to the cluster.

I think that will do for today. Next time, we can look at getting a api directory set up and connecting to mongo.

Time for a nap...

A new project. Back to basics

Rhymes Toasterface — Thu, 07 May 2020 07:55:56 +0000

Episode one - a new thing

3/5/20 Background and Plan

So, I wanted to make me a React. Because I don't really know how to. So I dived straight in.

I wanted to make a website to keep all of our favourite recipes in one place. Toasterfaves. Save using that minging old recipe book we have.

Then I thought about it...

What I actually wanted to make was an end to end app. FULL STACK BRO BRO. YEAH. BRO. Or something.

So I started back right from the very beginning.

Maybe it will help someone. Maybe not. But it might help me...

First step - start React Udemy course.

Second step - ignore that and start again.

Third step - start writing the api for the app.

Fourth step - ignore that and start at the VERY BEGINNING.

REAL first step - hosting.

I already have a website. I've had it for a very long time. As you can probably see from that website, I changed careers a few years back. I quit my office job and went to a coding bootcamp. The course was based around PHP/LAMP stack, but covered a bit of node towards the end. When I finished the course, I started writing a cms for a website for a private client. I used php - it was the most knowledge I had. I got some cheap Linux cpanel hosting and away I went. Everything on there is PHP. I've wanted to change over to node (I have been a sefver side dev for a few years now, and that is all written in node), but didn't get round to it - I didn't have ssh permissions for the server blah blah blah so made excuses to put it to the back of the pile. I thought now was maybe the time to get it to the top of the pile!

This will be a series.

I don't promise to release a new one on a schedule - I have too many kids to make promises like that. When I get round to doing a new bit of the project, I will write some more up.

These are the things I plan to cover in this series:

Get the server set up:

Install node using nvm, to be able to manage the version easily
Use a database - I plan to use mongo, just because it is what I know and super easy to use
- I haven't decided whether to install it on the server and hold the dbs there - I could run a cron job on the cpanel to back up the data/dbs directory that mongo uses, but at the same time, I could just use atlas - mongo has a free tier and I don't plan to go over that - I was going to make a simple site to hold cooking recipes.
- Atlas is probably a nicer idea - just in case 1 BILLION people want to copy my banging thai sweet potato and chicken soup
- Connecting to atlas might be more interesting and a more useful use case for others
- I might struggle to get set up on the server as I have no access to sudo or even su. There is no apk or yum. It's going to be a fun ride...
Figure out how to expose the backend api through this server
- Create an api for the app
- As I said, I plan to use the app for recipes, but it could go on to be used for a blog, for example, or other things
- Basic crud routes, with authentication
- Storing images - who wants to read about food without seeing a picture of some???
  - I have toyed with the idea of storing images in a db as base64 for a while. At work, we store in an s3 bucket - this is another option - AWS has free tiers and access or size shouldn't be a problem.
Create a front end for the app
- Initially, I want to create a front end to display the stuff - I plan to use react, because I am interested, but may try Vue or A.N.Other by the time I get to this stage...
- I haven't planned to set up a front end for the creation of items/recipes/whatevers.
- This will probably come later on
- Can use postman in the interim once the api is up and running
- There is an admin section of my website, so I can put it behind there, but it isn't a big deal for me right now

Originially published at triplejdeveloping

What do I do?

Rhymes Toasterface — Wed, 06 Mar 2019 13:53:38 +0000

As I have gotten older, my social life has waned, but every now and then, I venture out, just like in the good old days….

Recently, I did just that. Met some friends, had some drinks, chatted. I hadn’t seen them for a while and the conversation turned to my work, my job. They asked if I was still enjoying it, if I had made the right decision to change careers etc.

Then came the million dollar question: WHAT DO YOU ACTUALLY DO?

Cue the charades answer:

Past that, I was pretty much stumped - it is really difficult to explain what you do as a “developer” or “coder” when someone has no idea what you are talking about.

So, I am going to try to answer it now…..

These are the things (I can think of) that I do on a daily basis:

type/write “code”
think
stand up (you just stand up?)
meetings - planning, estimations, spikes
swim
eat - lunch, fruit
drink - coffee, hot chocolate, water, squash
go home, work (sometimes)

Most of these are self-explanatory. The second half of the list is the easy stuff. In fact, it might be easier to work up from the middle…

Meetings, planning, estimations, spikes

Meetings: fairly obvious, even to the un-scrummed
Planning, easy.
Estimations? Well… yeah, fairly easy. We estimate how much effort a job/task/story/thing will need to be completed. Sometimes this considers time, but mostly how hard it will be (and this is the important bit:) compared to other pieces of work we have completed. This enables us to get a slightly more accurate idea of how difficult a job might be. We then do more planning on these smaller chunks of work. If we know something more simple took less effort/time, we know this thing will take longer, more people, more planning, more investigation beforehand etc.
Spikes: these are time-limited “investigations” into the bigger chunks of work. It might involve individually looking into technologies that haven’t been used in our project before. It might be a few of us whiteboarding options, padding out ideas, thinking about where this thing might go in the future and how we can plan for that. These then help us estimate the bigger chunks of work.

Stand up

Another bit of an odd one if you don’t agile/scrum/scrumbut, but effectively, everyone in a team stands up together and generally talks briefly about three things:

What you did yesterday
What you plan to do today
What is blocking you (what is stopping you from getting what you plan/planned to do done)

It takes about 15 - 20 minutes, but ideally shouldn’t be too long. It helps get problems out in the open - if I am “blocked” by something, somebody else might have encountered that problem already. Talking about it might get different opinions or approaches which all help to get the job done.

Think

This one is obvious, but maybe not so much to some people. I have lots of things around my desk which you would NEVER see in any other job I have done:

Rubik’s cubes
A guitar
Fidget spinner
Colouring books, pens/pencils
Books

It is good to think. All of the things above help clear my head. Sometimes, it is good to take a step back, slow down, think about what you are doing, then go back to it fresh. It doesn’t have to be hours, but sometimes any brain-rest time will help.

It would also be very strange (and probably frowned upon) in most of the other jobs I have done to spend time just staring into space, thinking for any amount of time.

But in this job, it helps.

Type / write code

This is the really difficult one. I guess it covers most of my time. But is the hardest to explain, as much as the Jim Carrey gif does try.

How do you explain something very technical to somebody not necessarily non-technical, but with no idea of how to write any sort of code?

I remember this from when I was a kid:

10 Print “Hello”

20 Goto 10

Enter

I’ve always enjoyed messing around with computers, always dabbled on and off with some sort of code (I also remember trying to figure out linux on a ps2!). So it kind of makes sense to me. But if this doesn’t sound like you, it probably will make sense if I explain what I do.

I mostly focus on backend development in my day to day work. This means that instead of programming the things you see in your browser, I write the bits that you don’t see. For example, if you log into your online banking, it shows you all of your accounts, savings, credit cards etc.

These will all (most likely) be stored in a database. The developer will then build a bridge between the browser and the database. This will involve retrieving the appropriate data from the database (somehow) and sending it back to the browser (by witchcraft, normally).

You want to make a payment/transfer somewhere? You put the payment information into the online banking in the browser, the backend developer takes your request for a transfer, does some stuff, then the money arrives at the destination.

This is where the planning and spikes etc. come into play - I could just delete the amount from the one account record and add it to the other, but that would just be silly. What if you don’t have enough money to transfer in the first place? What if the account/destination you want to send money to doesn’t exist? What if there are tax implications of where you are transferring to? What if, what if, what if….

TL:DR

This is what a developer does - it is working with the what ifs. The whys. The whens and the hows: dealing with those, figuring out how to handle them, then converting those thoughts, ideas and plans into a language that computers understand using an already constructed language with different operators and built-in functions to make that as simple and as clear as possible.

Any clearer? Maybe, maybe not. It’s got to make a bit more sense than the typing mime, right?

Adventures in Javascript pt.2

Rhymes Toasterface — Sun, 01 Oct 2017 11:01:15 +0000

Well, as last week’s article was such a success (thanks for all the likes and retweets, by the way), I thought I should continue where it left off!

So, last time, we talked about map, filter and reduce, how they work and what they look like behind the scenes.

This time, we will talk about composing those functions, or chaining them together.

Again, we will look at how this looks done with our hand-made functions to get a feel for it, then do it with the “real JS functions.

Short and sweet. Nice. Let’s crack on.

We had an array:

let nums = [1,2,3,4,5,6,7,8,9];

Using our last functions, we will map over it, adding one to each, filter it down to numbers over 5, then reduce what is left down to a total of these values. Expecting a total of 40. I think… (quick maths, u know).

Man’s notÂ hot

Here goes:

let ourMapResults = map(nums, addOne);
// [2, 3, 4, 5, 6, 7, 8, 9, 10]

let ourFilterResults = filter(ourMapResults, moreThanFive);
// [6, 7, 8, 9, 10]

let ourReduceResults = reduce(0, ourFilterResults);
// 40

Hurrah, and indeed, HUZZAH.

So, soÂ happy

And, as expected, this works fine. It’s fairly simple.

“So, what’s the beef ? you may find yourself asking (you do, right?).

Firstly, you are creating all of these new variables just for the sake of being able to pass them to the next function in the chain. They won’t be used again, they won’t fulfil their life goal as variables. Or something. You wouldn’t want that for your variables, would you?

Also, each item in the chain is doing just one thing. It is easy to keep track of what is going on.

Also, this is a VERY simple example. These chains can go on for a very long time and can get vey complicated. You would have extra variables everywhere, your code base would be (probably) a lot bigger, less maintainable and a lot less clear.

There are probably lots more reasons it is better, but look - it’s a Sunday morning. Stop picking on me!

Anyway - now, let’s do than the “real” way:

let reduceResults = nums.map(addOne)
  .filter(n => n > 5)
  .reduce((sum, num) => sum + num, 0)
// 40

Great success

Something to watch out for in this:

let reduceResults = nums.map(addOne)
  .filter(n => n > 5)
  .reduce((sum, num) => sum + num, 0)

is the values being used. Firstly, this looks quite strange:

let reduceResults = nums.map(addOne)

addOne doesn’t have anything passed in to it. Really, this is just:

let reduceResults = nums.map(eachNumber => addOne(eachNumber))

map walks through the array and passes each value to the function given (remember, it is just a for loop).

Each function after it is taking the result of the previous one in the chain and bringing it in:

// n = nums.map(addOne)

.filter(n => n > 5)

/*
* It is worth noting here that the name of n can be anything. It is
* generally shortened as much as possible, but this is where it is
* made, you can call it what you want!
*/

.filter(numberOfMagicBeans => numberOfMagicBeans > 5)

Just as an aside, some of you may be familiar with PHP and its dot concatenation (I’m thinking of you here, Bert):

“this .  is , “a . “string”

It may help to think of chaining functions to work in a similar way:

"nums.map(addOne)" . "filter(n => n > 5)" . "reduce((sum, num) => sum + num, 0)"

All you are really doing with the dot is accessing the methods stored on the JS array prototype object, over and over again. Remember:

nums.map(addOne) 
// nums is an array (array.prototype.map)

thatNewArray.filter(n => n > 5) 
// (array.prototype.filter)

newerArray.reduce((sum, num) => sum + num, 0) 
// (array.prototype.reduce)

Also, don’t let the ES6 arrow functions confuse you.

They make chains like this easier to read, but watch out for the way they bind to this if you have any OO-ish code.

Really, all we are saying is,

nums.filter(function (number) { 
    return number > 5;
}

The filter might look a bit tricksy because of all the equals signs and angle brackets (especially if we were checking for >= instead of just >)!

So, there we go. Nice, pretty composed functions.

As before, you can try this in your own terminalâ€Š–â€Šcopy and paste, it should work the same way.

If you have any questions, drop me a line.

Maybe there will be more (if I can think of a topic…).

Adventures in Javascript pt.1

Rhymes Toasterface — Sun, 24 Sep 2017 18:12:36 +0000

I keep thinking about writing more, but the more I think about it, the less I do it. So today I stopped thinking and started writing.

It can only go downhill from here…

Mostly, I couldn’t think of anything to write about. Most things I know have been written about TO DEATH. But today, I realised: that’s ok! Everyone learns things differently (which is also ok, by the way), so it may be that somebody doesn’t understand something because it just hasn’t been demonstrated, or explained, in a way that suits their learning style.

As well as that, they say the best way to cement your learning of something is to write it down, or pass it on. Maybe this will help someone, even if that someone is just me!

Some sort of adventure-type dude

This morning, I was thinking about compositional chaining of functions in Javascript — something we are doing more and more of at work as we move to a more functional style (yes, yes - I know it’s not REALLY functional programming, but it’s a step in the right direction. Note, I said STYLE. We’re not going full blown Haskell and twiddly moustaches just yet…).

Anyway, I thought I would put down my thoughts on the old favourites - map, filter and reduce. These took some brain-wrangling to get my head around. I read a lot, watched a lot of videos (thanks Professor Frisby), but it just wouldn’t stick. They aren’t difficult, but my brain just couldn’t deal with it, for whatever reason.

So, first up is Map :

Map can be called on an array, which then calls the function passed in to it on each item in the first array.

const addOne = num => num + 1;
let nums = [1,2,3,4,5,6,7,8,9];
let jsMap = nums.map(addOne); // [2, 3, 4, 5, 6, 7, 8, 9, 10]

You can paste this into your editor, or IDE and run with Node to see this for yourself (same with all of these examples).

It’s also useful to remember that this doesn’t have to be a function passed in (although, this will probably prove more beneficial in filter and reduce):

let nums = [1,2,3,4,5,6,7,8,9];

let jsMap = nums.map(num => num>= 5);
// [false, false, false, false, true, true, true, true, true]

The important thing about map is that the original array is unmodified:

const addOne = num => num + 1;
let nums = [1,2,3,4,5,6,7,8,9];
let jsMap = nums.map(addOne); // [2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

It seems to me that this is on of the main bonus points of Functional Programming - immutability. Basically, this means that the original thing remains unchanged. Not mutated. By radiation or any other thing.

Map. Innit.

So, back to my opening gambit- what is different about this explanation? I’m sure you’ve seen the addOne function written a trillion times if you’re trying to get your head around these “pure functions. Well, nothing. So far.

But now, I thought I would write a manual map function. Using good, old-fashioned JavaScript for loops (although, these are now pretty much the Devil). Everyone understands a forloop. If you don’t, I would go back to something more basic….

So, here goes (using our addOne function from earlier):

const map = (arr, func) => {
  let results = [];
  for(let i = 0; i < arr.length; i++) {
    let result = func(arr[i]);
    results.push(result);
  };

// Note that results is returned -
  // the original array that was passed in is non-radioactive

return results;
  }

let ourOwnVerySpecialMapResults = map(nums, addOne);
// [2, 3, 4, 5, 6, 7, 8, 9, 10]

// Nums is still unchanged
console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

A couple of things to note - the original nums array hasn’t become radioactive (or changed in any way). Where the addOne function is passed in to our map, only the name is passedwithout the function being called - that is done in the manual map we wrote.

But the main thing to take away from this is that it is just a for loop!!

Every result of the array value being passed to the function is pushed to a new array that is returned.

I guess the next question is: if it is this easy, why do we use the JS map? Well, we can easily chain other functions on to the end of our mapped result. More on that later. Part 2, maybe (if there is one)…

Next, Filter:

As with map, filter is really just another for loop in disguise. It walks through an array, checks each value and passes it to a new array if the value matches expectations. Like this:

let nums = [1,2,3,4,5,6,7,8,9];
let jsFilter = nums.filter(num => num > 5); // [6, 7, 8, 9]

So, it walks through nums, checks each value to see if it is greater than five:

num => num > 5

And returns it in the array if it is. Simples.

Filter. Innit.

There we have it, a simple JS filter. As before, let’s write our own:

const moreThanFive = num => {
  if (num > 5) {
    return num;
  }
}

const filter = (arr, check) => {
  let results = [];
  for(let i = 0; i < arr.length; i++) {
    if (check(arr[i])) {
      results.push(arr[i]);
    }
  };
  return results; // nums is still non-mutant
};

let ourOwnVerySpecialFilterResults = filter(nums, moreThanFive);
// [6, 7, 8, 9]

As before, it is just a for loop, but with an if statement inside that controls what is pushed to the results array.

Is this making sense? Are you with me? I hope so…

Finally, Reduce:

So. Reduce takes two things: a function and a ‘3.5 inch floppy disk’ (or storage device of your choice). It walks through the array it is called on, passes each value to the function and then saves it to the floppy disk (Minions USB memory stick). The floppy disk doesn’t have to be a number, it can be an array etc. - just remember that it will stick to it’s type: if your floppy disk (64gb Sandisk micro SD card) is an array to begin with, the results of the function will be pushed to that array. If it is a number you can dictate what to do - add, subtract etc.

let jsReduce = nums.reduce((sum, num) => {
  if (moreThanFive(num)) {
    return sum + num;
  } else {
    return sum; // nums is unaffected still
  }
// The floppy disk here is the (number) 0 passed after the function:
}, 0);
// 30 (6 + 7 + 8 + 9)

This will go through our nums array, check if the value is moreThanFive. If it is, it will save it to the floppy disk (spiral bound, lined notebook).

You can think of it as a kind of map function, but all of the results are smooshed down into one.

Reduced. Geddit?

This is probably the more complicated of the three. Take some time to make sure you get what it has done, not necessarily how it has done it.

So, let’s try writing our own reduce function:

const reduce = (floppyDisk, arr) => {
  for(let i = 0; i < arr.length; i++) {
    if (arr[i] > 5) {
      floppyDisk += arr[i];
    }
  };
  return floppyDisk; // nums is still not a mutant/zombie/whatever
}

This is a very simple version - it will only work with numbers, but you get the idea. The JS version is much more powerful - it can push to arrays etc.

BUT, you can see it is still just a forloop with an if check inside it.

I hope this has demistified these three higher-order functions. I think I was fairly confident in using them before now, but writing this has really cleared it up for me.

Give them a try, see how it works out for you.

If it helps, let me know - leave a comment, retweet or whatever.

If it’s wrong, let me know.

There may be a better way to do it than this, but I’ve tried to keep it clear and simple.

REMEMBER KIDS: Reducing variables down to one letter REALLY doesn’t help anybody when they are trying to learn.

Hi, I'm Rhymes

Rhymes Toasterface — Sun, 09 Apr 2017 07:31:32 +0000

I started programming properly in September of 2016. I started my first commercial job as a Software Engineer in March 2017.

You can find me on Twitter as @TripleJDev.

I live in Bath, UK.

I work for Seccl Technology.

I mostly program in these languages: JS/Node.

I am currently learning more about Typescript/Docker/allthethingsidontknow.

Nice to meet you.