DEV Community: Rita Correia

How I Landed My First Tech Role: A Practical Guide

Rita Correia — Wed, 17 Feb 2021 15:09:38 +0000

As per my last post, I have recently landed my first role in tech (!) and since then I’ve had a few people asking me for tips and advice on how to make that happen too. So I thought of writing a blogpost to share my learnings, hoping it helps you in your job search.

1. Find your stack

Although this is not directly tied to getting a role, it’s important to understand where your strengths lie before thinking about applying for jobs. In my case, I always knew I leaned more towards frontend engineering rather than backend.
I carefully picked the tech stack I was going to specialise in and invested all my time learning certain languages and frameworks. Certainly there are people who disagree with me, but when you know exactly what you want for your career, it’s easier to set a clear, strategic path. Ultimately, do what feels right for you.

2. The job search

LinkedIn is my preferred job search tool. For the past 11 years all my jobs have come through LinkedIn, whether it’s directly applying to companies or getting leads from recruiters.
You can set up job alerts based on your desired location and specific keywords, and get daily or weekly email alerts so you can apply straight away. Bear in mind this might not apply to other countries, where the use of LinkedIn isn’t common practice. In that case, try to find what’s the number one job board for the tech industry where you live.

It’s also handy to keep a spreadsheet with the status of your job applications. Notion have a really good Job Applications template, if you’re looking into getting more organised.

3. GitHub and personal portfolio

You’ve likely been building your own projects to put into practice your coding skills. Make sure to have your code on GitHub on public repositories. Your prospective employer can take a look at your code, what languages and frameworks you use and see how well structured your code is.

When applying to jobs, it’s very important to have your own personal portfolio on top of your GitHub repos. See it as your own shopfront, showcasing the skills you have with a splash of your own personality. Choose a design style that reflects your character stands out. Ultimately, as well as featuring a collection of your best projects, your personal portfolio should be a reflection of you as an individual. This ties with my next point…

4. Tell your story

 As well as technical skills, a company looks for culture fit. You’re a unique human being with an incredible life story. At the end of the day, we work with and for other people with personal interests and quirky facts. It’s what makes us us. People buy into people, so make sure to craft your personal pitch. Sell it. Think of what makes you unique and how can that help your prospective company.
My pal Anna recently put out this great video on how to craft your story:

5. Leverage your past work experience 

This might not apply to everyone, but if you’ve held other jobs or come from a totally different industry and have a few years of experience under your belt, it’s smart to leverage the skills you’ve harnessed along the way.
We’re multidisciplinary beings and there are a lot of transferrable skills. Have you led meetings? Do you have great people skills? Highlight your achievements to make you stand out.

6. Interviewing as a software engineer 

The interviewing process for a software engineering role is regarded as extremely difficult and it takes practice. The process can range from a take-home project with a designated tech stack, timed or non-timed kata-style challenges and technical interviews. I personally like the take-home project better because you can show off your skills and creativity without the pressure of a timed challenge. 
It’s likely that you’ll have a few interviews before landing your role. Learn from each one of them. See them as an opportunity to improve for the next one.
Interviewing is definitely a skill that takes practice, and it can become emotionally overwhelming. Be kind to yourself, and remember that that "Yes" will come soon - it's only a matter of time.

Good luck on your job search! I got my fingers crossed for you 🤞

If you're interested in reading a more personal post sharing my journey, you can find it here:

Changing Careers Into Tech: Why Perseverance and Mindset Matter

Rita Correia ・ Feb 12 '21

#career #beginners #womenintech #devjournal

Changing Careers Into Tech: Why Perseverance and Mindset Matter

Rita Correia — Fri, 12 Feb 2021 16:39:36 +0000

2020 was the year of change for all of us. We had to adapt to a new reality, where draconian words like “lockdown” and “pandemic” became the new normal. It was also the year I decided to turned my life around and change careers…  

What in Summer 2020 seemed to be a huge mountain to climb, it became a reality in early February 2021 and I still have to pinch myself that I actually pulled this off, and landed my first role and a Frontend Engineer! 🎉

It's true what they say, it ain't easy

I must say that changing careers in your early 30’s with a young child in tow sure is challenging, although having a lot of self-discipline and focus definitely helped keeping me in the right track.

If you’re on the same path and pursuing a career in tech, please don’t give up! Stepping out of our comfort zone and trying something new requires a level of mental strength that we might not be used to anymore, especially as adults.
The uncertainty and self-doubt can be hard to manage at times, and in these moments a new mindset must come into play: the growth mindset.

My mindset had to change

Whether I liked or not, I grew up both being moulded by or fighting against what the people around me thought would be the best for me. Good intentions, of course. But it was always implicit that because I wasn’t getting straight As in Maths, pursuing studies or a career in STEM wouldn’t be the best option for me. Unfortunately, lots of girls and young women go through these exact same feelings of inadequacy, having invisible barriers put up in front of them.
I developed my personality under the assumption I wasn’t good enough or smart enough, and with that came a fixed mindset that lasted throughout my early adulthood. Although I always considered myself hardworking and goal-driven, this mindset eventually led me to follow the path of least resistance. I always tended to dedicate time to things I was comfortable with, where it was easy to see what was on the other side of the tunnel.

Software engineering wasn’t even an option for me while growing up in countryside Portugal, especially as a young female. For some time I wanted to be a journalist while my family tried hard to convince me I should study Law. I wasn't having it. I enjoyed being creative and ended up studying New Communication Technologies in University, which thankfully gave me a good mix of user-centric design, coding and computer science fundamentals. I learnt HTML, CSS, ActionScript
(you know Flash was all the rage in 2005) and some PHP (which I now remember absolutely nothing about), with some 3D modeling and video in the mix.

Perseverance is your most powerful weapon when it comes to learning new skills.

I did finish my Bachelor's Degree but I didn’t even consider pursuing a technical role because again I didn’t think I was smart enough, good enough or that i could possibly succeed in the tech world. My Uni experience definitely felt like a "boys club", where the men were into programming and I once again leaned towards the creative aspects of my degree, finding comfort hanging out with other like-minded females, who highly likely felt a bit lost like me.

A career path doesn't have to be linear

Being professionally stagnated to a point of having no real sense of direction was consuming me. With age and increasing dissatisfaction in regards to my choice of career, I eventually stopped caring about what people expected of me.
I stopped believing in the notion that you are born with only one talent, and that you are expected to stay in what will likely be a fifty-year work-life.

No.

We are multidisciplinary beings with a plethora of interests and capabilities and we can find ways to channel them, if we're audacious enough to step outside our own box.

Being a mother, I also wanted to set a good example for my daughter, hoping to become someone she can look up to as she grows.

Persevere and believe in yourself

You can be anything you want to be, if you work hard enough and keep persevering.

Our talents can be developed through hard work, good strategies and discipline. People with a growth mindset tend to achieve more than those who believe their talents are innate gifts, and because of this they will put more energy into learning.

For the first time, I stuck with something I was inherently both fascinated and scared by.

Countless times I considered giving up and taking a U-turn, but I am glad I persevered and kept at it. If changing careers into tech is something you're currently attempting, DO NOT GIVE UP!
Sharing goals with close family and friends will help massively as they will likely be rooting for you, while making you accountable.

It was also extremely important having some badass role models and an incredible sense of support from the Twitter community, where I could share my journey with other folks like me.
There are great initiatives to help you stick to your goals such as #100DaysOfCode, #Javascript30, #7Days7Projects or even #30Days30Projects.

I have also shared some tips and advice based on my experience in landing my first tech role on this article below:

How I Landed My First Tech Role: A Practical Guide

Rita Correia ・ Feb 17 '21

#beginners #career #devjournal #womenintech

5 CSS Tricks I Used This Week

Rita Correia — Thu, 04 Feb 2021 19:15:25 +0000

Mastering CSS has a lot to do with understanding its capabilities and getting familiar with the range of properties available.
While working on a couple of projects this past week, I looked up a few and did a little round-up of 5 helpful CSS tricks I used this week:

Selecting specific children

This is an interesting trick, that can be adapted depending on how many or which exact elements you want to target.

Imagine you have a list of items and you only want to select all but the first 3 children. You would use Example 1, with n + 4, which means it will only start at the 4th item.

To select a specific item, you can simply target the specific nth-child. So if you want to select the 2nd list item, you'd use Example 2.

If you want to select all but the first, you can simply use Example 3, with the :not(:first-child) selector.

Touch-action property  

The touch-action property is super helpful when developing for mobile devices as it gives you control over the effect of touchscreen interactions with an element. This can be compared to the pointer-events property used to control mouse interactions.  There's quite a few values that you can use. You can read more about them on MDN.

auto: Allows the browser to handle all pan and zoom interactions.

manipulation: Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of pan-x pan-y pinch-zoom.

Accessibility when using Emojis

It’s incredible how emojis are now so engrained in our digital communication. However, when content is accessed via a screen reader, some systems may not notice this content is there.  

The best practice in this case is to wrap the emoji in a <span>, giving it the role="img", and providing a useful description in aria-label. The screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.

Thankfully, most modern screen readers will read the emoji's default description, although these are not consistent across systems. To safeguard consistency, it's wiser to provide this in the aria-label. This is important when wanting to convey emotional value, for example.

How to disable horizontal scroll on mobile

An oldie, but goodie. You know that pesky little horizontal scroll that keeps on showing when you're developing your responsive website? Ugh!
Let's get rid of it, shall we? BYE FELICIA.

Wrapping text around shapes with shape-outside

The shape-outside property controls how the content wraps around a floated element’s bounding-box, meaning we can reflow text over a shape such as a circle, ellipse or a polygon.

The caveat is that this property only works on floated elements for the time being, as per the CodePen example below. This will likely get updated in the near future.

Web Accessibility: Improvements on the White House Website

Rita Correia — Thu, 21 Jan 2021 19:00:12 +0000

It’s a new day for the United States of America! On Day 1 of the new presidency, an updated White House website was released with a lot of thought put into Web Accessibility. It’s clear that they want to ensure functionality and all content is fully accessible to all its users, regardless of their hearing, movement, sight, and cognitive abilities, as well as cultural heritage. 

Designing in a more inclusive way should be at the forefront of priorities in the world of UX and product design. Ensuring accessibility guarantees that your content is seen by EVERYONE, and brings a sense of humanness to tech. 
Thinking of all your users and their needs when shipping a product or website creates an impactful experience that is meaningful in ways that the majority of us (thankfully) won’t realise.  

Let’s go through these new accessibility improvements.
 

Contrast theme switcher

A snazzy new light / dark mode theme switcher was added, giving the users the choice of opting between a light or a dark theme.
It is known that bright, white backgrounds on a screen increases eye strain, especially during lengthy periods of time. “Long-term reading in light mode,” according to this Nielsen Norman comparison of dark mode and light mode, “may be associated with myopia.”

Larger font size toggle

Some people need larger text in order to be able to read and perceive letter shapes. Increasing font size is a common way to tackle this, ensuring there is no loss of content or functionality. 
It’s important to give users an option though, as some people with tunnel vision and the majority of users with generally good visual acuity may prefer smaller letters in order to be able to see more words at a time.  

Mobile version

The mobile version also shows some thought as the menu is easily accessible by being positioned in the bottom right corner.
It’s regarded that 90% of people are right-handed, with the remaining 10% being either left-handed or ambidextrous. This provides easier access to the menu, as you can easily reach it with your stronger thumb.

Spanish version

 The US is home to 41m native Spanish speakers, according to census data - which results in 13% of its population. There are nearly 12 million bilingual Spanish speakers, making the US the second largest Spanish-speaking country in the world.  
Back in 2017, Spanish was removed as a language translation on the White House website. There was a disclaimer stating the feature would be back soon, although that ended up being 4-year long wait! A Spanish version is now available, promoting inclusivity regardless of cultural background.

Accessibility Statement and eagerness to improve

A new accessibility statement was added stating that there is real commitment to make the White House website as accessible as possible to all Americans. “Our ongoing accessibility effort works towards conforming to the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria.”, they state. 

What also stands out is the eagerness to improve. Having an open channel of communication with your actual users asking for feedback on accessibility shows a commitment to them. Quite a few options are offered as well, including for hearing impairment scenarios, which is great to see.

There are probably more accessibility features worth pointing out, though these are the ones I could identify at a glance.

Do mention in the comments if you manage to find more, especially for visually impaired users. 

 Disclaimer: By all means, this is not a political post. Only a case study on Whitehouse.gov’s new Web Accessibility stance. 

Understanding Rendering in Next.js

Rita Correia — Tue, 19 Jan 2021 22:32:49 +0000

Next.js is a React framework for developing single page Javascript applications. There are quite a lot of benefits when it comes to choosing this framework, one of the highlights being how incredibly performant Next.js is. This is due to its Server Side Rendering (SSR).

Understanding pre-rendering in Next.js

React uses client-side rendering by default, and the user is required to have JavaScript enabled on their browser.

With Next.js, HTML is generated for each page in advance, instead of having it all done by client-side JavaScript. I must admit I initially found this odd not seeing any HTML files in my codebase!

This results in better performance and a more indexable and crawlable website, essential for Search Engine Optimisation (SEO).  It pre-renders the application into static HTML, allowing the user to see the UI without having to run JavaScript.

It also only loads the Javascript and CSS files that are needed for that specific page, which is called automatic code splitting. This gives the users a much faster experience with a nearly instant page load. Because there is less for the user’s browser to download, it increases performance.

As soon as a page is loaded by the browser, the JavaScript will run on the client-side to give it full interactivity. This process is called hydration.

Two forms of pre-rendering

In fact, Next.js gives us two methods of pre-rendering:
Static Generation and Server-side Rendering. The difference lies in when the HTML is generated for a page.

With Static Generation the HTML is generated at build time. As it's been pre-rendered, the HTML is then reused on each request.

We also have the option of Server-side Rendering is the pre-rendering method that generates the HTML on each request.

This choice can be done on a per-page basis, meaning you can create a hydrid Next.js project by choosing which pages will use Static Generation and which ones will use Server-side rendering.

Although we have that option, Static Generation is the recommended method by Vercel since your page can be built once and served by CDN, resulting in a much faster experience. This would be the best option for when you have static content, as you won't have to wait for the server to render the page on every request.

React 101: A Quick Intro

Rita Correia — Sat, 16 Jan 2021 20:18:21 +0000

If you're curious about what makes React the most popular JavaScript framework, or feel hesitant about learning React, this article is for you. We'll go through React fundamentals in simple terms covering the following topics:

React in a Nutshell 
Key Concepts of React
create-react-app
React Components
React Props
React State

In this article, it's assumed you know the basics and concepts of JavaScript.

React in a nutshell 

React (also known as React.js or ReactJS) is a JavaScript framework created by Jordan Walke and maintained by a small team part of Facebook, led by Dan Abramov in London.  React is open source and you can contribute to their GitHub repository.

It's used for building user interfaces specifically for single-page applications, that are fast to load and faster to build. React is a component-based framework with the core principle of reusing UI components.

Instead of creating DOM elements, we create React elements. react-dom will handle the events and turn them into DOM elements. This is done through React components.
React isolates the components, and re-renders that specific component which makes an app/website incredibly faster to render.

The 3 key concepts of React are:

Passing data (unidirectional data flow)
Returning data
Return JSX

Unidirectional Data Flow

In React, data can only flow in one direction. As the underlying data changes, the view will update, but in order for the view layer to affect the data, an action must be triggered. There is no automatic updating. This helps to reduce overhead and makes managing data simpler.

A component can manage its own data (known as state), or can have data passed to it from another component (known as props). When either state or props changes, React will re-render the component which in turn updates the view.

Virtual DOM

React employs a virtual DOM, meaning it has a copy of the DOM in memory at all times. When the view needs to be updated, React will update this virtual DOM first. This is easy to do, because it is already in memory.

Once the Virtual DOM has been updated, React checks to see what the differences are between the Virtual DOM and the actual DOM. React can then just update the DOM nodes that have changed.
This approach is unique to React and is what made it so much quicker at rendering than its rivals.

JSX

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. 

What does “syntax extension” mean?
In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it!
If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.
 
Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesn’t add numbers - it reads them as text, just like HTML.
You need a way to write code that says, “Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX.”
You can do this by wrapping your code in curly braces: { your code goes here }

In JSX, you need to add slashes to all of the self-closing tags, ie: <Header /> <Home />

Event Listeners in JSX

JSX elements can have event listeners, just like HTML elements. Programming in React means constantly working with event listeners.
You create an event listener by giving a JSX element a special attribute. Here’s an example:

<img onClick={myFunc} />

An event listener attribute’s name should be something like onClick or onMouseOver: the word 'on', plus the type of event that you’re listening for. You can see a list of valid event names here.
An event listener attribute’s value should be a function. The above example would only work if myFunc were a valid function that had been defined elsewhere, like so:

function myFunc() {
  alert('Good morning!');
}

<img onClick={myFunc} />

Note that in HTML, event listener names are written in all lowercase, such as click or mousemove. In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.
  

create-react-app

create-react-app is a NPM package that installs all necessary packages to create a React application.
Using create-react-app sets up your environment with all we need.

It comes bundled with a few features including:
ESlint: to polish your code as you write it
Jest: a testing library, for testing your code

Because its’ an npm package, it’s executed only in the terminal, as such:

npx create-react-app your-react-app

It also accepts flags to tailor the template to your needs, ie npx create-react-app --typescript. This will create you a TypeScript project.

npx is the same as npm, but it installs the latest version of npm.

You must import React from ‘react’ in each component file.
At the end, you export each new component you created:

function Hello () {
 return <h1>Hello {username}!</h1>;
}

export default Hello;

Or you can instantly export it when creating the function such as:

export default function Hello () {
 return <h1>Hello {username}!</h1>;
}

Then you import the created component to the file you want to use it in.

package.json comes with create-react-app and it defines dependencies. Dependencies are all the packages that need to be installed for it to run. For debugging, we have “scripts”, and you can add lint:fix for example.  package-lock.json defines more packages.
They both get installed when you run npm install.

The public folder  holds your HTML file. It takes the usual HTML boilerplate and <div id=“root”></div>.
We build our app, eg: app.js file, in the src folder.

React components 

As mentioned earlier, React is a component-based framework, which means components are created with the purpose of being reused throughout the UI.
You can use several functions to create different reusable components. You basically pass in functions between files, so we can pass values onto different files.

Components are like JavaScript functions, with a different way of executing them. Components can be created with function declarations or arrow functions.

Components must be exported: export default ‘ComponentName’  

Then, we import the component to the file where we want to use it: import ComponentName from “./components/ComponentName”

A component lives on a separate file. The module is the file that holds one of more components.

A component returns a piece of JSX.   JSX, as explained earlier, is the syntax taken by React.

We can have the bigger components in the main App.js file and the smaller components in a components folder. But the structure is ultimately entirely up to the developer.

This is a React component:

 

function MyComponent (props) {
  return ( 
    <> 
     <h1>{props.greeting}</h1> 
    </> 
) };

And this is how we call a React component:

<MyComponent greeting=“Hello World” />

For example, passing a variable {myVariable}:

const myVariable = ‘This is a variable’

Then you call it by using {myVariable} in JSX.

Fragment
When you have more than one line of code to return, you wrap the content of a function inside a fragment: <> </>
It replicates a div-like wrapper where you store the code block within your components.

React props

 This is the React equivalent to function parameters that are passed into functions. Best practice is to call them props when writing a component.   “You pass a prop”. This means you pass in the equivalent to a JavaScript argument into a component.   They are grouped together into an object by default.
React naturally takes all the arguments and wraps them in an object. The object is called props and you can access it by using dot notation, ie: props.name, props.age.

Props can handle functions and values, and they can have default values (ie, you can set the default to be whatever you want it to be!).
Props can be destructured in components for better readability.

React state

React State is a description of the status of the component and its features.  It's a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.
React developers usually refer to “setting state”, where you can write methods inside your component.   It basically means controlling the state of a component and resets it for each time you call it/use it.

‘Value’ is a variable so it always returns a state.

Since the introduction of React Hooks (in 2018) we can use React.useState( ). It takes an initial value when it renders, which can also take the value of when the value is set/changed.

I hope this clarifies a little more about the intricacies of React! I've collated some great free resources in the list below:

Glitch: React Starter Kit - A free, 5-part video course with interactive code examples that will help you learn React.
Codecademy: React 101 - Codecademy’s introductory course for React.
Egghead.io: Start Learning React - This series will explore the basic fundamentals of React to get you started.
React Crash Course 2018 - A beginner-friendly crash course through the most important React topics.
Egghead.io: The Beginner’s Guide to ReactJS - Free course for React newbies and those looking to get a better understanding of React fundamentals.
Free React Bootcamp - Recordings from three days of a free online React bootcamp.
Scrimba: Learn React for free - 48 hands-on video tutorials building react apps.

Building a geolocation app using Google Maps API in Vanilla JavaScript

Rita Correia — Thu, 26 Nov 2020 14:09:46 +0000

Recently I worked on this geolocation-based app that fetches and maps real-time availability of London’s Santander Bikes with Navigator, Google Maps API, Transport For London API. All in vanilla JavaScript.

💻 You can see mine working here💻

I thought it would be good to share a step-by-step guide on how to build it. This could be easily replicated for your own city, providing the local authorities or the service you want to use have an API. A similar take would be fetching local shops or restaurants from the Google Places API, and getting reviews or any other data.

First of all, we want to breakdown our plan into small tasks, so here’s what we need to do:  

Steps

1. Get the users location from the browser

2. Render a Google map and create a request to Google Maps using the users location

3. Create a request to Travel For London (TfL) for bike information

4. Parse the Tfl API responses and add the data to the map

5. Retrieve specific info and create and InfoWindow

6. Add bikepoint info and image elements to the InfoWindow

7. Add custom markers

1. Get the user's location from the browser

In order for this app to be more relevant to a Londoner, we want to retrieve the user's location and show the bikes available nearby.
"Right, but how on earth do we do that?", you ask. 🧐

We will use the Navigator object for this. The Navigator object lives under the hood in your browser, and it allows scripts to query state and to register themselves to carry on some activities.
There's a lot of properties in the Navigator object, which you can read more about here, but for this purpose we want to use Geolocation.

The Navigator.geolocation read-only property returns a Geolocation object that gives Web content access to the location of the device. This allows a Web site or app to offer customised results based on the user's location.

Once we call navigator.geolocation, it will prompt the user to allow for their location to be shared. If you're on Google Chrome you will see this alert:

In Firefox, for example, you will likely have to change the geolocation sharing permissions in the settings.

This will be done on pageload so we can handle the success case (as in, getting the user's current position).

We take in createMap as parameter. This will be a function that we'll create in Step 2.
If sharing location was not allowed, we will get an error on the console.

2. Render a Google map and create a request to Google Maps

For the next step, we want to render a Google map on our page which we'll wrap in a function.
You will have to sign up with Google Maps Platform and get an API key. Here's how you get started.

Once you have your API key, you'll have to include it in your Maps JavaScript API request as per the documentation. Include the Google script tag in your html file.

Then, we create a request to Google Maps using the user's location. The position.coords are retrieved from navigator.geolocation.getCurrentPosition() from Step 1.

map is just an id given to a <div> so we can use it as a selector. We want to center the map based in the current location, so we use center: { lat: latitude, lng: longitude } which store our position.coords. We also want to tweak the zoom property so it's more zoomed in than the default value.

Here's more on geolocation using the Google Maps API, if you would like to try a different approach.

Within the createMap function we also want to invoke the getBikeData(), which we'll create in the next step.

Destructuring objects

const { latitude, longitude } = position.coords;

If you've never came across this weird looking syntax this is called destructuring. This was a feature added to ES6 and you can read more about it here.
Destructuring on objects lets you bind variables to different properties of an object. You specify the property being bound, followed by the variable you are binding its value to.

3. Create request to Transport for London API for bike information.

Now we'll write our getBikeData() function, where we'll create a fetch request to Transport for London API for real-time bike data.

We don't need an API key to fetch data from the TfL API, so we simply use the endpoint provided to retrieve bikepoint data. We'll receive the data in JSON.

Once the fetch response is successful, we want to add our bike markers. We'll create a function for that shortly.

There's several types of data you can get from TfL, which you can access here.

4. Parse TfL API response and add bike locations to map

We want to parse our TfL API response where we take in bikepoints as our function's parameter.

We'll have quite a few bikepoints to parse so we'll run a forEach loop on each of them. We want to store the bikeLocation as a variable, which will store each bikepoint's latitude and longitude.

Then, for each of them, we want to create a Google marker, so we'll use one of the Google's functions for that. Relevant documentation on markers here. The Google marker is in fact an object which has position, map, and icon as properties. Position will take an object with the bikepoint latitude and longitude. Map will refer to the map we've previously created. And lastly, icon refers to the marker image, which will come to on our last step.

Within our addBikeMarkers function, we also invoke createBikeInfo() with bikepoint and marker as parameters. You guessed it, we'll jump onto that now.

This is how your app should look like at this point, with gorgeous markers for each Santander bike point. Gorgeous!

5. Retrieve specific TfL info and create an information window for when a user selects a bike point

It's nice to have all the bikepoints mapped, but we need to provide more info to the user. What happens when you click on a marker? We want to display a window with all info such as number of bikes available, number of spaces available and number of docks in each bikepoint.

We create a function that retrieves and stores this data so we can then display it in a user-friendly format. This window will be prompted when each marker is clicked on.

You'll see in the JSON data, that the Place object has an addtionalProperties array which contains the nbBikes, nbDocks and nbSpaces. This actaully gives us real-time values, so we can display an accurate status of all bikepoints in London. 
If you notice that there's a mismatch in these numbers (i.e. nbDocks - (nbBikes + nbSpaces) != 0), this indicates broken docks.
In order to find the exact property we want (nbBikes, nbDocks, nbSpaces), we use the find() array method so it can find the exact key within that object.
I'm logging a few bits here to confirm that the data that is being pulled is correct.

Finally, we add an event listener to each marker. Please note, that this is in fact using a Google method that replaces addEventListener. In here, we use addListener instead to interact with the Google marker. More on events on the Google Maps API documentation here.
We call the createInfoWindowForMarker() function (that we will create in the next step) to where we will pass in marker, bikepoint and bikeInfo as arguments.

6. Add bikepoint info and image elements to the InfoWindow

Almost there! In this function we will want to create a InfoWindow to display our bikepoint data.

InfoWindow is a type of overlay provided by Google Maps. It displays content (usually text or images) in a popup window above the map, at a given location. You can read more on InfoWindows here

First, we declare the infoWindow variable outside the function so it remains in global scope, which we'll assign with a new.google.maps.InfoWindow inside our function. This Google Maps function will take in an object literal which specifies the parameters for displaying the info window.
The one we will use is content, which is the equivalent to an innerHtml/innerText in JavaScript.
In here, we want to pass in html to the DOM, creating a div that holds an image and the data we fetched from the TfL API (the bikepoint name, number of bikes available, number of spaces available, number of docks and also the bike availability percentage). We calculate this percentage in a separate variable above.

You'll see that the first line in our code block here tells an existing open infoWindow to close. We only want to show one infoWindow at a time, so this guarantees that if there is already an infoWindow open this will be closed, so a new one can be displayed.

infoWindow.open(map, marker);
map.setCenter(marker.getPosition());

Lastly, we want to open a new infoWindow which will display the real-time bikepoint info. We pass in the map and marker as arguments so it's linked to the marker trigged by the user click. We also want to center the infoWindow in our map. Again, we use setCenter which is a built-in method that we can use with the Google Maps map, which then takes getPosition() chained to marker. getPosition() is a Google Maps method associated to marker. If you'd like to learn more on Google Maps map and marker methods, go here.

Et voila! What a beaut.

7. Add custom markers

This is entirely optional as we already have a fully-functioning geolocation based app that tells us the availability of public-use bikes in London. 🤩

For our final step, we just want to give it a little personal touch and add our own custom marker images.

Remember in Step 4 when we created our marker? One of the properties the marker object takes is icon. The google.maps.Icon interface is a structure that represents a Marker icon image. There's quite a few properties associated to icon, you can learn more on that here.

For our InfoWindow we will use url (pulling an image file of your choice), scaledSize (instantly scaling the original image to the desired size), and origin and anchor (which will position the marker image in correspondence to the location of the marker on the map).

There we have it, a geolocation-driven app using Navigator, Google Maps API and fetching data from the Transport for London bikes API.

This is my first ever technical blogpost so would love to know if you found this helpful in any of your projects using the Google Maps API! Your constructive feedback is appreciated.

My Self-taught Programming Journey

Rita Correia — Thu, 30 Jul 2020 15:52:54 +0000

So you want to learn how to code but don’t know where to start?
Or you've already started your learning journey (well done you!), but you're feeling a little lost?

I personally felt like I needed some sort of structure during my learning journey, so I've been making notes along the way hoping to support anyone who's looking into learning to code.

This article includes some tips, resources and personal learnings which might help you achieve your coding goals. Please note I'm learning front-end development specifically, so the article will be geared towards that.

#100DaysOfCode

Setting yourself goals will set you up for success, whatever success means to you.
Taking part in the #100DaysOfCode on Twitter helped me stick to my goal of staying on a consistent learning journey and also held me accountable as I publicly committed to the challenge. Documenting your journey is important. You can look back and marvel at what you achieved during that specific timeframe.
You can join the #100DaysOfCode conversation, connect with other people who are on the same journey and have the support of other communities such as #CodeNewbies, etc.

// Detect dark theme var iframe = document.getElementById('tweet-1288534037347344384-263'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1288534037347344384&theme=dark" }

FreeCodeCamp

Free
At the beginning I looked for an online bootcamp that was not only free, but could be a good starting point for beginners.
I took the Responsive Web Design to start with, and I think that was a wonderful way to grasp basic HTML/CSS concepts.

Codecademy

Free
I started the free version to test it out, and really enjoyed the platform and the engaging content of the courses.
I eventually moved to the Pro version (£15.99-£31.99/month or $19.99-$39.99/month), which I found worth the monthly cost as it lets you apply the concepts you’ve just learned into practical challenges to solidify your newly-acquired knowledge. With Pro, you can also get a certificate at the end of program. There's plenty of paths and courses to choose from. To be completely honest, I tried out the Pro version as I soon found out I much prefer video-based learning.

Codecademy Go app

Free
The Codecademy Go app is really good for quick reviewing and practicing concepts, on the go. It gives you handy, randomised flash cards on the concepts learned in your chosen course and then fun little quiz style questions. Perfect for catching up while you wait for the bus.

Video-based bootcamps

There are plenty of intro to coding bootcamps (HTML / CSS / JavaScript / Python / etc) led by some of the best instructors in the industry... for free!
One of the best out there is the Frontend Masters Bootcamp which is taught by Jen Kramer (Harvard University) and Brian Holt (Microsoft), where you also create some fun projects.

Videos

When you’re new to a programming language, especially if you’re still at the beginning of your learning journey, it’s highly likely that you can’t quite grasp the entirety of a language's potential.
Questions such as ‘What can I actually do with JavaScript?’ might pop to mind which is completely normal. I found that watching videos on YouTube can help you a ton by giving you an overview of how powerful that language is.

Youtube: Learn JavaScript - Full Course for Beginners

Youtube: JavaScript Crash Course for Beginners

Guided projects / tutorials

Before you feel confident enough to jump into your own personal projects, with little guidance, I found that learning through guided projects and tutorials was a great way to build that confidence. Tutorials help you grasp new concepts, and you have those training wheels helping you.
There's a plethora of great tutorials online, so why not learn from the best? Wes Bos is a legend and if you're learning JavaScript, he created the perfect tutorial-driven challenge: JavaScript30.
It's essentially a 30-day challenge where you build 30 things in 30 days, with video guidance. You can follow up on Twitter with #Javascript30 to connect with other fellow coders on the same journey as you.

Jump to non-guided projects when you feel ready

Tutorials can be a blessing and a curse, with the downside being that it's easy to feel trapped in the tutorial-led stage of learning. You'll learn better by crafting your own code and algorithms. I would recommend FrontEndMentor for this, as they provide beautifully designed challenges that you can sort by level of difficulty. You can always check out solutions submitted by peers if you're stuck or curious.

Online courses

Online courses can go from fundamentals to advanced topics, such as specific frameworks, etc, so there's a lot of choice if you want to take it a step further and tailor your knowledge:

Frontend Masters
Udemy
Traversy Media, from Brad Traversy. He creates some of the best courses available in Udemy.
Wes Bos, possibly my favourite instructor, he created a range of free and paid courses for web developers.

Debugging / Queries

It can be a lonely ride if you don’t have other programmer buddies, so once again the answer is the internet.
Stack Overflow is the holy grail for questions and answers. Just search for similar issues, because it’s likely you’re not the first person asking that question.
Look out for an answer with a green tick ✅ next to it - that will give you the right solution.

Emotional resilience

It can be a pretty lonely journey learning something new on your own.
Some days can be tough and you might find yourself doubting everything, yourself and your capabilities. You might get frustrated and wanting to give up, but pleeeeeeease remember that’s all part of the learning journey. Be your own cheerleader. Step back and look and what you’ve accomplished so far. Last week you didn’t know the things you do today. Last month it was inconceivable to think of where you are right now. Just compare yourself to the same day last year.
It’s a long journey, so when you find yourself waddling through the valley of despair, try to refocus and regroup. Gather your strength and persevere.

These were my learnings during my self-taught programming journey. Would love to hear other recommendations.

You got this!

How can tech companies take better care of their most valuable assets?

Rita Correia — Thu, 09 Jul 2020 16:09:43 +0000

For tech companies, the mental and technical capabilities of their teams are their most valuable asset.

The brain is a muscle. It can get overtired if we don't look after it. Although coding can equally be fun and challenging (which makes it a very enjoyable career for the most part), developers will exert their brain sometimes to a point of mental burnout. Balance is key.

What can tech companies do to take better care of their collective brain power?

If you're a team manager, here are a few ideas that could improve your team's mental performance.

Realistic project estimation

Agile methodologies and ceremonies are a great way to run projects and have an overview of everyone’s workload. Daily stand ups are key to understanding how work is progressing, and how your team is feeling.
Be reasonable with project estimation and always plan for realistic deliveries.
If the team finishes a sprint early, encourage taking some time for some self-development. Or even better, strategically incorporate downtime into your weekly schedules, so your team can have an afternoon off to decompress and hack around with new technologies or whatever they feel like exploring. Let this time be self-paced. It's also incredibly positive to get the team together afterwards to show off their insights and learnings in a little 'Show & Tell' sort of gathering.

Foster a safe and open culture

Create an environment of openness where senior management and team leads lead by example. Imagine how would people react if your CTO casually blurted out that he had had a rough night because their kid didn’t let them sleep. This is just a random example, but team members would likely feel empathetic towards them and possibly be more mindful throughout the day as a consequence.
Simple actions or displays of humanness will open up the door to creating a kinder environment driven by honesty and personal accountability.

Understand the psychology of your team

We all have different personality traits. Do a little reconnaissance exercise and you'll realise your team members will either share similar attributes or have very distinct characteristics amongst themselves.
This will mean a deeper interpersonal understanding of each individual needs, as well as collectively, helping you better identify when people are close to burnout.
Meyers-Briggs theory states that humans can have 16 different personality types and this should not only be supported but also celebrated.
A mentally diverse team enriches the projects they’re working on, as well as better understanding and tailoring for the audiences they’re developing for.

Take care of your introverts

This is extremely important and intrinsically related to the Team Psychology topic. Introverts recharge their mental energy by spending time alone. They will need periods of solitude in order to be more creative and more productive.
Offices have widely become open space environments with lots of background noise and movement, which is definitely an energy draining environment if you're an introvert. Respect their space, provide breakout areas, and allow them to work from wherever they find more productive to them.

Encourage time off

Taking annual leave should be encouraged. It improves productivity and it provides an opportunity to unwind, recharge your brain and spend time with loved ones.
Findings reveal that holiday policy should be at the forefront of company benefits - so a chunkier paid holiday allowance will definitely make everyone happier. A good work-life balance is key for mental health.

Care personally

I worked in companies where the cultural stance was all about caring and nurturing a positive and inclusive environment, but they rarely walked the talk. Employers have a duty of care to their employees, and a manager has that direct responsibility.
Radical Candor by Kim Scott is a must-read resource that can help managers better lead their teams in very honest and open ways, and it perfectly addresses the 'caring personally' mentality.

I’ve seen ex-colleagues being fired for arriving late after admitting they had a panic attack on their way to work.
I’ve witnessed team leads publicly calling out members of another team for not performing as they should, leaving staff embarrassed with their reputation shattered all because of a meaningless issue that could've simply been addressed in a private conversation.
And this happened to me personally... On a first one-to-one meeting with a new manager, they mentioned in a dismissive tone that they were ‘told to care about his team’. That obviously didn't sit very well especially as a first impression.

These kind of situations will not only leave a sour taste, but will also cause a mental drain which will take away energy that should be ideally be funnelled into happy, productive work.

I believe companies should put a lot of effort into fostering a workplace environment that is based on mutual trust, respect and honesty. Taking care of your company's best assets - your people, their mental health and their brain power - will only bring out positive outcomes that will allow your company to thrive.