teleren/devto huggingface dataset:
Beginner to Advanced Challenge - project 5, 6 & 7
Tags: beginners, beginner2advanced, tutorial, typescript
Published: 2022-07-07 07:14:42

## Cause and Effect App

This is the fifth project in the beginner category in the `#beginner2advanced` challenge. It’s a representational application where you can click on a button to display different values in the main session.

![cause-effect-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uf2s9rp96n3bcl3apiu.gif)

The link to the code can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/cause-effect-app](https://github.com/zt4ff/app-ideas/tree/main/beginners/cause-effect-app)

## Color Cycle App

The sixth project in the beginner category in the `#beginner2advanced` challenge is a website, that randomly generates colours and displays them at different intervals

![color-cycle-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6xuv02qtpr3ni6kw8at.gif)

The link to the code can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/color-cycle](https://github.com/zt4ff/app-ideas/tree/main/beginners/color-cycle)

## Countdown Timer App

This is the seventh project in the beginner category in the `#beginner2advanced` challenge is an app that allows you to select a date and have a timer counting down to it.

![coutdown-timer-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2jzblfj9a9xh2hlj2th.gif) 

The link to the code can be found here: [https://github.com/zt4ff/app-ideas/tree/main/beginners/countdown-timer](https://github.com/zt4ff/app-ideas/tree/main/beginners/countdown-timer)

Please leave a star in the repository so other people can find it and participate.

If you enjoy reading this article, you can support me by [buying me a coffee](https://www.buymeacoffee.com/kayode), please.
How to add a theme to my Hugo site
Tags: webdev, tutorial, hugo, jamstack
Published: 2022-07-07 06:53:53

Hugo is one of the most popular open-source static site generators. The developers craft many themes (https://themes.gohugo.io/) for the Hugo community to use. Here's a quick guide on adding those themes to our Hugo sites.

## Install Hugo

You can install Hugo on macOS, Windows, Linux, OpenBSD, FreeBSD, and on any machine where the GO(AKA Golang) compiler tool chain can run.

> Here's the official installation guide: https://gohugo.io/getting-started/installing/

### Install Extended Hugo on Windows via Chocolatey:

```
choco install hugo-extended -confirm
```
_The extended version is nothing but has Sass/SCSS functionality._

- After installing it, check your Hugo version to ensure you have a suitable version for a particular theme. In some cases, you may need to have installed the extended versions for some themes to be worked perfectly. So keep an eye on this thing as well.

To check your version of Hugo, run:
```
hugo version
```

## Create a new Hugo site

```
hugo new site newhugo
```

The above command will create a new Hugo project in the **newhugo** folder.

To go inside the root of the directory, run:

```
cd newhugo
```

## Fork a Hugo theme

_I'm using [this theme](https://github.com/zerostaticthemes/hugo-winston-theme) for this tutorial. Anyway, you can find thousands of themes off of [this page](https://themes.gohugo.io/)._

- It's always better to fork the particular theme before adding it to our sites. Your forked theme will not be deleted even if the upstream repo is deleted. So the theme will be persisted.

## Add the forked theme to our **newhugo** site

> Before adding a git submodule, we have to initialize the git repository. So run this:

```
git init
```
> Now we can add that theme as a git submodule.

```
git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/mytheme
```

Now our theme will be added to the folder `themes/mytheme`.

## Copy the content from theme.

To copy all the content from the theme's exampleSite to our site, run this:

```
cp -a themes/mytheme/exampleSite/. .        
```
## Configure config.toml file

Set the theme name like this: 
```
theme = "mytheme"
```
## Install Node Modules[if required]

_Commonly Hugo theme doesn't require node modules unless it uses a tool like PostCSS._

> Copy the package.json from the themes/mytheme, and paste it to our newhugo root folder. and run this:

```
npm install
```

## Run Hugo site

To generate the build, run this(From the root folder):
```
hugo
```

To serve the website, run this:

```
hugo serve
```
This will render your page in [localhost:1313](http://localhost:1313/)
Tools in Cloud
Tags: javascript, html
Published: 2022-07-07 06:35:42

Checkout this [javascript deobfuscator](https://toolsincloud.com/javascript-deobfuscator) , [javascript obfuscator](https://toolsincloud.com/javascript-obfuscator) , [ico converter](https://toolsincloud.com/ico-converter) , [html beautifier](https://toolsincloud.com/html-beautifier) on our website tools in cloud.
go : Calculate the distance and format unit from the current time based on the timestamp
Tags: go
Published: 2022-07-07 06:33:00

```
//根据时间戳计算与当前时间的间距及格式化单位
func FormatDate(in string) (out string) {
    timeUnix := time.Now().Unix() //当前时间戳

    inn, _ := strconv.ParseInt(in, 10, 64)
    outt := timeUnix - inn

    f := map[string]string{
        "1":        "秒",
        "60":       "分钟",
        "3600":     "小时",
        "86400":    "天",
        "604800":   "星期",
        "2592000":  "个月",
        "31536000": "年",
    }

    var keys []string
    for k := range f {
        keys = append(keys, k)
    }
    //sort.Strings(keys)
    //数字字符串 排序
    sort.Slice(keys, func(i, j int) bool {
        numA, _ := strconv.Atoi(keys[i])
        numB, _ := strconv.Atoi(keys[j])
        return numA < numB
    })

    for _, k := range keys {
        v2, _ := strconv.Atoi(k)
        cc := math.Floor(float64(int(outt) / int(v2)))
        if 0 != cc {
            out = strconv.FormatFloat(cc, 'f', -1, 64) + f[k] + "前"
        }
    }

    return
}
```
For implementation details, visit [my blog](https://www.zongscan.com/demo333/398.html).
Bookmarks Hell
Tags: watercooler, discuss, productivity
Published: 2022-07-07 06:30:41

I often see interesting content that I would like to review/watch/read better later.

I bookmark the page and there is a good chance I will never see it again.


### The problem
My problem with this is that the content would benefit me but eventually it gets lost.

### RFI: Request For Ideas
Do you have the same problem?
- What do you do about it?
- Any software, browser extensions, strategy you would suggest?
let & const in js
Tags: javascript, beginners, programming, webdev
Published: 2022-07-07 06:23:52

We have discussed before that `let and const` both are hoisted too. But if you try to access a let or const data structure before it's initialized, this is what you get:

```
console.log(a);
let a=10;
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e7lmvi6dmspc5tfc3h7.png)

This error is encountered because `a` is in **temporal dead zone**

### Temporal Dead Zone

When we declare and initialize data using `let` and `const` keywords, unlike `var`, they are stored in a separate memory space which is not a part of the global space. 

So, even though in the first phase of memory allocation, they are hoisted and given value undefined until initialized, they cannot be accessed.

This *space between first line of code to execution of code where they are initialized is called the temporal dead zone*.

> let can be declared in one line and initialized later, but const keyword when used, must be initialized in the same line or throws an error. It is more strict than let.

>[⭐ var vs let vs const by freecodecamp](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference)
>[⭐ js introduction by interviewbit](https://www.interviewbit.com/problems/var-vs-let-vs-const/)
Android importance by Brooke Jessica Kaio
Tags: android
Published: 2022-07-07 06:09:22

As per Brooke Jessica Kaio, the Android stage incorporates a working framework given the Linux bit, a GUI, an internet browser and end-client applications. Brooke Jessica Kaio, the underlying showings of Android highlighted a conventional QWERTY cell phone and giant VGA screen.

## Brooke Jessica Kaio
Android was delivered under the Apache v2 open-source permit, permitting numerous varieties of the OS to be created for different gadgets, like gaming consoles and computerized cameras. Android depends on open-source programming, yet most Android devices come preinstalled with a set-up of restrictive programming, for example, Google Maps, YouTube, Google Chrome and Gmail.

## History and advancement
Android started its life as a Palo Alto-based new business called Android Inc. in 2003. At first, the organization set off to foster a working framework for computerized cameras, yet deserted those endeavors instead of arriving at a more extensive market. Google gained Android Inc. also, its critical representatives in 2005 for no less than $50 million. Google showcased the early portable stage to handset makers and versatile transporters with huge advantages like adaptability and upgradability.
RegEx password validators is madness
Tags: security
Published: 2022-07-07 05:53:42

For 5 decades we've gotten used to the following; _"Choose a password with one small letter, one large letter, 1 number, and 1 special character"_. This is probably the dumbest decision software development as a profession collectively have done since we started coding in Fortran some 70 years ago. The reason is simple, people once confronted with the above have 3 choices, which are as follows.

1. Reuse a password you've used another place
2. Write down your password somewhere and store it
3. Choose a password that's very short such that you can remember it easily

All of the above techniques for remembering passwords are ipso facto madness. Examples of great passwords are presented below.

1. This is a very, very, very good password! YES REALLY!!
2. Rainbows are funny, because they smell like unicorns
3. I like turtles, but not the Ninja turtles

The above 3 examples are all _extremely secure passwords_. More importantly, if you use passwords such as the above, you don't need to write them down, you don't need to reuse passwords, and you can create them as long as you wish - Yet still easily remember them. However, more importantly, the above passwords are a bajillion times harder to hack than 12 random characters. To understand why, let's look at the base numbers for your passwords.

If you have 12 sequential characters conforming to a regex validator, you have roughly 70 to the power of 12 possibly combinations to test in order to brute force guess the correct password. This is easily achieved with a fancy pocket calculator today in some roughly 20 minutes.

If you create sentences, that have at least 12 words, there are (at least) 150,000 words in the English language, implying 150,000 to the power of 12 possible combinations to test before you've successfully brute forced the password. This is before we start considering slang words, such as _"gr8"_ and _"luv"_, in addition to bad English, such as the title of this article. As we add foreign languages, and/or alternative alphabets, such as Norwegian, Swedish or Greek letters, the entropy literally explodes.

If you've got a password which is a sentence of at least 8 words, hacking this password by brute force becomes literally impossible. However, a password regex validator prevents you from creating such passwords, because you'll need an _"$"_ in there, you'll need a _"1"_ in there, etc. Sentences containing special characters are not particularly easily remembered, and hence eliminates your ability to construct really, really, really good passwords, that you can easily remember.

At Aista we have taken this problem seriously, by simply removing all password validators entirely, allowing users to create whatever passwords they want to themselves. You can try it out below if you wish.

* [Register at Aista](https://hub.aista.com)
Deploy Express API with Docker
Tags: docker, javascript, webdev, tutorial
Published: 2022-07-07 05:49:51

Docker is a cross-platform virtualization technology that provides OS-level virtualization to run applications on the cloud. It enables developers to ship their apps as containers and avoid system conflicts.

![Deploy Express API with Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2hlebttob2ruv4siy8a.png)

Docker containers can be published via DockerHub or can be distributed locally using zip files. As of writing this article, DockerHub hosts more than one million public docker containers and images.

## Setting up our Express API

Our Express API is pretty simple and contains only one GET route which says hello message.

This is what my `index.js` file looks like.

![index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcqeyq284w4ye7ly1oml.png)
 
 Now, create a new file called Dockerfile and paste the below code inside it.

```
FROM node:16

# Create app directory
WORKDIR /usr/src/app

# Copy package.json
COPY package*.json ./

# Install dependencies
RUN yarn install

# Copy all files
COPY . .

# Expose port 3000
EXPOSE 3000

# Run app
CMD [ "node", "index.js" ]
```

Breakdown of the Above file contents.

- FROM Node:16 will pull the Node v16 image from the DockerHub
- WORKDIR /usr/src/app — Here is where our app lives inside the container
- COPY package*.json ./ — Copy the package.json from local dir to docker image.
- RUN yarn install — This will install all the dependencies.
- COPY . . — This will copy all the project files into the Docker image.
- EXPOSE 3000 — This will allocate a docker container to use port 3000
- CMD [ “node”, “index.js”] — This will start the Node JS app.

## The Dockerignore file:

Now create a .dockerignore file and add the below content inside it.

```
node_modules
yarn*.log
```
Similar to `.gitignore` this will ignore the below-mentioned files when building the docker image.

## Building the Docker Image:

Once the above process is done, We have to build our project as a docker image to use it.

Docker image can be built using a single line of command.

```
docker build . -t="timeless-hello-world"
```

## Running the Docker Image:
```
docker run -d -p 3000:3000 --name my-app timeless-hello-world
```

## Breakdown of the above command:

- -d will detach the terminal after the successful run. Otherwise, the server will stop if we close the terminal.
- -p 3000:3000 is the port we want our application to run.
- --name my-app is the name of the container.
- Finally, timeless-hello-world is the docker image we built in the above step.
- Once you press the enter key. You’ll be prompted with the container ID.

We can also verify whether the container is running using the docker ps command.

If you open http://localhost:3000 in the browser, You’ll get an API response like this.

![API Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuyyyey58t1qmr4ta3fr.png)
 

That’s it for this article. Hope this will be helpful to deploy your Express API using docker.

Feel free to comment your thoughts and let me know if you face any difficulty.
Some useful JavaScript One-Liners
Tags: webdev, javascript, beginners, productivity
Published: 2022-07-07 05:47:00

JavaScript is one of the most powerful language in this modern world. In this article we will go through some of the useful JavaScript one-liners.

- If you want to get the text that a user selects or highlights on a web page, there is a useful one-liner for that.
```js
const getSelectedText = () => window.getSelection().toString();
console.log(getSelectedText);
```

- There is a method called `scrollTo(x,y)`, it allows you to scroll to a particular set of used coordinates.
```js
const scrollToTop = () => window.scrollTo(0,0);
```

- If you want to have a smooth scrolling animation, just do something like this:
```js
const Top = () => window.scrollTo({top:0, behavior: 'smooth'});
```

- Internet bandwidth is basically the amount of data is being transferred over an internet connection in a specified period of time.
```js
navigator.connection.downlink;
```

- If you want to redirect user to a specified location, you can do something like this:
```js
const urlRedirect = url => location.href = url;
urlRedirect('https://dev.to/');
```

Hope you'll find some useful snippets in this code. Comment if you have more other than these.

You may also like to read: [Killer JavaScript One Liners](https://dev.to/shshank/killer-javascript-one-liners-3ii4)

Happy Coding Devs.
Deep Insights into Web Frameworks
Tags: webdev, opensource, github, programming
Published: 2022-07-07 05:46:30

In this chapter, we will share with you some of the top Web Framework repos (WF repos) on GitHub in 2021 measured by different metrics including the number of stars, PRs, contributors, countries, regions and so on.

Note:

1. You can move your cursor onto any of the repository bars/lines on the chart and get the exact number.
2. The SQL commands above each chart are what we use on our TiDB Cloud to get the analytical results. Try those SQL commands by yourselves on TiDB Cloud with this 10-minute tutorial.

## Star history of top Web Framework repos since 2011

The number of stars is often thought of as a measure of whether a github repository is popular or not. We sort all web framework repositories from github by the total number of historical stars since 2011. For visualizing the results more intuitively, we show the top 10 open source databases by using an interactive line chart.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fezwl02vn07p37ylfav.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9wwwm3f29riun5n46g2.png)

## Top 10 most starred Web Framework repos in 2021
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvh62rb7vh7omuqpjhr6.png)

## Top 10 Web Framework repos with the most PRs in 2021 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ondk2ckejyslx2r87ef4.png)

## Top 20 Web Framework repos with the highest YoY growth rate of stars in 2021
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9do4dl66fc173998coml.png)

## Top 10 Web Framework repos with the lowest YoY growth rate of stars in 2021 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zo2wqnqvava83yyslbt.png)

## Top 10 most used programming languages in Web Framework repos in 2021 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxyxempejxv4xtgu9h2q.png)

## Top 10 countries/regions contributing the most to Web Framework repos in 2021 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqfzyvsfvazlakwnjrud.png)

## The Rankings of Web Framework repos measured by Z-score in 2021 
The analytical results displayed above are generated based on just one single metric of these three: stars, PRs, or contributors. Now, we will use the Z-score method to rank the WF repos on GitHub.

This is the comprehensive ranking calculated by z-score:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99xt2dxc88pgqspfryb7.png)

_More content and specific SQL can go into the official website to learn more. _
https://ossinsight.io/blog/deep-insight-into-web-framework-2021
Cleora: Free Tailwindcss Wordpress Theme
Tags: wordpress, tailwindcss, theme
Published: 2022-07-07 05:46:00

I am using tailwind from almost two years and I really love to use it compared to bootsrap and bulma. due to the fact of easy ness to customize it as per my need for theme designing. 

To learn the TailwindCSS I have created a pilot project with [SailsJs](https://sailsjs.com/) and improved it over the time to master the skills. 

After mastering the tailwindcss skills I planned to make a wordpress theme from scratch, but because being a [Odoo Expert](https://atularvind.com), I failed many time developing a good wordpress theme.

> Failure isn't fatal, but failure to change might be - John Wooden

I learned many thing on my failure, I self thought the concepts of the wordpress theme develpment. I reviewed the code of other theme to master the concepts, and I used that learning to create this simple, minimlistic, responsive wordpress blog theme "[Cleora](https://wordpress.org/themes/cleora/)"

![Cleora TailwindCSS wordpress theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxqc2p5e6nfl44xs92il.png)

Cleora Uses the `tailwindcss@3.0.24` with `autoprefixer@10.4.7` and `postcss@8.4.13`. and you can change the theme color using the theme customizer according to your preferences. 

There are only few tailwindcss themes are available on [wordpress themes](https://wordpress.org/themes/search/tailwind/). you can check the code by downloading theme from [Here](https://wordpress.org/themes/cleora/), and check the preview [here](https://wp-themes.com/cleora/). 

If you want a source code you can check out github repo. Feel free to submit PRs.
https://github.com/HeliconiaIO/cleora


Cheers!
Please explain me the 1st two line of the solidity code.
Published: 2022-07-07 05:40:36



uint256 public _maxTxAmount = 1000000000000 * 1018;
uint256 private numTokensSellToAddToLiquidity = 1000000000 * 1018;
I am making a demo project and I want to make 90% token for public and 10% for different wallet holders , so what should be the changes in above line and do i need send 90% token to liquidity after dividing 10% token from the creator's wallet?
Best Websites on the internet
Published: 2022-07-07 05:39:26

[https://dev.to](https://dev.to)
[https://getsocialguide.com/](https://getsocialguide.com/)
[https://wishespot.com/](https://wishespot.com/)
[https://zakootas.com/](https://zakootas.com/)
[https://aumoz.com/](https://aumoz.com/)
[https://digitalupbeat.com/](https://digitalupbeat.com/)
[https://mouseankeyboard.com/](https://mouseankeyboard.com/)
[https://perfumelead.com/](https://perfumelead.com/)
[https://kamitechno.com/](https://kamitechno.com/)
Case Study - Slack: Scaling to Hundred Thousand Users
Tags: slack, scaling
Published: 2022-07-07 05:22:03

---
title: Case Study - Slack: Scaling to Hundred Thousand Users
published: true
description: 
tags: slack, scaling
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

### Follow Me, Shout Out, or Give Thanks! 
Please :sparkling_heart: this article. a small thing to keep me motivated =)
Twitter: [@djjasonclark](https://twitter.com/djjasonclark)
Linkedin: [in/clarkngo](https://www.linkedin.com/in/clarkngo/)

![Case Study - Slack 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/981fxdq52aytz99u97z2.png)
 
 ![Case Study - Slack 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddthz9lnh5wlfyax5zmb.png)