teleren/devto huggingface dataset:
Working with Arrays in JavaScript for beginners - Removing values 
Tags: javascript, arrays, beginners
Published: 2020-06-25 13:47:33

I recently finished (May 2020) the coding bootcamp I started back in October 2019. Now I am going back through materials to make sure I understand the fundamentals. I will be showing you a couple ways to remove values from arrays. Here is my attempt to show you how to work with basic arrays. 

<em>Note: I recently wrote another blog post on how to add values to arrays you can check that out here: [Working with Arrays in JavaScript for beginners - Adding values](https://dev.to/joelynn94/working-with-arrays-in-javascript-1jfi)</em>

# Removing array values
Let's start by creating an array with a couple values.

```javascript
let newArray = ['Hello', 'World'];
```

## Removing array values from the beginning (basic)
The easiest way to remove an item from the beginning of an array is to use the shift method. 

```javascript
// REMEMBER: arrays index start at 0 - so index[0] is the first value

// here we are removing 'Hello" from the first index [0] - using the shift method
newArray.shift()

console.log(newArray);
// Our results? The newArray now looks like this
[ 'World' ]
```

## Removing values from the end of an array (basic)
The pop method allows you to remove (pop) values from an array. 

```javascript
// going back to our original array
let newArray = ['Hello', 'World'];
// using the pop method - we are removing the last item from the array (which is index[1] in this case)
newArray.pop();

console.log(newArray);
// now the array looks like this - 'World' was removed
[ 'Hello' ]
```

## Removing values using splice
The splice method can be used for adding, removing or replacing values from an array. Using this method is a little more difficult than the last ones I have shown you.

First you need to indicate the index you want to make changes at. In our case I start at index 2. Then you indicate how many elements you want to delete from that index.

```javascript
// starting values 
let newArray = ['Hello', 'World', 'New', 'Values'];

// now say we want to remove the word 'New' from this array
// we need the index of the value we want to remove (which is index[2] in this case)
// then we need to specify how many elements we want to remove 
// let's remove 1 value right now
newArray.splice(2, 1);
console.log(newArray);
// the results are 
['Hello', 'World', 'Values']

```

IMPORTANT NOTE

```javascript
// by default if you do not provide both arguments to splice, 
// the value at the index you specified and everything that comes after that - will get deleted 
newArray.splice(2);

// that will delete the value at index 2 and everything after index 2
console.log(newArray);
['Hello', 'World']

```

Let's remove multiple values

```javascript
// starting values 
let newArray = ['Hello', 'World', 'New', 'Values'];

// now say we want to remove the word 'World' from this array and everything that comes after that 
newArray.splice(1, 3);
console.log(newArray);
// the results are 
['Hello']
```

And that's it. This was a demonstration on basic ways to remove values from arrays. 

Thanks for reading!
Learn About JavaScript Sets
Published: 2020-06-25 13:36:54

Sets were introduced in the ES6 update to JavaScript.
Sets in JavaScript are a data type which I've recently learned about and became interested in learning more about its uses. A set is a collection of unique values. Unlike an array, it cannot contain duplicate values. Sets can hold primitive data types and objects.

<h4>Creating a Set</h4>

You can create an empty set using a constructor like so -  

`const firstSet = new Set()`

A new set can also be created out of an array, or an iterable. An iterable is something that can be looped through, and in this case we're using an array. Strings are also iterable.

```
const secondSet = new Set([1, 2, 3, 4, 5, 5])
```

The array used to create secondSet has duplicates of 5. Let's log secondSet to the console and set what we get. 

```
console.log(secondSet)
//Output will be Set {1, 2, 3, 4, 5}
```

As you can see, secondSet only has one value of 5, despite being passed in an array with duplicate values. 
If you ever only want the unique values in an array, pass it in as an argument when creating a new set. 

<h4>.add() Method</h4>

Use the .add() method to add new, unique values to a set. The .add() method will return the set containing the new value. 

```
const colorSet = new Set()

colorSet.add('red')
//returns Set {"red"}
```

The .add() method can also be chained to other methods including itself.

```
colorSet.add('blue')
        .add('yellow')
        .add('green')

//returns Set {"red", "blue", "yellow", "green"}
```

<h4>.has() Method</h4>

The .has() method will return a boolean dependent upon whether or not the element passed in exists as a value in a set.

```
colorSet.has('blue')
//returns true

colorSet.has('orange')
//returns false
```


<h4>.delete() Method</h4>

The .delete() method will remove a specified element from the set and return a boolean dependent upon if the element was successfully removed. Our colorSet currently has 'green' in it. We'll remove it from colorSet so it only contains primary colors.

```
colorSet.delete('green')
//returns true
```

If the .delete() method is unsuccessful, it will return false.

```
colorSet.delete('orange')
//returns false
```
There was no 'orange' value in the colorSet, which is why .delete() returned false. 

<h4>Create an Array from a Set</h4>

We went over how to create a set from an array, but it is also possible to create an array from a set using the Array.from() method. 

```
const colorArray = Array.from(colorSet)

console.log(colorArray)
//Output is ["red", "blue", "yellow"]
```



There is much more to the set datatype. Read up on the documentation [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).

Check out these links as well.

-[Set tutorial](https://www.javascripttutorial.net/es6/javascript-set/)
-[Set vs Array](https://medium.com/front-end-weekly/es6-set-vs-array-what-and-when-efc055655e1a)
-[Another article on set vs array](https://medium.com/better-programming/javascript-sets-vs-arrays-25337bea7939)
How to build jdbc url to Google SQL instance?
Tags: googlecloud, database, java, sql
Published: 2020-06-25 13:36:44

I find it pretty tricky and not transparent on how to build JDBC URL to Google SQL Database instance.

Postgresql example placeholder:
```
jdbc:postgresql:///{database_name}?socketFactory=com.google.cloud.sql.postgres.SocketFactory&cloudSqlInstance={connection_name}:{instance_id}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/60d444106v8lc6yozaha.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dpvknt8883vooxub8ax9.png)

You can find drivers at [github](https://github.com/GoogleCloudPlatform/cloud-sql-jdbc-socket-factory/releases) to setup connection

Hope it helps!
Platform or headless CMS for image heavy site?
Tags: cms, serverless, headlesscms, gridsome
Published: 2020-06-25 13:31:04

---
title: Platform or headless CMS for image heavy site?
published: true
tags: [ "cms", "serverless", "headlesscms", "gridsome" ]
---

I'm an amateur web developer (most of my dev activity is either native software or SPAs) and want to build a couple of image heavy custom portfolio websites. I'd prefer to use Vue and Gridsome/Nuxt static as a site base.

So, there comes a problem: most of the solutions for headless CMS or CMS as a service lack ways to work with multiple heavy images (and noone will wish to ask user to resize their 20+ MP DSLR images by hand). When we talk about using git-based CMS like amazing [Forestry](https://forestry.io/) or [Netlify CMS](https://www.netlifycms.org/) there is little one could do about using a lot of images with auto resizing and stuff since Github has heavy limits on both Git LFS payload and traffic and Gitlab is being much more liberal in that things but still lacks Git LFS support in API for private repos.

Is there any alternatives? Contentful? Self-hosted strapi or Ghost? Forget about using SSG and just use Wordpress or even ready made platform like Squarespace/Tilda?

Share your experience. Thanks!
If you use iTerm with Big Sur
Tags: macos, iterm, bigsur, support
Published: 2020-06-25 13:27:23

A friendly warning to those who have opted to try the Big Sur beta and are using iTerm. I kept running into an issue where the terminal would freeze up and could only be recovered with a full system restart. It's seems I'm not alone and you can find details and a workaround here:

[iterm2 issue #8965](https://gitlab.com/gnachman/iterm2/-/issues/8965)

**In short the workaround is**:
> Disabling Enable session restoration under Preferences > Advanced > Session

Hope this saves anyone some time 😅
Write clean CSS code: An introduction to BEM
Tags: css, bem, webdev, beginners
Published: 2020-06-25 13:26:59

## The Problem
It is easy to start working with CSS on a small project but as soon as your project starts getting bigger your CSS starts to look messy and maintaining it becomes a huge problem. To solve this problem we use different methodologies like Atomic, OOCSS, SMACSS, BEM, and more from which we will be discussing BEM in this blog.

## What is BEM?
BEM stands for **B**Lock **E**lement **M**odifier which is a naming convention (a set of rules we follow to name things and here the thing is class names) which helps to write efficient and organized CSS code by making it easier to read, understand and scale.

A classname is BEM follows the following syntax:
```css
.block__element--modifier
```

Some examples of class names using BEM would be:
```css
* .card {}
* .card__title {}
* .card__button--primary {}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yc0hv58in4eyxjj7qlcg.png)


A class name in BEM is made up of 3 parts:
## 1. Block
It is a top-level component that acts like a parent and can exist independently on the page like in the above example **.card** is a block. Some more examples can be header, navbar, footer etc. A BEM class name always starts with a block like:
```css
.block {}
```

## 2. Element
An element is a part of a block and cannot exist independently which means if we remove the block then there will be no meaning left of the element. The element name is connected with the block using two underscores like :
```css
.block__element {}
```
In the above card component example `__image`, `__title` , `__description` and `__button` are all elements connected with the `.card` block. 

## 3. Modifier 
A modifier acts like a flag that we can use on our blocks or elements to create a different version of them or to differentiate them with their regular version. The modifier name is connected with the block or element like :

```css
.block--modifier {}
.block__element--modifier {}
```

In our above example, we have the `--primary`  and `--secondary` modifiers which are being used to differentiate between a primary button and a secondary button.


## Benefits
* It provides a great structure to your CSS code which makes the code easy to read and understand. 
* As BEM has a unique style to create CSS class names, we won't run into conflicts with other class names. 
* BEM follows a modular approach that helps to create independent components that can easily be reused in the same project or can also be be used in another project.

## Conclusion 
In the end, I would highly recommend using BEM for your next project. At the start, it might feel like a lot of extra work to use such big class names for your CSS but all this extra work will definitely help you a lot as your project gets bigger and your future self will thank you for all the extra work you did.
The Secret to Getting Literally Anything Done
Tags: womenintech, devjournal, codenewbie
Published: 2020-06-25 13:20:34

_This post was originally published on June 25, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

The secret to get anything done during your day is to break it up into individual parts and do them one by one.

This doesn't have to be done officially on, like, paper. Rather, you should get into the habit of breaking things down into parts on literally anything that makes you instinctively think 'Ugh, that seems like a lot...I'm going to busy myself with something else in the meantime to put off having to get started on that...'

While this is mostly having to do with coding problems that seem insurmountable (breaking down into smaller parts and then tackling them one by one), you can use it on anything during your day to get yourself into the habit of seeing a biggish issue and not having your first subconscious inclination be to shy away and procrastinate.

For example, today I was responsible for being the sou-chef to Arthur's pizza-making for lunch and when faced with all the veggies to be chopped, my first thought was 'Ugh, this is a lot...', but immediately after, I just compartmentalized each step in my brain, grabbed my first stick of squash and got chop, chop, choppin'.

Use it for anything. Cooking, getting ready in the morning when you just want to scroll Instagram for Five More Minutes™, getting motivated to get to the gym, etc.

Break it all down mentally so that your brain has something concrete to attack.

And then, just get to chop, chop, choppin'.


Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. I'm on the cusp of launching a brand-new podcast! Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)
Review: Learn Git Branching [2020] learngitbranching.js
Tags: review, git, branch, tech
Published: 2020-06-25 13:18:26

Today I'm reviewing the course: learn git branching, it's free and you can find it also on GitHub.

- Check the course [here](https://learngitbranching.js.org) and watch my full review on the video.
- Hint: I totally recommend it. 
- Feel free to check this [PLAYLIST](https://www.youtube.com/playlist?list=PLxktx98zP3aAylA3it3TYyF7x6lDhc0qi) where I REVIEW tech courses. 


************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elefintech)
Building my first Django project with CSS and Static Files
Tags: python, django, css
Published: 2020-06-25 13:14:11

I'm working through [Django for Beginners by William S. Vincent](https://djangoforbeginners.com/). Until now we've had some pretty barebones Times New Roman style UI, however that's all about to change! I think.

I'm really appreciating this incremental iteration of concepts in each new Chapter. Each time I start a new app for the chapter it's engraining the muscle memory and concept recall into me. I'm able to run through the first 5 lines of code at the CLI nearly from memory. It's also a great mechanism to help you if you get stuck on a wierd error and don't know what to do. You know the next chapter will have a clean slate. Great idea William.

The repetition isn't just the set-up though.

> “Now we can add the functionality for individual blog pages. How do we do that? We need to create a new view, url, and template. I hope you’re noticing a pattern in development with Django now!”

I sure am. 

I'm glad that the book also doesn't go into non-django areas, but still points readers to places to look for more info. The last chapter pointed me towards some resources to understand more about databases, and this one does similar with CSS.

It was interesting to see that the approach used to identify a blog post for navigation in the URL patterns looked _kinda_ regex-ish:

```py
urlpatterns = [
    path('post/<int:pk>/', BlogDetailView.as_view(), name='post_detail'),
    path('', BlogListView.as_view(), name='home'),
]
```

`<int:pk>` is the part that identifies the blog post required for the url to link from the ListView to the DetailView. It was interesting to find out there was something like a unique identifier for each post baked into it in the background. I was wondering about how this primary key is treated in bigger projects. Is it common to keep this approach of integer ordered primary keys, or do they get replaced in larger, more complex projects with hashes or other unique ids?
API & Data connection in UI Bakery low-code platform – Webinar
Tags: tutorial, webdev, lowcode, nocode
Published: 2020-06-25 13:10:57

Hello all!
Let me invite you to the webinar on Data/API connection that will be held on June 30 (Tuesday), at 7pm CET, 1pm EST.

Come and learn how to easily and quickly get a fully-functional web app with a stunning UI and connected data and APIs – without leaving UI Bakery low-code platform.

Get the details & sign up for the webinar: https://hubs.ly/H0rVctm0
Answering questions about the UDACITY Artificial Intelligence Product Manager Nanodegree Certification  👩🏾‍🎓🥳
Tags: udacity, aiproductmanager, nanodegree
Published: 2020-06-25 13:10:04

---
title: Answering questions about the UDACITY Artificial Intelligence Product Manager Nanodegree Certification  👩🏾‍🎓🥳
published: true
description: Got so many questions about this Udacity certification so here are all the answers. Hope it helps you reach your learning goals.
tags: Udacity, AIProductManager, Nanodegree
---
<p> I originally posted this on my <a href = "https://www.youtube.com/lornamaria"> youtube channel </a> thus all the opening theatrics.</p>
rhuffle: Line shuffler for huge text file which does not fit in memory
Tags: rust, datascience, machinelearning
Published: 2020-06-25 11:42:27

In some machine learning tasks (e.g. stochastic gradient descent), data is often shuffled before training. Sometimes data size can be huge, from 10GB to 100GB in size. Shuffling data in your laptop may require a lot of RAM, having a negative performance impact for your overall tasks.

Here I introduce a CLI tool resolving this issue:

### rhuffle

**[rhuffle](https://github.com/ctylim/rhuffle)** is a line shuffler for large text files, which works with limited memory.

![rhuffle_demo](https://dev-to-uploads.s3.amazonaws.com/i/2myr08dva7r41p70ifpd.gif)

**rhuffle** works very fast, and supports skipping head line mainly for CSV/TSV formatted files.
**rhuffle** uses `TEMPDIR` for storing temporal files, reducing RAM usage (`TEMPDIR` and available RAM size are both configurable).

### Installation

This CLI tool is written in Rust, you need to install [Rust](https://www.rust-lang.org/tools/install) first.

After running this,
```
$ cargo install rhuffle
```
we can use `rhuffle`.

Feedbacks and proposals are welcome in https://github.com/ctylim/rhuffle/issues.
[Question] Which MacBook Pro?
Tags: question, macbookpro, apple
Published: 2020-06-25 13:08:51

---
title: [Question] Which MacBook Pro?
published: true
description: Which MacBook Pro to buy in mid 2020
tags: question,macbookpro,apple
cover_image: https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1226&q=80
---

I want to get a MacBook Pro and i cant decide which one.
I need it mainly for Web Development.

The 16 inch is a beast but could be too much for my needs.
The new 2020 13 inch (10 Gen Model) is quite nice but i dont know if the screen size is too small.

I would use it as my new main workstation and also for working on the couch or balcony for example (where the size is important). Also i heared from some reviews that the 13 inch get quite hot when plugged into external displays.

I know that apple just announced ARM Macs for the future but its unclear when the MacBooks get this refresh. Could be end of this year or end of next year or later.

That are my thoughts. What you guys think? Thank you in advance for any comments and tips!
Send Gmail using POSTMAN
Tags: postman, api, discuss, webdev
Published: 2020-06-25 12:45:31

In Developer console google 
CreateCredentials -> Select Application Type -> Web Application -> Add redirect Uri(https://oauth.pstmn.io/v1/callback) and create the clients 

In Postman 
Token name  : Google OAuth token
Grant Type  : Authorization Code
Callback Url : https://oauth.pstmn.io/v1/callback
Authorize Using browser
Auth Url : https://accounts.google.com/o/oauth2/auth
Access Token URL : https://accounts.google.com/o/oauth2/token
Client ID  : *.apps.googleusercontent.com (Obtained from Creating Projects in developer console)
Client Secret : ****
Scope : https://www.googleapis.com/auth/gmail.send
Client Authentication: Send as Basic Auth header

Request Token will generate  a  new token with Mail send Access


Make Post Request to the following url
https://content.googleapis.com/gmail/v1/users/{mailaddress}@gmail.com/messages/send?alt=json&key={APIKEY}
{APIKEY} -> Generated in the Developer console

From: <test@gmail.com>
To: <test@gmail.com>
Subject: Test Email
Convert the following  text into base64 format

Embed the {base64String} to raw format 
{
    "raw": {base64String}
}

Press the send button in the Postman .Mail sent from gmail account.
Free, Scheduled Snapshots in DigitalOcean
Tags: server, data, backup, cloud
Published: 2020-06-25 12:43:09

DigitalOcean has been my favorite VPS hosting provider for over half a decade. Their implementation of spinning up server instances is as easy as it gets and takes merely seconds out of my ridiculous work-life. I try and take advantage of all the features they offer, including snapshots, backups, and third-party access. If you're curious as to the difference between snapshots and backups: snapshots can *only* be generated manually, while backups run automatically.

As of recently, I've commenced improvement of a digital bad habit: never seeming to have any time to generate snapshots of my droplets. DigitalOcean provides automated backups but for a small price of $1/month. It's a small price, but for those with smaller instances and budgets, you try to save money anywhere you can. This is where third-party access becomes useful. After some searching, I found BackupSheep.

BackupSheep provides backup services for multiple hosting providers. Scheduling snapshots using BackupSheep, *for free*, is the key. BackupSheep's free tier only allows for 1 backup schedule, but they don't limit features between the tiers. They provide a way for you to easily link your VPS host to their service. I actually prefer using BackupSheep as an alternative to DigitalOcean's native backups because of the flexibility and the amount of features they provide. You can store backups on your own storage (Bring-Your-Own-Storage): AWS, DropBox, Google Drive, etc. They provide timezone-aware schedules, compression of backups, 2FA, SSH access, etc. I began using them in 2018 and haven't experienced any issues.

If interested, please support my blog by using my referral links:
- BackupSheep: https://backupsheep.com/?r=355gaioj
- DigitalOcean: https://m.do.co/c/51758bf4d433