DEV Community: JennyJudova (they/them)

Easy fixes for the take home part of your interview

JennyJudova (they/them) — Sun, 20 Mar 2022 20:54:35 +0000

Recently I've been interviewing a lot of people (still find it hard to believe as it feels like it was yesterday that I was job hunting). Being on the other side of the interview table has taught me a lot I wish I knew when I was interviewing for dev jobs especially the take home part of the interview.

Take home part of the interview is a common part of the interview process for software engineers. The task usually goes something like: ‘Please build X. X must be able to do a,b,c,d,e’.

I remember when I did take home exercises my thinking was along the lines of ‘Just do the thing they ask for, as long as it works who cares’. This is true the homework has to run without errors and work. However there are things you can do to make your work stand out. And honestly most of these bonus points are really easy to get.

Readme

Most Readme's I see are the generic auto generated ones. Which always makes me sad as a readme is arguably the most valuable real estate that most candidates ignore.

This is the place where you can explain what you did and why. And where you can explain what you would do with the project if you had more time to work on it.

Things you should add to your readme:

manual test plan (we will come back to this)
why you chose to do what you did, no matter how detailed the exercise there will always be creative wiggle room - so this is a great place to explain your reasoning.
how can this project be improved, what would you have done if you had more time - go crazy, or go rational say you did not test it with voice over accessibility technology and if you had more time you would do that.
was there something you did not do
call out bugs - if there is a bug that you have no idea how to solve or don't have the time to solve this is the place to call it out.

Tests

If you are applying for a junior role tests are rarely expected. If for a more senior role - you must have tests. If you are a junior and don't know how to write tests then in the read me add a manual test section where you explain how you manually tested your app - what pages you visited what buttons you clicked etc.

Semantic HTML

Just because something CAN be a div does not mean it should be a div. The bonus of using semantic HTML is that usually its keyboard accessible. Even if you know nothing about accessibility - semantic html will do most of the heavy lifting for you.

Accessibility

In most companies your homework will undergo basic accessibility testing and accessibility is an unspoken requirement.

The basic test is to make sure that the thing you built is keyboard accessible (can you focus on everything using tab, and click using space). If you have access to screen readers like VoiceOver & Jaws also use those. Write about accessibility testing you did in the ReadMe.

Small touches that show care and character

I am a UI engineer, I help hire front end engineers and honestly there is nothing that makes me as happy as a front end engineer who shows that they care about the user. It might be tiny little things that are added to the feature that might have not been part of the assignment that show that the candidate did not just follow a list of 'todos' but thought about the user. A recent example I came across was an error screen and message that where in line with the exercise.

You can teach anyone to be a software developer, you can turn an okay ui engineer into a great one with enough mentoring and resources. But it's a lot lot harder to teach people to care.

Comments that are not meant for anyone who is not the author of the code

Just as a reminder - when you submit your homework make sure it is readable to strangers.

Git history

We all write commit messages such as 'chore: fix the thing' followed by 'stupid lint errors', 'committing while it's not broken'. While we are on the topic of git. One big commit for the whole exercise is also not a great look.

If its not used it should not be there

In the code if it's not used - delete it.

Add comments in the style sheet

If all of your styling is in a long CSS file do add comments that help users navigate the file.

These peace’s of advice are definitely not guarantees to land you a job but these are all tiny ways how you can definitely make your application stand out.

Careful with copy pasting

Let's face it a big chunk of the job is searching for examples and copy pasting. Sometimes you copy paste your colleagues work, sometimes your own, sometimes a stranger's on the internet. Thats all kosher we all do it and then we go and clean it up so its not an in-your-face-copy-paste job. If you did copy paste - rename things, alter it make it yours. If your homework exercise asks you to create a weather app and you did something similar for a project for a movie app make sure the copy pasted stuff is renamed from BestMovieOfTheDay to WeatherToday.

Consistency aka use prettier

Random spacing and a mixture of single and double quotes for strings just makes the code look messy.

Avoid !important

Thats it, thats the advice.

If you have any advice from 'marking' homework assignments do let me know in the comments.

This is all from my personal experience

What makes a website green? A guide for front end devs

JennyJudova (they/them) — Wed, 30 Jun 2021 08:04:32 +0000

A friend sent me a message with a simple question ‘why is this website considered green?’ All I could answer was well I went on Website Carbon and it told me that the website is green.

My own answer was not enough for me so I dug in.

You’d think that the answer would be a simple ‘Because x, y, & z’ but like everything that tackles complex systems, and human carbon footprint is an incredibly complex system, I had to go with ‘well let me start at the beginning.’

So let’s start at the beginning: what makes a website green?

If the internet where a country and all of us online it's citizens it would be the 4th most carbon consuming country after China, USA and India by 2025, and the wider IT sector would be the 3rd (after China & USA). The internet and tech by different calculations account for 2 to 4% of carbon emissions (the airline industry pre pandemic was responsible for 2%)

Of course one can argue about the overlap and differences between IT and the Internet. But to keep some order and sanity lets narrow this blogpost to carbon emission of the internet.

So to answer the seemingly basic question 'What makes this website green?' we should first answer the question 'How do we calculate the carbon emission of a website?'

How do we calculate the carbon emission of a website?

As a developer I am proficient at copy pasting and the folks at Website Carbon created a handy list of what they consider when they calculate the carbon footprint of individual websites:

Data transfer over the wire - amount of energy it takes to load the website
Energy intensity of web data - "Energy is used at the data centre, telecoms networks and by the end user’s computer or mobile device." Website Carbon calculated an average of 1.8kWh/GB.
Energy source used by the data centre - the Green Web Foundation database is checked
Carbon intensity of electricity - carbon footprint of grid electricity
Website traffic - if the website has 1 million users it's a bigger polluter than a website that gets 1 visit.

As web developers we have some control over:

Data transfer over the wire
Energy intensity of web data- incredibly limited control
Energy source used by the data centre - if it's a personal project we have full control over this and can choose a 'green' hosting platform.

Why should devs be more green?

For one because we live here on Earth and I like to keep my home clean. And second, though developer salaries are good I am not sure we earn enough to get ourselves to Mars when Earth goes belly up.

Third reason is that becoming a carbon conscious developer makes us better developers (see the 1996 and 2021 SpaceJam websites comparison bellow). More importantly developers don't just have control over our own projects but some control over some of the largest websites on the planet and we are often the group that is heard within corporations (not always but often).

As a disclaimer I should add that this is by no means an attempt to put responsibility for the current climate mess on the internet. Climate change is essentially a high stakes blame game of who farted where everyone farted.

As a second disclaimer I am a front end developer not a scientist, so this is advice that is meant to be practical rather than preachy.

So what can be done to make a website more green?

What is Data Transfer over the wire?

Tom Greenwood in his book 'Sustainable Web Design' put it best:

“Most researchers use kilowatt-hours per gigabyte (kWh/GB) as a metric of energy efficiency when measuring the amount of data transferred over the internet when a website or application is used. This provides a great reference point for energy consumption and carbon emissions. As a rule of thumb, the more data transferred, the more energy used in the data center, telecoms networks, and end user devices.

For web pages, data transfer for a single visit can be most easily estimated by measuring the page weight, meaning the transfer size of the page in kilobytes the first time someone visits the page. It’s fairly easy to measure using the developer tools in any modern web browser. Often your web hosting account will include statistics for the total data transfer of any web application.”

In other words the more requests, images, videos, music your website has the more data is needed to load it. Back in the early days of the web, developers where conscientious of this as internet speed was really really slow and media heavy websites took forever to load, today speed is not an issue and to be honest we (developers) did get sloppy.

Possibly the best examples of this are the iconic and the new SpaceJam websites. Just pop over to the network tab of your developer tools and compare the amount of data the old and the new websites use.
3.1kb vs 1.6mb as a reminder 3.1kb is only 0.0031mb (1.6mb is 1,600kb). The old website takes a fraction of energy compared to the new one.

How to decrease Data transfer over the wire?

Video

The advice for video is - avoid video on your website. One study found that streaming videos on YouTube produces approximately 10 kg of CO2 per hour or the same amount as Glasgow a city with a population of half a million.
If you really need to use video then:

use SD by default rather than HD
avoid video autoplay. This is good for the planet and also for the user as the user has to confirm that they actually want to watch the video.(from Sustainable Web Design by Tom Greenwood)

Images

Images are where most of us get lazy. Because internet speed is so good the load time between a 1mb image and a 300kb is unnoticeable to most users. And if it's just one image the climate impact is not that bad but what if it's one image on a website that is visited by thousands of people each day? What if its thousands of images on a website visited by thousands of people. Little things add up quickly.

In fact the average weight of a website in 2010 was 500 kb in 2020 it was 2mb that is a 4x increase and 50 % of that increase is because of images.

So what are the ways developers can deal with the image issue:
1.Don't show unless asked for or have a preview image and offer a large image only if the user explicitly asks for it.

2.Resize - load an image that is the appropriate size for the device that the user is viewing it on.

As an example you really do not need an 8000px x 45000px (resolution 300px/inch), when the average Macbook Pro is 2560 x 1600 at 227 pixels per inch and the largest iPhone is 1284 x 2778 px.

formafantasma - a design agency that focuses on art museums uses both of these tactics. Users are not shown the images unless they want to see more information about the project.

3.format - use an efficient image format
Lets face it most of us usually deal either with JPEG/JPG or PNG so which one is better?
The rule of thumb is for photographs use JPEG for graphics, logos or text heavy images use PNG.

But if we want to be green SVG is better than PNG for logos. And JPEG is best substituted by WEBP or even better by AVIF. Avif works like magic and is usually around 10x less than jpeg BUT major browsers like Safari do not support it.

4.compress - this is great for website optimisation as well as the environment. Here are some tools that can be used for lossless optimisation:
*ShortPixel
*Compressor
*TinyPNG
*TinyJPG

Further listening/reading:
“The Joy of Optimizing Images” by Una Kravets

Lossless compression - can reconstruct the original exactly
Lossy compression - information is lost but (most) users do not notice.

Low tech magazine - compression and optimisation can work together as an interesting stylistic choice. For example images in Low tech magazine fit really well with the design and vary in size between 100kb and 12kb which is by far smaller than the often advised upper limit for image size of 1mb (1000kb) (1mb = 1,000kb)

5.avoid special effects - even “simple” effects can have a significant impact on the end users’ CPU usage. For example, adding a carousel to an image gallery instead of displaying static images on the page increased peak CPU usage by 7 percent. Adding a simple fade-in effect on page load increased peak CPU usage by 22 percent. (Excerpt From Sustainable Web Design by Tom Greenwood)

Good navigation

Every-time a user navigates to a new page - it has to load, and loading a page takes up energy, hence the shorter the user journey - the more energy efficient it is.
And to be honest this is just great user experience advice. As a user I loathe lengthy user journeys or even worse yoyo user journeys (where you pass the same page multiple times creating a bizarre digital Blair Witch project experience).

Caching

Caching means temporarily storing data. The best contenders for what you store are things that are unlikely to change or change infrequently.
How you do caching will completely depend on your website, and its' best to google for your specific scenario and tools you are using.

There is possibly one scenario that most developers will come across - caching fonts. Most websites use third party fonts (specifically google fonts) and most choose their font once and never change it, so it's definitely worth exploring how to get rid of that unnecessary request call.

Offline website is possibly the most interesting experimental website that works only offline by caching (check the github) to show the website only when the user is offline.

Further reading:
*Frontend caching strategies
*A Hitchhiker’s Guide to Caching Patterns

Lazy loading

A strategy that loads a resource at the point of use/only when its needed.
Think of long scroll blog posts with images, with lazy loading the image at the top of the page loads instantly but all other images load only as the user scrolls down to see them.
There is native lazy loading for img and iframe tags so really no excuse to not do it.
Also the benefits don't just include a lighter page but it can also be beneficial for SEO.

API requests

*unnecessary requests - if you have to call an API to get data - you have to call an API there is no way around it. However it might be worth considering reducing API calls that are design rather than utility lead for example using default fonts like Ariel rather than Google Fonts (see caching above).
*break up into small chunks - consider the structure of the API. Do you really need to call all 1000 rows of data when you are planning to show only 10 rows on one page?

Further Reading:
Delivering Large API Responses As Efficiently As Possible

How to minimise energy intensity of web data

How much energy does it require for a user to run your website? There is definitely overlap with some stuff above. The more images your website uses, the more videos it streams the more energy your user's device will need to consume to use your website.

However, there is one thing that does not make a difference to website loading times but if your user is using a device with an OLED it makes a difference - colour.

Colour Palette

According to a report from Google the screen is the biggest single power draw on it's phones and that for devices with OLED displays, darker colours make a significant difference.

Here you have two choices:
1.create a dark mode version of your website.
2.use darker colours in the design of your website.

Conclusions

Let's not be lazy and actually act on easy to follow small pieces of advice that add up to make a difference (if your website uses images that’s the easiest place to start with).

This said I should probably practice what I preach and go update my side project website...

Stay tuned for Part 2.

Is Brutalist design coming back as Carbon Conscious?

JennyJudova (they/them) — Mon, 05 Apr 2021 18:19:56 +0000

Earlier this week the new Space Jam 2021 trailer dropped and of course, the movie needed its own website. As by now the original website from 1997 is an iconic part of living internet history I expected the original website to be somehow incorporated into the marketing campaign. It was not.

Luckily the original Space Jam website was not completely defaced, just relocated to https://www.spacejam.com/1996/

However, I am surprised the marketing team decided to ignore the original iconic site. Especially since more and more contemporary websites try to mimic the 90's Brutalist aesthetic which has actually aged quite well.

What is Brutalism?

Brutalist web design should not be mistaken with Brutalist architecture - a style that became popular primarily in the UK after WWII. It is characterised by a ‘blocky’ appearance with a rigid geometric style and large-scale use of concrete. Brutalism prioritises functionality and structural elements over decorative design.

What is Brutalist Web design?

There is no one definition of what is Brutalist Web Design. I would argue that it's more a “vibe” than a set of design principles (or lack thereof). Lewis Menelaws' wrote a brilliant blog post trying to explain the design but for my purposes, I think Brutalist Design can be summed as a throwback to the internet of the late 90'ies.

The internet was the wild west with no existing conventions, patterns or rules. There were no existing solutions to problems like 'What should a navbar look like', or 'How does one present big data' because data was not yet big.
And though the imagination was limitless the developer toolset was very very limited. In fact, in the early 90's it was just HTML. PHP was born in 94, JavaScript in 95, CSS and Flash Player in 96 (if you are interested in web history How We Got Here by Richard Campbell is great). So Brutalist websites look either like stripped-down HTML or like they are trying to recreate Flash but on steroids.

Maybe this is Brutalism - a design that does not follow patterns.

What Brutalism is not

Brutalism is sometimes equated with unusable websites. Visually the two are similar however they are worlds apart.

Unusable websites feel like a design exercise that showcases the importance of design. Brutalism - is the design, and it does not equate with the absence of accessibility.

Arguably the 90's websites were more accessible than contemporary ones, if you needed a button you used the tag < button > not the < a > tag that was then styled to look like a button. My current personal website is HTML only and it scores 100% on accessibility.

Some examples

Brutalism is a “vibe” not a set of rules so it's easier to show. Here is a shortlist of websites that fall under the Brutalist Vibe:

The spectrum is pretty big
From the really loud sites that look more like a collage that came to life:
https://www.toiletpapermagazine.org/

https://benhalpern.com/

To those that seem really basic:
https://x20xx.com/

To somewhere in between:
http://www.milliondollarhomepage.com/

Is Brutalism dead?

For many, Brutalism is an interesting yet unusable design - fascinating to look at but not commercially viable. The style is relegated to weekend projects and portfolio sites.

Speaking of personal websites, the creator of Sass Hampton Catlin's portfolio website is 'chef's kiss' meets 'big flex'.

Brutalism the art world darling?

The only industry that seems to have many examples of Brutalist websites is Art. Why? I can only guess. Maybe because brutalism is perceived as creative, or maybe because it looks like you are cool without trying to be cool; Big Lebowski style. Or maybe because like an ad campaign for Vintage Volga or Gucci Brutalist web design screams ‘90s meets y2k.

Or maybe because many art projects are not interested in selling to mass audiences. Some they are not for profit and others sell out before their work even goes on sale. Thus, their sites do not need to be a streamlined sales funnel. In some cases, the website exists just to showcase past projects.

Here are some of my personal favourites:
https://hannahbarry.com/

https://circa.art/

https://mschf.xyz/

https://www.stedelijk.nl/en

http://kunsthallezurich.ch/en

https://www.cabinet.uk.com/

https://www.greengrassi.com/

https://nicoletticontemporary.com/

https://new.deappel.nl/nl/

And of course my own pride and joy https://climateart.org.uk/

Brutalism as Climate conscious web design

Let's face it Millennials are a generation that was taught about climate change from primary school, if not kindergarten, and so was Gen Z. As we move from fast fashion to vintage, from cow milk to oat milk, from liquid soap to bar soap it's no surprise that some of us also started looking into the carbon footprint of their website via tools like Website Carbon. Millennials (people between 25 and 40) now make the bulk of people currently working in tech and building websites.

And there are some incredibly high profile organisations that have adopted Brutalist design because it is environmentally friendly.

Elon Musk (love or hate him) has to always be in the avant-garde and the website of Musk Foundation is plain HTML with 7 lines of text. The website is perfectly in line with the climate-conscious mission statement.

The art world darlings Formafantasma wrote a climate manifesto when they redesigned their website.

So what does this all mean? It means that there is an argument to be made that web design like all other design: fashion, interior, architecture, is cyclical. y2k is back not just in fashion but also in web design.

On a personal note as a person who knows enough about design to see what looks good and what looks bad but not enough to actually create a beautiful design the fact that we are moving in the carbon-conscious direction of less is more and basic is cool - makes me very very happy. If the Brutalist whimsy comes back repackaged as 'Good for the Earth', well, that's just brilliant news.

Returning back to Space Jam guess which of the two sites is better for the environment?

SetInterval and EmberJs

JennyJudova (they/them) — Tue, 05 Jan 2021 23:03:31 +0000

Context

I was working on rewriting a vanilla JS snake game in Ember JS. One of the basic features of the game is that the snake moves continuously even if the user is not pushing any button.

In vanilla JS the solution to this is straightforward
interval = setInterval(gameMoves, 1000)and at the end of the game you just doclearInterval(interval)`

My assumption was that Ember would not be much different, and would look like this:
this.interval =setInterval(this.gameMoves, 1000);
This did nothing.

Assuming the syntax was off somewhere (I am dyslexic so commas and brackets are my mortal enemies), I tried this:
this.interval = setInterval(this.gameMoves(), 1000);
this.gameMoves() ran once and stopped.

Problem

Digging in I discovered that when I console.log this' in this.moveOutcomes after running this.interval =setInterval(this.moveOutcomes, 1000); I don't actually get this but window`.

After an evening of googling, asking twitter, assuming that I am losing my sanity, and reminding myself that if I can write something in vanilla JS then it surely can be done in Ember. My colleague had the answer to my conundrum this needed binding.

Solution

this.interval = setInterval(this.moveOutcomes.bind(this), 1000);

Alternative solution

Someone on twitter suggested to use later which worked quite well but I felt it was a bit of an overkill.

Here is a twiddle if you are interested.

Why am I sharing this?

Because Ember is awesome, and Ember newbies should be able to google for answers.

But if googling fails Ember Discord channel is amazing.

What I learnt in my first year as a junior developer

JennyJudova (they/them) — Thu, 24 Dec 2020 12:15:52 +0000

In autumn 2019 I went through a Bootcamp, in winter I started job hunting, and in the last week of February 2020 just two weeks before the UK went into lockdown I started my first job as a front end engineer. Here is a mixture of lessons learnt and things that happened that are likely to happen to other junior devs.

1 - you will have to learn Git

Bootcamps and I am guessing CS degrees don't really cover Git.

I realised that my git knowledge is inadequate on day one after staring at a colleague asking 'Cherry what..?'

The weekend after my first week was spent in git tutorials and researching GUI.

My favourite resource was this game https://learngitbranching.js.org/

2 - you will have to unlearn and relearn

No matter how new or how long you've been in an industry, you already picked up some weird habits. Mine was using add all in Git. It took a really bad rebase to unlearn it.

3 - you will give the weirdest explanations to the question 'what do you do?'

Mine vary from 'I create buttons' to 'I am the translator between the machine and the human'.

4 - you will learn a new framework or language

No matter how many or how few languages or frameworks you know, you will definitely have to learn more.

5 - open source

Open source is something I always wanted to do. I firmly believe in giving back to the community. Also, I have no imagination when it comes to project ideas so helping communities I care about create tools they will actually use is an excellent use of my time and skill.

Open source, I found is surprisingly hard to get into. There are loads of projects, but the information about them is scattered and really hard to find.

Here I don't really have advice just a suggestion - if you can do it, do it. And if you run an open-source project and need help - get in touch.

6 - "It is a truth universally acknowledged, that a developer in possession of friends, must be in want to create a website for them."

Two of my friends approached me for 'advice' in late spring. I gave the sensible grown-up advice - use Squarespace. They came back with a counteroffer - of me having complete freedom in creating a brutalist website (my weakness) for their non for profit Climate Art pro bono. They had a strong case why they needed a developer (... I know I was suckered in ...)

7 - You will have more control of your product than you expected

I am part of a big team. Any project I work on has a product manager, a programme manager, a UX researcher, a UX designer, and even a UX writer.

I have no control of the text that is displayed on a button that I create. However, even within a large team, I am still surprised how much say and control I have in every feature I work on.

8 - less is more

In a Bootcamp, you will write a hundred lines of code in one day. At work, it's more like a hundred in a month.

9 - communication

No matter what is your chosen career or industry, communication is essential.

Engineering is no different, arguably, communication is even more critical as you have to understand what senior engineers are telling you, and to be able to explain what you are doing to non-engineers on your team.

10 - being brave enough to admit that you don't understand something

No one enjoys looking dumb or feeling dumb.

When someone is explaining something, the knee jerk reaction is to nod along. I am still learning to break that habit and to speak out when I do not understand something.

11 - ask for help

It's great to try and figure things out on your own, but at one point you have to be able to ask for help.

And that's a list that sums up my first year. Onwards and upwards let's bring on year 2.

CyberSecurity acronyms cheat sheet and dictionary

JennyJudova (they/them) — Tue, 15 Sep 2020 20:50:55 +0000

Cybersecurity loves it's acronyms to the point where an acronym can have other acronyms in it.

This might be a way of saving time if you are one of the industry's old guards but for newcomers this can be frustrating and alienating.

It's tough enough to wrap your brain around Cloud Security Posture Management
without first having to decrypt what CSPM stands for.

This is why I am sharing my cyber security acronym cheat sheet and dictionary with the world. It's work in progress so do flag up acronyms/terms I missed, if you disagree on the meaning do let me know - we are all still learning after all.

I will try to keep this in alphabetical order but I am dyslexic so it's more of a alphabetical-ish order.

A thing to flag up in many cases the only resources that explain these concepts are blog posts that belong to various cyber security companies. Often these blog posts consist of marketing or sales material if for some reason I link to some blog posts it's because I think it's good at explaining a concept not because I endorse the product. Also as disclosure I work in the industry.

The first part is the acronym cheat sheet, the second part is the dictionary of terms.

Part 1: Acronym Cheat Sheet

0day - Zero Day vulnerability
2FA - Two factor Authentication
AV - Antivirus
CVE - Common Vulnerabilities and Exposures
CVSS - Common Vulnerability Scoring System
CSPM - Cloud Security Posture Management
CSRF - Cross-site request forgery
CNA - CVE Numbering Authority
DDoS attack - Distributed denial-of-service attack
CTF - Capture the Flag
EDR - Endpoint Detection and Response
EPSS - Exploit Prediction Scoring System
EPP - Endpoint Protection Platform
FIM - File Integrity Manager
HOS - Head of Security
IOM - Indicator of Misconfiguration
IOA - Indicator of Attack
IOT - Internet of Things
InfoSec - Information Security
ItSecOps (SecOps or Dev SecOps) - IT Security Operations
IDS - Intrusion Detection System
IPS - Intrusion Prevention System
LDAP Injection - Lightweight Directory Access Protocol Injection
LFI - Local file inclusion
MFA - Multi-factor authentication
MSSP - Managed Security Service Provider
NGAV - Next-generation antivirus
SPOG - Single pane of glass aka single pane view
SSRF - Server-side request forgery
SSO - Single sign-on protocols
SNMP - Simple Network Management Protocol
SMB - Server Message Block
SOC - Security Operations Center
TCP - Transmission Control Protocol
TTP - Tactics, Techniques, and Procedures
RBAC - Rule-based Access Control
RTR - Real Time Response
RCE - Remote Code Execution
RFI - Request for information
WAPT - Web Application Penetration Testing
WoV - Window of Vulnerability
XSS - Cross-site scripting
XXE - XML external entity injection

Part 2: CyberSecurity Dictionary

Antiviruses
AV software, anti-malware
A computer program that protects your computer from various computer threats. See also NGAV.

CSPM
Cloud Security Posture Management
Concerns itself with correctly configuring public cloud IAAS (Infrastructure as a Service) and PAAS (Platform as a Service) to address cloud risk.

CVE
Common Vulnerabilities and Exposures
A reference-method for publicly known information-security vulnerabilities and exposures.

CTF
Capture the Flag
"Flags" are secrets hidden in purposefully-vulnerable programs or websites. Competitors steal flags either from other competitors (attack/defense-style CTFs) or from the organizers (jeopardy-style challenges). Several variations exist, including hiding flags in hardware devices.

CSRF
Cross-site request forgery
An attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated.

CNA
CVE Numbering Authority
Organizations that are authorized to assign CVE IDs to vulnerabilities affecting products within their distinct, agreed-upon scope, for inclusion in first-time public announcements of new vulnerabilities.
for more info

MFA
Multi factor authentication
A security method where a user is granted access only after they provide two or more pieces of evidence that they are in fact the real user. Possibly the most popular method is how banks use questions such as 'your mother's maiden name', 'your first pet's name' etc

The majority of online platforms have moved to 2FA or MFA, where after providing your name and password you receive a text/email with a number that you have to input to prove that you are you. Or using apps such as Google's Authenticator or duo.

If you ever rolled your eyes at 2FA its worth watching the leaked Iranian hacker training video and then enabling 2FA EVERYWHERE.

NGAV
Next-generation antivirus
As the word next generation suggests this AV uses more advance techniques to protect your computer more specifically it uses AI. Usually behavior AI that learns the usual behavior on an endpoint aka your machine and is able to tell when behavior differs from an established pattern or if the user engages in risky behavior.

Please do not be sceptical and just assume that NGAV is the same as the good old antivirus that some marketing department decided to glue AI to. New Gen should be able to protect you from intrusions that do not change your environment and/or do not introduce new files to your system. For example threats such as a remote login using an existing vulnerability.

Unlike their predecessors NGAVs focus on events and analyze events and actions, they should be able to identify malicious intent behavior and activity not just files.

The aim of NGAV is to stop a breach before it occurs.

Most resources on the topic are sales blogs from CrowdStrike, Cipher, and CarbonBlack.

WoV
Window of Vulnerability
The time from when a software exploit first becomes active to the time when the number of vulnerable systems shrinks to insignificance.

How to build a chrome plugin

JennyJudova (they/them) — Tue, 08 Sep 2020 22:42:56 +0000

Chrome plugins are fun and can be a useful and personalised way to start your day.

Best part is the are actually relatively simple to do.

All you need is html, css, and js.

Basic Setup

The basic setup is so basic I found myself staring at my computer saying what?

Create manifest.json file chrome's documentation is actually great and in depth if you want to learn more but for this plug in the manifest will be bare bones:

{
  "manifest_version": 2,
  "name": "Chrome plugin template Devto",
  "description": "Chrome plugin template Devto",
  "version": "1",
  "author": "Jenny Judova",
  "browser_action": {
    "default_title": "Fun with Flags"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

Print Hello World

Now let's do the thing and print 'Hello World.'

In the manifest.json chrome_url_overrides we stated that the new tab override html file is called newtab.html so lets create that file.

newtab.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

This is great but how do we check if it worked? We can't really go to localhost for this. Instead, do this:
1 - go to chrome://extensions/
2 - make sure that the developer mode toggle is on
3 - click on load unpacked button
4 - choose the folder with your project
5 - click ‘select’
6 - open new tab

BOOM!

Now let's make this extension do something like show flags and countries. Don't judge Fun with Flags I chose the flag API as it does not require a token.

How to make an API call

Let's create a file called newtab.js and link it up in newtab.html by adding

<script type="text/javascript" src="newtab.js"></script>

Just before the closing the body tag. Let's do a sanity check and in newtab.js add

function init() {

  console.log('HI')

}

window.addEventListener('DOMContentLoaded', init)

A simple .fetch should do the trick for the API call. Like so:

  function getAllFlags() {
    fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
      .then(response => response.json())
      .then(response => {
        flags = response
        chrome.storage.local.set({ data: flags });
      })
      .catch(err => console.log(err))

We have the information about flags now lets display them in the UI by adding a function to display them and some css, for this it's worth looking at the project's github.

How to use chrome.storage.local

The way the extension works at the moment is that every time you open a new tab a new api call takes place. Considering most of us open a dozen tabs every hour it might be more efficient to store the request response in chrome.storage.local and to check if it has data before running the call to the api.

To achieve this we have to use
chrome.storage.local.set and chrome.storage.local.get

Also make sure to avoid this common pitfall - check that your manifest.json has

  "permissions": [
    "storage"
  ]

To save something to local storage lets add this line to the fetch request

chrome.storage.local.set({ data: flags });

so the whole thing will look like:

fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          console.log('empty')
          flags = response
          chrome.storage.local.set({ data: flags });
        })
        .catch(err => console.log(err))

Lets add a function that will check local storage.

  function checkLocalStorage() {
    chrome.storage.local.get('data', function (result) {
      result.data == undefined ? isLocalStorageFull = false : isLocalStorageFull = true
      getAllFlags(isLocalStorageFull)
    });
  }

Let's also update the getAllFlags function to:

  function getAllFlags(isLocalStorageFull) {
    if (isLocalStorageFull) {
      chrome.storage.local.get('data', function (result) {
        flags = result.data
        displayFlags(flags)
      })
    } else {
      fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          flags = response
          chrome.storage.local.set({ data: flags });
          displayFlags(flags)
        })
        .catch(err => console.log(err))
    }
  }

Essentially this is our plug in done. Feel free to add your own css or copy paste from the finished app here.

This is what we end up with.

#Todo app tutorial in Ember Octane for those who know React

JennyJudova (they/them) — Sun, 19 Apr 2020 11:31:12 +0000

Like many Ember developers I came across it when I started working in my current job.

Ember has been around since 2011 (React was released in 2013) and is used by some well known websites like Linkedin, Apple Music and Twitch. Unlike Vue, Gatsby or React Ember, never was the sexy new toy every developer spent the weekend learning. Which I think is a shame as the framework is scalable and I find that it offers itself to collaboration far better than some other frameworks.

So to encourage others to explore Ember here is a tutorial of how to build a TODO app with CRUD functionality.

Why Am I comparing Ember and React?

React is the lingua franca of front end development. And, I find that, it’s always easier to learn a new language when it's directly compared with something you already know, even if the comparisons are not perfect.

Bellow is my take on Ember and its community but feel free to skip to the tutorial below that.

React vs Ember

React is not a fussy framework you throw everything into one component: the DOM, a few functions, an API request, and the kitchen sink. And everything works. No matter how messy you are, React will figure it out.
Ember likes tidiness. Ember likes order. In Ember everything has its place. One cannot be messy in Ember.
React is awesome for solo weekend projects, Ember is great if you are working with others.

Quirks anyone new to Ember will face:

Lack of resources

Google “How to do … in React?’ and you will get thousands of resources from official documentation, to Stack Overflow, to opinion pieces on Medium and educational ones on Dev.to. Learning React I can't recall many cases where a Google search would fail to answer my question.
Ember has fewer resources. There is the official documentation (which is amazing), a few blogs, and the Ember discord channel. This is a great list of Ember resources.

It’s hard to stay anonymous

As React is known and used by so many developers I sometimes question if it can even be called a community. Ember is used by fewer developers and almost all developers that actively use it can be found on the Ember discord forum. The main event of the year is Ember Conf, and that gathers most of Ember devs. Another thing to flag up is that most developers who use Ember on a day-to-day basis work for a few dozen companies. Because of the size and the fact that the community is so centralised its hard to stay anonymous within it.

Community made of professionals

I have yet to meet developers who took up Ember as a fun weekend thing to learn. So in most cases we all learn Ember because companies we work for use Ember. Ember is a community of professionals, which also makes it interesting because once you get past the initial intimidation, everyone within it is your current, past, or future colleague.

Tutorial

As a reminder I am a newbie to Ember teaching others so this tutorial is very much a practical how to get stuff to work here and now rather than a birds eye view of how things work in Ember. For documentation, check out https://emberjs.com/.

Getting started.

Open your terminal

1 - Run npm install -g ember-cli

The version I am using now is

ember --version
ember-cli: 3.16.0
node: 12.16.0
os: linux x64

2 - ember new todo-app
3 - cd todo-app
4 - open the app in your editor
5 - back in the terminal run ember serve or npm start This will start the app and you can view it in http://localhost:4200/

The first thing to flag up is the folder and file structure in Ember vs that of React.
The most basic app in React will have

index.html 
style.css
index.js

You can throw everything into index.js (functions, api calls etc) never touching the html and the css files and it will work.

In ember every new app will have:

App
    Components
    Controllers
    Helpers
    Models
    Routes
Styles
Templates
    Application.hbs
App.js
Index.html
Router.js

To get ‘Hello World’ printed on the screen go to application.hbs delete

{{outlet}}

and paste in

<h1>Hello World</h1>

now for our app change it back to

{{outlet}}

Everything that would find its way into one component in React will be scattered between Route, Component and Template in Ember.

Template is your html. Hbs stands for handlebar. The main thing to know is that Handlebars are logic less so no mapping or filtering within your html.

Route... the best way of thinking about it is that Route is your Component Will Mount (it's not really but for practical purposes of getting s*it done think of it that way). The data that you want to see on the screen when the page loads is fetched/axioed/requested in the Route.

Component is where you put any functions that will react to any user input, button clicks, essentially any user interactions.

Helpers is where little reusable helper functions go. For example if you are converting Fahrenheit into Celsius this is where the function that does that goes.

As for Controllers well to quote a question posed n Ember Guide ‘Should we use controllers in my application? I've heard they're going away!’

Step 1 - Creating a route

In terminal type

ember g route todo

The output in your terminal will be:

installing route
  create app/routes/todo.js
  create app/templates/todo.hbs
updating router
  add route todo
installing route-test
  create tests/unit/routes/todo-test.js

Step 2 - Displaying the todo list in console

Let's start by adding adding some existing to do's.
Go to app/routes/todo.js the template should look something like:

import Route from '@ember/routing/route';

export default class TodoRoute extends Route {
}

To add the todo dataset add the model to the route:

import Route from "@ember/routing/route";

export default class TodoRoute extends Route {
  model() {
    return [
      {
        id: 1,
        todo: "todo 1"
      },
      {
        id: 2,
        todo: "todo 2"
      },
      {
        id: 3,
        todo: "todo 3"
      }
    ];
  }
}

Now go to app/templates/todo.hbs delete whatever is in it and add:

<h1>TODO app</h1>
{{log this.model}}

In your terminal run ember serve

Open your web browser go to http://localhost:4200/todo you should see 'TODO app' on the page. Open the Inspector -> Console. In the console you should see your model array.

Step 3 - Displaying the todo list on the screen

So here I make a decision that I will build the whole app in one component. Feel free to refactor it to be in separate components. I would argue that the 'list of todos' and the ''add new todo button' should be two separate components but I will let you figure out how to refactor this.

Part 3.1

In Terminal run:
ember g component todo-app

You will see the following in your terminal

installing component
  create app/components/todo-app.hbs
  skip app/components/todo-app.js
  tip to add a class, run `ember generate component-class todo-app`
installing component-test

Go ahead and follow the 'tip' and run the command ember generate component-class todo-app.

Now if you go to app/components you will find todo-app.hbs and todo-app.js.

Todo-app.hbs is your html, and todo-app.js is your logic and action handling part.

Let's go to todo-app.hbs delete whatever is there and add

<p>sanity check</p>

If you now go to http://localhost:4200/todo or http://localhost:4200/ you will not see sanity check on the screen.

To get todo-app.hbs displaying on the screen go to todo.hbs and add to the file so that you have

<h1>TODO app</h1>
<TodoApp />
{{log this.model}}

Now go to http://localhost:4200/todo - viola! Sanity check is displaying.

Part 3.2

So if you go to todo.hbs and take out

{{log this.model}}

and go to todo-app.hbs and add it there

<p>sanity check</p>
{{log this.model}}

You will now get undefined in your console rather than the model.

So let's pass the model from todo to the component todo-app by changing

<TodoApp />

<TodoApp @model={{this.model}}/>

Despite this change you will still get undefined because this.model was passed as @model to the component.

So lets change

{{log this.model}}

{{log @model}}

Viola! You are back to square 0 with the model showing in console. Now let's actually display it.

Part 3.3

In React the most basic solution to displaying 3 todos would just be:

<ul>
    <li>{this.state.model[0].todo}</li>
    <li>{this.state.model[1].todo}</li>
    <li>{this.state.model[2].todo}</li>
</ul>

You can try writing something along these lines in todo-app.hbs but this will not work. So another option of displaying this in React is by using .map.

So something like this:

<ul>
  {this.state.model.map(todo => {
    return <li key={todo.id}>{todo.todo}</li>;
  })}
</ul>

Templates are logic less and this means that the javascript .map will not work however templates have helpers that can bring some logic to the template.

We will be doing something similar to .map by using a helper 'each'.

So let's go to todo-app.hbs and add:

<ul>
  {{#each @model as |item|}}
  <li>{{item.todo}}</li>
  {{/each}}
</ul>

Nice! The todo list is displaying.

Step 4 - Adding actions

Now lets add a textfield and a button so that you can add new todos to the list.

On the html side the tags will be identical to the ones you would have used in a React component. So lets add this to todo-app.hbs:

<ul>
  {{#each @model as |item|}}
  <li>{{item.todo}}</li>
  {{/each}}
</ul>
<form>
  <input placeholder='Add todo' type='text' />
  <button type='submit'>Add</button>
</form>

This will display an input field and a button but of course this will not do anything, so it's finally time to look at todo-app.js. But before we do this let's see how this would have looked in React.

React view

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      model: [
        {
          id: 1,
          todo: "todo 1"
        },
        {
          id: 2,
          todo: "todo 2"
        },
        {
          id: 3,
          todo: "todo 3"
        }
      ],
      text: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const i = this.state.model[this.state.model.length - 1].id + 1;
    let newTodo = {
      todo: this.state.text,
      id: i
    };
    this.setState(prevState => ({
      model: prevState.model.concat(newTodo),
      text: ""
    }));
  }

  handleChange(e) {
    this.setState({
      text: e.target.value
    });
  }

  render() {
    return (
      <div>
        <h1>TODO LIST</h1>
        <ul>
          {this.state.model.map(todo => {
            return <li key={todo.id}>{todo.todo}</li>;
          })}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));

Back to Ember

Now lets write handleChange and handleSubmit in Ember.

The React

  handleChange(e) {
    this.setState({
      text: e.target.value
    });
  }

barely changes as it becomes:

  @tracked
  text = "";

  @action
  onChange(e) {
    this.text = e.target.value;
  }

@tracked is your state but it's best you read about @tracker and @action in the Ember guide.

And handleSubmit goes from:

  handleSubmit(e) {
    e.preventDefault();
    const i = this.state.model[this.state.model.length - 1].id + 1;
    let newTodo = {
      todo: this.state.text,
      id: i
    };
    this.setState(prevState => ({
      model: prevState.model.concat(newTodo),
      text: ""
    }));
  }

to:

  @action
  submit(model, e) {
    e.preventDefault();
    const i = model[model.length - 1].id + 1;
    const newTodo = {
      id: i,
      todo: this.text
    };
    model.pushObject(newTodo);
  }

So todo-app.js ends up looking like this:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class TodoAppComponent extends Component {
  @tracked
  text = "";

  @action
  submit(model, event) {
    event.preventDefault();
    const i = model[model.length - 1].id + 1;
    const newTodo = {
      id: i,
      todo: this.text
    };
    model.pushObject(newTodo);
    console.log("add", model);
  }

  @action
  onChange(e) {
    this.text = e.target.value;
  }
}

Step 5 connecting .js with .hbs

React render looks like this:

        <form onSubmit={this.handleSubmit}>
          <input value={this.state.text} onChange={e => 
            this.handleChange(e)} />
          <button>Add</button>
        </form>

in Ember your todo-app.hbs should look like this:

<form onsubmit={{fn this.submit @model}}>
  <input placeholder='Add todo' type='text' value={{this.text.todo}} 
    onchange={{fn this.onChange}} />
  <button type='submit'>Add</button>
</form>

So the full todo-app.hbs looks like this:

<ul>
  {{#each @model as |item|}}
  <li>{{item.todo}}</li>
  {{/each}}
</ul>
<form onsubmit={{fn this.submit @model}}>
  <input placeholder='Add todo' type='text' value={{this.text.todo}} onchange={{fn this.onChange}} />
  <button type='submit'>Add</button>
</form>

Step 6 adding the Delete function

I have to admit delete will not look pretty in React or Ember because we are dealing with an array of objects. If it was an array of strings life would have been easier.

In React it looks like this:

  removeItem(id) {
    let model = this.state.model;
    const index = model
    .map((file, index) => {
      if (file.id === id) {
        return index;
      } else return undefined
    })
    .filter(id => id !== undefined);
    model.splice(index, 1);
    this.setState([...model]);
  }

To a degree Ember follows the same general idea. You figure out the index, then you splice the array.

There is a but. The HTML side will not re-render if you delete a 'todo’ from the array (I'm new to Ember, so send better solutions). So the work around that I have is: replace the item about to be deleted with an empty object and on the template add 'if empty don’t show’.

todo-app.js

  @action
  delete(model, item) {
    const index = model
      .map((file, index) => {
        if (file.id === item.id) {
          set(item, "id", null);
          set(item, "todo", null);
          return index;
        }
      })
      .filter(id => id !== undefined);
    model.splice(index[0], 1);
  }

and todo-hbs.js

<ul>
  {{#each @model as |item|}}
  {{#if item.id}}
  <li>{{item.todo}}</li>
  <button onclick={{fn this.delete @model item}} type='button'>delete</button>
  {{/if}}
  {{/each}}
</ul>

Again I am new to Ember so any prettier ways of achieving this without using Ember data are welcome.

And with that Viola! The Todo App is done. It is missing editing individual Todo's but I will let you figure that out if you can't here is a the github repo.

And the React to do using a constructor is here the hooks version is here.

How to find a job as a Bootcamp grad

JennyJudova (they/them) — Thu, 12 Mar 2020 22:33:33 +0000

It took me 35 workdays (the actual job hunting period was between 02/12/19 to 17/01/20) to go from starting job hunting to getting an offer and putting a stop to job hunting.

So what is the advice I can give for job hunting? Well, I wish I could say 'Be badass and don't compromise.' But that does not feel genuine enough or actionable.

So my advice is: be humble and know what you want. And if this is too unactionable as advice then skip to 'Actual actionable advice'.

Be Humble

I am good at what I do. I am an excellent junior developer. I am also painfully aware that I am a junior developer and what I know is limited. In most cases what I do is not by choice but because that is how I know to do things rather than choosing the best way of doing. When I have to do things that I already know I work quickly. However, if I encounter something new it's a different story. It took me 30 minutes of googling to find out the correct term for when you need a variable to change within a variable name. Thankfully Google's algorithm figured out I was after 'Dynamic Variables', it took another 30 minutes to learn and implement 'eval'. So yes you are great and talented but an hour to figure out how to write a variable is a humbling experience.

Know what you want

From the get-go, I knew what industries I was interested in: Fintech, Cyber Security, and compliance tech. There was another caveat I needed for the company to be tech first.

By tech first I mean that technology had to be the main product they focus on. This realisation came after a conversation with an internal recruiter from one of the UK banks. They were incredibly candid in saying 'technology is important to us, but it's not the product that we sell.' This put traditional banks and financial service firms out of the running.

Narrowing my focus meant that I was not trying to chase down EVERYONE. And at events like the GA Meet and Greet I had people from those industries making their way to me because I was likely to be interested in what their company did.

Actual actionable advice

The basics

Have an up to date CV. If you are a recent (bootcamp) grad consider bumping up your bootcamp experience from 'Education' to 'Work experience' but make sure to say that you were a student. Feel free to check out my CV as an example. `its not perfect but it did land me interviews and a job.
Up to date Linkedin and any social media profiles that you use professionally. This now should include Github and Stackoverflow.
Good Readmes on your Github, especially for take home coding challenges. I have to admit my github was a lovely place while I was job hunting. After I started my job my github turned into a graveyard of semi-completed projects.
Personal website. I built mine in Gatsby, its perfect for one pagers and just look how mobile friendly it is!

What worked?

Junior roles are rarely advertised so it's worth getting pro active when it comes to reaching out to employers. Here are some things that I and my peers did:

Attend in person events (once COVID-19 is over that is). Meet up, and Eventbrite are awesome to do research. Don't focus just on recturetment meet ups but go to those focused on a framework or interest. The two events I am happy to recommend are Geek Girl Meetup UK and Silicon Milkroundabout.
Research companies that have previously hired bootcamp grads.
Engage with the online dev community. Write about your experience, participate in conversations online.I did a daily standup on linkedin while job hunting. Partially to keep myself accountable ad partially to flag myself up to potential employers

What did not work?

Cold email
Although I am comfortable with cold emailing none of the cold emails and LinkedIn messages I sent paid off in any big way for me I do have friends who were very successful in cold emailing.
Recruiters.
Definitely register on recruitment platforms, but when it comes to recruiters reaching out to me on Linkedin it felt more of a diversion.

A tip on reaching out

Most Bootcamp grads I know want to help other Bootcamp grads. Yes, the alumni network is real even if you come from different Bootcamps it's a network similar to good schools or universities when alumni work to help each other not compete. If you see a Bootcamp grad working at a company you like - reach out and find out their experience.

Moreover, companies that already hire Bootcamp grads are likelier to hire more and will have an interview process that is grad friendly.

Structure of the interview processes

Most companies will have a variation of the following
1 - culture fit check (this is also a chance for you to check them out)
2 - technical interview
3 - code test // pair programming // take-home challenge
4 - demo of the code test
5 - meet the founders and/or meet the team
Not all companies will have all of these steps and in some cases, they will be bundled up.

Technical interview

This is where I felt at a disadvantage as a Bootcamp grad. I spent 3 months doing and coding not learning theory, so my knowledge of theory was a bit non-existent. My favourite example of it is closure, I use them all the time but struggle to give a definition.
Bootcamps are like learning a foreign language lets say French by moving to France, in 3 months you will have a good speaking fluency but if someone asks you 'What is the passé composé?' you have no idea what they mean.

I found that the way a company runs a technical interview is a good indicator of how they work with junior devs and Bootcamp grads. Quite a few companies don't even bother having a technical interview for a junior and instead focus on the coding challenge.

A company that is used to hiring Bootcamp grads will often rephrase the questions from 'explain this / what is this' to 'have you ever encountered this problem? What did you do to solve it?' This means that rather than sweating to remember the dictionary definition you get to talk about your coding experience.

You do have to prepare for technical interviews. How you do it is up to you. I found listening to tech podcasts in the background useful as I started picking up the terminology without realising it.

Hardest part

Getting your foot through the door

Junior developer jobs are rarely advertised. Which means to get an interview you don't apply to jobs but proactively reach out to companies at events and via cold email.

Make yourself accountable

It can be hard to stay motivated when job hunting. Let's face it you took a plunge and spent the last 3 months in an intense Bootcamp regime and now you can sleep until midday, you can go to bed at 6 pm or 6 am. You can binge on everything you wanted to binge. In other words, you can do whatever you want. and it's very easy to keep thinking 'I'll do it tomorrow' I can skip today and just send 10 applications tomorrow instead of 5. It's easy to be lazy.

My way of keeping myself accountable was doing a daily stand up on social media. Every morning I would write what I did and what I was planning to do on Twitter and Linkedin. Also, this provided me with a list of things I've done over the week which kept me from spiralling into self-blame of 'you are not doing enough'.

Don't just job hunt

Job hunting is important but don't forget about your coding skills. After I finished I started brushing up on the skills that the industry demands.

I set up my react boiler template to have Airbnb linter (an industry standard) and plugged in some other VS code tools
I learnt Hooks. Because Hooks came out only a year ago GA is not teaching them. Arguably I think it's a great decision as the state is harder to learn than hooks.
I learnt Gatsby.js - gatsby is great for portfolio building also its the hot new toy so when I mentioned it in interviews people knew that I was somewhat plugged into the industry.
I started learning Ember.js
I started a Dan Abramov course Just Javascript

A lot of my Bootcamp peers also did things like 100 days of JS and 30 days of JS.

Conclusion

In conclusion, job hunting sucks. But job hunting as a junior developer sucks a bit less than job hunting as an art historian. And it's definitely faster to find a job as a junior developer than as an art history grad.

And in case you need motivation

Let's face it when job hunting there are good days and then there are days when it's easy to spiral into a dark grim place. So when that happens and you stop believing that bootcamp grads ever get hired this is the breakdown of my class (based on the last time I saw them in late Feb).

Also as a caveat although we finished in early December most of my class started job hunting only after the winter break in mid January.

So out of 24 people (22 students + 2 teaching assistants)
16 where job hunting, 11 are now employed, the 5 who are still looking have plenty of interviews lined up.
Out of the 11 employed most are on a salary between 30 and 35k, 2 are on a salary higher than 35k.

To finish off it's not all doom and gloom keep going. Job hunting feels like a never ending thing until it's done.

How I became a developer in 95 days or my journey into code

JennyJudova (they/them) — Mon, 24 Feb 2020 23:35:23 +0000

When does a journey begin? The moment you have an idea to do it? The moment you commit and buy tickets? Or with the first step, you take out of your house?

In 2019 I started learning to code although it was an easy decision for me there were a few failed starts. I did not start with development but with Data Science. I did not check what os was needed for the online course - turns out the course was done for Windows, so installing everything on a Mac lead me to do a bit of Java and a lot of tinkering. Data Science did not stick but that did lead me to learn Python. And then to come across free code camp and discover JavaScript. Of course, as 30% of the internet is WordPress and WordPress is PHP I also tinkered with PHP.

My first GitHub commit happened on the 2nd of April 2019. Sometime in May-June, I realised that I am more excited about coding at home than my day job which I loved. So I started looking at BootCamps and if I could afford them.

I applied for GA got in and handed in my 2 months notice. This lead to 40 days of waiting and working on the GA pre-course homework. Then on the 2nd of September came the course. The course lasted 60 workdays and it took me 35 days (35 days that I was actually job hunting) to receive a job offer.

It took me 95 days to go from knowing some Python, JavaScript, CSS, HTML and PHP to be able to create a full-stack application to getting hired as an engineer.

Why a Bootcamp?

I found it incredibly hard to carve out time to learn while working full-time. I needed to immerse myself into code an on-campus full-time course seemed like the best option. I choose to do it in person in class rather than online because education is never just about learning but also about the network and the peer group that educational facilities provide. For what it's worth being able to plug into a
developer network from the get-go made my journey less lonely.

The stack we learnt was impressive: JavaScript, React, Python, Django, CSS, Sass, HTML, SQL, NoSQL, PostgreSQL, MongoDB.

And the people I met, well my cohort bonded :)

How much did it cost?

The course together with 5 months of being unemployed cost me £12k. I will add two caveats here I am not including my flat and bills into this sum. The second is that I pretty much lived as I always did. I did not live as frugally as I could have, to give an example when I needed to splurge on 120-pound trail running shoes I did.

What was the schedule like?

I am militant when I study. I was this way in school, at university and Bootcamp. I took the idea of the Bootcamp a bit too far.

I would come to GA between 8:30–9 am, I would do my life admin stuff until 9:30 am. Then we had a stand-up and then classes until 4–5 pm. Then I would either do homework with my class and stay until 7–9 pm or head home eat and do homework in solitude. On weekends it was more homework.

Before I started the course I promised to myself that I will make time to go to the gym at least 2 times a week and run 5k at least 2 times a week. I did find myself at the gym in some ridiculous hours like 10 pm. But I only had 1 or 2 weeks where I missed either a gym day or a running day.

Friday was the only exception to most rules. We would go for a group lunch and after the class finished at 4 pm we would go to a pub. As weeks went by and we got more comfortable with each other our pub stays went from 'just one drink' to 'last orders'.

Did the Bootcamp help with job hunting?

GA is very careful to promise only things that they can actually do and deliver on. I found the outcomes team incredibly supportive and useful. They by no means did the job hunt for me, but job-hunting would have been a lot harder without them. The most important guidance they offered was around putting together my CV (something I am bad at), creating opportunities to meet previous graduates, and organising Meet and Greet.

Meet and Greet

The truth is most Junior developer roles are not advertised. So your options are either to cold email people or to find opportunities where you can meet them in person. Meet and Greets are career/talent fairs organised my GA. When I had mine I got 5 interviews, and one company waivered the interview process and jumped straight to the coding challenge.
Another career fair worth looking into is Silicon Milkroundabout.

Was it scary changing careers?

For me, the idea of not doing it was scarier. That said it was an adjustment.

I had to get comfortable with learning again, with not knowing and with being out of my comfort zone. Getting over the fright of making an idiot out of myself by asking something dumb. And reminding myself that there is no such thing as a stupid question.

I have to admit I enjoyed going back to school for a short time because for the first time in years I did not have to think about or worry what comes next my biggest worry was what to do for my final project.
It was also great to discover new things about myself my likes and dislikes and explore my interests in industries such as finance, cybersecurity and compliance.

Would I recommend it?

YES. But ask anyone of any profession if they would recommend others to join their profession and the answer is usually 'yes'.

My one advice is - do some coding before you hand in your notice and decide to become a developer. A career as a developer is sometimes positioned as a 'silver bullet', a quick way to improve your life and gain access to the well-paid tech sector jobs. I am definitely one of the people who are happy to spread the word about the 'good news of being a developer'.

But if you don't enjoy coding you will not become a developer.

Do some coding to figure out if you enjoy it or not.

Coding is not that hard to pick up, you don't need to be a math wiz or the smartest kid in class. It also does not take that long to pick it up, but the learning curve at the beginning is very very steep. Make sure that you enjoy coding because if you do not you will find it impossible to learn. Spending 12 hour days unemployed and learning to code when you hate coding is an impossible task. And if you enjoy coding well these 12 hour days will be some of the happiest in your life.