DEV Community: marktiddy

Continuing to learn...

marktiddy — Fri, 01 Jan 2021 17:29:45 +0000

I'm going to cut straight to the chase...I'm feeling a little uninspired and need the help of the dev community, especially those intermediate programmers out there.

How did I end up here?

I've spent much of the last few years learning to code...initially I did a Udemy course on iOS development in order to build an app idea I had.

Since then I've took a deeper dive into full stack development, initially working through much of the freeCodeCamp material and then finally completing a bootcamp with CareerFoundry and landing a job as a web developer which I love!

But I don't want to stop there...I want to keep learning and this is where I've found myself right now. I found it easy as a beginner to find courses and tutorials but I feel like I need something meatier now...

So...developers who've been around a while...

Where do you go for inspiration when learning?
What projects are great to build to push yourself?

Finishing A Bootcamp and Landing a Job in Tech during a Global Pandemic

marktiddy — Tue, 29 Sep 2020 19:39:12 +0000

This post was originally posted on my blog

Back in October 2019 I started my Full Stack Web Development bootcamp with CareerFoundry, a part-time, self-paced bootcamp which is taught through their online learning platform but also assigns you a tutor who is there to mark your work and offer support when you get stuck and a mentor (someone who can help you understand more about what it’s like to work in the industry). I've previously written a review of this course.

The course was going well, I was able to complete the work, go on tangents to try and understand things more and when I’d glance at the job situation locally I felt like there were plenty of potential opportunities.

Then the global pandemic happened. Countries across the world entered lockdown, people lost their jobs and jobs boards emptied, especially those advertising junior positions.

At this point there were a couple of things I decided to do:

The first was to simply accept that any timeframe I had set myself needed to shift. I was in a fortunate position whereby I had a full-time job already in a career I’d enjoyed for the last 15 years and so my ’plan’ shifting a few months didn’t have a big impact. (I recognise that not everyone is so fortunate).

Secondly I decided to use my time wisely. The CareerFoundry bootcamp offers 6 months of job-search support at the end of the course and so I decided to wait a couple of months to complete my final task of the course in order to make the most of that support. I worked through some more of their career course but most importantly I decided to learn more coding skills. A number of the local jobs that had been around pre-pandemic asked about Wordpress, a platform I’d used for many years but as and when I needed to, so I spent some time learning more about the ins and outs. I picked up a couple of free projects using React and React Native to give me some client-work experience and I continued to practice the skills I’d been learning throughout my bootcamp. Reflecting on this now, this time really helped me level up my skills and become more confident.

Next Steps…
As things in the UK started opening up again and jobs started to be listed I completed my bootcamp and started applying for jobs. My extra practice and projects during lockdown enabled me to apply for a wider range of jobs but to also have some recent client experience I could talk about.

I’m not going to write that it’s been an easy process but these are the things I did that eventually landed me a Web Developer position:

Keep a log of applications - This is important for tracking your progress but also for knowing what a company was asking for if they come back and give you a technical test, having a document you can quickly go to and pull up the original job listing is really helpful when someone calls you up. You’ll also find that when recruitment agencies are involved there can be multiple listings for the same job…a log can help you avoid applying more than once.
Customise your CV/Resume - Quality is better than quantity and you need to stand out. If a company is asking for a ’Frontend Developer’ then change your job title on your CV/Resume to ’Frontend Developer’. If you have example projects listed on your CV then change these depending on the role you’re applying for. For example, if a job you’re applying for is asking for Wordpress experience then talk about your Wordpress projects or if they’re asking for JavaScript then talk about your recent React project.
Customise your Cover Letter - Having a staple cover letter you use for everything is tempting but again, tweak it depending on the role you’re applying for. Talk about your experience, talk about what excites you about the company you’re applying for, mention specific projects you’ve done that show you’d be a good fit.
Pace yourself - The CareerFoundry money-back guarantee only expects you to apply for 5 jobs a week. This is a good minimum to set to ensure you go for quality over quantity. It’s also important to keep practicing your coding at this time too and MOST IMPORTANTLY remember to take breaks and listen to your body, takings breaks, doing other activities and enjoying yourself. A good work/life balance is something that will help you keep going on what might be a very long process. Applying for jobs (and being rejected) can be tiring…trying to balance being excited about roles you apply for and not getting your hopes up can be really tricky, putting things in place to help you manage disappointment is really important for your mental health.

So, what landed me a job?

For me, the extra experience I built up during lockdown helped a lot, I also had some previous freelance experience alongside this which enabled me to talk about working with clients. I also found focusing on the above points made a big difference alongside the support from CareerFoundry, my career mentor was excellent and was really up for offering advice, looking through cover letters when I wasn’t getting responses and even doing practice interviews over Skype.

Don’t get me wrong, landing a job in tech for a career changer in the middle of a pandemic isn’t easy…probably 75% of the jobs I applied for never got back to me, even some of those I did technical tests for never got back to me but persistence and balance was the key for me.

If you’ve got any questions do feel free to put them in the comments section below or come and join me on twitter @marktiddy

My Experience of the CareerFoundry Full Stack Web Development Bootcamp

marktiddy — Wed, 16 Sep 2020 14:53:09 +0000

Just under a year ago I signed up to the CareerFoundry Full Stack Web Development bootcamp and have since managed to get a job as a web developer (I'll write more about that on another post). As I went through the course I wrote some notes and thoughts about it so here is my review of the course (written prior to a positive outcome for me!)

Prior to signing up to the course I did plenty of research around the various bootcamps (and deciding that giving up my job wasn't an option). In the end I went for the CareerFoundry Full Stack Web Development Course.

Why I Chose CareerFoundry

It was remote and self-paced - This meant I could work it around my full time job.
The reviews I could find of the Web Development course were good.
The price made it an affordable option (at the time it was £3000 with upfront payment discounts making mine £2500 although I believe this has now increased to £5000).
The material focused on JavaScript and a MERN (MongoDB, Express, React, Node.js) stack which is a up-to-date approach and enabled me to really learn one programming language (JavaScript) in depth rather than touch upon lots of different ones.
You are given a tutor and mentor throughout the course who both work in tech, you also get a career coach when you complete the course.
The Job Guarantee was transparent. Many bootcamps offer a 'job guarantee' but the CareerFoundry one felt like it was written to reassure students of the effectiveness of the course rather than providing so many hoops to jump through no-one would ever qualify for a refund!

The Learning Platform & Course Content

As the course if fully remote you complete your bootcamp using CareerFoundry's online platform. This platform is easy to use and shows you goals (such as how many sections you need to complete each week). The majority of the lessons are text-based and are laid out really well, each one has a step-by-step task at the end and these seem to get less prescribed as time goes on requiring you to put some of your new skills to good use and learn all about problem solving too. Typically your tutor marks most your work and provides feedback and a pass/needs more work and your mentor marks the final project of each section...you also have Skype calls throughout with your mentor too.

The content as a whole is excellent and I found that I learnt a lot, there's also lots of 'if you'd like to learn more follow this...' links which enable you to go deeper. For me, the pace was spot-on and other than the Redux section which completely confused me I found the whole thing was explained and presented really well. The great thing about having a tutor is that when you get stuck you can reach out to them.

The Extras

The Full Stack Web Development course also offers some extras beyond the material of the course itself.

Mentor/Tutor - Both of these people are there to help you and already work in the industry. I ended up changing mentors halfway through but both were really good. My only piece of feedback for CareerFoundry would be that some more guidance for both students and mentors around what these calls should entail would be really helpful for making the most of them.
Slack - CareerFoundry offer a Slack community for students past and present. I found that I didn't really use this as the majority of the discussions were around the UX/UI courses rather than Web Development but they were nice to have.
Career Course - Halfway through your main course you gain access to the career course. This course talks you through things like telling your story as a career changer, helps you write a CV and cover letter, shares good places to apply for jobs, helps you create a good LinkedIn profile and offers some interview advice. As part of this course you have a mentor who offers feedback on your submissions and can tailor their advice when you start applying for roles. My career mentor was excellent and I certainly owe some of my success coming out the course to him.

Summary

Overall I would certainly recommend the CareerFoundry Full Stack Web Development course. The communication from CareerFoundry was great, the course content was really good and they constantly related the content and principals into the workplace which made you feel like you were preparing to put your coding into practice as you went along. I also felt like they didn't try and spoon-feed you everything but helped build your confidence in reading documentation, Googling and learning new things (skills that have really helped me as I've continued my learning after the course).

This post was originally posted on my blog. You can follow my journey into tech over on my twitter account @marktiddy

React Page to PDF creator using Puppeteer, Express and Firebase Functions

marktiddy — Tue, 30 Jun 2020 10:54:01 +0000

I recently found myself needing to allow users of a website I was building for a client to download content as a PDF...it took quite a bit of working out how to implement this feature so I thought I'd write about how I finally managed it on the server side using a Firebase Function...and share a couple of failed attempts!

The Ways that Didn't Work
Before I settled on the method below I had a couple of failed attempts...these were:

html2pdf, jsPDF - There is a well documented method of achieving turning a page into a PDF using html2canvas and jsPDF (bundled into html2pdf). This runs on the client-side and was the first method I implemented and it sort-of worked however it didn't work on all browsers or devices and occasionally gave weird results (such as flipping images 180 degrees!)
There is a React library out there called React-to-PDF but it requires writing your PDF content using separate syntax more similar to React Native...as I wanted to take an existing page this didn't meet my needs but is worth checking out.

What Worked...and how I did it
My final working solution was a Firebase Function (although this would also work on Lambda with some tweaks) that ran a express API and on a particular endpoint would use Puppeteer (a headless browser) to navigate to the part of the site I needed as a PDF and then return that PDF to the client. (I then simply linked this endpoint in my frontend code).

So, what are the stages of doing this?

Set up a new folder for your project (e.g. page-to-pdf)

Run

npm init -y

This adds a package.json and then run

firebase init

This sets up firebase with your project...I'm assuming you've previously installed the firebase CLI and logged in. (Note: See the Firebase documentation for setting your computer up the first time including logging into your firebase account

At this point Firebase has created a 'functions' folder for you. CD into this and Install Express, Puppeteer and Body-Parser

npm install --save express puppeteer body-parser

Now our packages are installed create an index.js file in your functions folder. We're going to add the following code just to get us started.

const functions = require('firebase-functions')
const server = require('./server')
const api = functions.funWith({ memory: '2GB', timeoutSeconds: 120 }).https.onRequest(server)

module.exports = {
api
}

In the code above we required functions (which we need for firebase functions to work). We then created an instance of our server (which we'll code and create in a second) and then we set up our cloud function with a few preferences.

Next we need to create our actual Express server and set up our commands to puppeteer. So, create a server.js file and add the following code

const express = require('express')
const bodyParser = require('body-parser')
const puppeteer = require('puppeteer')

const app = express()
app.use(bodyParser.json()).use(bodyParser.urlencoded({ extended: false }));

let browserPromise = puppeteer.launch({
args: ['--no-sandbox']
})

Above we simply set up our server by creating an instance of express called 'app' (which we imported into index.js in stage 3) and then added some bodyParser middleware.

The last line of code assigns puppeteer to a variable and adds the argument '--no-sandbox'...if we don't add this then puppeteer doesn't work on cloud functions.

Next, below that code we need to set up our endpoints. I'm going to set up something fairly simple for the purpose of this tutorial, a get request which will include a url added by a user.

app.get('/turn-website-to-pdf', async (req, res) => {
const url = req.query.url;

const options = {
format: 'A4',
printBackground: true
}

const browser = await browserPromise
 const browser = await browserPromise;
  const context = await browser.createIncognitoBrowserContext();
  const page = await context.newPage();
  await page.goto(url, {
    waitUntil: 'networkidle0',
  });
const pdf = await page.pdf(options)
  res.setHeader('Content-Type', 'application/pdf');
  res.send(pdf);
  context.close();
})

There's a reasonable amount of code there so let me explain what we did after creating our asynchronous API endpoint.

First we grab our url that we submitted with the request...this might look something like this if we wanted a pdf of Google

http://myapi.com/turn-website-to-pdf?url=http://google.com

Secondly, we set up some options for when we turn our page into the PDF. In this case we want an A4 format with the background included.

Next, We then carry out a variety of things with puppeteer.

We assign the browserPromise we created earlier to a variable called 'browser'
We create a new context of that browser using puppeteer's 'createIncongnitoBrowserContext()' function. We do this using incognito mode so we get the latest version of the website we're visiting
We then create a new page and then visit the url we passed in (in our case Google). We use lots of the await keyword because we're in an asynchronous function

(We also pass a second argument in to waitUntil the network is idle...this means we don't move on until our page has fully loaded)

We then create a new variable called 'pdf' and assign it the result of Puppeteer's pdf function passing in the options we set earlier.
Then, we send it all back to the user. First setting a header telling the browser we're sending back a PDF and then sending back the PDF itself

Finally, at the bottom of your code add this line so our index.js can actually access it

module.exports = app;

And that's it...we're ready to test

To test it locally just navigate to the functions folder in your terminal and run the 'firebase serve' commend which will provide you with a local link to your API.

Once it's all working you can then run 'firebase deploy' to send it to your Firebase project. You can find the link to your cloud function in your Firebase project (firebase.google.com) and under 'Functions'.

And you're done!!!

If you want some extras and some troubleshooting notes read on...

** Extras **
The above is a pretty simple example but when I coded this I needed to visit a React SPA, log into an account and then access some content before saving as a PDF. I used a couple of extra Puppeteer functions to do this

await page.click('#somethingtoclick)
await page.focus('#somethingtofocuson)
await page.type('#textbox,'my text')
await page.waitFor(1000)

The above functions (in order) let you click an item with that ID (e.g. a button), focus on something like a text input, type something into that input and wait before moving on (This last one was essential for me as my React app had some animations I needed to finish before creating a PDF)

** Troubleshooting **
If you're finding that your function doesn't perform as you expect then it's worth setting the headless parameter for your browser. This means when you run it locally you can see the browser open up and the magic happening...you can also then see where it gets stuck.

To do this we have to pass a second argument in when we create our browser promise.

let browserPromise = puppeteer.launch({
args: ['--no-sandbox'],
headless: false
})

That's it! I hope that's helped you out if this is what you were looking for!

Tips for Learning to Code

marktiddy — Sun, 24 May 2020 13:37:12 +0000

For over 10 years I'd been familiar with HTML & CSS and able to get by when I'd needed to and was even able occasionally able to hack about PHP in Wordpress without (completely) breaking it but I'd always wanted to learn to code properly...but I'd tried...and it was hard, and I didn't get it!

My previous attempts (up until 3 years ago) had included downloading a book on creating iOS apps in Objective-C (back before Apple released Swift) and finding myself more and more confused the more I followed the instructions.

Then a couple of years ago I started a Udemy course on iOS Development and the rest is history...I've got a few apps in the App Store, have (nearly) completed a remote Full Stack Web Development bootcamp and I'm really quite comfortable writing JavaScript (and using libraries/frameworks), creating iOS apps and HTML and CSS feel relatively easy...I can even dive into new frameworks/libraries and begin to get a grip on them from their documentation.

Now, don't get me wrong, I'm not expert and I've got a lot to learn however I wanted to share some of the things I've found have helped me during the learning process because learning to code is tough.

1. Come at it from many directions
Whilst working through my bootcamp content I've also been working through the freeCodeCamp curriculum (at a different pace). This has meant that I've revisited things a month or so later and this has been great for really embedding my knowledge.

I've also found YouTube and Medium really helpful places when I didn't understand something...there was a point where I got really stuck on React-Redux...my bootcamp introduced both at once and it left me utterly confused...so I went in search of answers. Through articles, walkthroughs and videos I built a couple of really simple redux then react-redux apps to really embed my knowledge...then I went back to my bootcamp task and it all made sense!

Reading something from more than one perspective is really helpful.

2. Listen to those 'I wonder...' questions

There have been numerous times when as I've been coding something I've found myself thinking 'I wonder if you could...' and so I've gone off and Googled it, read up and given it ago.

If you wonder if something is possible when doing a project then why not have a look and have a go? It's all great learning...but be careful, if you're on limited study time make sure you keep an eye on the clock...it's easy to fall down a rabbit hole.

3. Have a project (or two!)
When I was working through my iOS Udemy course I took a break to work on creating an app for an idea I had...and I managed to put it together and get it out there. This was great because it embedded my learning, caused me to learn more and creating something from scratch without a step-by-step is a lot of fun! (Google is your best friend!!!)

Currently I am working through my bootcamp stuff but also have a couple of side projects which I am messing around with for fun.

4. Give yourself space and time off...
Try not to overload your brain or put too much pressure on yourself. It's important to keep some kind of work-life-code balance.

I've found downtime has been when my head has really worked through a bug in my code or understood a coding issue...running and driving have been particularly useful things to do to help think things through.

5. You will forget things...and that's ok
If you're on a bootcamp path then the chances are that you're learning a lot of new things...you're probably jumping from HTML to Express to React and back to HTML again.

You might have spent months writing something in React and then come back to Vanilla JavaScript only to realise you've forgotten how to do some things...and that's ok!

I picked up Swift again recently after not writing it in ages and found that it took a little while to get my head back into it but, once I'd written some code and watched a video or two I was back in the zone.

Finally...
remember that it's ok to Google, it's perfectly acceptable to ask questions and that 'getting stuck' is part of the process.

"Don't be fooled by the blocks that I've got!"

marktiddy — Sun, 08 Mar 2020 13:20:16 +0000

Way back in 2002 Jennifer Lopez told us to remember where we started as she sung 'I'm still Jenny from the block' and over the last few months as I've re-learnt HTML & CSS after nearly 15 years and started learning JavaScript I've come to believe that Jennifer's advice is pretty essential for the programmer.

Whether you've learnt a programming language in the past and are revisiting it, learning a new language or learning to code having never coded before it's important to remind yourself that there was a point where you knew nothing of the language you're learning.

Let me explain why this is a helpful thing to remember…

Two years ago I purchased a Udemy course to learn how to create iOS apps and over the last couple of years have become increasingly more comfortable with Swift even creating a few of my own apps. I still need to Google how to do things and revisit some of the modules in that course but I'm comfortable enough to do that and know where to find (and understand) the solutions. There was, however, a time in that journey when even a basic concept such as a variable or function was new and difficult for me to understand.

Fast forward to learning JavaScript and I've found that I've whizzed through the basics of the language, finding that many of the concepts FreeCodeCamp and CodeAcademy are explaining to me are the same as in Swift, they just have a different syntax.

However, as I've dived into the server-side of JavaScript, packages and modules on the course I'm currently doing I've found that it's been trickier to get my head around topics and that I'll finish a module without feeling like I fully understand something and I need to remind myself that 'that's ok'.

If I could time travel and were to go back a couple of years and try to explain even the basics of JavaScript to my past self I know 'past me' would struggle to have a clue what I was talking about. Likewise, even looking back to some of my Swift course now I remember really struggling with APIs but now I feel like I'm more confident in making requests to APIs and dealing with the results.

So what's my point?

My point is that whether you're at the start of your coding journey, somewhere in the middle (like me) or a seasoned programme I suspect we need to remember Jennifer Lopez's advice to remember where we came from.
If that concept feels tricky now then Google it to find out more, watch some YouTube videos on it, practice using it for some other projects, think about it whilst exercising or take a break but whatever you do remember that once you were clueless about concepts you now feel confident about and that as you persist with this new concept you'll look back and wonder why you ever struggled to grasp it.