teleren/devto huggingface dataset:
Custom Progressbar - Beer CSS Tips #1
Tags: css, tutorial, html, javascript
Published: 2022-07-20 17:47:46

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about custom progressbar. The logic of progressbar is very simple.

If you don't known the concept of **settings**, **elements** and **helpers** used by Beer CSS, you can [read this page](https://github.com/beercss/beercss/blob/main/docs/INDEX.md).

1) You need to place a progress **element** inside another **element**.

```html
<*>
  <progress class="max"></progress>
</*>
```

2) Do not forget to change the direction **helpers** like `horizontal` (default) or `vertical`.

```html
<*>
  <progress class="max vertical"></progress>
</*>
```

3) You can apply a color **helper** too.

```html
<*>
  <progress class="max green-text"></progress>
</*>
```

The **helpers** of Beer CSS can be used in any **element**. This makes the framework very customizable. It has the same logic and names in all ways. This makes the Beer CSS very easy to understand and reuse. I made a codepen [here](https://codepen.io/leo-bnu/pen/poLeoQa).

Hope you enjoy 🍺

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/poLeoQa

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md
I don't know how to think. I can't start thinking. Frontend Developers.
Tags: javascript, frontend, thinking, react
Published: 2022-07-20 18:13:00

When starting a task, I don't know how to design it. I can't start thinking. I think I am working inefficiently. I could not establish the thought system. It feels like my work is taking too long. I can't understand what I'm doing wrong. What are the most efficient working techniques in using Javascript, Html and Css?
Meet the Tanukis: Hannah Sutor
Tags: gitlab, devops, community, techtalks
Published: 2022-07-20 17:52:56

Meet the Tanukis is a stream about the amazing Team members at GitLab. Each episode focuses on a team member discussing issues in tech that are important to them. This episode features Hannah Sutor, Senior Product Manager of Auth. 

{% youtube -6jVKsQ8E6g%}
La API Java
Tags: java, api, read
Published: 2022-07-20 17:44:50

La API de Java contiene una colección de componentes de software prefabricados que proporcionan numerosas funcionalidades
**Las API Java se dividen en tres categorías:**
**_Las API básicas_**
Las API básicas permiten gestionar:
- elementos esenciales como los objetos, las cadenas de caracteres, los números, entradas/salidas y mucho mas...
- los applets Java en el entorno del navegador web.
- la red, con protocoles estándar tales como FTP, HTTP, UDP, TCP/IP mas la URL y la manipulación de sockets.
- interfaz con código nativo.
- la seguridad.
- la creación de componentes de software llamados JavaBeans reutilizables y capaces de comunicarse con otras arquitecturas de componentes.
- la manipulación de datos XML entre mas.

_**Las API de acceso a los datos y de integración con lo existente.**_
Las API de integración permiten gestionar.
- aplicaciones cliente/servidor.
- acceso a casi a 100% de las bases de datos, mediante la API JDBC.
- el acceso a los datos almacenados en servicios de directorio del protocolo LDAP.

**_Las API de gestión de la interfaz de las aplicaciones con el usuario._**

Las API de gestión de la interfaz usuario permiten gestionar:
- el diseño de interfaces graficas.
- el sonido, con la manipulación, la lectura y la creación de archivos de sonido.
- las operaciones graficas de dibujo con la API Java 2D.
- la Accessibility que permite interactuar.
- trabajos de impresión de datos.
- el desplazamiento o traslado d e datos durante una operación.
Paracetamol.js💊| #171: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-07-20 16:55:03

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const obj1 = {
  nombre:"Cris",
}

const obj2 = {
  nombre: "Fernando",
  edad: 26
}

console.log(Object.assign(obj1, obj2))
```

A. `{ nombre: "Fernando", edad:26 }`
B. `{ nombre: "Cris", nombre: "Fernando", edad:26 }`
C. `{ nombre: "Cris", edad: 26 }`
D. `Ninguna de las anteriores`

Respuesta en el primer comentario.

---
Follow up quesions for "TDD: The good, the bad, the ugly"
Tags: programming, tdd, testing, testautomation
Published: 2022-07-20 16:54:40

It was a great privilege to present my talk at the "Agile, DevOps and testing: people, process and technology" conference.

I was giving a talk about TDD (full session description can be found here: https://sessionize.com/s/aqaguy/tdd-the-good-the-bad-and-the-ugly/48003)

Unfortunately I was overtime (I had to interrupt a session to check on my children which were about to wake up) and I want to answer some of the questions I didn't have a chance to answer at the session.

❓What are the project criteria to use TDD?
👉I honestly believe TDD can be used on any project and in any codebase. Just be realistic with your expectations.


❓What skills one need to use TDD?
👉 It's more about discipline and be willing to give it some time rather than skills. TDD is counter-intuitive (at first) but not really difficult. In fact, I would say it's actually easier and less skill demanding than the alternative!

❓What are the drawbacks of TDD?
👉 The biggest drawback from my standpoint is that TDD never guarantees ending up with optimal algorithm. Working, readable, but not usually optimal. Usually it's not a problem, sometime it is.

❓ Should all the code be written using TDD?
👉 I usually write around 95% of code using TDD, because I find it the most natural and enjoyable. However for some RnD stuff or throw-away experiment code it may be unnecessary overkill. In languages like F# or sometimes Python some people would prefure REPL (Read–eval–print loop) instead.

So you have any other questions? Please write in comments!
Introduction to Monorepos with Yarn Workspaces
Tags: yarn, monorepo, javascript, beginners
Published: 2022-07-20 16:21:20

A monorepo is a repository that contains multiple projects inside of it. For example, a monorepo could contain a frontend app and a backend app. Inside the project there could also be shared libraries. In monorepos it is very easy to make changes to multiple projects at one time.

A monorepo is not the same as a monolith. When you make a change in a monorepo you only have to rebuild the projects that are affected by the change. This is an important point because it lets the teams work independently and improve the developer experience. In a monolith everything is released together. In a monorepo you have flexibility to decide when and what to release.

## Configure workspaces in your package.json

Yarn Workspaces allows us to setup multiple packages in a single repository.

Start by creating a `package.json` in the root of the project and adding the following:

```json:package.json
{
  "private": true,
  "workspaces": ["project-a", "project-b"]
}
```

Each project should be listed in the `workspaces` array.

Then create one subfolder per workspace and add a `package.json` in those subfolders. Let's add some dependencies to see how Yarn handles it.

```json:project-a/package.json
{
  "name": "@jmalvarez/project-a",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "4.17.21",
    "@jmalvarez/project-b": "1.0.0"
  }
}
```

```json:project-b/package.json
{
  "name": "@jmalvarez/project-b",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "4.17.21"
  }
}
```

Our setup is ready. Execute now `yarn install`.

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ozrozbfqpkmj154ou43.png)

As you can see, only one `node_modules` folder is created to handle all the dependencies. There are no dependencies duplicated. Furthermore, we didn't need to use `yarn link` to require `project-b` from `project-a`.

## How to run commands

To add new dependencies, you just have to run the appropriate command inside the project subfolder.

```bash
cd project-a
yarn add uuid
```

Another possibility to run commands from the root folder is using `yarn workspace <workspace_name> <command>`. For example, to add a new dependency from the root folder we could do the following:

```bash
yarn workspace @jmalvarez/project-a add uuid
```

If we wanted to execute the same command in every workspace we could do it with `yarn workspaces run <command>`. For example:

```bash
yarn workspaces run test
```

## Resources

- [Yarn Workspaces](https://yarnpkg.com/features/workspaces)
- [yarn workspaces | Yarn](https://classic.yarnpkg.com/en/docs/cli/workspaces)
- [yarn workspace | Yarn](https://yarnpkg.com/cli/workspace)
- [Misconceptions about Monorepos: Monorepo != Monolith](https://blog.nrwl.io/misconceptions-about-monorepos-monorepo-monolith-df1250d4b03c)
My Tools
Published: 2022-07-20 16:09:42

**DEV.to**
_ how to create [series](https://dev.to/kallmanation/dev-to-writing-making-a-series-3h79)

**GitHub**
_ [Gists](https://gist.github.com/) - are basically [articles](https://gist.github.com/jkpl/b2ec253dee7c97ff150487479a7cf7ba) hosted on GitHub

**Medium**
_ Medium [alternatives](https://beebom.com/medium-alternatives/)

**StackOverflow**
_ Articles
_ Articles on Teams
Ecommerce Template
Tags: html, css, javascript, beginners
Published: 2022-07-20 15:58:15

##Ecommerce Template 
I have created a simple Ecommerce Template using **HTML**, **CSS** and **JavaScript** 




## Home Page

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

## Download Source Code
👉 Check it out [Link](https://github.com/vinobe21/HTML-CSS-ecommerce-layout)
👉 [Github](https://github.com/vinobe21)
🌐 [Demo](https://downeyshop-ecommerce.netlify.app/)

## Features

-  Attractive design using HTML and CSS
-  Header, Footer with Responsive layout 


## How to Install?

- Clone repository [Link](https://github.com/vinobe21/HTML-CSS-ecommerce-layout)



> 💥 If you have any queries, you can leave it in the comment 👇
Transitioning to Front End Development
Published: 2022-07-20 15:57:18

Hello Good Day I am new to this community.

Currently I am concentrating more on being a Front End Developer, and I am doing an upgrade course via MDN (Mozilla Developer Network)

I would like to have someone here assess my course work from the MDN Front End Developer Course

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text#assessment_or_further_help

My Attempt(located on Codepen): https://codepen.io/RADFS007/pen/zYWwoNv
ChakraUI TemplatesKart - UI updates
Tags: webdev, opensource, react, showdev
Published: 2022-07-20 15:46:19

Hello CharkaUI lovers,

This article presents new UI changes in [TemplatesKart](https://templateskart.com)

Let's see what new changes I made.

## Description
1. Created beautiful settings drawer which contains color mode switcher and presets.
2. Removed color mode switcher and color palette from header.
3. Created Figma designs of the component categories.

### Settings Drawer
![settings drawer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjpqyspr08swqrtfyxc6.png)

### Figma designs of the component categories
![Figma designs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpb9g514yw9zy6buu4aw.png)

## Links
Website: [TemplatesKart](https://templateskart.com)
Github Repo: [TemplatesKart Code](https://github.com/MA-Ahmad/templateskart)
What is EC2 M1 Mac instances? & How to Launch?
Tags: aws, dedicatedhosts, macos, vnc
Published: 2022-07-20 15:43:24

Amazon [Elastic Compute Cloud](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html) (EC2) is a computing capacity that is scalable in the Amazon Web Services (AWS) Cloud. Using Amazon EC2 eliminates your need to invest in hardware up front, so you can develop and deploy applications faster. You can launch as many virtual servers as you need, configure security and networking, and manage storage. Amazon EC2 enables you to scale up or down to handle changes in requirements or spikes in popularity, reducing your need to forecast traffic.

{% embed https://medium.com/@ramkumar.mrj97/create-ec2-m1-mac-instances-for-macos-1cb9ea962b18 %}
Path.resolve() in Node.js
Tags: javascript, webdev, beginners, tutorial
Published: 2022-07-20 15:38:00

This post will help you understand `path.resolve()` in NodeJs, which is a very useful module.


![BMC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puwe406dntzlh57lelas.gif)

**Absolute path**
Firstly, you need to understand what an absolute path is, it looks like this 

`C:\Users\PC_Name\Music\Music`

Your system generates this path to locate any file, folder e.t.c 
To achieve this open your system terminal on windows `Win + R` type `cmd` and click `OK`

carry out the following steps,

> cd music

> cd music  

**Using NodeJs**

```javascript
path.resolve("_dirname", "music", "music")
```

This will return `C:\Users\PC_Name\Music\Music`

`path.resolve()` will always result in an absolute path, which is how to find a file on your computer.

**How does path.resolve() work**

`path.resolve()` will process the sequence of path from right-most to left-most, with each subsequent path prepended until an absolute path is constructed.


<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>


**Thank You, please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)
The magic hand
Tags: opensource, microservices, embedded, luos
Published: 2022-07-20 15:32:46

A few weeks ago, Vik#1501 developed a quick #demo to show the power of Luos, connecting different types of hardware.

{% embed https://www.youtube.com/embed/WU8Rqw-W0iY %}

Using topology detection, she prepared two applications 🙂

1. Control the movement of the motors
2. Copying the movement of the DXL motor
Fun with JavaScipt proxies: observability, extensible chaining, and callable objects
Tags: javascript, pragmatic, functional, programming
Published: 2022-07-20 15:31:17

I've been having a lot of fun playing with JavaScript proxies lately. It is fun to come up with creative ways of using them. In today's JavaScript meetup, we took a look at using proxies to handle obversability, create chainable APIs, and define callable objects.

The code for the proxies discussion can be found below and [here](https://github.com/sethcalebweeks/syr-js/blob/main/2022-07-July/proxies.js)

```js
const helpers = require("./helpers");
const { log } = helpers;

// Proxies provide transparent obeservability
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const proxy = new Proxy(array, {});
log(array, proxy);
log(typeof array, typeof proxy);
log(
  Object.getOwnPropertyNames(array), 
  Object.getOwnPropertyNames(proxy)
);

//////// Observability ////////
const onUpdate = (obj) => (callback) => {
  return new Proxy(obj, {
    set: (_target, _prop, value) => {
      callback(value);
      Reflect.set(...arguments);
    },
  });
};

const person = onUpdate({
  firstName: "George",
  lastName: "Washington",
})(log);

person.lastName = "Clooney";

//////// Chaining outside functions ////////
const chain = (fns) => (obj) => {
  const isFunction = (fn) => typeof fn === "function";
  const chainify = (obj) => {
    if (typeof obj === "object" && obj !== null) {
      return new Proxy(obj, {
        get: (target, prop) => {
          switch (true) {
            case isFunction(target[prop]):
              return (...args) =>
                chainify(target[prop].apply(target, args));
            case isFunction(fns[prop]):
              return (...args) =>
                chainify(fns[prop].apply(target, [target, ...args]));
            default:
              return target[prop];
          }
        },
      });
    }
    return obj;
  };
  return chainify(obj);
};

chain(helpers)(array)
  .map((i) => i + 10)
  .log()
  .shuffle()
  .log()
  .zipWith(["a", "b", "c", "d", "e"], (a, b) => a + b)
  .log();

//////// Call object as a function ////////
const callable = (obj) =>
  new Proxy(() => {}, {
    apply(_target, _, [prop, ...args]) {
      return obj[prop] || obj._(prop);
    },
  });

const fib = callable({
  0: 1,
  1: 1,
  _: (n) => fib(n - 1) + fib(n - 2),
});

chain({ fib, log })(array)
  .map((i) => fib(i))
  .log();
```
Do I store image assets in public or src in ReactJS ?
Published: 2022-07-20 15:24:53

**public**: anything that is not used by your app when it compiles

**src**: anything that is used when the app is compiled

So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.

Matt Saunders 
from Stackoverflow

**Example**

<u>At Component.js</u>

```
import logo from "../assets/logo.svg"

const Component = () => {
   return (
     <div>
        <img src={logo} alt="" />
     </div>
   )
}

export default Component;
```
PostgreSQL + pgAdmin Docker Compose
Tags: docker, programming, beginners, tutorial
Published: 2022-07-20 15:11:00

Here is a simple docker-compose file to run PostgreSQL + pgAdmin services for your development needs.

Create a file **docker-compose.yml**.

Copy and paste the below code.

Run it using the command **docker-compose up**.

```
version: "3"

services:
  db:
    image: postgres
    restart: always
    ports:
      - "54320:5432"
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: password
    volumes:
      - local_pgdata:/var/lib/postgresql/data
    networks:
      - postgres-pgadmin

  pgadmin:
    image: dpage/pgadmin4
    restart: always
    ports:
      - "5050:80"
    environment:
      PGADMIN_DEFAULT_EMAIL: kiran@example.com
      PGADMIN_DEFAULT_PASSWORD: password
    volumes:
      - pgadmin-data:/var/lib/pgadmin
    networks:
      - postgres-pgadmin

networks:
  postgres-pgadmin:

volumes:
  local_pgdata:
  pgadmin-data:
```

You can access the pgAdmin at http://localhost:5050/
End of Day 77 / #100DaysOfCode
Published: 2022-07-20 14:54:27

Achievements from today:

I learned deeper about functions in Python with Python Crash Course and did exercise for each to better understand the concepts and how to use these. 

- Returning a dictionary
- Using a function with a while Loop.
- Passing a list.
- Modifying a list in a function (hard one to grasp). I have stored the analogy in my mental storehouse and will revisit this when the time comes to use it. 
- Preventing a function from modifying a list.
- Also had further discussion with The Codashions about the CS Timer Project. A lot more clarity achieved. Given some constraints we have, some feature can be dropped. Do what we can with what we have first. Make the problem smaller. Edited the latest document on that in Jetbrains. 
- I am anxious to start building the UX mock-up design and then determining what tech stack we need to have. But I'll be patient.

Tomorrow will be dedicated to learning:

- Passing an arbitrary number of arguments.
- Mixing positional and arbitrary arguments.
- Using arbitrary keyword arguments.
- Storing functions in modules.
- Importing an entire module
- Importing specific functions
- Using as to give a function an alias
- Using as to give a module an alias
- Importing all functions in a module
- Styling functions
PC chat App design
Tags: design, webdev
Published: 2022-07-20 14:43:33

Hello guyz today i want to show you a design for chat app created for pc 
UI - Reactjs + TailwindCss 

Output image -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayq8z31p07l78lk57hn5.png)

Please rate it in the comment box 

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Portfolio
Tags: portfolio
Published: 2022-07-20 14:37:55

Hi, everyone it's my personal portfolio and i need some review about my portfolio design, what needs to change and what to add more, etc

Built using :-
- HTML
- CSS
- Bootstrap
- JavaScript

Here is the [link](https://samcoding.netlify.app/)

Screensorts :-

![home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ief5ikwqxuyxpk2tklp9.png)

![about page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycd6ghf2vy4tjp74938c.png)

![skill page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/584f217va2f21pao6egq.png)

![service page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o9supa3oabs8xa3lnv0.png)

![project page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfe8e076fwpxr94vnb40.png)

![contact page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nis6418qa46s6n71l9b5.png)
Content migration from Drupal 7 to Contentful: A step-by-step guide
Tags: drupal, contentful, php
Published: 2022-07-20 14:36:51

_NOTE: This article originally appeared on the [Contentful Blog](https://www.contentful.com/blog/2022/07/19/content-migration-from-drupal-7-to-contentful/). Sharing here on behalf of the author Patrick Geers._

Folks, we have an important question. Are you considering migrating your content from Drupal to Contentful? Then this post will show you how. _Carpe diem!_

[Drupal 7 is officially reaching end of life on November 1, 2023](https://www.drupal.org/psa-2022-02-23). After that point, all support for this legacy content management system will come to a close. 

So how should you plan for the change? Sure, you could start using the latest version of Drupal. Or — and maybe this is a wild and crazy idea, but hear us out — you could move everything over to a new CMS. 

After all, if you’ve taken this long to move on from Drupal 7, there’s likely a good reason why you were taking your time.

Let’s hazard a guess: Was it a feeling of dissatisfaction with using a monolithic CMS? Is it too complex to maintain? Do you desire a conscious uncoupling? To upgrade to something more versatile for your content needs?

It’s time to use Contentful! We have a lot of resources on this site to outline the benefits of adopting a [headless CMS](https://www.contentful.com/r/knowledgebase/what-is-headless-cms/). But rather than dive into a discussion about content strategy and data migration, this post explains how to migrate content from Drupal 7 to Contentful. 

We’ll be outlining the workflow of a migration project step by step, together with examples, migration tools, and command line prompts. 

Before we dive in, there are two prerequisites in order for this guide to be useful. First, you have worked with Drupal 7. Second, you have some knowledge of the command line interface in Contentful. 

[Ready? Let’s go!
](https://www.contentful.com/blog/2022/07/19/content-migration-from-drupal-7-to-contentful/)
I created a Tailwind App UI kit
Tags: tailwindcss
Published: 2022-07-20 14:21:00

I've been working on something for a while - it's a tailwind app UI (and soon to be marketing components) kit called [SaaS Blocks](https://saasblocks.app). 

The original components were released a while ago and they were all paid, but with this version I introduced some free components. I also overhauled the entire design.

I'm curious to get your feedback. Where does it fall short? What would you improve?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buwr0d648nlhi5jcbvsd.jpg)