teleren/devto huggingface dataset:
Day 1/100 - New Year on a New Journey with DynamoDB
Published: 2021-01-01 16:44:32

TL;DR; I created this post to update my daily progress doing the #100DaysOfCloud challenge. On the first day, I cannot spend much time learning due to family matters. Today, I learned about DynamoDB through Mark Richman’s course.

I am very excited to do my #100DaysOfCloud challenge in 2021. However, I should attend family gatherings and I cannot avoid it. The good part is it will not interfere with my daily work (since I started my work at 4 PM) and the bad part is I only have two hours to study the #100DaysofCloud challenge. The first thing that came to my mind is doing a cloud resume challenge. However, I am not really familiar with DynamoDB and that is why I pick the DynamoDB course.

Actually, I already have a static website using Zola static site generator but I never published it because of several reasons. Hence, when I read the cloud resume challenge, I am pretty sure this is the right time to start my own website using the challenge. Different from using Zola, what I want to do is build my own website using Rust’s WebAssembly. With that said, two hours is not enough, so I think this website will be finished tomorrow or the day after tomorrow.

When I read about the cloud resume challenge, I realized that I need to access a DynamoDB service for the visitor counter feature. I then tried to find good resources to learn DynamoDB and found this Amazing DynamoDB Deep Dive course from A Cloud Guru. Within two hours, I have managed to take some notes about DynamoDB through the course even though I am still far from the lab section.

Tomorrow, I will start building my website using WebAssembly and setting up an AWS Lambda that will be used to access DynamoDB.
Frontend Developer Career Path on Scrimba - Introduction
Tags: javascript, html, css, react
Published: 2021-01-01 16:23:52

## About Course ##
I'm a beginner and I want to find a job in web development, I understood that basic html, css and javascript won't be enough to get it. So I choose this course, which will hopefully teach me many tricks about the 3 main languages, teach me git and share many job interview tips and the most important, it will give me huge experience about the most popular javascript framework: **React** 

## Why this course ##
I liked free courses on [Scrimba](https://scrimba.com/) and I also joined [Javascriptmas](https://dev.to/dominikgorczyca/javascriptmas-2j80) and liked it a lot. There, one of the participants who made great things said most of the skills he has are from this course. So I decided to buy it and to also describe my experience on DEV. That's **navigation** and for every module (there are 14) I will make an individual post, I will try to learn and describe as good as I can. Wish me luck!

Click here if you want to see my experiences with course [modules](https://dev.to/dominikgorczyca/series/10565)
Easiest way to convert JavaScript object to map!
Tags: javascript, node, react, algorithms
Published: 2021-01-01 16:05:30

```javascript
const person = {
  name: 'Hasnain',
  age: 22,
  profession: 'Web Developer',
};

const map = new Map(Object.entries(person));

console.log(map);
```

When and why to use Map over Object? 🤔

There are a lot of excellent people like you, with tons of knowledge out there writing awesome answers! Here is an amazing [stackoverflow](https://stackoverflow.com/questions/18541940/map-vs-object-in-javascript) post I found that explains just that! 🎉🎊

### **You are lazy** 🥴

I know you are lazy like me (every good developer should be), so I'd like to briefly describe the difference between Object and Map. With that information, be the judge of when to use which! 😎

According to [Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map):

> 1. A Map's key can be any value, including primitive types, objects and functions.
> 2. You can use `for...of` loop to iterate Map in the insertion order, meaning what you first inserted will be the first element to show up in the loop and so on.
> 3. Just as Array have `length` property, Map comes with a `size` property.
> 4. Performs better when a lot of insertion and removal operations are involved.
Make Writing a Habit #90DaysOfProse
Tags: writing
Published: 2021-01-01 16:05:09

Accepting a challenge in public creates some accountability which is critical if you want to change your behavior and build a new habit.

I wanted to create a challenge that focused on writing and that uses the advice given in the book Atomic Habits.

Start small and increase over time.

So I've decided to launch a challenge of my own, [#90DaysOfProse](https://www.producthunt.com/posts/90daysofprose).

I chose 90 days instead of 100 because there are roughly 90 days in every quarter of the year. There are exactly 90 days in Q1 of 2021. My goal is to write every single day from January 1st to March 31st.

Working in the Tech Industry (the land of Objectives and Key Results) I can't help but think of goals that can be accomplished in one quarter of the year.

I may have [gotten a head start](https://twitter.com/danielkhunter/status/1343257403547119616) 😄.

Here are the rules:

1) Write for at least 10 minutes a day for 90 days.

2) Tweet your progress each day with the #90DaysOfProse hashtag.

3) Each day, comment on at least one other Tweet from someone who is also doing the challenge. Don't be a stranger. Show some love!

What is prose? 

Well, it's everywhere, even right here in this post.

> Prose is a verbal or written language that follows the natural flow of speech. It is the most common form of writing, used in both fiction and non-fiction. Prose comes from the Latin “prosa oratio,” meaning “straightforward.” —Masterclass

It's in Tweets, Blog Posts, Articles, Newsletters, Books, Magazines, Websites, Newspapers... it's the heart and soul of human life. I think Twitter threads are a fun way to share excerpts of this kind of content.

I believe all developers can benefit from writing more and that's one of my biggest goals for next year.
From Monolithic To Micro Frontends - Part 1
Tags: javascript, react, angular, webdev
Published: 2021-01-01 16:02:03

## Motivation:
We were having two applications one of them is [React](https://reactjs.org/) and the other one is [Angular](https://angular.io/), the challenge here is that we want to run the Angular app inside our React app.

I came across the [Micro frontends](https://martinfowler.com/articles/micro-frontends.html) Architecture, and I found it may be helpful in my case and after investigations and reading in-depth about the concept and the architecture, I came up with three solutions
- Revamp the whole Angular application to React.
- Change all the Angular components to web components using [Angular elements](https://angular.io/guide/elements).
- Implementing Micro frontend using [single SPA](https://single-spa.js.org/).

![Burn Them All](https://media.giphy.com/media/11C9FF35M6aXu0/giphy.gif)

Just Kidding 🤓

The revamp solution will take a lot of efforts and time and we don't have the luxury of time, So we decided to go for the **third solution** because we were having some limitations in the Angular to split the components, and we will need to bring them back together again inside the React application, and this will take some efforts and time due to the complexity of our Angular application, as it is containing routing, lazy loading modules, and authentication.

## What is the single SPA?
From single SPA [docs](https://single-spa.js.org/docs/getting-started-overview):
> Single-spa is a framework for bringing together multiple JavaScript micro frontends in a frontend application. Architecting your frontend using single-spa enables many benefits, such as:
- Use multiple frameworks on the same page without page refreshing (React, AngularJS, Angular, Ember, or whatever you're using)
- Deploy your micro frontends independently.
- Write code using a new framework, without rewriting your existing app.
- Lazy load code for improved initial load time.

## Single SPA main types of applications
- [Root Config Application](https://single-spa.js.org/docs/configuration).
- [Single-SPA Application](https://single-spa.js.org/docs/building-applications).

### Root Config
Considered as a container and the parent for all the single SPA applications, and also as a router from your root config application, you can
- Register your single SPA application.
- Determine when to load or unload the single SPA.

___

In the next parts, we will do some practical examples. 
- Migrating the React app to work as a single SPA and root application at the same time.
- Migrating the Angular application to a single SPA.
- Bring all together in one application.
Tailwind CSS v2 with BridgetownRB
Tags: tutorial, bridgetown, tailwindcss
Published: 2021-01-01 16:00:54

_This post was originally published on [my blog](https://deanpcmad.com/2020/tailwind-css-v2-with-bridgetownrb/)._

Today I've been playing around with BridgetownRB as a static site generator.
I've also recently been playing around with the new version of [Tailwind CSS](https://blog.tailwindcss.com/tailwindcss-v2)
and I wanted to update this site design to use it. Here's a quick tutorial on setting it up with BridgetownRB.

## 1. Install Tailwind with Yarn
```bash
yarn add -D postcss autoprefixer postcss-import postcss-loader tailwindcss
```

## 2. Create Tailwind config file
Run `npx tailwindcss init` to create `tailwind.config.js` file.

## 3. Create a postcss.config.js file

```js
module.exports = {
  plugins: [
    require("postcss-import", {
      path: "frontend/styles",
      plugins: [],
    }),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};
```

## 4. Update your webpack.config.js file

Scroll down to where you see `MiniCssExtractPlugin.loader` (around line 60) and change this:

```js
{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
  ],
},
```

to this

```js
{
  test: /\.(s[ac]|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, "src/_components")
          ],
        },
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        }
      },
    },
  ],
},
```

## 5. Add Tailwind to your CSS

Add the following to `frontend/styles/index.scss`.

```scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

## 6. Remove unused CSS

The great thing about Tailwind is that it uses PostCSS to remove any unused CSS which reduces the size 
of the final CSS file. Edit your `tailwind.config.js` file so it looks like this:

```js
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV == "production",
    content: ['./src/**/*.{html,md,liquid}']
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Now when you build/deploy your site, you'll need to use the `NODE_ENV` environment
variable. For example:

```bash
NODE_ENV=production yarn deploy
```

Success! You should now have a working BridgetownRB site with Tailwind v2!
5. HTTPS
Tags: aws
Published: 2021-01-01 15:53:22

After creating the [AWS S3](https://aws.amazon.com/s3/) static website it was time for securing the [website](http://blog.komlalebu.com) for communication over the network using [HTTPS](https://en.wikipedia.org/wiki/HTTPS). Because we don't want anybody spying on us.

![Alt Text](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fa77e74a9bbbf92989b7e413aa830c8b5%2Ftenor.gif%3Fitemid%3D5161088&f=1&nofb=1)

#[ACM](https://aws.amazon.com/certificate-manager/)
I had to setup a certificate from `ACM` with the domain name `www.komlalebu.com` I registered from `Route53`.

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

#[Cloudfront](https://aws.amazon.com/cloudfront/)
I had to setup the cloudfront distribution with requested custom `SSL certificate`, and also configure the alternate domain name

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

Then I had to configure the Cloudfront `origin domain name` to point to the S3 static URL endpoint. Paste everything excluding `http://`

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

S3 static website URL: http://blog.komlalebu.com.s3-website-us-east-1.amazonaws.com which we had previously configured.

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

Once it was done, I got my Cloudfront `secure` distribution URL.
Cloudfront Domain name: https://d1cs99***.cloudfront.net

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

#[Route53](https://aws.amazon.com/route53/)
I had to setup Route53 with an `alias` record with name `www.komlalebu.com` and the alias value pointing to the Cloudfront Domain name.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/muemn5ycukiboetf9hgf.JPG)

And it was done. The website is secure.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)
How to Fix FOUT (Flash of Unstyled Text) in React
Tags: react, webdev, tutorial, javascript
Published: 2021-01-01 15:53:09


![FOUT](https://dev-to-uploads.s3.amazonaws.com/i/ti1pf7vs90e8jw14ypjz.gif)

Can you see font is changing from `default` to expected font? That's called **FOUT (Flash of Unstyled Text)**. This happend cause your browser is rendered element before your font has loaded. It makes your website look cheap and you look like a beginner. :worried:

Be grateful because in 2021 there is already an API to solve this problem. The name is **FontFaceSet API**, you can check the [documentation here](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/).


Let's get started!

### **#0 FYI**
I am using `fontsource` to import my external font. Just because, I am using the `gatsby` framework. It doesn't matter what you use, because this method works on any framework. Including the non-react framework.

```js
import "@fontsource/merriweather"
```

### **#1 Create `state`**

```react
const [isReady, setIsReady] = useState(false);
```

First we create a `state` to store the state whether the website is ready to render or not.
```react
return (isReady &&
    <div>
        {/* Your component goes here */}
    </div>
  )
```

Don't forget to add a condition if the state shows it's not ready, then don't render the element.



### **#2 Check & Load fonts**
To check the font we use `FontFaceSet` as follows:
```react
useEffect(() => {
  document.fonts.load("12px Merriweather").then(() => setIsReady(true));
}, [])
```

`Merriweather` is fontface name, you can change that. `12px` is dummy `fontSize` to check. The following line of code is a Promise so that we can add commands when the font has been successfully loaded.

### **#3 And wallaaaaa...**
![Result](https://dev-to-uploads.s3.amazonaws.com/i/s1kqc1n4lucw35slsj6s.gif)


Thanks for your time to read this post. This is my first post on `dev.to`, i hope i can keep on writing on this platform :laughing: . If you don't mind please give a reaction to support me. :heartpulse:
Finding a single item in an array  
Tags: javascript, algorithms
Published: 2021-01-01 11:13:11

---
title: Finding a single item in an array  
published: true
description: single item in an array
tags: javascript, algorithm
//cover_image: https://direct_url_to_image.jpg
---

If we have an array, and we want to find the item(s) that appears once in the array.
```js
const arr = [1,1,2,2,4,5,4]
```
The single item in the array above is 5, how can we solve this using JavaScript? We can use a hashmap aka [Hash table](https://en.wikipedia.org/wiki/Hash_table), we need to convert the array to an object with the item as the key and their number of occurrence as the value.
```js
const hashMap = {};
for (i of arr) {
  if (hashMap[i]) {
    hashMap[i]++;
  } else {
    hashMap[i] = 1;
  }
}
console.log(hashMap)
// 
```
We declared an empty object, and loop through the array, our array item is passed in as the key, and we check to see if this item appears in the array more than once, if it does, we increment the value, if it appears once we set the value to 1.

We get the result below
```js
{ '1': 2, '2': 2, '4': 2, '5': 1 }
```
As we can see 5 is the only number that appears once in the array, with a value of 1.

We need to loop through the object and get the keys with the value of 1, then push it into an array.
```js
const single = []
for (i in hashMap) {
  if (hashMap[i] === 1) {
    single.push(Number(i));
  }
}
console.log(single)
```
The single item in the array is a string, it is converted to a number as we push it into the array.

We get the value below.
```js
[ 5 ]
```
Thank you for reading.
Generate Accessible Button Colors With ButtonBuddy
Tags: news, css, webdev, a11y
Published: 2021-01-01 15:42:44

Introducing [ButtonBuddy.dev](https://buttonbuddy.dev):

> Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette.

![Preview of Buddy the Button which is a blue button with a cartoon face. A speech bubble animates upwards then displays "Hello, I'm ButtonBuddy!" after which the cartoon face's left eye winks twice.](https://dev-to-uploads.s3.amazonaws.com/i/8itfu2xjkvown3tyeyhf.gif)

First, Buddy will help you learn about what it takes to create accessible button color palettes.

Then, you can use the interactive generator to create or check your own button color palette to ensure accessible contrast.

The more successful contrast ratios you have, the happier Buddy will be!

![Buddy's face first has a frown, then a partial closed mouth smile as the contrast improves, then finally a full open mouth smile plus a wink when the contrast is fully passing](https://dev-to-uploads.s3.amazonaws.com/i/rtnlm0ydvgzftswo6q9i.gif)

When using the generator you have the option of either using the browser's native color pickers (the default) or switching to text input. Text inputs allow you to more easily enter your existing palette and will accept any valid CSS color value, including ones with an alpha channel.

![Interacting first with the native color picker to select a purple, then toggling on the text inputs and changing the purple hex code to the CSS color value of "rebeccapurple"](https://dev-to-uploads.s3.amazonaws.com/i/xxep0hdji03ofr1joa6c.gif)

With every color change, by color picker or text input, the associated color contrast ratios will update. Emojis indicate "passing" or "invalid". The default text contrast is for normal text size which is 4.5:1, but if your button will use large text (18.66px and bold _or_ larger than 24px) you can use the "Large text ratio" switch to update text ratios to the reduced ratio of 3:1.

![Shows the contrast ratios dynamically updating and the emoji indicator changing when the ratio passes, followed by updating the text ratio to 3.0 by using the "Large text ratio" switch.](https://dev-to-uploads.s3.amazonaws.com/i/diw95l58ciq9ywpn6ied.gif)

> **Visit [ButtonBuddy.dev](https://buttonbuddy.dev)** to learn more about accessible button contrast and create your own accessible palettes!

## Creator's Notes

ButtonBuddy was created by myself, [Stephanie Eckles](https://twitter.com/5t3ph), to help folx solve a common issue I see as both a code reviewer and a web user. ButtonBuddy is also a utility I myself have wanted to see exist, and know I will use! 

If you encounter any issues or have a feature request, [file an issue on GitHub](https://github.com/5t3ph/buttonbuddy/issues). Please be sure to read the intro learning content which describes the specific scenario ButtonBuddy was created for before suggesting a feature.
10 Great things to do today in your digital life
Published: 2021-01-03 00:23:47

---
title: 10 Great things to do today in your digital life
published: true
date: 2021-01-01 15:30:52 UTC
tags: 
canonical_url: 
---

Originally appeared on PeterWitham.com

[![fi](https://peterwitham.us/static/e709446607c3b54237423b01b14f641d/e585c/fi.png "fi")](/static/e709446607c3b54237423b01b14f641d/e585c/fi.png)

New year is not just about those resolutions that you might keep, it’s a great time to do things to make the year start the way you want it to. Here are a few ideas to help you get started.

- Back up everything
- Clear out the inbox, be brutal. If it’s been there at least a month then you know you are not going to reply or do anything with it so delete it.
- Check those ToDo or Task lists are up to date, what did you forget to check as complete? Or worse, what did you forget to add to the list?
- Clear out old applications you no longer use and never get around to deleting. Your machines will thank you.
- Use external SD or Compact Flash cards? When was the last time you cleaned those out or maybe reformatted them to ensure they are ready to use next time?
- I bet there are things you did last year that you could automate, why not start a list of things to try and automate in the near future?
- While we are talking lists, why not start keeping track of things you think of by having a note pad and pen or easy to use capture app close by at all times.
- Set some new year goals? Add them to December calendar right now to keep you honest.
- If you file digital things away using a folder our group system, set up those 2021 folders right now so they are there when you need them. For example, I use DEVONThink Pro and store my emails by year in there.
- Change passwords on accounts, especially those that don’t have 2 factor. Also check and see if they now offer 2 factor and set it up.

Hope these spark some thoughts, 2021 will thank you for it later if not right away.