teleren/devto huggingface dataset:
JavaScript Local Storage Introduction
Tags: javascript, tutorial, beginners, webdev
Published: 2020-01-04 19:58:03

---
title: JavaScript Local Storage Introduction
published: true
description: Intro on how to use JavaScript's window.localStorage and how to setItem and getItem from Local Storage
tags: javascript, tutorial, beginners, webdev
canonical_url: https://codebushi.com/javascript-local-storage-intro
---

Introduction on how to use JavaScript's window.localStorage by creating a Dark Theme toggle for a simple site. We take a look at how to setItem and getItem from Local Storage.

{% youtube 8jAAaR26oPk %}

Key Takeaways:

6:42 - localStorage.setItem() takes two arguments, the first is the Key and the second is the Value. Both Key and Value must be a string. You can see these stored values in the browser's dev tools, under the Application tab.

9:10 - To read from local storage, we use localStorage.getItem() and pass it the original Key that was stored. You will get back the string that was stored with the Key.

11:18 - When reading from local storage, it's a good idea to check if something was returned first, and then proceed with your code.

12:50 - If you're using local storage with React, you can store a React state object. You must first JSON.stringify() the object you want to store, since local storage only works with strings.

14:35 - When reading from local storage, and getting a JSON string, you need to JSON.parse() the Value and turn it back into an object.

15:50 - To use with React, one way is to setItem right after you perform a this.setState(), and you would stringify the object as you pass it into localStorage.setItem(). You can then getItem when you do a componentDidMount and this.setState() to retrieve your React state object from local storage.

If you liked this video, please support it by [subscribing to the channel!](https://www.youtube.com/channel/UCS6lPt9btmTG3GkU82ELygA)

You can also visit [Code Bushi](https://codebushi.com) for more resources on Web Development!
What makes a site JAMstack?
Tags: jamstack, jamuary
Published: 2020-01-04 19:10:30

You may notice that the JAMstack isn’t really a new concept. Developers have been building static sites that leaned on JavaScript for decades. So what differentiates a JAMstack site from a traditional static one? For starters, the JAMstack is a methodology rather than an outcome. You could say that a JAMstack site is a static site but a static site is not necessarily a JAMstack one. To understand this distinction, it’s worth examining the build process of a JAMstack site as opposed to a strictly static one. 

A JAMstack site is characterized by content living in a git repo alongside code and templates. This allows them to follow a generate-deploy cycle where a site is rebuilt each time a content or code change is made. Because of the git based workflow, every change is a valid commit to git and by extension deploys are immutable. The ability to revert is a key distinguishing factor of the JAMstack. In the past, it was commonplace to deploy sites via FTP, which meant your server and files within it were mutated with each new deploy. Mutable deploys present a host of challenges. These include ever changing and unpredictable server environments and issues with invalid caches. JAMstack sites do away with this by taking advantage the ability for modern CDNs to invalidate your cache completely.

Though JAMstack sites generally include JavaScript, API and prebuilt markup, a site doesn’t need to have every one of these elements to be considered JAMstack. The JAMstack is a direct response to the growing complexities of building for the web and strives for a return to simplicity. It does this by taking advantage of modern build tools, developments in the CDN space (hello edge compute) and a growing API ecosystem to outsource complex functionality. The JAMstack is effectively a movement away from servers. A site can therefore be considered JAMstacks when this architecture is embraced and browsers are given free rein to run the show. 

For more on what makes a site "JAMstack", check out [the comprehensive guide to the JAMstack published by O'Reilly Media](https://www.netlify.com/oreilly-jamstack/?utm_source=devto&utm_medium=jamstackbook-div&utm_campaign=devex)
Week 12 at Flatiron School Bootcamp
Tags: beginners, career, discuss, devops
Published: 2020-01-04 19:09:58

I haven't really talked about my experiences thus far going through a coding Bootcamp so I wanted to go ahead and do that as I'm preparing to get ready for my 3-week long project. If you haven't heard about or don't know what a coding bootcamp is, it's basically a school that focuses on showing others over a short period of time (in my instance, that would be 15 weeks) on specific subjects and getting them ready to work in that field. Typically these fields are either web development, software engineering, data science, UX/UI design, and more recently,  cybersecurity. If that's something that interests you, I would definitely recommend seeing if there are any near you and talking to them directly to get a better idea of what you're looking for. I'd also be happy to answer any questions you may have!

Alright, back to the topic at hand.

Starting at Flatiron was a pretty big decision for me, because it's basically my last chance without having to worry about financial hardships. For some, it might not be the case, but I'm relying heavily on this program to be able to get a job in the near future. So because of this, I'm doing all that I can to learn as much as possible. In all honesty, it has been rather challenging to sometimes keep up with the material but I've been fortunate enough to be surrounded by like-minded individuals who are there for me when I need them. That includes both my friends at the program as well as the coaches.
As far as what we have been taught, I rather like the languages that were chosen because they're simple to understand but complex enough to be able to do what you want with them. Those languages were Ruby and Javascript. We were also taught how to use different frameworks for each. in Ruby, we used Rails. in Javascript, we Used Node.js and React. Overall, I would say that I've really enjoyed the time that I've spent here with everyone.

When it came down to project week for each module, I was always excited but at the same time stressed because I could never come up a an idea that I felt I really wanted to do. Eventually I had help along the way and decided on what to do.

One thing I will tell someone if they're new at deciding on projects with a time-crunch, make sure to scope your project properly. I didn't do this properly in my projects if I'm being honest because I was too hopeful that I could everything within the time (best not to do this haha). It can definitely help to ask others for opinions and maybe someone who's already done previous projects to give you an idea of what's possible and what isn't.
Centering in modern CSS
Tags: css, webdev, layout
Published: 2020-01-04 18:33:17

Centering stuff in a layout sounds like a usual thing. Everyone does it in designs, sketches or even Word documents.

But for the web it was complicated for years to centering content or HTML elements - especially in vertical direction.

## The good ol' time

You could use things like `display: table` or later positioning + `transform: translate()`. It works! But explaining that behavior to new developers was always a bit uncomfortable. Because the newbie and the teacher both got that feeling:

> "There must be a better solution!"

Well, it is!

## modern CSS

In the CSS-era of `flexbox` and `grid` both display types offer an easy solution to this one big question: 

```css
.container-element {
  display: grid; // or flex!
  align-items: center;
  justify-content: center;
}
```

What ever element will but put inside that container, it will be centered. In both directions! 

In addition there are two more benefits:

1. No fix values, means: **responsive by default**!
2. Not only centering child elements but also **centering the pure text content** of the container

### a short demo using both:

{% codepen https://codepen.io/mreis/pen/WNbXPeB default-tab=css,result %}

Codepen: https://codepen.io/mreis/pen/WNbXPeB
Project Euler - Problem 2 - Even Fibonacci Numbers
Tags: projecteuler, javascript, challenge, discuss
Published: 2020-01-04 17:59:53

## The problem
This is [problem 2](https://projecteuler.net/problem=2) from the [Project Euler](https://projecteuler.net/).

> Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:

> 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

> By considering the terms in the Fibonacci sequence that do not exceed the nth term, find the sum of the even-valued terms.

---
## Let's begin

Initialise variables and common functions:
```
var test_values = [10, 18, 23, 43]; // list of numbers we wanna test

// this function execute the code and records the time to execute
function run_function(func, test_values) {
  for(var i in test_values){
    console.log('Test value:', test_values[i]);
    var t0 = performance.now();
    console.log('Output:', func(test_values[i]));
    var t1 = performance.now();
    console.log("Took " + (t1 - t0) + " milliseconds.");
    console.log();
  }
}
```

## Attempt #1: recursive functions
The recursive way... 
```
function fiboEvenSum(n) {
  var fib_nums = [1, 2];
  fib_nums = add(n, fib_nums);
  var sum = 0;
  for(var i in fib_nums){
    if(fib_nums[i]%2===0){
      sum = sum + fib_nums[i]
    }
  }
  return sum;
}

function add(n, fib_nums){
  var c = fib_nums[fib_nums.length-1] + fib_nums[fib_nums.length-2];
  fib_nums.push(c);
  if(fib_nums.length<n){
    return add(n, fib_nums);
  }else{
    return fib_nums;
  }
}

run_function(fiboEvenSum, test_values);
```

The output:
```
Test value: 10
Output: 44
Took 0.13000000035390258 milliseconds.

Test value: 18
Output: 3382
Took 0.05999999848427251 milliseconds.

Test value: 23
Output: 60696
Took 0.1049999991664663 milliseconds.

Test value: 43
Output: 350704366
Took 0.08000000525498763 milliseconds.
```

---

Here's my solution, can it be any better?

This is my [Project Euler Challenge](https://projecteuler.net/) journey; anyone wants to do this together? It will be fun and we can learn a thing or two by solving this problem in different ways.
Integrating GitLab CI/CD, Flask, and Heroku
Tags: gitlab, cicd, flask, heroku
Published: 2020-01-04 17:40:21

This tutorial assumes you already have a working flask application within a virtual environment and have your code hosted on GitLab. Also ensure you have Gunicorn installed. You can install it from `pip install gunicorn`.

## Getting Ready

Run `pip freeze > requirements.txt` to grab all the requirements for running your application.

Create a `Procfile` file. Inside, place the following code `web: gunicorn <name of the app.py file>:<app-name>` where app-name is usually “app”.

Push everything to GitLab.

## Connecting Everything

Create a new Heroku application. Using a short name will make later steps easier.

Create a new file in your app root called `.gitlab-ci.yaml`.

Here is a cookie-cutter example of a GitLab CI/CD config:
```yaml
[app.py file name]:
    script:
        — apt-get update -qy
        — apt-get install -y python-dev python-pip
        — pip install -r requirements.txt
 
production:
    type: deploy
    script:
        — apt-get update -qy
        — apt-get install -y ruby-dev
        — gem install dpl
        — dpl — provider=heroku — app=[Heroku App Name] — api-key=$HEROKU_SECRET_KEY
    only:
        — master
 ```

 Now swap out `[app.py file name]` with your file name and `[Heroku App Name]` with the name of your Heroku app.

 To set the HEROKU_SECRET_KEY,
 * Get your Heroku API key from https://dashboard.heroku.com/account. 

 * Within GitLab, go to **Settings → CI / CD → Secret variables**.
 
 * Create a new variable and set the **Variable key** to **HEROKU_SECRET_KEY** and the **Variable Value** to your **Heroku API Key**.

 * Set the protected switch to **ON**.

Push the changes to GitLab.

## Conclusion

Now that everything is all setup, head over to your Heroku app URL and enjoy the fruits of your labour.
The Collab Lab Week 3 - Friday
Tags: collablab
Published: 2020-01-04 09:14:22

Today was another day of not coding but I got some practice in communicating on a distributed team. My pair's pull request for this week's story was reviewed and approved by the other team members and our product owner, Andrew.

There were a lot of slack messages and GitHub comments made today.
{% twitter 1213323002743386112 %}
I feel like I'm majorly leveling up in collaboration skills through this Collab Lab experience. In my coding school, we practiced the mechanics of pull reviews and teamwork, but in my opinion there wasn't enough guidance or oversight in build weeks to create good habits around these things.

Pull reviews were created daily but there wasn't a conversation about them. It was just the way you submitted that day's work. 

Today we had to think about conflicts that can arise that aren't just based on code existing on the same line. It feels like a continuation of the lesson I learned last week. This work is nuanced. Fulfilling the acceptance criteria to the letter without considering the overall goal of the story is not the goal. 

We're working asynchronously and separately on *one* project. If the work of one pair builds on the work of the other it might take a few extra check-ins to make sure we are all on the same page and doing compatible work.

As I referenced in the above tweet, the text-only communication today was starting to feel like it could be misinterpreted for tone or emotions. Mike and I were talking on Slack about how to handle the pull request review. Just a few minutes of face-to-face talking over Zoom cleared the air. Neither of us were angry or upset in any way but I could see how our Slack conversation could be interpreted as tense.

I'm still having a great time and glad to be working through these things in a low-stakes environment. The next time a similar situation comes up, I'll have experience to draw from. I'll have tools in my toolbox to reach for.
How to be a better coder ?
Tags: beginners, codequality, codenewbie
Published: 2020-01-04 17:32:40

When I first start coding, I found it easy and thought that we can get from the google and coding so easy. But within time I understand that my this idea was flop. So I try to make myself better coder and started to learn many things also started working on my other skills too. Now I know properly why I do coding. Are you aware that why you are coding ? First find your “Why”. That is really important. Today I’m going share some tips how you can be a better coder. Have a look –

- Don’t memorize, understand the logic and flow.
- Read documentations, because they know the best. But sometimes, official documentations are not good, so use some tutorial or blogs to understand.
- Stop watching so many tutorial, just work on code.
- Try to refactor the code you already wrote.
- Stop comparing yourself with others, your solution can be different from other but try to achieve the best performance or quality code.
- Stop overthinking to solve a problem. First use some baby step and finally make it better with taking time.
- Organize your folder properly so you can work with a team easily.
- Try to naming variables or function properly

There are so many other tips also. But I just wanted to keep it simple and short. Long articles are pain sometimes right ? I have the same feelings while I read too. Do you get now what you should do ?

You can see the graphical version here
{% instagram B658zuAgDDi %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/how-to-be-a-better-coder/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
AskDEV: What are your predictions for software development for the 2020 decade?
Tags: discuss, programming, development
Published: 2020-01-04 17:32:22

With the end of 2019 closing the 2010 decade, it's time to think about the future decade: 2020. A lot has changed for me in my development career in the past 10 years, or even the past 5 years. Now I am looking forward, and I am excited about the years to come.

#### What are your top predictions for the next 10 years in the field of software development?

I find it super exciting to think about the possibilities, maybe also wishes, and what of all them could become true. Also, it's very interesting to look back when we are in 2030 and find out which predictions actually became true.

---

## My Predictions

#### Programming Languages

In the next years, typed languages will continue to raise and take over where non-type languages are currently the standard. It becomes more and more clear, that types make a language more stable and squash bugs before running the code for the first time. Typescript, for instance, will become the status quo for JavaScript programming.  
Many old languages will die, with newer languages like Go and Rust taking over the fields. Python becomes the most important language worldwide.

#### Writing Code

AI-powered tools will not replace the humble programmer, but assist him with writing code. The tools are available in your IDE and suggest common solutions for your problems. Also, static analysis and similar tools will become even more powerful with the help of AI.

#### Containerization

Docker was basically the big thing in the 2010 decade. It changed my development workflow completely. Usage of container products like Docker and Kubernetes will continue to raise and become the new standard for software development instead of locally installed tools on the developers machine.  
I can imagine a new powerful competitor will raise to replace the current solutions.

#### Web Hosting

Website builders like Wix and Squarespace, and containerization with Docker will replace shared hosting. Admin panels like Plesk and cPanel will become niche products. People build their own websites with said tools, or buy virtual servers with Wordpress or other tools pre-installed, instead of using shared hosting.  
VPS, or servers in general, will become even cheaper. Servers like the now standard $5 droplet from Digitalocean will cost not more than $1 by the end of the decade.  
Hopefully, hosting with data centers powered by renewable resources will become the standard.

---

That's it. If you are interested in more predictions like the internet in general or gaming, visit my [blog post](https://blog.kovah.de/en/2020/predictions-for-2020-decade/).
How did you kickstart your career?
Tags: discuss
Published: 2020-01-04 17:16:26

---
title: How did you kickstart your career?
published: true
description: 
tags: #discuss
---
Hello fellow devs, I come to you in time of a great need.
I have no idea how to start my career, I took my cs degree, I love what I'm doing but I feel like I'm running around like a headless chicken.
It's hard to get to interviews without experience, also working on my personal projects is really fun but it doesn't pay the bills.
I know I sound like I'm just making excuses and probably I am, but I'm wondering how you guys got your first job?
Team Section Using Materialize CSS
Tags: css, materialize, tutorial, html
Published: 2020-01-04 16:39:03



Team section main section to show your mini-bio with a short intro. So here we designed the Simple team section using Materialize CSS with some basic CSS3 properties.

We have some elements in materialize CSS with awsome materialize framework classes. So we design team sections using a grid with card classes and also utility classes of this framework. Here we used font awesome icons to show social icons under buttons and also we used hover classes to make our element hoverable. To make this team section fully responsive we used media queries to the side of a particular screen. 

Make it yours now by using it, downloading it and please share it. we will design more elements for you.
 

https://w3hubs.com/team-section-using-materialize-css/
Pulling the first Docker image and a few essential commands.
Tags: docker, beginners, node, javascript
Published: 2020-01-04 15:52:22

Today we will pull our first **docker** image and take a look at a few essential **docker** commands you need to know to get moving in this journey of **docker**.

Before we start, you should check out the previous post of this series if you are not familiar with **docker**, and it's the installation process.

`Hello World` is our favorite message when it comes to getting started with something. Isn't it?

So today, we will pull `Hello World` docker image from [Docker Hub](https://hub.docker.com/) and run it. But first things first, What Docker Hub is?

Well, Docker Hub is a collection of Docker images either created by organizations (ex: nodejs, MongoDB, oracle) or by individual developers. Images on Docker Hub are ready to use images. Someone already configured them for you. You need to pull or download them to use.

## Pull Command

Pull command downloads the docker image from the docker hub. That's it.

```
$ docker pull hello-world
```

## Run Command

Run command used to run docker images that are pulled from the docker hub or build on the local machine. One more thing `Run` command first looks for images to run locally, and if it doesn't find the image, it will **automatically** pulls the image for you. So in case you are a bit lazy to pull and run an image. Just type the run command, and it will help you.

```
$ docker run hello-world
```
You will see something like this if you successfully ran the command.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/63ydisd4lzgj8g89xbur.png)

## Few more basic commands you need to know.

`version` command used to check the version of the docker.

```
$ docker version
```

`info` command gives you current status like the number of the running containers, paused, stopped, and all other things.

```
$ docker info
```

`ps` command will specifically tell you the information about running containers like container id, name, port, status, etc.

```
$ docker ps
```

`-all` flag will show you information about all containers.

```
$ docker ps -all
```


`start` command will start previously ran container again. Don't confuse between `run` and `start.` Run command used to run a new container.

```
$ docker start <process>
```

`stop` command will stop the running container as soon as a container finished its process.

```
$ docker stop <process>
```

`kill` command will stop the container immediately, no matter if it finished its process or not.

```
$ docker kill <process>
```

Now docker has a whole lot of commands that we will learn in the future, but I think these are the essential ones. I hope this will help you. I will back with other things about docker until then, Bye.

![bye](https://media.giphy.com/media/13vWYXWR1yQeFW/giphy.gif)
How to bundle mutiple JS and CSS files into single bundle ?
Tags: help, javascript, webpack, webdev
Published: 2020-01-04 15:44:46

In a static website, I want to serve single `JS` and `CSS` file instead of making multiple `HTTP` requests.

**1. Lets say I have 3 `JS` file as below:**


    jquery.js
    bootstrap.js
    blog.js

I want to bundle into one bundle `home.bundle.js` and it should bundled in correct order.

**2. Lets say I have 3 `CSS` file as below:**


    font-awesome.css
    bootstrap.css
    style.css

I want to bundle into one bundle `home.bundle.css` and it should be bundled in correct order.

For many hours I have tried this using `webpack` and `parceljs` but ran into many issues.

- `webpack` is not bundling in order , some plugins are deprecated.
- `parceljs` is adding some extra `require` `JS` code in the bundle and gives runtime error in console.

Any simple way to do this ?

Any help will be appreciated.