teleren/devto huggingface dataset:
Classless CSS Isn't Trashy
Tags: css, html, beginners, 100daysofcode
Published: 2021-02-02 16:22:58

Can you write a nice-looking website without adding classes or IDs to your HTML? That's exactly what classless CSS promises, though in practice you'll find you'll likely need to add some customization to get it just the way you want.

## What is Classless CSS

Classless CSS is a design philosophy that adds properties and property values to type selectors only. A [type selector](https://dev.to/vetswhocode/the-css-series-part-10-specificity-4ge9) is an HTML tag, so something like h1, p, form, div, etc.

Since every HTML element has a predefined style, a plain HTML doc will look good once the classless CSS stylesheet is linked.

## How to Get Started

There are several classless CSS stylesheets available for use, and these are often times linked to your HTML document via a [Content Delivery Network](https://developer.mozilla.org/en-US/docs/Glossary/CDN). Basically, there's a stylesheet stored on a server that you can link your HTML to. Below are a few options, and their websites are demos for what the stylesheet will do to plain HTML:

[Water.css](https://watercss.netlify.app/)
[New CSS](https://newcss.net/)
[AWSM CSS](https://igoradamenko.github.io/awsm.css/elements.html)
[Style CSS](https://css-pkg.github.io/style.css/)
[Writ CSS](https://writ.cmcenroe.me/)

There are many others out there, which can be found by searching for classless CSS stylesheets.

## Create Your Own Style

Another option is to build your own classless stylesheet for reuse in your future projects. We all have our own style, and it's often easier and more satisfying to work with something you've crafted.

One way to go about this, is that you can download an existing classless stylesheet and tweak it to your liking.

Scott Tolinski of Syntax.fm podcast fame also teaches a course on building your own classless CSS stylesheet from scratch. His [Level Up Tutorials](https://www.leveluptutorials.com/?ref=nbhankes) course, Modern CSS Design Systems, covers this topic in much more detail.

### Have you ever made a project using classless CSS? If so, leave a comment so other readers can hear about your experience!
Developing a global eCommerce solution for London-based Perfumery
Tags: ruby, webdev, programming, writing
Published: 2021-02-02 16:15:14

Bloom is a famous London perfumery that focuses on curating a collection of unique, exclusive, and outstanding scents from brands around the world. They seek out only the best perfume talent to showcase in their concept boutique. The perfumery appropriately refers to themselves as “merchant adventurers searching the globe to bring the most fun and well-made fragrances to curious noses' attention.”

At their brick-and-mortar store in London, Bloom customers can use the perfume laboratory to create their own unique scents. On the Bloom Perfumery website, which Evrone helped develop, customers can purchase perfumes and cosmetics or sign up for a session in the perfume lab.

In 2016, Bloom’s founders approached Evrone for help developing a better e-commerce solution for the niche retailer. While they already had a website in production, it was missing some key functions and needed improvements. [Read the full case study](https://evrone.com/bloom-perfumery) on how we helped Bloom Perfumery develop a website and migrate to Shopify.
Sequelize(NestJs) connect Mysql docker ไม่ได้เพราะ ใช้ network port ผิด
Tags: sequelize, phpmyadmin, mysql, docker
Published: 2021-02-02 16:11:18

## NestJs

```dockerfile
FROM node:14-slim
WORKDIR /usr/src/app
COPY package*.json ./
# If you add a package-lock.json speed your build by switching to 'npm ci'.
RUN npm ci --only=production
RUN npm i -g @nestjs/cli
# Copy local code to the container image.
COPY . .
# Display directory structure
RUN ls -l
# Expose API port
EXPOSE 3003
# Run the web service on container startup.
CMD [ "npm", "start" ]
```

## Docker Compose
```dockerfile
version: '3'
services:
  backend:
    container_name: nestjs
    build: .
    image: nestjs
    ports:
      - '3003:3003'
  database_sql:
    image: mysql:5.7
    container_name: database_sql
    environment:
      - MYSQL_ROOT_PASSWORD=your_password
      - MYSQL_DATABASE=database_name
    ports:
      - '3307:3306'

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    ports:
      - '8000:80'
    links:
      - database_sql
    environment:
      PMA_HOST: database_sql

```

นี้คือจุดเชื่อมต่อ

![Screenshot_21](https://dev-to-uploads.s3.amazonaws.com/i/ztpzyngxw8r6czdcn2rm.png)

config จะอยู่ที่ file .env นี้
 
```text
DATABASE_USER=root
DATABASE_PASSWORD=password
DATABASE=your_database
PORT=3306 // port **เป็น 3306 เพราะเป็น container คุยกันตอนแรกผมใส่ **3307
HOST=database_sql // ตรงนี้ใส่ PMA_HOST ตอนแรกผมไม่ได้ใส่แบบนี้
```
## เพิ่มเติม

https://medium.com/@somprasongd/docker-networking-59b6637de3df
https://medium.com/readmoreth/docker-connect-database-timeout-b23f781dcff7
How to measure/determine the quality of the CSS code?
Tags: discuss, css
Published: 2021-02-02 16:10:21

I hope we have CSS enthusiasts here.
I wonder how you would answer the following question:
**How to measure/determine the quality of the CSS code?**

These are my favorites:
- File size
- File structure (for Sass or similar)
- Usage of inline CSS code
- Number of !importants
- Usage of modern features (Variables, Grid, Flexbox, etc.)
Siempre tener una base de datos de asuntos pendientes
Tags: tip, desarrollo
Published: 2021-02-02 15:56:08

---
title: Siempre tener una base de datos de asuntos pendientes
tags: ["tip", "desarrollo"]
published: true
canonical_url: https://marceloandrader.github.io/blog/2021/02/02/siempre-tener-una-base-de-datos-de-asuntos-pendientes/
---

Hace muchos años ya, entré a trabajar en un banco, éramos un grupo pequeño de tecnología, 3 desarrolladores, 2 de soporte, 1 de operaciones y 1 jefe. Lo que más me impactó cuando comencé a trabajar era que no había una forma de saber lo que faltaba por hacer, el jefe era el único que sabía en forma muy manual (una lista de papeles impresos en su escritorio) la lista de solicitudes desde la parte del negocio para IT.

En una de las primeras reuniones para dividir el trabajo, el jefe tomó de su escritorio los papeles con los correos impresos de las solicitudes, las leímos y nos las repartió, directamente el correo impreso con el requerimiento. Entré a una máquina del tiempo y regresé a los 50s.

Obviamente esto no funcionó así por mucho tiempo, sugerí usar un sistema open source, en ese tiempo creo que fue mantis que era un bug tracker escrito en php. La herramienta que se use realmente no es importante, a lo largo de mi carrera he usado muchos como jira, trello, unfuddle, mantis, bugzilla, github issues, pivotal entre otros.

Lo más importante es poder tener un lugar centralizado donde todo el equipo pueda saber el estado del proyecto, saber en qué se está trabajando cada persona, y sobre todo poder tener un lugar donde comentar acerca de un ítem en particular adjuntar documentos necesarios y que el resto del equipo pueda tener el contexto. Adicionalmente  poder tener una idea de cuánto trabajo falta por hacer y tener un flujo de trabajo en el que los usuarios también puedan hacer revisiones.

Puede haber un poco de resistencia si trabajas solo, pero en proyectos personales también uso un sistema para saber lo que me falta aún si solo soy yo quien lo uso, hay mucho valor en tener esta base de datos.

Otra recomendación es enlazar los commits en el repositorio con los ítems del bug tracker. Ayuda bastante a trazar por qué una línea de código se agregó al proyecto.
My Portfolio 🤵
Tags: react, css, webdev, javascript
Published: 2021-02-02 15:50:18

Hello fellow devs and creators🙋‍♂️
Hello everyone! This is my portfolio which was made a few months ago.
I used React JS ⚙ & SCSS 🎨

Why am I sharing this🤔:
> The purpose of this post is to get some feedback, as I am a beginner in the front-end (web-dev) environment!
Let me know what you guys think and what can be improved📈!

[pranjaljain.tech](https://www.pranjaljain.tech)
{% github pranjaljain0/portfolio-react no-readme %}
GitHub tips for beginners
Tags: git, github, productivity
Published: 2021-02-02 15:30:54

At first, you create a repo with a base/main branch, you push your initial/first commit there, after that we want to have a way to properly manage our project.

Here is how I manage my repos/projects on GitHub.

### 1. Create a project
For every repo I create, I add a project for it, which includes three columns:
1. `To Do` - All issues that I am to work on stay here.
2. `In Progress` - All issues I am currently working on.
3. `Done` - All issues I have completed are seen here.

### 2. Create an issue
I treat every thing I add or remove on my repos as an issue, before starting coding I create issues I want to work on to the repo, assign it to myself or someone else, add labels to them e.g `enhancement`, `bug` or any other custom label, add it to a project - the one I created for the repo, sometimes I add a milestone then I start working on them (issues).

**NB**: When you are working on an issue, it is a good practice to move it to the `In Progress` column in the project, this helps others to know what you are currently working on

### 3. Create a branch
After you have solved one of the issues above, commit your changes then check out to a new branch, push your changes to this branch. I normally use one branch for one purpose then I delete it after merging with the main/base branch, if you like working on the same branch all time, that is OK if it works for you.

### 4. Create a pull request
You have your changes pushed to the new branch, you need to create a pull request so that you can merge your new changes to the main/base branch, on creating the pull request make sure you close the issue you just solved by simply writing `closes #21` on the comment section, this will identify issue no. 21 as the one to be closed if this pull request is successfully merged.
**NB**: Replace `#21` with your issue number.

### 5. Merge your branch to main/base branch
After your pull request is validated and it gave you the green light for you to merge, merge your branch to the main/base branch, this should move your issues from `In Progress` column to `Done` column in the project, after that you can delete the branch you were working on.

This way, you can track all your activities from the beginning to the end or your project on GitHub.

**BONUS**: You can use `Milestones` in GitHub, this is useful if you want to group your issues based on your goals, for instance you want to improve your site accessibility, then you create a milestone - `Site accessibility - Improve site accessibility` and all the issues related to site accessibility should be added to this milestone, grouping them this way will help you track how much you have done on site accessibility goal.

### Happy Hacking!
18 Tips to make websites look better
Tags: ux, design, webdev, typography
Published: 2021-02-02 15:30:04

For my own reference, but useful general tips nonetheless!
Cover credit: [AnalyticsIndiaMag](https://analyticsindiamag.com/common-misconceptions-about-ux-ui-designers/)

## Typography Tips

- Use no more than 2-3 typefaces in a page as additional typefaces increases cognitive load.

- Use 125%-150% line height for paragraph text to make your webpage feel more spacious!

- Keeping lines of text under 100 characters chunks text and makes it more readable.

- Use typefaces that look noticeably different for header and paragraph text. Some pairings I really like are: Libre Baskerville & Source Sans Pro, Domine & Roboto, and DM Serif Display and Proxima Nova.

- When creating text hierarchy try to use no more than two mechanisms to differentiate text: (1) font weight, (2) font size, (3) alignment/indentation, and (4) color.

- Skip weights and double point sizes between different text elements used. For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.

Great type resources: [Google Fonts](https://fonts.google.com/), [Font Pairings](https://fontpair.co/)

## Alignment/Spacing Tips

- Avoid centering text unless it's a small chunk.

- Align left to right if targeting english-speaking folks as people read left to right.

- Aligning things to each other can make design look clean and consistent! Using a 12 column grid can be a helpful place to start!

- Use negative space to help differentiate elements from each other.

- A general rule of thumb: in most cases, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page.

Great alignment/spacing resources: [CSS Grid Generator](https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/)

## Color

- Use neutral tones to allow your primary colors to shine. Neutral tones (whites, greys, and blacks) can balance out bright colors and give them emphasis.

- Use tints and shades to add dynamism to your project. Have a hover state or pressed state? Use tints and shade to indicate these changes.

Great color resources: [Coolors Color Palette Generator](https://coolors.co/), [Contrast Checker for Accessibility](https://webaim.org/resources/contrastchecker/), [Grabient (Gradient Tool)](http://grabient.com/)

## Miscellaneous

- Avoid harsh drop shadows! A good example of not too harsh drop shadows is Stripe.com.
- A great resource for royalty free images: Unsplash.com
Azure CORS and Functions
Tags: azure, cors
Published: 2021-02-02 15:26:03

CORS has two parts, the server and the client side. It is a protocol wholly contained in the http headers of client requests and server side responses.

The server controls what is allowed and what is not allowed. The client uses these headers to start the CORs 'handshake' process.

Let's first examine an outbound request from a browser's front end code. 

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

From this request, the headers tell us the destination Host and the Origin:
```
Host: function.azurewebsites.net
Origin: http://localhost:4200
```
These values are set by the browser and cannot be overridden.
They also have nothing to do with routing.  

The Host value defined where the request is destined, and the Origin defines where it came from.

**Sec-Fetch-Site**
```
Sec-Fetch-Site: cross-site
```
The browser sets 'cross-site' by default anytime the Origin and Host are not the same site. This header value cannot be overridden.

**Server Side**

In Azure Functions there is a tab named "Cors" which looks like this:

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

What is shown is that we are allowing any Origin header value of

```
https://fakeName.azurewebsites.net
http://localHost:4200
```
To access our function application.

Don't mistake these values for routes (as I did in the early days). These are not routes they are key value pairs of {Origin:value}.

This should solve CORS errors which must allow Origins on the server side.  

JWP2021
Interview coaching w/ ex-FAANG recruiters & hiring managers
Published: 2021-02-02 15:25:51

Carrus.io is an interview-coaching platform that connects job seekers to ex-Amazon, Facebook and Google coaches. 

Coaches have a high hit rate. On average people who spend 4-5 hours of coaching are 10-15% more likely to land the job. 

You can have a free session with any coach, choose your favorite and pay an hourly rate to get hands-on mock interview practice and prep. 

Get started here: https://carrus.io/
MERN + Apollo GraphQL... PROBLEMS!!!
Tags: graphql, apollo, react, mongodb
Published: 2021-02-02 15:23:29

I’m running into “.more is undefined” also “module not found”, and a random “throw error” whenever I start my server. 
I’ve had 2 projects before that worked fine, BUT!!!, all of GraphQL was on the server, not on the client. So this is my first, correct layout, EXCEPT, ITS NOT WORKING!!!!! the docs of errors are horrible
Day 30:100DaysOfCode
Tags: 100daysofcode, programming, productivity
Published: 2021-02-02 15:23:28

few leetcode medium on arrays...
designed rest part of my portfolio website...

studied further about oracle db constraints and keys....

fixed some bugs in one of my flutter project
studied bst...would be doing some ques tomorrow..
Eod

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Display an Apple Music Playlist on Your Website
Tags: html, webdev, music, portfolio
Published: 2021-02-02 15:21:51

We've all seen those really cool 'What I'm listening to' Spotify lists on portfolio websites. They're cool. They're sleek. It adds a bit of personality to a website. Spotify has an API that allows you to fetch data related to your profile so you can make a list of your top-played tracks, or even display the song you're currently listening to on the platform. [Lee Robinson](https://leerob.io/dashboard) has a fantastic example of this on his website, and even has [a blog article](https://leerob.io/blog/spotify-api-nextjs) showing you how to utilize Spotify's API to do a few of the things I listed above.

But what if you don't use Spotify? What if you use Apple Music?

This article isn't intended to argue which streaming platform is better than the other. Rather, I really do think that adding a favorite playlist adds some cool personality to a portfolio.

Does Apple Music allow you to access the same functionality as Spotify?

Well, not really. But we can use a workaround and embed a playlist into a webpage.

### Embedding a Playlist on a Website

First, open Apple Music on a Mac (or use the web app) and find the playlist you want to embed on the webpage.

I recently did a soft launch of my [redesigned portfolio](http://braydoncoyer.dev/) and wanted to make sure my love of Lord of the Rings was shared with the rest of the world, so I created a playlist that contained all of the music from the movie series. 

![Screen Shot 2021-01-12 at 2.48.26 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485073876/hbb1R9Ien.png)

With the playlist open, click on the three dots on the far right-side to open an options menu.

![Screen Shot 2021-01-12 at 2.50.11 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485088749/vLN_RGdKX.png)

With the menu open, go to the Share option and click on the Copy Embed Code button. This copies an iframe to your clipboard.

![Screen Shot 2021-01-12 at 2.49.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485099258/848UK-jvw.png)

With the embed code copied, head over to your website HTML, paste the iframe and preview your site. You should now have an embedded Apple Music playlist! Visitors can listen to previews of each track in the playlist, too! 

![Screen Shot 2021-01-12 at 2.54.15 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485114056/bGbADJ_Ie.png)

### Conclusion

Thanks for reading! If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/), [subscribe to my newsletter](https://buttondown.email/braydoncoyer) and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!
zoom interviews - NO
Tags: hiring, help, interview, share
Published: 2021-02-02 15:06:38

Hey friend, I am petr from asynchr. I am building an asynchronous hiring tool for remote teams, which tackles the standard practice of using zoom for interviewing candidates.

I've been conducting a research and talking to many developers  and a lot of them say that they can't show their real worth because live interviews are just way too stressful and uncomfortable for them. 

I was wondering whether you feel the same way or can share your thoughts about zoom interview disatvantages?

I have also written an article about how asynchronous hiring reduces discimination:

https://asynchr.com/blog/tpost/po1yd2upk1-how-does-asynchronous-hiring-reduce-disc

Would appreciate your feedback about it!

Thank you,
Petr
Packer and Terraform with Immutable Infrastructure
Tags: devops, terraform
Published: 2021-02-02 15:00:32

{% youtube w0gv-Tw6698 %}

Terraform is red hot right now, and you probably know that it's an open-source Infrastructure as Code (IaC) solution.

OK, but what is Packer?

Well, Packer is an open source tool for creating identical machine images for multiple platforms from a single source configuration. It's lightweight, runs on every major operating system, and is highly performant, creating machine images for multiple platforms in parallel.

In this CloudSkills Community Call replay,  Luke Orellana shows you how to get started with Packer, Terraform, and Immutable Infrastructure.

Resources from this episode:

HashiCorp Learn:
[https://learn.hashicorp.com/terraform](https://learn.hashicorp.com/terraform)

Introduction to Packer
[https://www.packer.io/intro](https://www.packer.io/intro)
In case You didn't know, you don't need to install any npm package more than once.
Tags: npm, nodemodules, pnpm
Published: 2021-02-02 14:51:37

##Introduction

Many of us have faced the problem of having to install the same package a lot of times because we are working on multiple projects locally, And as we all know your **node_modules** can get pretty out of hands in terms of size on disk. 

##PNPM 
I've stumbled upon this [project](https://pnpm.js.org) recently which helps you manage and solve that problem of having to install the same package more than one time. It's using [CAS](https://en.wikipedia.org/wiki/Content-addressable_storage) to store **node_modules** and later refer to them on your project.

##Usage

you will find a lot of commands in their [Documentation](https://pnpm.js.org).

here are the ones I am using for now 

-`pnpm install` instead of `npm install`, What will this do is install the packages in your `package.json`; if they were already installed before it will just link them to your project directory. 
also, pnpm install will generate a file called `pnpm-lock.yaml` which contains information about the installed packages. 

- `pnpm add <package name>` instead of `npm install <package name>` 
also works that same as `pnpm install` if the package doesn't exist it will download it and link it to your ***node_modules***

***NOTE:*** you can use the same flags of npm.

*example:* `pnpm add <package name> --save-dev` and it will it add to your dev dependencies.

I recommend that you read their Documentation as it contains a lot more details on how to use and the behavior of each command. 

Good luck and Enjoy.