teleren/devto huggingface dataset:
Vue 3 provided an in-build CSS-module feature without external configuration.
Tags: vue, webdev, beginners, css
Published: 2021-05-13 20:45:28

In every web application maintaining a CSS code is a little bit difficult. When growing the CSS files and codes in the project. it's solved by using different methods.

There methods are:
  1. [SCSS/SASS](https://sass-lang.com/)
  2. [LESS](https://lesscss.org/)
  3. [Stylus](https://stylus-lang.com/)
  4. [CSS-Modules](https://github.com/css-modules/css-modules)
  5. [CSS-in-JS](https://cssinjs.org/)

Each method has pros and cons. but, now I am not going to explain each of the method's pros and cons. Now, here I only explain what's CSS-module and how to use it on Vue 3.

##What in CSS-module?
  It is basically the same as the CSS code structure and all. The main difference is calling methods is too different. In a simple way we say:
```
CSS-Modules = CSS in JS objects
```

By default Vue 3 gave two different of composing CSS.
  1. [CSS Scoped](https://vue-loader.vuejs.org/guide/scoped-css.html)
     Same CSS file and code. but, the class name loads dynamically on render. Refer to the below example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0zivp04v4nq92k2qig1.png)
`In scoped CSS have one problem is writing descendant selectors CSS is a little bit have a problem`
More info [refer it](https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind)

  2. [CSS Module](https://vue-loader.vuejs.org/guide/css-modules.html#usage)
 Same CSS file and code. but, rendering and showing class name as dynamically and **we able to customize the class name based on environment**(Dev mode and production mode). 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z37gljep1b5n9m2a2qj4.png)

##why we consider the CSS module in Vue 3?
 * Using CSS modules to avoid namespace collision for CSS classes
 * You can confidently update any CSS file without worrying about affecting other pages
 
I think it's enough for now. because these 2 have major problems in CSS. Even more, [advantages](https://css-tricks.com/css-modules-part-1-need/) have CSS modules. 

##Using CSS modules in Vue
**Step 1:**
Write a CSS inside the style of the component like below. Inside the style tag should `module` attribute.
```
<style module>
  .svg_icon {
    fill: currentColor;
    height: 24px;
    width: 24px;
  }
</style>
```
**Step 2:**
 Use the class name inside the template HTML code. using `$style` variable. Like below:
```
<template>
  <svg :class="[$style.svg_icon]" xmlns="http://www.w3.org/2000/svg">
    <title v-if="title">{{ title }}</title>
    <use :xlink:href="iconPath" xmlns:xlink="http://www.w3.org/1999/xlink"/>
  </svg>
</template>
```

That's all the CSS-module successfully use in the Vue component. [Code Repo URL](https://github.com/explore-free-projects/svg-icon-setup)

Reference:
[CSS Modules Configuration](https://cli.vuejs.org/guide/css.html#css-modules).
[Love CSS Modules in Vue.js](https://www.youtube.com/watch?v=ZxPTBMcaoqo&ab_channel=BenCodeZen)
Designing toheeb.com: Project Scope
Tags: webdev, showdev, startup, codenewbie
Published: 2021-05-13 20:42:29

---
canonical_url: https://toheeb.substack.com/p/toheeb-project-scope
---

2016, I made my first website. It looked like a house and the roof was responsive. I was happy! I used the sliding door technique along with some math to avoid structure overflow. I became an architect overnight.  

![toheeb-old-website-shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mopcpc6au7wy4dds6tll.png)
 
Later on, I watched how Adi Purdilla created a WordPress theme from scratch, every step of the way. An experience that improved me a lot. It was amazing having a guide all through the process.

Today, I want to start a series of redesigning my site from a blank canvas. No meta tags, No elements. We will justify everything we use. It should be available to everyone, SEO ready, and look good. Without forgetting Creator's experience.

![blank](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrq6f5vhez7uvzn254hd.png) 

I will be wearing different hats along the line. Copywriter, Designer ( UI, UX, IxD, Graphic, Frontend), SEO specialist, and more as needed. If deploying a JAMStack is a DevOps' job, add it please.

## The Project

I'd like to see this as a Startup website. My focus right now is on Content. Both long- and short-form content.

Later on, I will love to productize my Freelancing Service and end up with a SAAS tool. Rough ideas.

This is more of a live design. Ideas may come up and I'll need to branch out. Irrespective, I'm taking a lean approach.

The deliverables as of now will be the following.

- A Landing Page
- A blog 
- A portfolio

Other necessities like the Contact, and About Page will be a section on the Landing Page.

It's good you know I'm a design freak. And, an advocate of inclusive designs. This means I'll be delving into minute details including Typography, Color, Accessibility, etc.

I have my weakness(es). Copywriting is top of the list. But hey, the web is large enough to learn and create amazing stuff!

## Timeline

This is a priority for me right now. I'll be spending the next couple of days working on this, and writing about the process every step of the way.

I spent the last few weeks on the landing page's copywriting. It was an interesting process iterating and discarding what I wrote. Now, I have something that clicked with me. I'll be sharing how I wrote that next tomorrow.

I trust you'll learn a thing or two. And hope you'll learn a lot. I look forward to your feedback.

Working canvas: https://www.toheeb.com/  
If you'd like to receive updates in your inbox, here's a [subscribe link](toheeb.substack.com).
8 Software Development Terms You Should Know As A Newbie (Which I Struggled To Understand Initially)
Tags: programming, webdev, mobile, computerscience
Published: 2021-05-13 20:34:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j9nqmb1mhqv0bja1ov4.png)

This isn't a super technical post, but knowing these terms will help you to get along with the programming geeks.

### [1] 10X Engineer
A 10X Engineer is an engineer, typically a software engineer who is 10 times better than his/her peers.

### [2] LGTM
LGTM stands for "Looks Good To Me", which is what a senior programmer or code reviewer will say if a pull request from a programmer is accepted. 

### [3] Tech Stack
A group of technologies. For example, I use the MERN stack to build full stack web applications.

### [4] Repo
Means repository, which is the folder that contains the source code for a project, typically hosted online on GitHub or other sites. 

### [5] API
Something that serves you from the backend. For example, a weather API sends you latest weather data.

### [6] Library/Framework
Something that is used on top of programming languages. These two are different where framework is a complete solution but a library is not. An example of framework is Angular which is used on top of JavaScript to build frontend and it is a complete solution. React is a library to build UI but is not a complete solution so you need to depend of third-party packages/libraries to support certain features such as routing.

### [7] Native
Native means power. Native mobile apps are powerful than hybrid ones because they're written in native codes. For example, you might be a native American and French is your second language. If you need to give a speech about XYZ, you'll surely perform better by speaking in English than French.

### [8] Pull Request
A request to merge your code to the main codebase using version control system such as Git.
Road to 1st Dapp
Tags: blockchain, beginners, javascript, 100daysofcode
Published: 2021-05-13 20:21:43

This is my first post on my journey to creating my 1st Dapp. I have been coding for a few years off and on, but never took it serious till now. I will be using freecodecamp.org to start my with. 

The gameplan is to
- Learn Front End Language
- Create 5 programs
- Learn Back End Language
- Create 5 programs
- Learn how to Blockchain 
- Create 1 program

I don't have a good estimate on how long it's going to take and I have already completed the first program on freecodecamp.org. So hopefully by the end of the 100 days I will have my 1st dapp program? August 25th is just a close estimate.
Não só de Docker vivem os containers
Tags: kubernetes, docker, containerd, containers
Published: 2021-05-27 15:10:45

---
title: Não só de Docker vivem os containers
published: true
date: 2021-05-13 20:18:00 UTC
tags: kubernetes,docker,containerd,containers
canonical_url: https://blog.lsantos.dev/nao-so-de-docker-vivem-os-containers/
cover_image: https://raw.githubusercontent.com/khaosdoctor/blog-assets/master/images/2021/05/maxresdefault.jpg
---

Tive o prazer de ser convidado para uma live com o Fabrício Veronez sobre como podemos entender melhor o ambiente de containers muito além do Docker, com exemplos práticos e também código funcional!

{% youtube IuRAjlI5b7A %}

Conversamos por quase duas horas sobre todos os aspectos de containers e suas ferramentas! Foi uma live sensacional!

## Conteúdos comentados:

- [Entendendo a API do Kubernetes](https://dev.to/khaosdoctor/o-jeito-mais-simples-de-aprender-kubernetes-e-com-a-sua-api-mo1-temp-slug-5100022)
- [Hospedando seu próprio registry](https://dev.to/azure/hospedando-suas-imagens-docker-em-seu-proprio-registry-379b)
- [OCI Artifacts com Helm](https://dev.to/azure/armazenando-seus-helm-charts-no-azure-container-registry-im1)
- [Entendendo runtimes de containers](https://dev.to/azure/entendendo-runtimes-de-containers-f1f)
- [Controlando containers de dentro sua aplicação com ContainerD](https://dev.to/azure/controlando-containers-de-dentro-sua-aplicacao-com-containerd-201l)
The Concept Of Virtualization (hypervisor)
Tags: cloud, aws
Published: 2021-05-13 20:06:04

There are 7 primary types of virtualization, **Hypervisor** being the topic of this article. 

---
We'll start by taking a look at what a server looks like without Virtualization.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zfba89s3ulascn7ul4m.png)
We'll start by taking a look at what a server looks like without virtualization. In this example, our server is working with the physical hardware that it has, it's running a Windows OS that is serving a website over HTTP. As simple as this configuration might be we can run to some limitations along the way:
 
- our OS is tied to hardware, which means it is not portable and we can't easily move that OS and the application that is installed on it to another piece of hardware if we have some sort of issue or if wanted to upgrade the specs due to more/less traffic.
- the hardware might be underutilized because of the wrong estimation of what we need and in the context of cloud computing, this will cause a higher bill.

Let's now look at virtualization how it can help us solve some of these issues. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trlncedfksqck5nbv5d0.png)
So with a virtualization stack, we have a server with an extra layer of abstraction.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f13bykkk4ha9ef51pae8.png)
this layer is able to present virtualized hardware to the operating system, in that case, we call it a virtual machine or VM for short. The VM has an allocation of resources, maybe the server has 32GB of RAM but we just give 8GB the VM, also a certain amount of CPU power, disk space, and an allocation of shared networking... There is no physical hardware here it's virtualized and presented by the hypervisor but the OS doesn't know that, it just sees hardware.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epranu8y33xlutylqyz5.png)

the cool part about this is being able to run multiple VMs on the same physical hardware, another benefit is that any instance of these VMs can easily be moved to another server if it failed, went down, or if you wanted to perform some upgrades on hardware.


useful resources:
------
[running Hyper-V in EC2](https://aws.amazon.com/fr/blogs/compute/running-hyper-v-on-amazon-ec2-bare-metal-instances/)

[Amazon Machine Images (AWS AMI)](https://cloudacademy.com/blog/aws-ami-hvm-vs-pv-paravirtual-amazon/)

[What virtualization software does EC2 use?](https://www.quora.com/What-virtualization-software-does-EC2-use)
Work Smarter, Not Harder With ReacType
Tags: react, typescript, javascript, webdev
Published: 2021-05-13 19:49:07

#Excited to announce the launch of ReacType!

This morning, my team released ReacType 7.0, a rapid prototyping tool that enables developers to build React components via an intuitive drag-and-drop canvas, apply CSS styles, and generate custom boilerplates.

{% medium https://xkevinpark.medium.com/work-smarter-not-harder-to-create-a-react-app-with-reactype-94dd60be5873 %}

**HOW DOES IT WORK?**
- Build React components via drag-and-drop interface
- Generate code dynamically in a real-time code preview
- Design collaboratively via built-in annotations
- Save & share templates
- Pass props and manage state in table view
- Customize styles via CSS editor

**WHY REACTYPE?**
1. Eases learning curve for developers new to React frameworks
2. Accelerates development while maintaining product vision
3. Streamlines communication between developers and designers

{% github https://github.com/open-source-labs/ReacType %}
Cheers!
The Android Photos Forensics App: XFace
Tags: android, kotlin, programming, deeplearning
Published: 2021-05-13 19:45:04

In my first post, I wanted to show you my new app that I have developed fully including backend server configuration and APIs. 

It is called `XFace: Photo forensics` and my goal was to have a handy app that will try to detect Photoshop (or other photo manipulating apps) in any photograph using 4 different ways to do so.

All that should be done in one click so you can get details that could help you if you are a professional DFIR or only a curious person that wants to do some surprise for your friends.

In all cases, it will be a great opportunity for me if I got some reviews from you on it: https://play.google.com/store/apps/details?id=me.jagar.xface
Six best practices to improve your code reviews
Tags: codereview, codequality, productivity, programming
Published: 2021-05-13 19:37:02

Code reviews are complex. They involve good time management, high emotional intelligence, knowledge of the codebase, and technical expertise. It is a team process where practice and communication are everything. 

Here are six best practices to improve your code reviews:

1. Review Your Pull Requests Before Others
2. Encourage Reviewers To Be Co-Owners
3. Leverage Automation
4. Always Have A Reviewer In Mind
5. Time Your Code Reviews 
6. Create A Top 10 List Of Pull Requests To Learn From

If you want to read more, check out the full blog [post](https://reviewpad.com/blog/six-best-practices-to-improve-your-code-reviews/).
How To Choose Which JavaScript Libraries To Use (Part 4)
Tags: javascript, webdev
Published: 2021-05-13 19:26:01

Choosing the right tools is one of the most important decisions that you'll have to make when you start a new JavaScript project. In this four-article series, I'll give you my tips and tactics so you can choose the best libraries for your JS project.

## Are You Suffering from FOBO?

This last article of this series is not about the technical aspect of choosing libraries or frameworks. Is about the anxiety of having to choose the best option when there are plenty of alternatives out there.

American author Patrick McGinnis created the concept of FOBO or **Fear Of a Better Option.** It's the feeling of stress when you have to make a decision and there is an oversupply of available options.

You feel pressured to choose the best alternative, but the feeling doesn't disappear after making a decision. After you pick an option, a person suffering from FOBO might start feeling regret for not choosing a "better" alternative.

People affected by FOBO might also procrastinate and delay the decision. Or abandon the project altogether (if you're in the position to do so.)

How to cope with FOBO? First, it's important to come to terms with the fact that **it's impossible to make a 100% perfect decision.** Why? Because it's impossible to have all the necessary information. You don't know what the future holds, for example.

Any decision has tradeoffs, and that's OK. You'll always leave something on the table when you choose something, but **if you don't choose anything, you'll leave everything on the table.**

---

p.s. Did you like what you've read? Every week I send an email with free tips and insights to become a better JavaScript dev. If you're interested, [click here to subscribe](https://nicozerpa.com/newsletter/).
How do I disable GoLang's auto-formatting on file save in VSCode?
Tags: go, beginners, vscode, help
Published: 2021-05-13 19:19:40

I'm new to Go, and trying to make something using it, however, each time I press the save button (or use the shortcut `Ctrl`+`S`) (so basically, whenever I save the file <b>MANUALLY</b>).

Though, the strange thing is, I have autosave turned on in VSCode, and the file will save after like a second or two, and whenever VSC saves the file, it doesn't get formatted (contrast to when I try to save it myself (as I've just stated)).
There are the GoLang related settings in VSCode's `settings.json` file:
```json
"go.lintOnSave": "off",
"[go]": {
	"editor.formatOnSave": false,
	"editor.defaultFormatter": null
},
"go.languageServerExperimentalFeatures": {
	"format": false     # Property "format" is not allowed.
}
```

Can someone please tell me what I'm doing wrong? I looked at [this](https://github.com/microsoft/vscode-go/issues/2902) and even looked at what Go themselves had to say on their [VSCode extension page](https://code.visualstudio.com/docs/languages/go#_formatting), but neither of these are helping.



Thanks a lot in advance!
Cheers!
Datetime Filter in Vue 3 using Moment.js
Tags: vue3, vue, momentjs, datefilter
Published: 2021-05-13 19:03:15

---
title: Datetime Filter in Vue 3 using Moment.js
published: true
description: 
tags: Vue3, Vue, Momentjs, datefilter
---

# Datetime Filter in Vue 3 using Moment.js
It turns out that Filters have been removed 😏 in Vue 3 [Official docs link](https://v3.vuejs.org/guide/migration/filters.html).

So that practically makes it a bit hard to format date/datetime in Vue 3. According to the official docs, the use of global filters is now encouraged but in my opinion, I'm not too sure the use of global filters would solve the problem at hand.

So, I looked around but couldn't find much examples but I was able to eventually come up with something with the help of this famous library [Moment.js] 🕗 (https://momentjs.com/)

Let's dive straight into it.
1. Install moment js from npm `npm install moment --save`
2. In your component
```
import moment from 'moment'
export default {
...
  created: function () {
    this.moment = moment;
  },
  setup() {
   let todaysDate = new Date();
  }
...
}

<div>
   {{ moment(todaysDate).format("ddd MMM DD, YYYY [at] HH:mm a") }}
   <!-- As of the time of writing, this gives ==> Thu May 13, 2021 at 19:42 pm -->
</div>
```
So that's it 😉. Please feel free to change the format to suit your use case.
Suggestions/comments are welcome. Thanks 🙏 🙏 🙏
The Importance of Memory
Tags: growth, motivation, memory, career
Published: 2021-06-01 09:21:26

---
title: The Importance of Memory
published: true
date: 2021-05-13 14:14:17 UTC
tags: growth,motivation,memory,career
canonical_url: https://x-team.com/blog/importance-of-memory/
---
I am a child of the GTD movement. The methodology David Allen laid out in his book [Getting Things Done](https://gettingthingsdone.com/what-is-gtd/) is the foundation of how I stay productive. The moment a task pops into my head, I offload it from my memory into my GTD-inspired system built with [Todoist](https://todoist.com/) and [Roam Research](https://roamresearch.com/).

Over time, I started doing the same with knowledge as I do with tasks. I would capture information I found interesting, process it, and [store it in such a way](https://x-team.com/blog/a-system-to-capture-and-retain-knowledge/) I could easily find it again. I still do this today, because I believe it's much better than reading or watching something without taking notes.

![The Importance of Memory](https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost//2021/05/David-Foster-Wallace.jpg)<figcaption>Taking notes on a <a href="https://www.youtube.com/watch?v=iGLzWdT7vGc">2003 interview</a> with David Foster Wallace</figcaption>

But there's a big problem with doing things this way. It further undervalues memory. We already live in a world where it feels ridiculous to memorize something when you can search for it on the Internet and have the answer within seconds.

- Why remember the capital of a country?
- Why remember someone's birthday?
- Why remember a poem?

To a degree, this makes sense. Knowing the capitals of all countries isn't particularly useful information unless you're an avid quizzer (and even then). But it's not because some information isn't worth remembering that nothing is. A productivity framework like the one I set up makes it incredibly easy to get by quite well without ever remembering anything. But is getting by really what we're striving for here?

We cannot underestimate the benefits of memory. For one, mastery requires memory. We understand this intuitively. Imagine you had to look up every HTML tag and CSS selector when building a website. It would take forever. When you memorize the tags and selectors, you not only build your websites faster, but you can build more complex websites too.

In addition, how do you know something exists when you cannot remember it? You can visualize large numbers in JavaScript with an underscore (e.g. `const n1 = 1_000_000`), but would you ever search for a more visually appealing way to display numbers in JavaScript? Probably not. If you don't memorize it, you'll never use it.

We live in a world where memory is undervalued because of how readily accessible information [seems](https://x-team.com/blog/the-internet-makes-you-dumber/). But if you want to be a true master at what you do, you need to memorize things. Read and take notes. Then review those notes. Then use the knowledge from those notes. Only then are you on the path to mastery.