teleren/devto huggingface dataset:
The 6 Best Practices for building Custom Angular Components Library
Tags: frontend, materialdesign, angular
Published: 2021-07-20 12:51:21

---
title: The 6 Best Practices for building Custom Angular Components Library
published: true
date: 2021-07-20 09:32:28 UTC
tags: frontend,materialdesign,frontenddevelopment,angular
canonical_url: https://tomastrajan.medium.com/the-6-best-practices-for-building-custom-angular-components-library-1d6a4cc8215e?sk=5e9cc7d81c71ad67d2e533924afb3032
---

[![](https://cdn-images-1.medium.com/max/2600/1*afMyGXwS5w2C9aH4ZtlN5g.png)](https://tomastrajan.medium.com/the-6-best-practices-for-building-custom-angular-components-library-1d6a4cc8215e?source=rss-360cd444e1fc------2)

Let’s explore best practices & lessons learned from building of a custom component library for large enterprise organization the right way!

[Continue reading on Medium »](https://tomastrajan.medium.com/the-6-best-practices-for-building-custom-angular-components-library-1d6a4cc8215e?source=rss-360cd444e1fc------2)
Hate of Leadership
Published: 2021-07-20 09:31:48

I've just read the post https://sourcehut.org/blog/2021-07-17-the-10x-programmer-is-a-leader/ from Drew DeVault and triggered. Usually my hate for "leaders" is so strong that I can't even write, but here I agree with everything Drew said, except for the word "leader". Maybe it was my experience, but I often encounter self-proclaimed "leaders" who are people that want to put themselves above others.

First time I encountered this pattern in MLM sect. The sect had no real product. Everything they did was paid teaching on how to wear a suit, and how to mess with people to bring more paying followers.

I hate self-proclaimed leaders the same way I hate self-proclaimed presidents. I know that both mostly exist in post soviet countries and holywood movies. Types I've rarely seen in successful business environment, but living in hierarchical country where I see some young people want to become a "leader", I imagine that they want to be a suit-case "leader" who rides in a black car and can not give a f* about "plebs". I can understand them. The pressure of living in an authoritarian country, where the rules are dumb and you are punished for everything with no sane explanation is too high. The "peaceful" terror is so draining, that it becomes a dream to climb higher to escape it, and take revenge on others. When you speak of "leadership" this is what it means to me.

The Drew's article is an awesome reference, and I will probably show it to people, who believe in "leadership" from company management courses. But I would prefer a word that would be neutral towards me, and won't make me suffer, because in the world of "leadership" if I am not the leader, then I am the slave. And I can't be happy in being one or the other. I don't want people like me to hate me, and I don't want to treat others low. There must be a different gameplay. Evolved for 21th century. Now we are all synchronized. Don't need to waste this opportunity until some "leaders" who are uncomfortable without their crowns, to break this down back into medieval times when network connection was a privilege.

The net made it obvious that people are limited. Those who have the time and interests to see what needs to be done are not necessarily those who can make it done. And people who are doing actual things may not have interest in coordinating and even talking to other people. But why some of the people are starting to name others as "leaders"? I can only have one explanation - they don't know alternative gameplay. And the "leader" will make sure they won't, because then they will lose their authority.

To explain alternative gameplay, where people can help each other without going through a rigid hierarchical model, there should be different role names than just a single superhero "leader". Roles that would make those who seek to put themselves above others, uninterested.
How to make a password validation with Regex or Yup
Tags: react, typescript, beginners, testing
Published: 2021-07-20 09:23:02

##Password Validation with Regex

```js

const isUpperCase = new RegExp(/(?=.*[A-Z])/g)
const isSpecialChar = new RegExp(/(?=./*[!@#$%^&*])/g)
const isLowerCase = new RegExp(/(?=./*[a-z])/g)
const isLong = new RegExp(/(?=.{7,})/g)
const checkIsWhiteSpacefromBegAndEnd = new RegExp(/^[^][\w\W]*[^]/g)

const passwordValidation = (currentPassword: string): boolean => {
 if(
   currentPassword.match(isUpperCase) &&
   currentPassword.match(isSpecialChar) &&
   currentPassword.match(isLowerCase) &&
   currentPassword.match(isLong) && 
   currentPassword.match(checkIsWhiteSpacefromBegAndEnd) 
 ) {
   return true
 }
 return false
}

```
###For the tests I am using Jest and taking a TDD approach.
You can write lots of tests these are just a few of the samples I wrote.

```js
describe('Given the pssword validation function', () => {
 test('test passing requirements', () => {
  expect(passwordValidation('Aa!1uj8h')).toBe(true)
  expect(passwordValidation('1_c_A_!2')).toBe(true)
  expect(passwordValidation('A b 1 ! 2 %')).toBe(true)
  expect(passwordValidation('_13Bbhjj@}}j>_')).toBe(true)
})

test('test failing password requirements', () => {
 expect(passwordValidation(' ahhhhh')).toBe(false)
 expect(passwordValidation(' aAhhhhh')).toBe(false)
 expect(passwordValidation(' aA122hhhhh')).toBe(false)
 expect(passwordValidation(' 111111122')).toBe(false)
 expect(passwordValidation(' 111111122aA')).toBe(false)
 expect(passwordValidation(' Bba !')).toBe(false)
 })
})
```
###Password Validation with Yup
[Yup Link](https://github.com/jquense/yup)

```js

export const passwordValidation = Yup.string()
  .trim()
  .required('Required')
  .matches(
    /(?=.*[A-Z])/,
    'Your password needs to have at least one capital letter',
  )
  .matches(
    /(?=.*[!@#$%^&*])/,
    'Your password needs to have at least one special character',
  )
  .matches(
    /(?=.*[a-z])/,
    'Your password needs to have at least one lower case character',
  )
  .matches(/(?=.*[0-9])/, 'Your password needs to have at least one number')
  .min(8)
  .max(200)

```
Node.js CPU intensive 🔥
Tags: help, javascript
Published: 2021-07-20 08:32:27

I posted a little while ago about a need to convert Java classes into Typescript declarations.
The goal is to give Rhino JS super powers by using the Typescript backend, exposing and understanding what's available to the JavaScript context.

The problem is, I have some 300 jar archives making up the application which I am trying to get typescript to understand.
You can unzip a jar or use the command `jar` to get the contents of that jar, from here scan the output for .class extensions, this is the first bottleneck
If 300 jars contain let's say 100 classes each well you can imagine, it's a big lot of classes.
There is some disk IO going on here but not sure how expensive it is. I am spawning and awaiting a promise in a loop to run this command, 1 at a time I suppose?
Could this be done better?

Node can handle it but my CPU on my MacBook Pro 2020 gets damn hot (nothing new here but, it's absolutely not what I want)

Then the next thing for each class in this parent loop, loop and run `javap` to decompile the class and get something that can be parsed into generated typescript a step down the line. This is SLOW and even though we are using spawn it's still not ideal. There is yet more writing to disk here as we try dumping the output to disk. 

Is node.js right for this application? Could I use workers or multi processes, is the bottleneck javap or jar maybe, lots of confusion 😑
Why Use React Redux?
Tags: react, redux, javascript, webdev
Published: 2021-07-20 08:05:40

You will come across quite a few tools as well as libraries on the market for web development. However, it will not be a sensible thing on your part to jump on every single one of them without actually comprehending their benefits. Even though Redux is not a new concept, it is nevertheless quite popular. Here, we will mention what it is, why it should be used, and its benefits.

<b>What exactly is Redux?</b>

Redux happens to be a predictable state container and has been created to help you write JavaScript applications consistently across server, client, and native environments. Moreover, they are simple to test.

While it is used mostly as a state management tool with <a href="https://www.rlogical.com/hire-dedicated-developers/hire-react-js-developer/">ReactJS development services</a>, it can be used with other JavaScript libraries or frameworks. Furthermore, at 2KB, it is lightweight, and therefore, there is no need for you to be concerned about it making the asset size of your application larger.

Your application’s state is kept within a store with Redux, and each component can access any state required by it from the store.

  
<b>When should we use Redux?</b>

One of the most significant debates lately in the front-end world is regarding Redux. It has turned out to be amongst the hottest subjects of discussion after its release on the market. However, while many individuals preferred it, others also criticized Redux.

It will enable you to manage the state of your app in one place and keep the modifications in the app more traceable and predictable. In this way, it becomes simpler to reason about modifications taking place in the application. However, all these advantages come with constraints and trade-offs. For example, it might seem that Redux is responsible for adding up boilerplate code, which helps to make simple things somewhat overwhelming. However, this will depend significantly on the architecture decisions.

 
One simple reply to this particular query is that you will comprehend it for yourself once you require Redux. If you are still perplexed regarding whether you require it, there is no need for you to do so. This will happen when your application will develop to the scale where it will become quite difficult to manage the app state, and you will be starting to look out how to make it simple and easy.

GET TO KNOW MORE HERE about Reasons for using React Redux: https://www.rlogical.com/blog/why-use-react-redux/
My VS Code setup ✨
Tags: vscode, productivity
Published: 2021-07-20 08:04:56

I'm very happy about my current VS Code setup, so I thought I'll share it with y'all:

**Look and feel**
Theme: [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
Font: [Operator Mono](https://www.typography.com/fonts/operator/styles)
File Icon Theme: [File Icons](https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons)

**Extensions**
- Auto Rename Tag
- Bracket Pair Colorizer 2
- ESLint
- Live Share
- Polacode
- Prettier
- Prisma
- Simple React Snippets (very handy!)
- vscode-styled-components

What's your setup? :)
How I developed my first fullstack (MERN) project!
Tags: react, node, mongodb, express
Published: 2021-07-20 08:00:28

Learning a new Technology is not only watching tutorials and cloning the templates from the tutor's repository, always try to built your own project without sticking to the tutorials **explore and read documentations**,**Design you own Schemas**,**Write custom Apis**,etc... In this blog I will walkthrough my step by step process in developing my first MERN stack project.
##Plan & Design
Always have a design/plan of the architecture that you have planned to build.In this project I have adopted the MVC architecture and done a initial design of **Models** , **Controllers** and even **Routes** and **middlewares** for backend. Below is the screenshot of my initial backend design.
![MVC design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwhgei4jguass8wxap1h.png)

For frontend,design your VIEW part of the application using any tools like figma ,adobe xd etc...
![Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uhcmki2oz9lw3ms8ue6.png)

###Execute
I started with writing my schemas for database I used the **Nosql** db **Mongo** and I had 4 **MODELS** in my application.
After that I started an **EXPRESS SERVER** in localhost and connected my Db with it and once my app is up and running I started with my backend controllers and wrote APIs for my application corresponding to the routes that I designed initially.
My backend File Structure,
![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdkv0mpnr9mauule9p0n.png)
##Test
Side by Side while writing Apis make sure you test them, so that it won't be any problem at last.
I prefer using **Postman** for testing my Apis
![Post man](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur2wvcvufxxlyfkel1a4.png)

##Designing frontend
Once all backend stuffs are done and tested I moved to frontend.
By referring my figma design I stated to design my frontend using REACT (jsx).For a fresher like me it is not a easy task to design the frontend.I used my **local server** for my backend and used my custom Apis for the frontend and for state management I used **REDUX** for checking the Auth status of a user.
![frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcmgfc51b896c4h815hg.png)

##Tools and Technologies that I used in this project
**Frontend** - Reactjs,Material Ui Redux(state management)
**Backend** - Nodejs,Expressjs
**Database** - Mongodb

**Tools** - Coggle.it , Figma ,Postman ,Robo3T

**Frontend Repository link** - [Hashfeed-Frontend](https://github.com/ajithMadhan11/hashfeed-frontend)
**Backend Repository link** - [Hashfeed-Backend](https://github.com/ajithMadhan11/Hashfeed-backend)

**And that's how I developed my first MVP of my app and will be still engaged in this project and will be adding more features to it**
###Stop sticking to tutorials and start your own project, your learning curve will grow exponentially
Hello world! 👋
Tags: welcome, introductions, newbie
Published: 2021-07-20 07:55:40

Yoyo! My name is Jannik Baranczyk, I'm a full stack developer from Germany.

I started coding as a teenager and still love it (most times). I'm a big fan of TypeScript and the JAMstack, mostly working with Next.js. Besides coding stuff I'm into music, coffee and vegan food.

You can follow me on [GitHub](https://github.com/wh1zk1d) and [Twitter](https://twitter.com/wh1zk1ddo) if you'd like to.
My first webapp with FastAPI
Tags: python, webdev, html, spanish
Published: 2021-07-20 06:25:24

## DO Hackathon
So a couple weeks ago I assisted the Digital Ocean Deploy event, where I learned a few things about the cloud and business on the cloud. 

At the end I found out there was also a [hackathon](https://www.digitalocean.com/mongodb-hackathon/). DO happened to reveal a managed MongoDB as a service and the hackathon was a simple challenge to build a CRUD app with a UI.

I've been programming for 7 years and I've never programmed a fullstack app that included DB, Backend, Frontend and deployment. But I felt like I was ready, so I accepted the challenge.

## What I would build
I decided I would build an app where you can send a message to the universe :sparkles:. 

What does that mean? Well it basically means you send a message from the bottom of your heart without knowing who will receive it. Maybe what you write is what another person needs to read at that moment. It also means that after you send a signal you could get one back and it could be what you needed to read.

Here is the mockup I made
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dri0ajw0yjg5t0o65ocv.png)
Everything is in Spanish because I know more Spanish speakers than English speakers. I want to add english later on but for now this is all I have time for.

It was my first time using MongoDB but thanks to DO's managed service it was very easy getting it up and running. That and their App platform which made deploying a breeze too.

So if you know Spanish and want to try it out go to [this link](https://anon-messages-kxxtr.ondigitalocean.app/)

Cheers! :beer:
CSS + BEM Methodology = 🤘 
Tags: html, css, webdev, tutorial
Published: 2021-07-20 07:33:24

We all follow naming conventions in programming languages, don't we? Now, what about CSS? Is there any need of naming convention in that? Of course! Maybe not in a small project, but when you start working on large projects you should organize your code properly so that anyone can easily get the gist of the functionality by just looking into the code.

> Great codebases don't need comments. 

## What is BEM?
BEM stands for Block Element Modifier. It is a Methodology that every web developer should follow. This makes development easy and enforces re-usability.
Enough of the theory Let's understand this by an example 😉

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gerr6bcmhu28kmbgzqii.png)
Here We can say,
- Form = Block(An Independent meaningful entity)
- Input, Link, Button = Element(Part of Black, Which has no standalone meaning)
- Button types (primary/secondary) = Modifier(Represent state of Block or Element.) 

## BEM Methodology
Let's continue with the above example. This is how you will name your CCS classes.
### For Block:
```
.form {
   // Your CSS
}
```
### For Element:
```
.form__input {
   // Your CSS
}
.form__button {
   // Your CSS
}
.form__link {
   // Your CSS
}
```
### For Modifier:
```
.form__button--primary {
   background: "blue";
}
.form__button--secondary {
   background: "green";
}
```
**NOTE: When using modifiers you will put all the common styles in `form__button` so that you don't repeat them again**
And here is how your HTML will look like:
```
<form class="form">
   <input type="email" class="form__input" placeholder="Email">
   <input type="email" class="form__input" placeholder="Email">
   <button class="form__button form__button--primary">Login</button>
   <button class="form__button form__button--secondary">Signup</button>
</form>
```

That's it! I know it looks like an overhead but trusts me it will help you a lot in many different ways.
NextSSS, Next.js static site starter
Tags: nextjs, react, typescript, javascript
Published: 2021-07-20 07:31:20

---
title: NextSSS, Next.js static site starter
published: true
description: NextSSS is a Next.js starter template especially for static site including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, active link component, etc.
tags: nextjs, react, typescript, javascript,
cover_image: https://repository-images.githubusercontent.com/370855568/65d41780-d205-11eb-8af8-4a247913a525
---

I made a [Next.js](https://nextjs.org/) starter template especially for static site. It includes full setup for TypeScript, Tailwind CSS, Sass, Google Analytics, Next SEO, active link component, etc.

GitHub: https://github.com/ixkaito/nextsss

## How to Use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the template:

```bash
npx create-next-app --example https://github.com/ixkaito/nextsss
# or
yarn create next-app --example https://github.com/ixkaito/nextsss
```

### Google Analytics

Edit `GA_TRACKING_ID` in `/lib/gtag.ts`.

Example:

```ts
export const GA_TRACKING_ID = 'G-XXXXXXXXXX'
```

### Active `className` on a link

Example:

```ts
import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about/">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav
```

This will dynamically add the `active` class name to each links. You can also change the `activeClassName` like this:

```ts
import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/" activeClassName="current">
        <a>Home</a>
      </Link>
      <Link href="/about/" activeClassName="current">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav
```
First internship as a Flutter Developer
Tags: flutter, internship, devjournal, experience
Published: 2021-07-20 07:17:59

I had only recently followed the company. It was an ed-tech startup. In a day or two, the co-founder put out a post mentioning that they were hiring for multiple roles. And, one of the roles was that of a Flutter Developer.

I had never interned before. I hadn't even completed the course that I had taken up on Flutter. My knowledge was limited to the front end and in that too, I could only make simple designs. I was just getting started.

The thought that it might be too early to apply kept echoing in my head. Two things could happen, I could be rejected bad, maybe even insulted but at the same time, there was a chance that they select me and I get to test out my skills, learn and level up. Thank god it was the latter!


I commented like a devoted LinkedIn user, 'INTERESTED' under the post. Two days later, I was on a call with the co-founder. They even had me talk to the guy managing their app, who was to be my coordinator later. The guy told me how the co-founder had loved my profile although he in his heart knew, I had very limited knowledge of Flutter.

It is important to point, I had optimized my profile with whatever little I could. Since I was only at the start of my second year then, I had highlighted my experience from the school itself. Not particularly in Flutter but in soft skills like leadership, communication, etc.

I had also put up a video demonstration of two projects that I had done then. One was a simple portfolio app (with an avatar image and my name under it) and the second was a dice app. Both really really basic but anyway got me the offer letter in a week.


The offer was unpaid. It was originally a 2-month internship, but I knew I wouldn't do something for so long for free. I had also spoken to my friends who had previously worked as interns in different sectors. The experience of a technical internship that I needed could be done in a month. I negotiated the same with the employer and shortened the period down to a month.

However much I may say such internships are bad, the first ever that I did was unpaid. I believe I lacked experience and guidance back then. Today, I am at a place with multiple offers and ongoing projects. I have tried to help Flutter developers I know with offers and also built up a community to guide anyone who is just getting started.

We are around a 150 developer community on Discord, that you can join in using the [link.](https://linktr.ee/flutterdev)

I post internships that I come across, resources to learn Flutter, Data Science, Python, etc from, offers, upgrades, and more! Thank you for reading :)
How to Run stargan2 on Google Colab
Tags: python, googlecolab, machinelearning
Published: 2021-07-20 06:58:39


## example

{% twitter 1417353735962038272 %}


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


## gist
The steps you need are very simple.

#### Step1. clone repo
#### Step2. install packages
#### Step3. download pre-trained model
#### Step4. run a script

https://colab.research.google.com/gist/koji/b02b81ef5cdf0b9a6a69cd26a8f62bf5/stargan2.ipynb


## Original repo
{% github eps696/stargan2 %}