teleren/devto huggingface dataset:
Set in JavaScript - Part 2
Tags: javascript
Published: 2020-07-25 00:00:00

---
  title: Set in JavaScript - Part 2
  published: true
  tags: JavaScript
  date: Sat Jul 25 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-javascript-part-2
  cover_image: https://melvingeorge.me/_next/static/images/main-2199e7338e5a4f31a8fc1d59703ae46a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-javascript-part-2)
  
We have looked at the basics of Set in JavaScript including creating a new set, adding a new element, deleting an element, clearing all elements, and checking if an element is present in a set In the [last blog post](https://melvingeorge.me/blog/introduction-to-set-javascript).

Now let's look at more operations we can do with Set in JavaScript.

## Loop over Set in JavaScript

To loop over a Set collection we can use the `forEach()` method available in set or use a `for..of` statement.

```javascript
// arr
const arr = [1, 2, 3, 4];

// convert to set
const set = new Set(arr);

// loop over the new set
// using the forEach() method
set.forEach((element) => {
  console.log(element);
});

// loop over the new set
// using the for...of statement
for (let element of set) {
  console.log(element);
}
```

## Convert Set to an Array

To convert a Set collection into an Array we can use the `Array.from()` method or use the spread operator `...` .

```javascript
// arr
const arr = [1, 2, 3, 4];

// convert to set
const set = new Set(arr);

// using Array.from()
let arrFromSet = Array.from(set);

// using the spread operator
arrFromSet = [...set];

console.log(arrFromSet); // [1,2,3,4]
```

## Caveats with Set in JavaScript

- You can't pass an object when creating a set with `new Set()` constructor function as it accepts only iterable and since the `object` type is not iterable it will throw an error.

```javascript
// obj
const obj = {
  name: "John Doe",
};

// make a set from the object
const set = new Set(obj); // error
```

But you can pass an object after the creation of an empty Set using the `add()` method available in the set.

```javascript
// obj
const obj = {
  name: "John Doe",
};

// make an empty set
const set = new Set();

// add object to the set using the add() method
set.add(obj);

console.log(set);
```

### Feel free to share if you found this useful 😃.

---
Why I prefer Clicky to Google Analytics
Tags: angular, webdev, analytics, womenintech
Published: 2020-07-24 23:43:15

Before deploying my site live, I wanted to have some sort of basic analytics where I could see the following:
- Page views
- Online count
- Button/link clicks
 - Which social media link in footer was most popular
 - Which project was most popular
- A user journey i.e. in the time they were on the site what did they do (fits in with the above too)

By default I straight away started to setup Google Tag Manager and Google Analytics. I've 'worked' previously with both due to paired programming where the other developer had much more knowledge than me. I knew what data I wanted to collect and now was time to set it up. 

What I expected would be some brief research, turned into dozens of tabs being opened looking for a simple tutorial. I scrapped that idea and turned to research again to find an alternative because I wanted my site deployed ASAP so wanted something ideally quick to setup and easy/clear to understand.

# Clicky Web Analytics

It's worth mentioning that Clicky is **free** to use but also has paid plans. 
After some very brief research I came across a post where a user recommended using Clicky over GTA and GA after using it for his sites for over 10 years. So, that sounds good right? 10 years is a long time. 

# Quick setup

I created an account with https://clicky.com/ and setup a new website for my domain. From start (setup) to finish (seeing live stats) there was no need to look for external tutorials. 

I added the provided script tag into the index page page of my Angular project and then for each link I wanted to track i.e. social media and project, I added a bit of code.

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

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

Every time that link ^ gets clicked, I know about it. It's super interesting for me, as the developer of the site, to know which projects people are clicking on more than others, which pages are popular etc. It's amazing. 

I added a tag on my CV link in the menu purely out of interest to see if anyone would download it and if so how many times.

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

And one last screenshot regarding outgoing links. 

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

Clicky is super easy to use and I can find out the info I want to know fast. I will for sure keep using it and for future sites I do. 💃
Angular 9 and SEO - Setting up Meta Tags
Tags: webdev, angular, seo, womenintech
Published: 2020-07-24 23:32:00

Admittedly, I've not looked much into SEO previously but have been aware it can really boost your site stats. I'd say I have a very basic understanding of what it is. Before deploying my first site, I knew I had to do some research to ensure from a SEO perspective, at least, that it was good. This blog post illustrates how I've been able to setup meta tags with Angular 9 and with that I'm sure there are a lot of ways to do this, but this worked best for me and quickest.

# Approach
My approach was the following:
* Include meta tags in index.html apart from title and URL as these (in my case) change per page viewing
* Create service class with a method to update tags (title, URL)
* Call method

# Initial tags in index.html
There are **no** title and URL tags on this page, as they're both changed dynamically using the new service I created.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p9t422mcpkt8fu1smkg9.png)

# Create service
My first step was to create a new service ~/ClientApp/src/core/meta-data-service.ts and add the following code. In short, I have a single method that updates both titles and URLs in meta tags.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/367ybsejfrnxozd5710y.png)

# Call update method
Last step is to ensure the relevant components are extending from the new service class, that way we can call the method. For every page that isn't the homepage, I call the method like so:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56l1besj1lbgp845griw.png)

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

# Summary
How do I know if it's worked? I loaded up the site with the Elements window open in Chrome DevTools and as I change between pages I can see the initial tags there and also the title and URL tags changing retrospectively. 

I hope this has been useful and appreciate any feedback, thank you! 😀
VIDEO 🎥 MLOps tutorial: Intro to continuous integration for ML
Tags: githunt, devops, datascience, machinelearning
Published: 2020-07-24 23:26:03

{% youtube 9BgIDqAzfuA %}

Earlier this month, my team launched [CML](https;//cml.dev), our latest open-source project in the MLOps space. We think it's a step towards establishing powerful
DevOps practices (like continuous integration) as a regular fixture of machine learning and data science projects.

{% github iterative/cml %}

But there are plenty of challenges ahead, and a big one is _literacy_.

So many data scientists, like developers, are self-taught. Data science degrees have only recently emerged on the scene, which means if you polled a handful of senior-level data scientists, there'd almost certainly be no universal training
or certificate among them. Moreover, there's still no widespread agreement about what it takes to be a data scientist: is it an engineering role with a little
bit of TensorFlow sprinkled on top? A title for statisticians who can code? We're not expecting an easy resolution to these existential questions anytime soon.

In the meantime, we're starting a video series to help data scientists curious about DevOps (and developers and engineers curious about data science!) get started. Through hands-on coding examples and use cases, we want to give data science practitioners the fundamentals to explore, use, and influence MLOps.

The first video in this series uses a lightweight and fairly popular data science problem- building a model to predict wine quality ratings- as a playground to introduce continuous integration.

The tutorial covers:

- Using Git-flow in a data science project (making a feature branch and pull
  request)
- Creating your first GitHub Action to train and evaluate a model
- Using CML to generate visual reports in your pull request summarizing model performance

[Code for the project is available online](https://github.com/andronovhopf/wine) so you can follow along! 

{% github andronovhopf/wine %}

We also recommend checking out the [CML docs](https://github.com/iterative/cml) for more details, tutorials, and use cases.

If you have questions, the best way to get in touch is by leaving a comment on the blog, video, or our [Discord channel](https://discord.gg/bzA6uY7). And, we're especially interested to hear what use cases you'd like to see covered in future videos- tell us about your data science project and how you could imagine using continuous integration, and we might be able to create a video!
FluentTextTable, "full-width supported" text table library for .NET is now available!
Published: 2020-07-24 23:10:41

Have you ever just wanted to output .NET object out to console?

# What's this?

FluentTextTable is a flexible and easy to use "full-width supported" text table library for .NET. 

```cs
var users = new[]
{
    new User {Id = 1, EnglishName = "Bill Gates", JapaneseName = "ビル・ゲイツ", Birthday = DateTime.Parse("1955/10/28")},
    new User {Id = 2, EnglishName = "Steven Jobs", JapaneseName = "スティーブ・ジョブズ", Birthday = DateTime.Parse("1955/2/24")}
};
Build
    .TextTable<User>()
    .WriteLine(users);
```

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

It can be used for debugging and simple tools.

* [GitHub - https://github.com/nuitsjp/FluentTextTable](https://github.com/nuitsjp/FluentTextTable)
* [NuGet - https://www.nuget.org/packages/FluentTextTable](https://www.nuget.org/packages/FluentTextTable)

Format complex tables with ease and fluently.

```cs
Build
    .TextTable<User>(builder =>
    {
        builder
            .Borders.Horizontals.AllStylesAs("-")
            .Borders.HeaderHorizontal.AllStylesAs("=")
            .Columns.Add(x => x.Id).HorizontalAlignmentAs(HorizontalAlignment.Right)
            .Columns.Add(x => x.Name).VerticalAlignmentAs(VerticalAlignment.Center)
            .Columns.Add(x => x.Birthday).VerticalAlignmentAs(VerticalAlignment.Bottom).FormatAs("{0:yyyy/MM/dd}")
            .Columns.Add(x => x.Occupations).FormatAs("- {0}");
    })
    .WriteLine(users);
```

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

And this supports markdowns as well.

```cs
Build
    .MarkdownTable<User>()
    .WriteLine(users);
```

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

# Quick Start

NET Framework 4.0 (or higher) and .NET Standard 2.0 (or higher) are supported. Install and use it from NuGet.

```console
> Install-Package FluentTextTable
```

Define the class to be output.

```cs
public class User
{
    public int Id { get; set; }
    public string EnglishName { get; set; }
    public string JapaneseName { get; set; }
    public DateTime Birthday;
}
```

Use the Build class to create a table for the output class.

By default, all public properties and fields are included in the output.

```cs
var table = Build.TextTable<User>();
```

Create and output an object corresponding to a row.

```cs
var users = new[]
{
    new User {Id = 1, EnglishName = "Bill Gates", JapaneseName = "ビル・ゲイツ", Birthday = DateTime.Parse("1955/10/28")},
    new User {Id = 2, EnglishName = "Steven Jobs", JapaneseName = "スティーブ・ジョブズ", Birthday = DateTime.Parse("1955/2/24")}
};
Build
    .TextTable<User>()
    .WriteLine(users);
```

# Detailed settings

See the Github documentation.

https://github.com/nuitsjp/FluentTextTable#table-of-contents

Thank you!
Track your time to boost your productivity
Tags: codenewbie, webdev, todayilearned
Published: 2020-07-24 22:36:22

If you have been like me when I started to learn to code it was a huge challenge for me, I soon joined many of the popular coding movements like freeCodeCamp and the #100DaysOfCodes hashtag on twitter but nothing can make you learn code unless you actually do it.

Here's a simple method you can keep yourself on the path and while having tangible metrics of your progress. Use [WakaTime](https://wakatime.com/) in your editor and forget it, review it every week and aim for more coding time. You can code anything, but just do it. 

I started from a goal of 8 hours per week which was pretty difficult for me at that time, but I was able to ramp it up to 20-30 hours of coding time.

Now 8 hours of coding time may seem little, but you'll quickly realize that a lot of your time is spent on researching and reading, which won't be counted by WakaTime. So an hour is equal to 2-3 hours of writing.

Give it a try and let know of your thoughts!
What was your win this week?
Tags: discuss, weeklyretro, codeland
Published: 2020-07-24 22:03:12

---
title: What was your win this week?
published: true
description: Learned something awesome at CodeLand? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro, codeland
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count — big or small 🎉

Examples of 'wins' include:

- **Learning something new at [CodeLand:Distributed](https://dev.to/codeland)!**
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy Friday!

![happy friday!](https://media.giphy.com/media/SVegkhScjNmGTGQyfL/giphy.gif)
Automagic Table of Contents
Tags: javascript, jquery, tableofcontents, dynamic
Published: 2020-07-24 20:45:41

Imagine visiting a website with seemingly endless scrolling. You could easily get lost in a sea of content, but I won't let that happen. Table of contents to the rescue! I will examine three approaches below.

### Quick Way (not recommended)
**Hardcoding a table of contents at the top of every page of content**
This wouldn't be very <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank" rel="noopener">DRY</a>. It's an easy solution to get something working right away, but it could be time consuming in the long run. What if you need to add a table of contents to 100 pages, or what if a client is entering content? That would be a lot of copying and pasting, and a lot of room for error.

### Better Way
**Table of contents that is generated dynamically**
This way uses some jQuery to generate the table of contents automatically. It will get the text from every `<h2>` element and generate a table of contents with links to those headings. CSS-Tricks has a [really nice demo](https://css-tricks.com/automatic-table-of-contents/) for this.  

### Best Way 
**Table of contents that is generated dynamically *and* highlights which section you're in**
This takes the better way and adds some automagical flair to it. The table of contents will be hidden at first, to show a banner image or keep the navigation menu minimal. Then upon scrolling, the table of contents will appear, fixed to the top of the page. As you scroll down it will underline the section you're in. 
{% codepen https://codepen.io/aellonK/pen/YzwgRPO %}

The last approach may not be a good fit for every project, but it is my favorite for a long page of content. How would you add a table of contents?
Building a url-shortener. My architecture.
Tags: architecture, node, react
Published: 2020-07-24 22:02:39

*Ain't me in the photo. Just an Unsplash one...*

As my next project, I decided to build a url-shortener. I Googled how other folks had done it and I started to read very complicated posts, which made me very confused. I decided to stop reading and plung into the code (like the one in the photo!). I put some thought on the architecture. I even draw some charts! Nothing too fancy, no worries. The architecture I went with is the follow, please give me feedback of any sort if you think I could do better!

1. User types a url client side.
2. I pass this url to the server in the body.
3. The server grabs the body and stores it in a row of the database alongside a randomly generated string of characters.
4. The server returns this random string to the client and it displays it back to the User (i.e. bit.ly/{whatever the random string}
5. Cool, now the User can go and post it in places. Once someone hits domain.whatever/{randomly generated string} the following happens.
6. domain.whatever is a React app. I use `useEffect()` and it has an API call to the server, passing the randomly generated string as url parameter.
7. The server grabs the parameter, looks it up in the database, fetches the real url, returns it to the client.
8. The client redirects from domain.whatever/{randomly generated string} to the full url that is returned from the server.

Voilà! Please, give me feedback. Thanks for reading!
Gatsby 101: Build a Personal Website
Published: 2020-07-24 21:54:18

This is a live document for my Codeland workshop! Come back later for a cleaned up version!

```bash
git add .
git commit -m "Your commit message"
git push
npm install gatsby-plugin-mdx
```

## Add MDX and About page

`npm install gatsby-plugin-mdx`

Add `gatsby-config.js` to your root directory.

```js
module.exports = {
  plugins: [
    `gatsby-plugin-mdx`
  ]
}
```

Create a new file at `src/pages/about.mdx`

```md
# About me

I'm a really wonderful person. Say hi!

Check out my [blog](https://aisha.codes)!
```

```bash
git add .
git commit -m "Your commit message"
git push
```

## Add a blog

`npm install gatsby-theme-blog`

Update `gatsby-config.js`:

```js
module.exports = {
    plugins: [
        `gatsby-plugin-mdx`,
        {
            resolve: `gatsby-theme-blog`,
            options: {
                basePath: `/blog`,
                mdxOtherwiseConfigured: true
            }
        }
    ]
}
```

Create a `content` directory. Inside that, create directories called `assets` and `posts`.

Add an image called `avatar.jpg` to `content/assets`. `.gif` and `.png` will work, too!

Add a file called `first-post.mdx` to `content/posts`. It should look something like the following:

```md
---
title: My First Blog Post
date: 2020-07-24
---

Today is a good day!
```

### Shadow `bio-content.js`

Add a new file at `src/gatsby-theme-blog/components/bio-content.js`. This corresponds to the location of the theme file you're trying to update. Your new file should look something like this:

```js
import React, { Fragment } from "react"

const BioContent = () => (
  <Fragment>
    Words by <a href="https://aisha.codes/">Aisha Blake</a>.
    <br />
    I'm a speaker, teacher, and software engineer! I can't spell.
  </Fragment>
)

export default BioContent
```

### Customize data

Add a `siteMetadata` object to your `gatsby-config.js`. The Gatsby blog theme is looking for certain data in certain places within that object. It should now looks something like this:

```js
module.exports = {
    siteMetadata: {
        title: `Aisha Blake`,
        author: `Aisha Blake`,
        description: `Aisha Blake's personal site for Gatsby 101 at CodeLand`,
        siteUrl: `https://gatsby-101-personal-site.netlify.app`,
        alternateSite: `https://aisha.codes`,
        social: [
            {
                name: `Twitter`,
                url: `https://twitter.com/AishaBlake`,
            },
            {
                name: `GitHub`,
                url: `https://github.com/AishaBlake`,
            },
        ],
    },
    plugins: [
        `gatsby-plugin-mdx`,
        {
            resolve: `gatsby-theme-blog`,
            options: {
                basePath: `/blog`,
                mdxOtherwiseConfigured: true
            }
        }
    ]
}
```

## Add images

```bash
npm install gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image
```
How to come up with a name?
Tags: codenewbie, todayilearned, womenintech
Published: 2020-07-24 21:45:05

I have spent hours.. yes hours trying to figure out a name for my idea. It has to be cool, memorable, unique yet similar to something we know.. i-something? something-book? Boogle? Definitely not!


Admittedly, I ended up even using a few name generator sites (the one with the best interface https://namelix.com/), but you will find countless after a quick google. It really helped get the juices flowing and to actualise the idea. 

Eeek! Yes I may have bought a domain name..
Timers & Intervals
Tags: javascript, beginners, codenewbie, 100daysofcode
Published: 2020-07-24 21:38:22


In JavaScript, if you would like to run a piece of code after a certain amount of time, you need a timer. If you would instead repeatedly run the code after fixed periods, you need an interval.

### Timer

Timers are done using `setTimeout`.

```javascript
setTimeout(() => {
    console.log("hello");
}, 2000);
```

The first argument is always a function or piece of code to execute. In this case, we are logging "hello" to the console. The second argument is the duration of the timer in milliseconds. We will be printing "hello" after a 2 second (pr 2000 ms) delay.

We can also pass n number of parameters to `setTimeout` after the wait duration. These parameters are passed as arguments to the function which will be executed.

### Intervals

Intervals are done using `setInterval`.

```javascript
setInterval(() => {
    console.log("hello");
}, 2000);
```

Same syntax for `setInterval` as for `setTimeout`. In `setInterval`, we will be printing "hello" to the console **every 2 seconds**. The code will keep printing the string until we clear the interval.

### Stopping/Clearing timers and intervals

Both `setTimeout` and `setInterval` return a unique timer/interval ID. If we save this ID in a variable, we can use it to clear/stop the timer/interval.

To clear timer, use `clearTimeout` and to clear interval use `clearInterval`.

```javascript
const intervalId = setInterval(() => {
    console.log("hello");
}, 2000);

clearInterval(intervalId);
```
The struggle of relearning
Tags: help, webdev
Published: 2020-07-24 21:26:57

Here's the problem I have been dealing with:
I used to be a decent web developer. I built a social network, a blog, and did a few small jobs as well. But then I stopped coding for a long time, now I want to get back into, but it feels so difficult. The problem is that I do not remember a lot of the stuff, so I try to relearn these things. But when I am going through the material (tutorial, blog posts, etc) I find it quite boring and hard to focus, since I kinda know it but not really.

Does this mean I have just lost interest? But I do wanna learn more CS stuff, maybe I should learn something else in CS, or maybe I just need to put in the work and get through it. I don't know

Any advice would be awesome.