DEV Community: Liz P

Sorting Algorithms (Part 1)

Liz P — Tue, 21 Dec 2021 04:27:27 +0000

I talked about algorithms last time here and concluded that there is just so much information and so many resources surrounding algorithms and algorithm practice. It can be a bit of an overload. So this time I wanted to discuss something very specific - some common easy sorting algorithms. Because in JavaScript we need to sort things a lot, right?

Bubble Sort
Insertion Sort

Bubble Sort - Bubble Sort is the simplest sorting algorithm that works by repeatedly swapping the adjacent elements if they are in wrong order.

We take an unsorted array for our example. Bubble sort takes Ο(n2) time so we're keeping it short and precise.

So the simplest explanation here is bubble sort takes an unsorted array and compare two elements at a time and swaps the elements if they aren’t already in order. And continues down the line until your array is sorted.

So with the above, you start by comparing 14 and 33, and these two elements are already in their proper order. Then you move on to comparing 33 and 27, because 33 is greater than 27 these two get swapped. Now you’ve got 14, 27, 33 which takes you to comparing 33 and 35, which are in the correct order so you move to compare 35 and 10 and because 10 is less than 35 those get swapped. So after the first iteration you’ve got 14, 27, 33, 10, 35. You start over again and keep going until 10 is in it’s proper place at the beginning.

**Insertion Sort - Insertion sort is a simple sorting algorithm that works similar to the way you sort playing cards in your hands. The array is virtually split into a sorted and an unsorted part. Values from the unsorted part are picked and placed at the correct position in the sorted part.

The array is searched sequentially and unsorted items are moved and inserted into the sorted sub-list (in the same array). This algorithm is not suitable for large data sets as its average and worst case complexity are of Ο(n2), where n is the number of items.

Again, using an unsorted array as an example here we compare the first two elements which are already in ascending order and 14 is in the sub-array which is sorted. Moving on to compare 33 and 27 which aren’t in ascending order so they’re swapped and it checks against the sub-array which 14 is less than 27 so that’s fine. So now 14 and 27 are in our sub-array. Moving on to compare 33 and 10, those get swapped. Then compare to the sub-array and 27 and 10 then get swapped, then compare 14 and 10 and swap again. So now our sub-array is a sorted array of 10, 14, 27 and this continues on until the entire array has been compared and you’re left with the sorted sub-array.

Both of these algos are fairly easy to understand. Next time I’m going to cover a few more sorting algorithms in increasing difficulty. To see more visuals or go more in-depth on these I recommend reading up more on them or even taking a course that covers algorithms. Colt Steele’s Data Structures and Algorithms course covers all the sorting algos and he does a deep dive into each type of sorting algorithm and takes you through some code examples of each. Thanks for reading!

Data Structures and Algorithms (Pt. 2-Intro to Algos)

Liz P — Tue, 14 Dec 2021 01:26:45 +0000

What’s an algorithm? An algorithm is an unambiguous specification of how to solve a class of problems. It is a set of rules that precisely define a sequence of operations. This seems pretty easy to understand, right? However, until you’ve practiced on repeat, algorithms can be tricky to really understand. Solving problems with an algorithm helps us to break it down into smaller, easier to tackle pieces.

Here is a good visual for breaking down the pieces and characteristics of an algorithm:

There are some commonly used types of algorithms in JavaScript:

Brute Force Algorithms — look at all the possibilities and selects the best solution 
Greedy Algorithms — choose the best option at the current time, without any consideration for the future 
Divide and Conquer Algorithms — divide the problem into smaller parts and then solve those parts 
Dynamic Programming Algorithms — build up to a solution using previously found sub-solutions
 Backtracking Algorithms — similarly to brute force try to generate all possible solutions but each time you generate a solution test if it satisfies all conditions, and only then continue generating subsequent solutions. Otherwise, backtrack and go on a different path of finding a solution.
 Recursive Algorithms - This follows a loop, in which we follow a pattern of the possible cases to obtain a solution.

And when practicing solving algorithms another concept to keep in mind is time and space complexity. What? Big O Notation, that's what.

Time Factor: Time is measured by counting the number of key operations such as comparisons in the sorting algorithm.

 Space Factor: Space is measured by counting the maximum memory space required by the algorithm.

Space Complexity: Space complexity of an algorithm refers to the amount of memory that this algorithm requires to execute and get the result. This can be for inputs, temporary operations, or outputs.

Time Complexity: Time complexity of an algorithm refers to the amount of time that this algorithm requires to execute and get the result. This can be for normal operations, conditional if-else statements, loop statements, etc.

There is so much more to talk about with algorithms and even more with Big O Notation. I think this may be more than just two parts. Already you should see how important data structures and algorithms concepts are to have at least a general understanding of. And if space and time complexities make your head want to explode, you're not alone! Still important to have some idea of how much space and time your solution will require and being able to think about how to downsize those needs, you’re well on your way to grasping these concepts. Thanks for reading!

Imposter Syndrome and Re-framing Negative Thoughts

Liz P — Tue, 07 Dec 2021 01:06:43 +0000

I know my next post was supposed to be covering algorithms. They’re not going anywhere, and I’ll get to those next time for sure. But I wanted to address a topic that encompasses a lot of different things, re-framing our thoughts. And I wasn’t really sure which road this topic would take me down but as soon as I thought about re-framing thoughts, the first thing that came to mind was rejection, which then led me to Imposter Syndrome. So overall, I think this post will be mostly about Imposter Syndrome but also how as new developers we can try to re-frame those negative thoughts that are often associated with rejection.

Have you ever heard a little voice in the back of your head start whispering things like “you’re not smart enough”, “you’re not good enough”, "how did you even get this far”, and of course “you don’t belong here”? That’s the imposter monster. Imposter syndrome can be defined as a collection of feelings of inadequacy that persist despite evident success. I think at one point or another in our lives we feel some degree of imposter syndrome.

For me, before transitioning into tech, I felt it when I experienced a success or big achievement. I would think to myself that was just lucky or it was a team effort, I only helped. And of course, when you move to a new industry that you haven’t yet made many contributions to, it can be hard not to have those undermining thoughts creep in once again. From the very large number of articles and posts on this topic, the tech industry definitely feels imposter syndrome. So naturally, I’ve been asking myself - did I make a huge mistake deciding to change careers? Can I really do this? Do I deserve to be here?

Why is it that we feel like frauds even when there is clear evidence we’re very capable? I don’t think going down the psychology rabbit-hole is the best course of action here so maybe the better question is how do we silence that voice that’s telling us we don’t belong or that we’re not good enough?

I’ve had help with the process of re-framing my thoughts especially those surrounding rejection. As people, we deal with rejection ALL THE TIME. But no one likes being rejected, it’s kind of the worst. Receiving a rejection to a job we took the time to research and apply for can send that nagging voice into overdrive. It’s hard not to take a rejection personally or let it start chipping away at your confidence. But having the ability to re-frame rejection is so valuable when trying to silence imposter syndrome. Fairly recently, I had a final round interview (which also happened to be the technical interview) and I got flustered and tanked it. I didn’t complete the problem, and got tripped up on a keyword, which I knew but thought I was wrong and didn’t say it. Needless to say, I didn’t get an offer. And I started to question myself and my capabilities almost immediately. I knew it would be pretty easy to spin out with negative thinking so instead I decided I was going to take that rejection and turn it into something positive.

I was given feedback, which in this case was actionable. I knew where I went wrong, and I could take steps to fix these issues for next time. Instead of thinking, I’m terrible at coding and I’m not good enough for this company, I asked myself - why did I fail this time? And what will help me succeed in this situation in the future? The immediate sting from being rejected was replaced with enthusiasm for growing from my mistakes. I knew I needed to work on my data structures and algorithms, so I decided to write about them to help solidify my understanding. I’m going to incorporate DSA problem-solving into my schedule more often so they sink in. I want to facilitate a growth mindset. If you aren’t being challenged, you aren’t growing.   Failing is part of programming. As developers we have to get comfortable with not knowing, with bugs, with errors and getting stuck. It’s part of the process. Having the ability to rework the narrative we tell ourselves gives us power over failures and rejection. Instead of feeling like an imposter, you’re able to showcase persistence and expand your knowledge. Remember how far you’ve already come and how much you’ve already learned, and keep adding to that. Future you will thank you.

Data Structures and Algorithms (Pt. 1-Data Structures)

Liz P — Mon, 29 Nov 2021 05:39:02 +0000

My personal feeling is that data structures and algorithms are an asterisk subject or simply not not covered at all in the majority of structured coding programs (at least the ones I’ve come across). Unless you’re specifically taking a DSA course, they aren’t really tackled in-depth. BUT, this is how many potential employers will assess your technical capabilities during a live coding scenario. My immediate thoughts on this topic gravitated to “what the hell is a binary search tree or a linked list?”.

Data Structures- a data structure is a particular way of organizing data so that it can be used efficiently. (For the purpose of this article I’ll be referring to JavaScript).

Data Structures handle four main functions:

Inputting information
Processing information
Maintaining information
Retrieving information

In JavaScript there are primitive and non-primitive data types. All primitive data types are immutable, meaning they can’t be changed.

Boolean
 Null 
Undefined
 Number  
String  
Symbol

Non-primitive or complex data types can be changed.

Array 
Object

Here are the data structures in JS that you’ll likely be questioned on:

Array- arrays are objects and the most simple data structure. They are collection of elements stored in sequence, starting with the 0th index (which as we all know means the first element is at position 0 not 1).

Hash Table- this data structure uses an associative array, mapping keys to values. It also uses a hash function that converts a key into an array index.

Tree- trees have one root node, the other nodes “branch” off making it into a tree form. Each node in a tree data structure must have the following properties:

key: The key of the node 
value: The value of the node 
parent: The parent of the node (null if there is none) 
children: An array of pointers to the node's children

A common type of tree is the "binary search tree" which is used to easily search stored data. And the search duration is not dependent on the number of nodes, rather the number of levels down the tree.

Linked List- yes, this is as easy as it sounds, it’s a list that's linked. They’re similar to arrays, with the key difference being that elements are not stored in a particular memory location or index. Rather each element is a separate object that contains a pointer or a link to the next object in that list. Elements are referred to as nodes. The analogy used is linked lists are like train cars, linked together, but can be reordered by changing how they’re linked.

Stack- the way stacks are structured is pretty self-explanatory, a collection of elements on top of each other. And they use the LIFO (last in, first out) principle, so the last thing to be added to the stack will be the first out. You add an element by pushing it on to the stack and remove an element by popping it off.

Queues- queues are similar to stacks but queues use the FIFO (first in, first out) principle. Elements are added to the end of the queue (enqueue) and elements are removed from the beginning of the queue (dequeue). Just like an actual queue/line, the first person waiting in line is the first to check out.

Graphs- are a relation-based data structure helpful for storing web-like relationships. Each node, or vertex, as they’re called in graphs, has a title (A, B, C, etc.), a value contained within, and a list of links (called edges) it has with other vertices.

This is a lot of information, and a lot of it's still on the new side to me. Hopefully this helps explain some common data structures. It definitely helped me get a better understanding of each of them. Comprehending and implementing these takes time and practice, so much practice. Next time I’ll get into algorithms. Thanks for reading.

CSS Media Queries

Liz P — Mon, 22 Nov 2021 23:42:20 +0000

Media queries are extremely useful for responsive web design. Not everyone is using a desktop all the time, most of us are probably using our phones most of the time for the things we’re doing online. Using media queries is a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones). Media queries allow us make changes to our CSS according to device sizing. And if you’ve ever been on a site on your phone and had to endlessly scroll just to see the landing page info, you know how frustrating that is.

To get started we use the @media rule-which is used to target a specified media type. The syntax looks like this:

@media (condition) {
  // CSS that we want to happen when the condition is met
}

For example if we want the font size to change and become smaller when someone is using a mobile device instead of a desktop, we would use a media query that looks like this:

p {
  font-size: 25px;
}

@media (max-width: 375px) {
  p {
    font-size: 18px;
  }
}

This means that once the breakpoint is reached the custom rules you’ve defined go into effect. While there are so many devices of varying sizes out there, there are commonly used breakpoints.

• 320px — 480px: Mobile devices
• 481px — 768px: iPads, Tablets
• 769px — 1024px: Small screens, laptops
• 1025px — 1200px: Desktops, large screens
• 1201px and more — Extra large screens, TV

You can also include the type of media in the condition (likely you’ll be using screen), there are four categories:

• all — for all media types
• print — for printers
• screen — for computer screens, tablets and, smart-phones
• speech — for screen readers that “read” the page out loud

Putting all these pieces together, a finalized media query for a tablet would look like this:

.opening-paragraph {
  font-size: 25px;
}

@media screen and (max-width: 768px) {
  .opening-paragraph {
    font-size: 20px;
  }
}

You can make specific CSS rules for pretty much anything-we can adjust the margins, padding, font size, colors, etc. They’re pretty powerful. I hope this helps a little. In the past I’ve typically used a library or framework like Bootstrap that pretty handles the responsiveness for you but if you’re using plain old CSS media queries will be your best friend. Thanks for reading!

React Router pt. 2-v6 Changes

Liz P — Mon, 15 Nov 2021 05:49:52 +0000

A couple of weeks ago I wrote about React Router. In that time I had install it for a new project and my usage wasn’t functioning properly. I was getting some weird errors and wasn’t really sure where to start. I was using code I had written before and it had worked just fine in my previous build. What was happening? Well, documentation saved me once before with React Router - so that’s where I headed this time too. Turns out a new version had come out and some updates introduce breaking changes.
I figured the best way to do this would be to edit my previous instructions. Here we go. Just like before, the first thing is installing React Router (this assumes you already have a React app created):

 

npm install react-router-dom

Now that it’s installed- we’re still going to import BrowserRouter. Previously we imported some other pieces along with BrowserRouter and included it all in our App.js file. That’s no longer necessary. Instead in your index.js file add the following code snippet:

 

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import App from './App'

Then go ahead and wrap App in the router:

 

ReactDom.render (
    <BroswerRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

After doing this, you can use React Router anywhere in your app.

In the previous version we’d have done the following:

 

const App = () => {
  return (
   <div>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/shop" component={Shop} />         
     </Switch>
   </div>
 )
}

Switch is not used in v6, it’s been replaced with Routes. And the component that’s getting rendered is not written as component in this version. Instead it takes a prop, element, and we’ll pass the component that needs to be rendered as JSX. Exact path is no longer needed, which if you read my previous React Router post, this is great and will save you from a tricky potential bug. We do need to import Routes, Route and Link. Now our code should look something like this:

import {Routes, Route, Link} from ‘react-router-dom’;

const App = () => {
  return (
   <div>
     <Routes>
       <Route path="/" element={<Home/>} />
       <Route path="/about" element={<About/>} />
       <Route path="/shop" element={<Shop/>} />         
     </Routes>
   </div>
 )
}

As always, wherever you decide to use React Router, don’t forget to import all of your components:

 

import Home from './components/Home';
import About from './components/About';
import Stuff from './components/Stuff';

There are some other interesting changes that I’m still reading up on. But this should get you started if you’re using the latest version of React Router. I highly recommend reading the documentation. It includes information on the installation, main concepts and even has a tutorial. There's also a section that's specific to upgrading from v5 if you want to do that. Hope this helps in using the most current version of React Router. Thanks for reading!

Time Management

Liz P — Mon, 08 Nov 2021 21:39:39 +0000

Time Management is something I’ve been thinking about a lot lately. I’ve felt like I’ve had a lot of things to do - build out projects, study, read articles and watch tutorials, network, etc. And interviews to prepare for on top of all that, it’s been a little stressful. Feeling the effects of pressure, at least for me, tends to lead to losing focus, which of course then throws time management right out the window. I’m hoping this self-awareness will help narrow down where I need to specifically focus to level up my time management skills.

I’m sure we’ve all heard many tips on how to better manage our time and be more productive. But do we actually use these tips? Some are more simple than others to get started on right away, others might require the breaking of bad habits we’ve picked up along the way.

Create a schedule. Making a schedule is one of the simplest, most useful ways to improve our time management. The most important part of creating a schedule for yourself- sticking to it! Of course, things happen and some days you’ll get derailed but the longer you stick to it, the more it becomes habit. I’m a big fan of the tried and true pen and paper schedule. I like to write things down, and get a sense of satisfaction crossing something off my list. But there are also so many digital options as well to help you plan your time. Google calendars, Toggl, Harvest, Todoist, the list goes on and on. Pick one that suites your needs, make yourself a schedule and getting to crossing those things off your list.

Quit procrastinating. Who isn’t guilty of procrastination at one point or another? If there is a task I’m not crazy about doing, I’ll do literally anything else, including cleaning everything in sight. I’m sure you’ve heard the phrase “eat the frog”, which means do the hardest, least appealing task first to get it out of the way. Completing a hard, unappealing task makes us feel good and gives us a sense of accomplishment which hopefully leads to completing all those other things sitting on our to-do lists.

Focus on a single task. This one is not as easy as some of the others as we’re basically programmed to multi-task everything we do. But with coding, or learning anything new really we should really try to focus on the task at hand instead of trying to do many things, probably at the expense of absorbing the information or doing something well. And while we’re at it, take that single task and break it down into smaller parts- this is a great takeaway from solving coding problems. As developers, we need to look at the whole problem, and then break it down into it’s pieces to tackle it.

One more thing that I think is worth saying is, since most for most of us home is work and work is home, give yourself a place that free from distraction. And remember to schedule breaks and free time, if you’re constantly working or learning, you’ll burn out pretty quickly.

  I’m definitely looking to create a better scheduling system for myself to visually break down my time (hello color coding!) and see where I’m spending most of it and where I can make some changes. This will also help me to cut down on distractions, procrastination and make the most out of the time I have. And I fully intend on scheduling in some breaks and free time so I don’t continually get overwhelmed and fall into the loop again.

React Router - A Brief Into

Liz P — Tue, 02 Nov 2021 01:42:41 +0000

Last week I had a technical phone interview (cue the horror music). I was really nervous. I decided to talk about a project built in React and was asked about a roadblock that I hit. Spoiler, I hit more than one. But one that immediately sprung to mind was dealing with my routes. I had run into an issue with the path attribute messing up my other routes, and in this case documentation really saved me. But then, when I trying to explain react router to someone who wasn’t really familiar with the terms I was using, I found myself stumbling a bit and not really knowing how to explain. So now I’m going to write about it to solidify my knowledge and you’re all coming along for the ride.

First thing, is you need to install React Router (this assumes you already have a React app created):

npm install react-router-dom

Great, now that we’ve installed it - this being React we need to import BrowserRouter, Route and Switch to use it. We'll also be using Link, so include that too.

In your App.js file add the following code snippet:

import React from ‘react’;
import {BrowserRouter, Route, Switch, Link} from ‘react-router-dom’;

And let’s assume for the sake of saving time I have three other components- Home.js, About.js and Stuff.js. I’m going to want routes for each of these. Anything we wanted to be rendered needs to get wrapped in BrowserRouter. So in our index.js file we need to do the following:

ReactDom.render (
    <BroswerRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Then let’s go ahead and add , which does exactly what it’s name says, allows us to switch between routes. A looks through its children s and renders the first one that matches the current URL.

Then we’ll incorporate the tags. To let the routes know which component to render we need to add the path attribute, and the component attribute (illustrated in the code below). Once all of that is done our code should look something like this:

const App = () => {
  return (
   <div>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/shop" component={Shop} />         
     </Switch>
   </div>
 )
}

Most of the time your homepage’s route will simply be '/', right? Ok, this is where I got into trouble a bit the first go round. All of our other routes will contain '/', like '/about' and '/stuff' so how does our router know what to do here and how do we save ourselves (well you, not me) a lot of frustrating debugging? We’ll use exact path for our homepage. So instead of this:

<Route path="/" component={Home} />

We’ll use:

<Route exact path='/' component={Home}>

Don’t forget to import all of your components:

import Home from ‘./components/Home’;
import About from ‘./components/About';
import Stuff from ‘./components/Stuff’;

All of this let’s us navigate to the different routes we’ve set up just by typing the URLS into the browser. Most likely, you’ll want to provide clickable links in your app. Now we’ll make use of the tag in react router and your links can reside in a Navbar component.

const Navbar = () => {
    return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/stuff">Stuff</Link>
    </div>
  );
};

And now you should have a fairly easy to navigate set of routes. As I mentioned, this process tripped me up the first time, so no promises I didn’t slip up here too. If anything stands out as incorrect here, please feel free to point it out! Thanks for reading.

CSS is !important

Liz P — Tue, 26 Oct 2021 01:23:09 +0000

An app or website without CSS looks kind of blah. It’s like having an empty house, the structure is there but there’s no style.

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. Essentially, it allows us to style our HTML elements.

CSS will either be an attached document or embedded directly in the HTML. These three ways of making use of CSS in an HTML document are:

Inline styles- Using the style attribute in the HTML start tag.

<p style =“color: red; font-size: 15px;">This paragraph will be red.</p>

Embedded styles- Using the style tag in the head section of a document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <style>
        body { background: black; }
        p { color: red; }
    </style>
</head>
<body>
    <p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>

External style sheets- Using the link tag, pointing to an external CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body { background: black; }
        p { color: red; }
    </style>
</head>
<body>
    <p>This paragraph will also be read, and the entire background will be black.</p>
</body>
</html>

Arguably, the best way to use CSS for styling is an external style sheet. This way all of the CSS-related code is in a separate file and if you need to change something you don’t have to try and go line by line to find where you need to make the change in your HTML.

While we can usually get around well enough with the CSS basics- background, color, font-family, text-align, etc. There are so many other CSS properties that we use and we can do some pretty amazing things with CSS. A good way to learn or brush up on CSS is playing games! Here are some resources to make learning CSS more fun:

Flexbox Froggy- https://flexboxfroggy.com
Grid Garden- https://cssgridgarden.com
CSS Diner- https://flukeout.github.io
CSS Battle- https://cssbattle.dev
Flexbox Defense- https://www.flexboxdefense.com

The properties are seemingly endless and no doubt there are some that will likely never get used, W3Schools has a great list here.

In writing this article I realized just how much there is to know about CSS and I've really only just scratched the surface. I think this will be a topic I explore more in the future. Thanks for reading!

7 Types of Rest-Which Do We Need?

Liz P — Mon, 18 Oct 2021 02:52:06 +0000

We all know we need rest, right? Obviously. And as developers (and people) taking time to rest is important, we need to be sharp in our thinking, in accuracy, feel constantly inspired and creative but staring a computer screen looking for a missing ; can drive anyone a little mad. I recently saw this article which got me thinking about rest and how much we need, also the different types of rest we should be thinking about for our well-being. I had no idea there were more than a handful of rest types. But let’s go through them think about each a little. See which types of rest you may need and if you’re neglecting them.

Physical Rest- ok, this one was easy. Everyone knows what physical rest is and why we need it. We need to sleep or nap, this is passive. There is also active physical rest which restores us, so stretching or massage, etc.

Mental Rest- most of us have a vague idea of what this is but I also think most of us find this incredibly elusive. A lack of mental rest can make us irritable and forgetful, and we have the feeling of not being able to turn our brains off. The above mentioned article recommends scheduling short breaks every two hours to remind ourselves to slow down. And because we live in a culture that requires us to be on and available 24/7, we should be extra cautious of any signs of burnout and deal with them accordingly.

Sensory Rest- ok developers, this one will ring true for you…computer screens, lights, Zoom calls, phone calls, interruptions, juggling multiple conversations, is this sounding familiar? We are constantly overloading our senses. How do we combat this? Unplugging. While in theory this is a great idea, in practice it can be almost impossible to achieve. Maybe just try not sleeping with your phone next to your head.

Creative Rest- Dr. Daulton-Smith (article author) says this is especially important for those of us who need to problem-solve and/or brainstorm ideas. Hmm, pretty much of the job description of a software engineer. This type of rest requires us to tap into our sense of awe and wonder. We should try to surround ourselves with things that make us feel inspired, which these things can be different for each us. One person might find being surrounded by plants inspirational, another artwork and yet another might find inspiration in music. Find your thing and keep it handy.

Emotional Rest- what? Can we ever get rest from our emotions? Hard to believe that is a possibility. Even while doing something we love, like coding, it can be hard to not feel frustrated or overwhelmed or a million other things sometimes. And as someone just starting out in tech, we want to do a good job which can lead down a people-pleasing path. We have to be able to freely express our emotions. Not so easy, right? How many times have you ever answered “how are you?” with an “ok” when things are not ok? If you said a lot, yeah same here.

Social Rest- have you heard of the term energy vampires? I’m sure you we all have a relationship or two that can be draining whether we want it to or not. This puts at a social rest deficit. We need to aim to be around people that support us and are positive. This is especially important in the workplace I think. And because we’re all currently socializing virtually Dr. Daulton-Smith suggests participating fully by turning cameras on and focusing on who we’re speaking with.

Spiritual Rest- which is the ability to connect beyond the physical and mental and feel a deep sense of belonging, love, acceptance and purpose. Connection to something greater than just us or our jobs, or things-this one is definitely individual to each of us. Find what makes you feel like you belong and practice it.

So how many of these different types of rest do you feel like you need? How many are you lacking in? To be better people, to be better coders, co-workers, friends, pretty much everything, we all need rest. Figure out the types of rest you need and start implementing some daily practices that help you get them. I know if I’m feeling mentally or physically spent I’m not showing up as my best self or doing my best work. I definitely learned quite a bit about where I need to start focusing my efforts. Now, I’m going to try and get some rest!

Some of JavaScript's Built-In Methods

Liz P — Mon, 11 Oct 2021 02:45:23 +0000

Is JavaScript confusing? It can be, sure. But it’s pretty amazing, especially with it’s built-in methods that can reduce the amount of code written and help with readability. Here a few JS built-in methods that you’re probably already using or have at least seen more than once.

Concat()- this method will join two (or more) strings together and return a new string.

let str = "Hey there! "
let str2 = "JavaScript is fun."

console.log(str.concat(str2)) // "Hey there! JavaScript is fun.”

Length()- this method will return the length of the given string.

let str = "Hey there!"
let str2 = "JavaScript is fun."

console.log(str.length) // 10
console.log(str2.length) // 18

ToUpperCase()- converts the given string to uppercase.

let str = "Hey there! JavaScript is fun."

console.log(str.toUpperCase()) // "HEY THERE! JAVASCRIPT IS FUN."

ToLowerCase()- converts the given string to lowercase.

let str = "Hey there! JavaScript is fun."

console.log(str.toLowerCase()) // "hey there! javascript is fun."

Split()- splits the string into substrings which are placed in an array and using a separator you choose.

let str = "Hey there! JavaScript is fun."

console.log(str.split('')) // ["H", "e", "y", " ", "t", "h", "e", "r", "e", "!", " ", "J", "a", "v", "a", "S", "c", "r", "i", "p", "t", " ", "i", "s", " ", "f", "u", "n", "."]
// here the string is spilt into characters, using no space as a separator

console.log(str.split(' ')) // ["Hey", "there!", "JavaScript", "is", "fun."] 
// here the string is split into separate strings using a space as the separator

Join()- joins an arrays elements and returns a new string, as with split you can choose your separator.

let greetings = ["Hi", "Hello", "Hey"]

console.log(greetings.join('')) // “HiHelloHey"
// here the elements are joined with no space as the separator

console.log(greetings.join(' ')) // " Hi Hello Hey”
// here the elements are joined with a space as the separator

Reverse()- reverses the order of the given array’s elements.

let animals = ["Lions", "Tigers", "Bears"]

console.log(animals.reverse()) // ["Bears", "Tigers", “Lions"]

Pop()- removes the last element of the given array and returns it.

let animals = ["Lions", "Tigers", "Bears"]

console.log(animals.pop()) // "Bears"

Push()- adds one or more elements to the end of the given array and returns the new length of that array. (If you log the array to the console again, you’ll see your element(s) are now added)

let animals = ["Lions", "Tigers", "Bears"]

console.log(animals.push("Monkies")) // 4
console.log(animals) // ["Lions", "Tigers", "Bears", "Monkies"]

Shift()- removes the first element of the given array and returns it.

let animals = ["Lions", "Tigers", "Bears"]

console.log(animals.shift()) // "Lions"

Unshift()- adds one or more elements to the beginning of the given array and returns the new length of that array. (If you log the array to the console again, you’ll see your element(s) are now added)

let animals = ["Lions", "Tigers", "Bears"]

console.log(animals.unshift("Monkies")) // 4
console.log(animals) // ["Monkies", "Lions", "Tigers", “Bears"]

These are just a few of the built-in methods JavaScript gives us for free. If you want to see more I suggest checking out MDN for a more comprehensive list. Thanks for reading!

A Few (Free) Learning Resources

Liz P — Tue, 05 Oct 2021 00:37:43 +0000

Being new to the developer world, it can be easy to get overwhelmed by all the resources out there for learning new skills or just keeping the ones we already have in top shape. I think, first, figuring out how you learn best is the first step, and it can be different for everyone. Personally, I like the ‘see one, do one’ method. I find I absorb more when I get to see the process someone else goes through to solve a problem and then tackle that same problem or something similar myself and fix things as needed. Videos, interactive tutorials and live (online) instruction have worked best for me. I love a good visual. Here are some free resources I’ve found helpful along the way.

1) Free Code Camp- I think this one is on everyone’s list and it’s easy to see why. I mean they say it right on their site- learn to code for free, build projects, earn certifications. Their structured lessons are great and you can most likely find an article (or 10) about whatever topic you’re trying to learn more about. (My current search is React Hooks- feel free to suggest articles/tutorials on this topic, thanks.)

2) Codecademy- another one that is usually on everyone’s list. They have a lot of free options- JavaScript, React, HTML, CSS, SQL, Ruby and more. It’s safe to say that you can find a free, beginner-friendly option that’s a fit. They also have a good variety of docs, cheatsheets and articles.

3) Codesmith- I can’t say enough good things about Codesmith! The instructors are all amazing, so knowledgeable and generally wonderful humans and their teaching style goes above and beyond. They have their own (FREE) online learning platform, CSX where you can learn the JS basics along with some more difficult concepts including Recursion and Closures. They also have weekly workshops that are interactive and their Slack community of friendly, helpful coders is just an added bonus.

4) LeetCode- they call themselves “the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews.” LeetCode has 2000+ practice questions which range in difficulty, so if you need to brush up on those data structures and algorithms, this is a good place to do it. They support a variety of different languages so you can practice in whichever you prefer. They also run contests where you can earn points, and their discussion boards are pretty good.

5) Codewars- is another great problem solving platform that supports 20+ languages and has challenges that vary in difficulty (which Codewars calls katas). You solve problems right in the browser and use their test cases. Solve a problem and then see how others in the community solved that same problem.

6) Edabit- this platform is fairly new, I believe. I discovered it about a year ago. As a super newbie, I was looking for something less intimidating than Codewars or LeetCode. Edabit answered the call. They boast 10,000+ interactive, “bite-sized” challenges. What I like most about them was after completing a problem they’ll ask you if you found it easy or challenging and based on your answer will give more problems at the same level if you had trouble or start advancing the difficulty if you breezed through the previous problem. I would call them very beginner friendly.

7) Code Signal- this one was suggested to me by a bootcamp instructor, so of course I needed to check it out. The Code Signal platform is “skills-based assessment platform.” They also have a good practice section that is set up like a game. You practice in the Arcade, get points but solving challenges, can use your points to unlock other features, and it shows you a grid much like Github that lights up your activity to motivate you! There is also a section to help prepare for technical interviews with commonly asked data structure and algorithm questions.

These are just a few of the many resources that are available for brushing up on interview skills, practicing problem solving and full-on tutorials for learning new skills. Please let me know what other resources I should check out, I’m always looking for new ones to add to my arsenal. Thanks for reading!