teleren/devto huggingface dataset:
How was your 2020?
Tags: discuss, watercooler, 2020
Published: 2020-12-30 19:32:41

2020 is almost over! 🥳

This was a tough and different year to get through, and working from home was an entirely new experience for some.

**Going past this year — what is something you will look back to?**

Everything counts — big or small 🎉

Examples include:

- Learning something new and exciting ✨
- The moment that made you go "wow" 🌟
- Developing a new habit 🧘‍♂️

Wishing everyone a happy 2021! 🎈
Building a To-do list app
Tags: javascript, webdev, html, css
Published: 2020-12-30 19:27:10

### **Introduction**

Hi, I'm Vlad, and today I want to talk about the latest project I made using HTML, CSS, and plain Javascript. A To-Do list app. You can see it here: https://vladtodo-list.netlify.app/

In this article, I want to talk about the struggles I went through when building this project. I'll also share all the features I added to the app and how I built them.

This project is inspired by the "Modern Javascript from the beginning" course by Traversy Media, I want to mention this from the beginning even though I added more features by myself.

### **Main features**


1. I first built an input field where the user can add the task. After he presses the "Add Task" button or the "Enter" key the tasks it's added to a ul and the Local Storage.

2. Then for every task that gets added I built a little red "x" button that deletes the task from the UI and from the Local Storage too.

3. Besides that I added a button that clears all tasks both from the UI and Local Storage.

4. Above the collection of tasks I added a filter field where the user can filter through his tasks.

5. Then because the little "x" button wasn't enough I also added an event listener that adds a line through the task you click on.

6. Finally, the feature that was the hardest and took me the most time to implement was the dark mode. I spent about 5 hours on it but it was all worth it in the end. I used a Youtube  [tutorial](https://www.youtube.com/watch?v=xodD0nw2veQ) from Florin Pop to help me add this feature.


The biggest struggle was adding a dark mode to the whole website. When I added it to the body the div that contains the task app was still in light mode. So what I did was added the event listener to that div too and this solved the problem.

Another struggle I went through was adding the line through feature to every element of the list. I solved this by adding the event listener to the entire collection of tasks.

### **Conclusion**

To sum up I think that this is a project every beginner web developer should build. I learned so many new things from it like how to add a dark mode theme or how to add the item to the Local Storage.

If you want to read about my journey as a self-taught web developer you can follow me on [Twitter](https://twitter.com/VladPasca5). There I share all the projects I am working on.
Modern Sidebar Menu
Tags: codepen, html, css, ui
Published: 2020-12-30 18:53:51

{% codepen https://codepen.io/FlorinCornea/pen/YzGeprR %}

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a sidebar menu.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:

```HTML

<aside>
  <p> Menu </p>
  <a href="javascript:void(0)">
    <i class="fa fa-user-o" aria-hidden="true"></i>
    My drive
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-laptop" aria-hidden="true"></i>
    Computers
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-clone" aria-hidden="true"></i>
    Shared with me
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    Starred
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-trash-o" aria-hidden="true"></i>
    Trash
  </a>
</aside>

```

Now I want my sidebar to be 100vh and no margins:
```CSS
body {
  font-family: 'Roboto';
  width: 100%;
  height: 100vh;
  margin: 0;
}
```

For the nice visuals of the sidebar:
```CSS
aside {
  color: #fff;
  width: 250px;
  padding-left: 20px;
  height: 100vh;
  background-image: linear-gradient(30deg , #0048bd, #44a7fd);
  border-top-right-radius: 80px;
}

aside a {
  font-size: 12px;
  color: #fff;
  display: block;
  padding: 12px;
  padding-left: 30px;
  text-decoration: none;
}

aside a:hover {
  color: #3f5efb;
  background: #fff;
  position: relative;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

aside a i {
  margin-right: 5px;
}
```

The most difficult effect to achieve was the hover over the menu item:

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

For the left top and bottom hover design i added 2 pseudo elements like this:

```CSS

aside a:hover::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 20px 0 0 #fff;
}

aside a:hover::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 38px;
  right: 0;
  height: 35px;
  width: 35px;
  border-top-right-radius: 18px;
  box-shadow: 0 -20px 0 0 #fff;
}
```

There are some hardcoded values but if it works, it works! :))

Thank you for reading this article and I'm curios if you have another method to achieve the hover result.
3 simple things to keep in mind when building a client site!
Published: 2020-12-30 18:41:29


Have you ever find yourself in a situation when you actually don't know how to proceed with a website client. This event occurs when your client is not that specific what he wants and asking him wouldn't help you.

Today I'm going to share with you how you can achieve and represent yourself as professional as possible to your clients.
<br>
<br>
#1. Gather ideas from similar sites

This might not solve your entire problem, but it would give you idea what's next. For instance what I do when I'm stuck is I try to copy and paste to Adobe Xd 3 to 4 similar sites. 

I'm not saying you should copy them, you should be inspired by them see how they are solving current problems and how you can too. 
<br>
<br>
#2. Make a list

Before your jump straight to the development or to design, try to make a list about what's inside of every section and why that section is there.

First start with the easiest one. For instance contact page, most of us know what's inside the contact page. If you don't know start research time.

Do your research about that topic for example what goes inside contact page or about page, it really depends on the project but you get the idea.
<br>
<br>
#3. Always keep in mind for whom is the website built for?

To be honest this is the most important point I made today. Most of us try to make crazy designs or clean code or whatever. But at the end it doesn't matter if your website don't get any traffic right?

People come to the site for some reason and I promise you that they don't come for the design or even the craziest one THE CODE. They probably don't notice it at all.

Thus where your focus should be? It's simple, always view it in the user perspective. If you do this I guarantee you that your clients gonna be happy and you are going to get that 5 star review more easily. 

<br>
__Wanna boost your productivity by writing code faster (beginner level recommended) [Code Faster Keymap](https://marketplace.visualstudio.com/items?itemName=LeartMorina.CodeFasterKeymap)__
THE BEST END OF THE YEAR GIFT!
Tags: hacktoberfest, thepracticaldev, devjournal
Published: 2020-12-30 18:38:14

The awesome gift just arrived! :fire: 

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

The open-source community is the most incredible I have known since I started as a software developer, Thanks to all the people who make it possible! (also Vonage, Intel Corporation, Mattermost ) I highly recommend that you become part of this great community. (Finger heart :heart: :satisfied:)
Dev.to View Count Day 3 -- Deploying
Published: 2020-12-30 18:30:04

Welcome back to my series walking through my creation for this Hackathon!

Last time we got a Rails app setup, and added a Delayed Job that would hit the dev.to API and record article stats for all your articles on Dev.to

We don't have a way to display any of this data yet, but I want to get this deployed and collecting data automatically so that when we create some views soon we already have some populated data!

Deploying with the Digital Ocean App Platform was pretty painless! Definitely will keep my eye on it for future projects. I gave a more in depth comparison in another post recently if you are interested. [Digital Ocean App Platform vs Heroku](https://dev.to/coreyja/digital-ocean-app-platform-vs-heroku-2mfh)

After getting this deployed, I manually enqueued the Delayed Job to record stats. And the end of each run it enqueues another job of the same type to run in 10 minutes. I call this snake-enqueueing as the last job in the cycle enqueues the first one, so it goes on forever.

![Ouroboros, a snake eating its own tail in a classical style](https://dev-to-uploads.s3.amazonaws.com/i/fslkcmg5og171tkhtvyo.jpg)
Image Credit: https://www.zmescience.com/ecology/animals-ecology/ouroboros-snake/

And from here I'm just gonna let it run! We'll work on making a UI next, but this will be collecting data for us in the background!

Photo by <a href="https://unsplash.com/@billjelen">Bill Jelen</a> on <a href="https://unsplash.com/s/photos/rocket-launch">Unsplash</a>
Industry use case on -Automation Using Ansible 
Published: 2020-12-30 18:27:16

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkwh5uq6e6rig13liqry.png)
Being an ARTH learner, I have attended a live practical workshop organized by LinuxWorld on the industrial application of ansible.

*The session was delivered by two best experts in the industry
Mr. Sreejith Anujan (The Principal Instructor at Red Hat)
and Mr. Arun Eapen (Director, APAC Service Delivery, GLS RedHat Asia Pacific)*

It was a very informative session, I learned about:

What is Automation?
**Automation** means reducing manual work as much as possible for a smooth and fast process. Using a Script in Automation engine that automates cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs.

**Ansible** - Ansible is a and agentless Automation tool that helps in automating the deployment of various applications.

**Ansible tower** - Ansible tower is a bundle of multiple features that provide different services like WebUI, Jobs, Schedule Jobs, Notification feature, Credential Management, Workflow Management, Templates, and other integrations. It also helps in CI and CD where we can manage the entire workflow which includes the git SCM using webhooks, node scaling, credential security, and this whole thing can be done by using playbooks called Ansible Collections.

**What are the Ansible Tower Challenges?** 
Ansible tower provides us with an API, with Role-based access control along with many more features and not to mention simple to control GUI interface.

🔴 we can execute multiple playbooks in a single click.
🔴 we can do scaling using an ansible tower.
🔴 we can integrate other technologies easily.
🔴 Maintaining Workflow (Always run Ansible playbooks one after other)
🔴 Run Playbook based on permission by admin (allow/deny)
🔴 Integration of Ansible with any other technology (If any technology not supported, We can integrate after changing the python Virtual Environment)

**How can we use credentials in Ansible Tower?**
🔴 we use credentials to authenticate.
🔴 we use credentials when we integrate Ansible with cloud tech and others.

**ChatOps**
ChatOps is a new operational paradigm - work that is already happening in the background today is brought into a common chatroom.

![0_QdL8T5zU2wgI2fMo](https://dev-to-uploads.s3.amazonaws.com/i/6hrdi6mucv97yhpgyl4b.png)
**How can we integrate Ansible Tower with Cloud & Notification based Applications?**
🔴 we can integrate ansible tower with cloud and notification based app (ChatOps).
🔴 like we can integrate ansible with Slack notifications using slack tokens.




*#RedHat #vimaldaga #righteducation #educationredefine #rightmentor #linuxworld #makingindiafutureready #righeducation #arthbylw #ansiblebylw #ansible #expertsession #sreejith #arun #practicalimplementation #rh294*
Things I Don't Know as of 2020
Published: 2020-12-30 18:26:16

---
title: Things I Don't Know as of 2020
published: true
description: 💡 Not knowing everything is ok
tags: 
---

People assume that being in any industry for more than a few years one should know just about everything. That's so not true! In this post, I am listing out the things which I'm not aware-of or currently learning.

> 💡 Not knowing everything is ok

List of things I don't know

- Unix commands and bash -  I can manage with `ls`, `cd` and the world-famous `rm -rf` Can manage with grep but for everything else I’ve to lookup.
- CSS Methodologies - No BEMs, No OOCSS I can do Tailwind CSS or styled-components easily. CSS-in-JS is the one I'm rocking now🤘
- TypeScript - Type checking in JavaScript is not my cup of coffee  ☕
- Generators - Stream data only using JavaScript 😱
- Containers - I can create a docker and launch a container, nothing more than that 📦
- Animations - Using CSS or SVG Animations, gets on my nerves.
- Python - No "Hello World!!" also. 🐍
- Machine Learning - Maybe will take up next year 🎰
- Testing - I can handle Unit testing in JavaScript, React and Vue, but automating everything in one click is what I've to get hold of in 2021 🔥
- Redux - Haven't got the change to look at it
- AWS - This is where my current focus is, I've started a bit or two. AWS Amplify is making my life easy 😇

---
I'm aware of the knowledge gaps that are created over time. Learning never ends, it's always good to keep learning

💡 Post inspired by [Dan Abramov's](https://overreacted.io/things-i-dont-know-as-of-2018/)

{% twitter 1078650200221204480 %}
CodePen - Generative Soft Gradients [SVG]
Tags: codepen
Published: 2020-12-30 18:19:54

<p>I have been seeing these soft + colorful gradients around a lot recently and thought it would be cool to make some generative ones. They pair really nicely with the new "glassmorphism" trend!</p>

{% codepen https://codepen.io/georgedoescode/pen/OJRQWNX %}
How can new developers gain experience?
Tags: career, webdev, devops, culture
Published: 2020-12-30 18:15:31

Eric Silverman, CEO and cofounder of FeaturePeek, discusses how new developers can gain experience, why it's important to read other people's code, and how contributing to open source projects can help you learn and look attractive to potential employers on your job hunt.

Eric's GitHub: https://github.com/eric-silverman

Learn more about FeaturePeek: https://featurepeek.com/
Learn more about the Mintbean developer community: https://mintbean.io/
Search for a keyword across all AWS Lambda functions with zipgrep
Tags: aws, serverless
Published: 2020-12-30 18:09:51

# How to
1. Download all AWS Lambda functions as ZIP files.
2. Search for a keyword in the ZIP files.

# Use case
I used it to check for Lambda containing specific keywords in a chaotic verification account that includes many direct-written Lambda not managed in the version control.


# 1. Download all AWS Lambda functions as ZIP files

Use this excellent script.

[nemani/download_all_lambda_functions.sh](https://gist.github.com/nemani/defdde356b6678352bcd4af69b7fe529)

## Prerequisites

 - [wget](https://www.gnu.org/software/wget/) is installed.
 - [aws cli](https://aws.amazon.com/jp/cli/) is installed.
 - Use bash.

##  Usage

 ```shell
# This block is not necessary if you set a default profile
export AWS_DEFAULT_PROFILE=xxxxx
export AWS_DEFAULT_REGION=ap-northeast-1
export AWS_DEFAULT_OUTPUT=text

# Run
bash download_all_lambda_functions.sh 
```

### Note
Script says, "Completed Downloading all the Lamdba Functions!" but just threw the task in the background, so it hasn't finished.
No signal is said when all background tasks are finished.
So, I considered it complete when the download task stops and the number of zip files matches the functions.

## Output result
A zip file for each function is downloaded in lambda_functions/*.

## Note
It's a bit annoying to get them by region.
I recommend separating the download destination folder for each region.

# 2. Search for a keyword in the ZIP files

## Example usage

Search for foobar

````shell
cd lambda_functions

for file in *.zip; do
    res=`zipgrep -n foobar $file`
    if [ -n "$res" ]; then
        echo "x:$file";
        echo "$res";
    else
        echo "o:$file";
    fi
done
```

## Example output results

```shell
x:aaaa-checker.zip
lambda_function.py:30: target = "foobar",
o:bbbbb-deleter.zip
o:ccccc-notifier.zip
x:ddddd-test.zip
lambda_function.py:21: print("foobar"),
...
```

## Remarks
### Another way that didn't work

```shell
find . /lambda_functions -name '*.zip' | xargs -I file zipgrep foobar file
```

This command was insufficient for me because it did not know the ZIP where the keyword was detected.

### To take time
If Lambda comes with libraries and .env environment, grep will take a long time.
Using Rails UJS Confirmations in Stimulus and StimulusReflex
Tags: rails, ruby, javascript, stimulus
Published: 2020-12-30 17:59:36

One of the many benefits of using the fantastic [StimulusReflex](https://stimulusreflex.com) has been a return to using the conventions of [Rails UJS](https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#stoppable-events). Simply [appending a data attribute to an element to have it automatically disable itself during an interaction](https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#automatic-disabling) is the type of magic that reminds me of first getting started with Rails.

If you need to add a confirmation step to an interaction, which is a common pattern if a user is trying to destroy an object, [you can make use of the `data-confirm` attribute](https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#confirmations):

```erb
<button data-confirm="Are you sure you want to remove this context?">
  <%= render_svg 'icons/custom/remove' %>
</button>
```

If you try to use `data-confirm` with Stimulus or StimulusReflex, you'll find out that [`data-confirm` is not supported out-of-the-box](https://discuss.hotwire.dev/t/wait-for-alert-confirmation-to-run-stimulus-code/383/9) - which makes sense. In order to use it along with `data-action` or `data-reflex`, you can simply listen for the `confirm:complete` event (instead of `click`) that is triggered by `rails-ujs` when the user accepts the confirmation modal:

```erb
<button data-reflex-dataset="combined"
        data-confirm="Are you sure you want to remove this context?"
        data-reflex="confirm:complete->Context#remove_context">
  <%= render_svg 'icons/custom/remove' %>
</button>
```

```javascript
// When confirmation accepted, delete the block.
this.element.addEventListener('confirm:complete', (event) => {
  this.stimulate('ScriptEditor#delete_context', event.target)
})
```

![user accepting a confirmation modal](https://dev-to-uploads.s3.amazonaws.com/i/adw35mkq7ny2ikb7ttxg.gif)

Now, the action specified by `data-action` or `data-reflex` will only be triggered if the user accepts the confirmation dialog. This allows us to easily add a confirmation step to any Stimulus or StimulusReflex interaction.

---

*I ran across this issue while building [Voxable](https://voxable.io), a conversation design platform. If you're building chatbots or voice applications, I hope you'll [check it out](https://voxable.io)!*
Failures are blessings in disguise
Tags: react, webdev, frontend
Published: 2020-12-30 17:57:21

I am not a motivational speaker! But i say this because i have experienced it myself. I completed my graduation this year but i was unable to get a job. And for the most part i can say that it is my mistake. I did not go to off campus placement drives but my friends did. And guess what, most of them got placed through those drives. And by the time i graduated i had a degree but not a job!

And ever since i came back home i applied for a lot of jobs but could not get any decent one. Reason being the fact that most of the companies today are looking to hire experienced programmers, someone who has worked in the company for at least 2 years. And most of the companies hiring freshers are done hiring during the March-April period. 

Now let me tell you the good thing that came out it. One day one of my friends told me about the job challange started by Tanay Pratap Sir. This job challenge required anyone with programming knowledge to submit 5 projects, 3 Blogs (Mandatory) and 2 videos (Not Mandatory). And as soon as i came to know about it, i started preparing for it.

If i had been hired as a fresher by one the companies like Cognizant or TCS then i would have gotten busy with their regressive training schedule and i would have never tried to make apps like youtube-clone and spotify-clone that i have made recently as a part of the challange. Also i would have never even thought of writing a blog either.Because of this job challange i have grown a lot as a developer but this would never have happened if i had got a job earlier.
9 Ways To Optimize Node.js Applications
Published: 2020-12-30 07:38:14

Using the Cluster Module For Parallel Processing.

Cluster module is native to Node.js and it creates a lot of processes for applications including master cluster which acts as load balancers for distributing requests among all the slave clusters.
Optimizes Your servers By Using All The CPU Cores To Work Parallel.

 Use The Latest But Stable Version.

The latest stable version of Node.js is essential when it comes to making stable and optimized apps, due to the improvement in the JavaScript V8 runtime engine.

 Concatenate JavaScript.

Web apps can speed up by concatenate multiple JS files into one, the moment your browser works with the <script> element the page rendering is blocked until the script is fetched and executed (unless if async attributes are applied).
If your page includes 8 JavaScript files, the browser will make 8 HTTP requests to fetch those & overall performance can be optimized just by minifying and concatenating those 8 files into one.

Using Standard V8 Functions.

Not all the browsers support common operations such as map, reduce & forEach, to overcome this problem we can use some client-side libraries on the front end. But in the case of Node.js, we know which operations are supported by Google's V8 JavaScript Engine so that we can use the built-in functions for manipulating collections on the server-side.



Read the full post at:https://mohit19.medium.com/9-ways-to-optimize-node-js-applications-2d1444b02985