teleren/devto huggingface dataset:
Incluyendo CSS modules con clases externas
Published: 2022-09-25 04:27:03

Contexto, estoy trabajando en una biblioteca estilos y pues bueno necesitaba generar los estilos para poder compartirlos. Una de las dudas que me surgió es:

> ¿Debería usar [CSS modules](https://github.com/css-modules/css-modules) en esta biblioteca?

La respuesta es ... **noooooo** ... pero si.


![Meme confundido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mksbbmn7vmuxjz15pja8.png)


Bueno a lo que me refiero es que no debería usar CSS modules en el distribuible final de mi biblioteca, porque sería bastante pero bastante complicado para los developers usar nombres de clases con hashes y pues si la clase cambia el hash también (aunque podríamos cambiar eso).

Solo imagina tener que usar una clase con este nombre

```javascript
import style from 'styles.module.css';

style['style-module_Button__a63627'];
```

![Meme que asco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl0j8yerpibyx02ucwds.png)


Definitivamente prefiero esta opción
```javascript
import style from 'styles.module.css';

style['Button'];
```

![Meme que agradable sujeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0dvj4pd62z4wx6pvfj4.png)



Uff mucho mejor, pero ahora surge la siguiente pregunta: ¿podrás usar módulos, si exportas el CSS los nombres de las clases que están directamente en texto plano?

Claro que si

La intención de un distribuible/paquete (al menos de este) es entregar una pieza de software que pueda ser consumida de manera nativa (osea por el browser). No obstante normalmente tenemos bundlers y un conjunto de tools en nuestro proceso de construcción que pueden consumir nuestro distribuible.

![Meme seguro que asi funciona la cosa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui6np7ishe52a4g3xgm2.png)

En mi caso en proyectos externos estoy usando [sass](https://sass-lang.com/) (aunque también podría funcionar con [postcss](https://postcss.org/)). Lo que podemos hacer es tomar los archivos de css con nuestras clases y embeberlos en un archivo. 

Por ejemplo en Sass yo use [@use](https://sass-lang.com/documentation/at-rules/use) y funcionó.

Este archivo representa el css puro que tendríamos en nuestra biblioteca

```css
//my-lib/dist/Button.css
.Buton {
  color: red;
}
```

Aquí embebemos nuestro archivo puro
```sass
// styles.module.scss
@use 'my-lib/dist/Button.css';
```

Este archivo consume el archivo que será procesado agregando los módulos
```jsx
import styles from './styles.module.scss';

export const Button = ({ children }) => <button className={styles.Button]}>{children}</button>
```

[Aquí](https://stackblitz.com/edit/react-wy8nd7) puedes ver un ejemplo de esto funcionando, aunque el archivo css se esta consumiendo de manera local el proceso es similar. Espero les sirva en algún momento, es un hack también por si quieres reusar CSS pero con soporte para CSS Modules
How To Make A Row of Boxes (FLEX)
Tags: help, beginners, css, html
Published: 2022-09-25 04:21:02


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e72dewbcl0fok0qlhcv3.jpg)
Im trying to have a <SECTION> with individual sections in  it (in a row) . I don't quite understand the semantic elements I need to execute it? Im trying to use flex box, pseudo classes, etc, but rn  trying to get the layout correct.
Hacktoberfest 2022: Preptember!
Tags: hacktoberfest, opensource, beginners
Published: 2022-09-25 04:17:09

[Hacktoberfest 2022](https://hacktoberfest.com/) is almost upon us!

![A woman saying it's go time to another woman](https://media.giphy.com/media/yaR8Dux1s0fAI/giphy.gif)

Whether you are new to Hacktoberfest or a seasoned veteran, welcome!

If you're new to Hacktoberfest or open source, don't fret! The community is here to support you! Worried about that first pull request (PR)? I was, too, when I first started contributing to open source. Turns out my first PR wasn't that great, but that's OK!

{% embed https://twitter.com/nickytonline/status/1573360646015655938 %}

Whether you're new or not, I have you covered. I gave a talk in 2020 for Digital Ocean that is for maintainers and contributors, including first-time contributors.

{%embed https://youtu.be/Tn3MBiWYeEI %}

I talk about [conventional comments](https://conventionalcomments.org/) in that talk. If you're curious, I also gave a lightning talk about them.

{% embed https://youtu.be/MMabY-Cm_V4?t=2993 %}

My Virtual Coffee community also did a great Preptember stream that you should check out!

{% embed https://www.youtube.com/watch?v=QAUodCQnpkQ %}

@eddiejaoude ran a [great Twitter Space](https://twitter.com/eddiejaoude/status/1574050967057846274) today with folks contributing lots of great tips for open source and Hacktoberfest. Check it out!

<a href="https://twitter.com/eddiejaoude/status/1574050967057846274">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1og7r6t3307bw6nevlz7.png" alt="Twitter Spaces UI attendees list for Eddie Jaoude's Hacktoberfest Twitter Space today" />
</a>

Remember to be kind to maintainers and fellow contributors. Now go have fun and contribute!

Photo by <a href="https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Markus Spiske</a> on <a href="https://unsplash.com/s/photos/open-source?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Animated Tab Bar
Tags: codepen
Published: 2022-09-25 03:03:52

---
title: Animated Tab Bar
published: true
tags: codepen
---

<p>Designed by:  Mauricio Bucardo</p>

<p>Original image:
<a href="https://dribbble.com/shots/5619509-Animated-Tab-Bar" target="_blank">https://dribbble.com/shots/5619509-Animated-Tab-Bar</a></p>

<p>You can use this menu in your projects.
It also works with 100% width and reacts to changing the size of the window :)</p>

{% codepen https://codepen.io/samudras_andra/pen/qBYVNbp %}
PowerShell: List files modified after xx and watch files
Tags: powershell
Published: 2022-09-25 03:00:13

This is just a memo for myself.

List files modified after x seconds.

- Recurse: include subdirectories
- Force: include hidden files
- File: file only

```powershell
Get-ChildItem -Recurse -Force -File | `
where LastWriteTime -gt (Get-Date).AddSeconds(-10) | `
select Name, LastWriteTime
```

Show tree structure of specified folder.

```powershell
tree /F <folder>
```

Watch object creation and update of specified folder.

```powershell

$watcher = New-Object System.IO.FileSystemWatcher
$watcher.Path = "my files path"
$watcher.EnableRaisingEvents = $true
$watcher.IncludeSubdirectories = $true
$action = {
    $fullPath = $event.SourceEventArgs.FullPath
    $name = $event.SourceEventArgs.Name
    $changeType = $event.SourceEventArgs.ChangeType
    Write-Host "$changeType $name $path"
}
Register-ObjectEvent $watcher 'Changed' -Action $action
#Get-EventSubscriber | Unregister-Event
```
Operational Excellence Tip #1
Published: 2022-09-25 02:40:32

I like to call this technique "Top Errors Zero." Like [Inbox Zero](https://en.wiktionary.org/wiki/inbox_zero), it works by focusing on root causing and fixing your service or app's top errors and removing them.

First you have to record them (and potentially you need to group them if they have customer-specific information/ids). Once recorded, you need to surface them in a dashboard. E.g., create a table of "Top errors" sorted in descending count. Optionally you can include a time chart with when these errors are occurring. And this is as simple as grouping all API calls by error message.

Operational Excellence Tip #1 is: review this table regularly (e.g., weekly) and drive these errors to zero (e.g., as part of your on-call or ops work).

This doesn't cover bad UX or situations where you aren't raising errors in the right place. But in general you'll be surprised how much quality improves for your customers by driving down top errors to zero.

Update. Also use Pareto charts to bucket the top errors or issues to investigate.
Maximum Average Subarray I
Tags: javascript, leetcode
Published: 2022-09-25 02:12:30

```js
var findMaxAverage = function (nums, k) {
  let start = 0;
  let max = 0;
  let sum = 0;
  let averageBy = k;

  for (let i = 0; i < k; i++) {
    sum = sum + nums[i];
  }
  max = sum / averageBy;

  for (let i = k; k < nums.length; k++) {
    sum = sum + nums[k] - nums[start];
    start++;
    max = Math.max(max, sum / averageBy);
  }

  return max;
};

```
I built a website like the “good old” days.
Published: 2022-09-25 01:32:54

I started learning we Dev back in 2018 and till now all projects I have worked on were API based.
So I never had the experience/felt the need of building projects in the "good old" days. Like when that was used to render everything on the server, the era of MVC, LAMP stack, jQuery, Ajax, etc. So whenever I heard senior developers explaining the pros & cons of serving clients from the server, I kinda got the theories, but never truly resonated with them.
Until recently, thanks to my DBMS course project, I built indiehacks.link with Laravel and Blade template engine following MVC pattern.

BTW I'm happy to announce that now I finally understand why people say NextJS routing is inspired by PHP. 😬
Ok, Let's discuss some of my positive and negative experiences.

## Positives:
### 👉 It just felt "chill".
I just wrote codes for each page and it just worked. I didn't have to stress about building multiple APIs and how the front end will pass the required parameters or consume the response.
Also, there was no headache of frontend state management either! So overall it's much easier, at least on the frontend side.

### 👉 I loved Laravel!
It has a built-in solution for all basic needs. Tired of building auth solutions over and over? Building CRUD routes? Integrating payments solution? Just run a few Laravel commands and it's Done!!
Normally I don't like heavy frameworks but IDK why but Laravel felt "organized" and easy to adopt.

## Negatives:
### 👉 Everything felt "slow".
I'm sure this is primarily because of my lack of knowledge on how to improve server-rendered sites!
Like here in this case I need to search for projects by my name. I had no idea how I can pass this data to the server! So guess what I did? I pushed the search query to the URL params, which resulted in a full page load!!

![Query SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul8kyjqbbbfnq62lsc91.png)

IDK if this could be improved my AJAX or something or if I'm just doing it wrong. But this does feel I need to use different solutions to improve the performance, which we get out of the box in modern tech stacks.

### 👉 Felt less reusable.
As someone who prefers JSX over plain HTML, I'm used to thinking of UI as different components. Though this can be done with Laravel Blade to some extent, But I found it very hard to make this reusable compared to the modern frontend frameworks.
Block CTRL-C in bash script
Published: 2022-09-25 01:14:16

You can block / control `ctrl-c` in bash script by following:

```sh
#!/bin/bash

trap ctrl_c INT

function ctrl_c() {
    echo "Cleaning up some stuff before quiting..."

    # Do your stuff here
    # For example: kill any background task that you ran

    # Don't forget to exit after your cleanup is done
    # otherwise the script will not be stopped

    exit
}

# here goes your rest of the script
```
Java Programming part 2
Tags: java, programming, part2, basics
Published: 2022-09-25 00:44:56

Hello guys, Today i will continue my java programming series.
Let's start..

In the previous tutorial you saw i used terminal to compile code. But in large project we do not do that we simply use IDE. I use Apache Netbeans. You can download it from the bellow link. It's free.

[Netbeans](https://netbeans.apache.org/download/index.html)
Install netbeans or your favourite IDE and create a java project.

`Note:` JVM start executing code from main method. It is entry point.

### package declaration 

At top of the file we declare package name. We use `package` keyword to declare a package like..

```
package com.example;
```


## Printing on console

To print on console we use this code
```
System.out.println();
```
`out` has some other methods. Some of them are
```
System.out.print();
System.out.printf();
```

### Java Comments

Java has three types of comments
1. Single line
2. Multi line
3. Java Doc

1. Single line comment
```
//This is a single line comment
```

2. Multi line comment

```
/*This is multi line comment.*/
```
3. Doc comment
```
/*
* This is java doc comment
*
*/
```
Comments are skipped by compiler while compiling. That means you can write anything in comment. That would have no effect on you code.

### Identifiers

In simple words Identifiers are the name of variables ,methods, class

`Note:` Java is case-sensitive language. That means JAVA and java is completely different.

### Variables
what are variables?
Suppose we take two input from user. We keep that data in a part of our memory. We can call that particular portion of memory as container. Now suppose we want to use that data in our code. How do we bring that data from memory. To solve this problem we can give a name of that particular memory and we can bring that data calling by that given name. And that particular memory is our variable. Java is a type safe language. That means you have to specify type of data you want to keep in the variable. We will talk about data types later.

Now lets create our first variable...
```
int num=10;
```
The type of variable is `int` (Integer) it holds only integer value. And the value of the variable is 10 and the name of variable is `num`. We assigned 10 in variable num using `=` assignment operator.(We will talk about operators later).

So, To declare a variable we need
1. data type
2. name

And to initialize a variable we need
1. assignment operator `=`
2. value
 
Now lets print the variable
```
package blogging.java;

/**
 *
 * @author Hakim
 */
public class first {
    public static void main(String[] args) {
        int num=10;
        
        System.out.println(num);
    }
}

```
you should get 10.

That's all for today.

Thank you ❤.
Starting Java Programming series....
Tags: java, programming, series, learn
Published: 2022-09-25 00:02:12

Hello guys, I am Hakim. Today i am going to start my java series. In this series i will try to tech you basic of java programming language. This series is for beginners.

## Java
Java is a high level programming language that runs on JVM. JVM means Java Virtual Machine. Java is a both compiled and interpreted language. When we compile .java file we get a .class file. That contains bytecode. Then we give that .class file to the jvm and jvm interpret that file. Java is platform independent language. 

## Why learn java
1. Java is secure, robust , high-performant language
2. It has rich features
3. It is widely used in android and web application development 
4. Many desktop applications are created in java like Intelij,Netbeans ect.
5. Java has strongest and securest database connectivity 
6. Java Spring framework is one of the most popular web frameworks
7. Best for creating Enterprise applications
8. Really good at cloud programming 
9. Java has a Large Community
10. Java has Powerful Development Tools
11. Java is pure multi-threading language etc.

Java has three platforms
1. JavaSE
2. JEE(Jakarta EE)
3. JavaME

## Installation 
In this series i will use javaSE 17 and netbeans IDE.
To install java visit this site and download jdk and install.
[Oracle JDK](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html)
### Now what is jdk
JDK means Java Development Kit. It is a complete package of required tools and JRE(Java Runtime Environment) that are needed for writing and running java code.

I assume that you have install java. Now lets check the version
open terminal and run following code
```java
javac --version
java --version
```
You should get version numbers.

### First program

Create a folder called java and go into it. 
```
mkdir java
cd java
```
Inside that folder create a class first.java
```
touch first.java
```
Inside that file write these lines of code
```
class first{
        public static void main(String[] args){
                System.out.println("Hello World");
        }
}
```
You do not need to understand that code. Save file and open terminal in that folder.

To generate bytecode we need to compile .java file. To compile run this command
```
javac first.java
```
Now you should get a file called first.class

Now run this command to execute byte code
```
java first
```
You should get the message `Hello World`.

### Jshell
Jshell is new integration in java 9 version. It helps you write code in terminal. You do not need to write whole class. To run jshell open terminal and give this command

```
jshell
```
and write 
```
System.out.println("Hello, World!");
```
You should get the message.

That's all for today.
I will continue this series.

Thank you ❤.
Using insecure protocols with repositories
Published: 2022-09-24 23:56:27

I was trying to perform a gradle sync on my Android Studio project and it generated the following error.

_> A problem occurred configuring project ':app'.
> > Could not resolve all dependencies for configuration ':app:classpath'.
>    > Using insecure protocols with repositories, without explicit opt-in, is unsupported. Switch Maven repository 'maven2(http://localhost/)' to redirect to a secure protocol (like HTTPS) or allow insecure protocols. See https://docs.gradle.org/7.3.3/dsl/org.gradle.api.artifacts.repositories.UrlArtifactRepository.html#org.gradle.api.artifacts.repositories.UrlArtifactRepository:allowInsecureProtocol for more details._

Please advise.  Have you seen this before?  How did you fix this?
[](https://photos.app.goo.gl/9ZPCHcm1XqktCt4J8)
Animated Tab Bar
Tags: codepen
Published: 2022-09-24 23:56:17

---
title: Animated Tab Bar
published: true
tags: codepen
---

<p>Designed by:  Mauricio Bucardo</p>

<p>Original image:
<a href="https://dribbble.com/shots/5619509-Animated-Tab-Bar" target="_blank">https://dribbble.com/shots/5619509-Animated-Tab-Bar</a></p>

<p>You can use this menu in your projects.
It also works with 100% width and reacts to changing the size of the window :)</p>

{% codepen https://codepen.io/samudras_andra/pen/GRdOZrO %}
Faceseo.vn mua traffic user thật, traffic website SEO TOP hiệu quả
Tags: javascript
Published: 2022-09-24 22:54:25

Faceseo.vn mua traffic user thật, traffic website SEO TOP hiệu quả. Thời gian user ở lại web từ 5 - 15 phút, wiew đa đa tầng hiện nay không có đơn vị nào làm được điều này.
https://faceseo.vn tự hào là đơn vị đi đầu trong lĩnh vực cung cấp Traffic, Traffic user, traffic thật uy tín, chất lượng số 1. Với hàng trăm khách hàng đã sử dụng và đạt được hiệu quả tốt. Mua traffic thật tại Faceseo bạn sẽ được tư vấn để tối ưu chi phí và tối ưu khả năng leo TOP tốt nhất. 
Web: https://faceseo.vn
Web: https://blog.faceseo.vn/mua-traffic-user-o-dau-uy-tin-hieu-qua-top-1-nhanh/
Địa chỉ: 36 đường A4, Phường 12, Quận Tân Bình, TP.HCM
Hotline: 0364294109
#mua_trafffic_user #traffic #trafficuser #faceseo
Mua traffic user Faceseo
Traffic user seo
Mua traffic user uy tín
Mua traffic user ở đâu uy tín
Social:
https://blog.faceseo.vn/tang-traffic-user-that-seo-top-google-cuc-nhanh/
https://centralland.com.vn/dich-vu-tang-traffic-user-that/
https://www.facebook.com/muatrafficuserfaceseo/
https://twitter.com/FaceseoW
https://www.pinterest.com/muatrafficuserfaceseo/
https://www.instagram.com/muatrafficuserfaceseo/
https://www.linkedin.com/in/muatrafficuserfaceseo/
https://www.youtube.com/channel/UC9_EF_C4xe12OoIRoZREeqA/about
https://muatrafficuserfaceseo.blogspot.com/
https://www.blogger.com/profile/12250132643526188436
https://draft.blogger.com/profile/12250132643526188436
https://dribbble.com/muatrafficuserfaceseo/about
https://scholar.google.com/citations?view_op=list_works&hl=vi&user=LV_p-y0AAAAJ
https://www.google.com/maps/d/edit?mid=1fFvxIToIH8KlDMH_rmM-yXkR8O6ehXo&usp=sharing
https://flipboard.com/@muauserfaceseo
https://www.reddit.com/user/muauserfaceseo
https://www.producthunt.com/@tangtraffficuserfaceseo
https://muatrafficuserfaceseo.wordpress.com/
How to send AWS Cloudwatch Alarm Notifications to a Microsoft Teams Channel: Build and Deploy to EKS using Harness
Tags: aws, python, teams, kubernetes
Published: 2022-09-24 22:43:40

Microsoft Teams is increasing in popularity across many teams nowadays. It has become a primary means of intra team communication for many technology teams. So it becomes useful if operational teams use Microsoft Teams as an alerting mechanism too. It will be useful if these dev or ops teams, who spend a good amount of time on Teams application, also get alerted about any deployed application events, on the same platform.

In this post I will be describing one of the ways to get application level alerts on a Microsoft Teams channel. As AWS is the most popular cloud platform now, I am taking example of sending AWS Cloudwatch alerts as messages to a Teams channel instead of an email.  

For more details: https://amlanscloud.com/teamsalert/  

In Action: 

https://youtu.be/1_rB1lxq0l0
#10daysofcodechallenge by Ingressive for Good (#Day 4)
Published: 2022-09-24 22:39:20

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 4 of the challenge.

Let me briefly describe how the challenge works before I share my experience with you. From September 21 through October 30, 2022, the challenge is to solve one common algorithm problem every day for ten days.

Today's algorithm problem was "The printing in order challenge " It is the 1114th algorithm challenge on "Leetcode.com".

Today's challenge was the most perplexing I have found since the contest began. The program's inability to execute in JavaScript was a problem in and of itself. Before I even understood what the question was attempting to say, I had to read it about ten times.

Here is the question:
Suppose we have a class:

```
public class Foo {
  public void first() { print("first"); }
  public void second() { print("second"); }
  public void third() { print("third"); }
}
```
The same instance of Foo will be passed to three different threads. Thread A will call first(), thread B will call second(), and thread C will call third(). Design a mechanism and modify the program to ensure that second() is executed after first(), and third() is executed after second().

I'll now discuss my algorithm solving experience. I had to read up on the Python idea of threading in order to figure this out. Threading facilitates the execution of multiple tasks simultaneously and aids in the process flow of tasks.
Therefore, I created an event handler that would run after the first thread has finished.

This task was completed in Python, took 83 milliseconds to execute, and consumed about 14.5MB of memory.