teleren/devto huggingface dataset:
How to Integrate Tailwind CSS into a React app
Tags: javascript, react, tailwindcss, webdev
Published: 2022-10-19 16:20:02

## Step 1: Create your react project
For this post, we will be using `create-react-app` to create our react project. This sets up everything we need so that we can start coding relatively quickly. Open the command line and use the following commands.

npm
`npx create-react-app react-app-with-tailwind`
`cd react-app-with-tailwind`

yarn
`yarn create react-app react-app-with-tailwind`
`cd react-app-with-tailwind`


## Step 2: Install Tailwind CSS
After creating our react project, and change the directory to the project folder. This is where we will install tailwind and it's dependencies.

npm
`npm install -D tailwindcss postcss autoprefixer`

yarn
`yarn add -D tailwindcss postcss autoprefixer`

This will install tailwindcss postcss and autoprefixer in dev dependencies.


## Step 3: Generate Config files
The next step is to generate the configuration files that tailwind css needs. The files can be generated with the following command

npm
`npx tailwindcss init -p`

yarn
`yarn tailwindcss init -p`

This will generate two files:

- tailwind.config.js

- postcss.config.js

The files generated will have the default config already set-up.


## Step 4: Configure path to files
Inside `tailwind.config.js` we need to specify the path to our React files.

```
module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }
```
This will tell tailwind the path to look for its class names and apply the styling associated with those class names.


## Step 5: Add Tailwind Directives
Add the following lines to index.css:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

That's it!
Tailwind CSS has been successfully setup in our React app. We can now use the utility classes in our project.
How to find and kill a process locking a port on Mac
Published: 2022-10-19 16:16:51

## Introduction
Many of us have probably tried running our server on a port such as `localhost:3000` or development environment on the same port. 

There's also the time where we closed our terminal without killing our port. This brings up a: 
```
EADDRINUSE: address already in use :::3000
```
...error message (your port number could be different)

This quick guide will show you how to find the port and kill it in two simple commands.

## Steps

1. Get the PID of the port you want to kill. In terminal type the following
```
sudo lsof -i :3000 # The port # here should be the one giving issue
```
A series of information should appear on your screen. Take note of the PID number.

2. Type the following command to kill the port with the PID you specified:
```
kill -9 <PID>
```

## Conclusion
Now since you killed the port you should be free to reuse it!

## References
* [Find (and kill) process locking port 3000 on Mac [closed]](https://stackoverflow.com/questions/3855127/find-and-kill-process-locking-port-3000-on-mac)
Vue3 Challenge: Form Editor
Published: 2022-10-19 16:12:53

---
title: Vue3 Challenge: Form Editor
published: true
description: How to use props, watchers and emitters in Vue3? #vue #webdev #100daysofcode #challenge
cover_image: https://images.unsplash.com/photo-1541474583361-bc9527eb46d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1114&q=80
---

As a Developer I need a component `XForm` that generates a form defined in schema and can edit an object.

## Acceptance criteria

1. it accepts object in v-model
2. it accepts array of objects in `fields` property
3. it renders `<form>` with same amount of child elements as length of `fields` array
4. each `field` in fields describes a configuration for a child
5. `field.component` gets the name of the component (or tag) that should be rendered (for example it can be `input`, or `select`, or `div`, etc.). Default: `input`.
6. `field.field` get the name of the key of the v-model object to edit
7. `field.field` value is used as `name` attribute of the child
8. all other properties are binded as html attributes (such as `type`, `placeholder`, etc.)
9. when value of input is changed, it updates v-model
10. examples in `App.vue` work as expected: `XForm` with paramteres `myObjectN` and `myFieldsN` should render into html `myResultN`

## Example

Let's say that 
```
object = {
  name: 'Alex',
  dateOfBirth: '06.01.1989',
  eyeColor: 'blue',
  bio: 'I love apples'
}
```

and

```
schema = [
  {
    field: 'name',
    component: 'input',
    type: 'text',
    placeholder: 'Name',
  },
  {
    field: 'dateOfBirth',
    component: 'input',
    type: 'datetime-local' 
  },
  {
    field: 'eyeColor'
  },
  {
    field: 'bio',
    component: 'textarea'
  }
]
```

Given **Vue Template** should result into **Resulting HTML**.

### Vue Template
```html
<XForm v-model="object" :fields="schema" />
```

### Resulting HTML

```html
<form>
  <input name="name" placeholder="Name" />
  <input name="dateOfBirth" type="datetime-local" />
  <input name="eyeColor" />
  <textarea name="bio" />
</form>
```

## How to submit?

1. Write in the comments "Challenge accepted".
2. Fork [stackblitz project](https://stackblitz.com/edit/vitejs-vite-2koc2h?file=README.md) and send a new link with your solution as a reply to your original comment.

Unit tests are good to have, but optional.

Share useful articles in the comments.

In a meantime I will start working on a tutorial and a solution. Don't miss it - subscribe to discussion and follow me.

## Tips

- If you are new to Vuejs, start with [tutorial](https://vuejs.org/tutorial/)
50th Percentile is Median NOT mean
Published: 2022-10-19 15:45:26


I was confused whether 50th Percentile is Mean or Median. So, I will noted down right here that it is **MEDIAN**

Imagine that there are 9 people in a room. Some are children, teenagers, and adults

These are their age sort in ascending.
```
5, 10, 15, 20, 25, 30, 35, 40, 45
```
From the dataset above:
**Median** = 25
**Mean** = 25

```
Calculate median:
Median position = (n+1)/2 
with n = 9 the median position is 5, which is 25

Calculate mean:
(5+10+15+20+25+30+35+40+45)/9 = 25
```

In this case, the mean and median is equal due to the age is **symmetrically** distributed

<hr>

On the other hand, if the people in the room is mostly young, those young kids will make the group look younger.

Although the middle person is 20, the majority is so young that the mean goes down.
```
1,2,3,4,5,20,21,22,30
```
**Median** = 20
**Mean** = 12

And when majority of the group is older, the mean will rise and become higher
```
18,19,23,30,43,60,65,70,90
```
**Median** = 43
**Mean** = 46.44

<hr>
Reference:
[Does 50th Percentile mean Average?](https://allthingsstatistics.com/miscellaneous/does-50th-percentile-mean-average/)
Luos roadmap
Tags: opensource, microservices, roadmap, luos
Published: 2022-10-19 15:43:09

A few days ago we shared our product roadmap. 
⏩ https://www.luos.io/roadmap

The following graphic shows the next technical developments our team is and will be working on with the help of the community, quarter by quarter.

![Luos roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6iexn7idznkgkiyye60.jpg)

As part of an open source project, each of these subjects are open to contribution: it means that anyone from the Luos community can work on them and help the team in their developments.
Your Opinion Matters to Us...
Tags: productivity, mentalhealth, beginners
Published: 2022-10-19 15:38:26

Hello Everyone, 

Around 2 months ago, we ([Devjour](https://www.devjour.com/) team) were thinking about what shall we create to benefit our community. 
We found out that one of the critical things that we experienced ourselves during the previous period is inability to express and track our mental health and productivity. 

Therefore, we thought about creating something that would enable us to do that. We developed ([Devjour](https://www.devjour.com/)as a guided journaling tool.

We tested it with several people and we found good traction. But we still need to know if it's the right thing for our community Health well-being and productivity. 

We really interested to know your opinion because honestly it matters to us. 

You can check it from this Here https://devjour.com 

We are going to wait for your honest feedback here...
This Post is Scheduled for 11:30am US Eastern Time ⏰
Tags: meta, changelog
Published: 2022-10-19 15:30:00

Announcing a new [Forem](https://github.com/forem/forem) feature we have just turned on with DEV:

**Schedule your post!**

![Schedule post on Forem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z4xc5o9bb0ulxcs5s1z.png)

_The functionality is now available behind the "hexagon" icon for advanced publication features._

This feature was much-requested, and now it is available. There had been alternative ways to automate this functionality via the API for a while, but now it is native to the functionality of the platform and available in the UI.

Kudos to @lightalloy for implementing the functionality! If anyone runs into trouble with it, feel free to [submit an issue](https://github.com/forem/forem/issues) in the Forem repo.

Happy publishing!
How To Get Started With Open Source Contributions?
Tags: hacktoberfest, opensource, github, bleedbytes
Published: 2022-10-21 09:10:58

---
title: How To Get Started With Open Source Contributions?
published: true
date: 2022-10-19 15:22:28 UTC
tags: hacktoberfest, opensource, github, bleedbytes
canonical_url: https://api.follow.it/track-rss-story-click/v3/5DZDQD-R1ze8JpEtDQTyWps0ohxaO6Yr
---

 ![How To Get Started With Open Source Contributions?](https://api.follow.it/track-rss-story-loaded/v1/vCaRLQ0E8lqBs32xQXQfFA "How To Get Started With Open Source Contributions?") 

One of the difficulties faced by people who are interested in contributing to open source is finding a project or issue to work on. Once we have decided on the repo to contribute, we need to understand the tech stack and the  guidelines followed by the project. Most of the projects will have contributing guidelines […]

The post [How To Get Started With Open Source Contributions?](https://bleedbytes.in/how-to-get-started-with-open-source-contributions/) appeared first on [BLEEDBYTES](https://bleedbytes.in).
Pocket Casts goes Open Source!
Tags: podcast, ios, android, opensource
Published: 2022-10-19 15:22:10

[The best mobile podcast app is going open source](https://blog.pocketcasts.com/2022/10/19/pocket-casts-mobile-apps-are-now-open-source/)! This is HUGE; I am not aware of any FOSS podcatchers on iOS, and only one on Android.
Hacktoberfest Week 2: Transcript
Tags: opensource, hacktoberfest
Published: 2022-10-19 15:22:04

## Topic

This time, I contribute to a [repo](https://github.com/mgreiler/se-unlocked) from Software Engineering Unlock,a podcast for discussing topic about software engineering. They need some help to go over automatically generated transcript to correct them to improve accessibility, so I participated in the [issue](https://github.com/mgreiler/se-unlocked/issues/131) for one of the episodes and made a [pull request](https://github.com/mgreiler/se-unlocked/pull/159).

## Changes

**A Snippet**

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

- Added missing content during the very beginning and the end.
- Added some punctuation.
- Fixed incorrect parts of the transcript.
- Fixed typo, including misspelled names and missing capitalization.
- Fixed time code.
- Removed some filler words.

## Process

I went over the transcript line by lien while listening to the podcast. I discovered there were some missing contents from the audio, probably added from post-recording editing, so I added them to the transcript and shifted the time code.
This went a lot smoother than last week, as I have experience of rebasing and squashing commits, as well as how to follow contribution guideline. The maintainer was very nice in our interaction, and the pull request was accepted without a hitch.

## Learning

It wasn't difficult per say. It mostly came down to carefully editing the lines to watch the audio and figuring out what the speakers are saying in what would be rather casual format, so it took some concentration and repeatedly going over the same section to be double-check.
In order to do this, I learned about accessibility and transcribing rules, such as the format used, what to do with background sounds, and so on.
For instance, the format used was: [time_code] \<speaker\>: \<words\>, like [00:02:25] Dr. Smith: I would say so.
For background noise, you only include then if it's relevant, as ( \<sound_description\>). Make use to italicized the description, like ( _laugh_ ).
Things like stutter and filler words are supposed to be omitted to improve readability.

If I am to do it again, I probably would avoid shifting time code by a certain amount of second without following the audio. I thought I just needed to shift rest of the time code by a certain amount after including added content from the final audio, but I was apparently wrong. The time codes wouldn't match exactly, as I discovered. It's better to follow along to fix time code. Perhaps the original transcript was off in the first place.
Creating a whole directory tree at once in Linux/Unix
Tags: linux, tutorial, beginners, programming
Published: 2022-10-19 15:22:00


Instead of creating each directory in the tree separately, you can use brace expansion to do this in a single line:

```
mkdir -p testdir/{subdir1/subdir11/{subdir111,subdir112},subdir2,subdir3}
```

If we check the result with `tree testdir`, the result should be as expected:
```
testdir
├── subdir1
│   └── subdir11
│       ├── subdir111
│       └── subdir112
├── subdir2
└── subdir3

6 directories, 0 files
```

This works in most shells today, including `bash` and `zsh`.

## How does it work?

Brace expansion is a similar mechanism to filename expansion, but the generated filenames don't need to exist. For example, if we put echo in front of the above command:

```
echo mkdir -p testdir/{subdir1/subdir11/{subdir111,subdir112},subdir2,subdir3}
```

We'll see the expanded command:
```
mkdir -p testdir/subdir1/subdir11/subdir111 testdir/subdir1/subdir11/subdir112 testdir/subdir2 testdir/subdir3
```

Note: we have to use the mkdir's `-p` option to make the parent directories automatically, otherwise the command would fail.
        
<hr><small>
Note: This is a snapshot of the wiki page from the <a href="https://betterways.dev">BetterWays.dev wiki</a>, you can find the latest, fully formatted version here: <a href="https://betterways.dev/creating-a-directory-tree-at-once-in-linux-unix">betterways.dev/creating-a-directory-tree-at-once-in-linux-unix</a>.
</small>
Welcome Thread - v196
Tags: welcome
Published: 2022-10-19 14:57:17

---
title: Welcome Thread - v196
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Cartoon hands fist bumping! After each bump the words "community" and "unity" appear between the fists in an alternating pattern.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcugozxub3i1vcw0s3yu.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
5 powerfull function in python
Tags: python, functional, tips, tutu
Published: 2022-10-19 14:54:05



Lambda Function:
It is known as anonymous function.
If you have a single operation to be executed,then the lambda function is extremely useful intead of declaring a traditional function using def keyword.

# Python Lambda Function
 answer = lambda a, b : a**2 + b**2 + 2*(a+b) print(answer(3,6))

# Output: 63

Map Function:

The map function executes a specified function for each item in an iterable. The Iterable element is sent to the function as a parameter. You can also use a lambda function inside the map.

# Python Map Function
def addList(a,b): 
         return a+b

res = list(map(addList, [2, 6, 3],[3, 4, 5]))
print(res)
# Output: [5, 10, 8]

Filter Function:

The filter is a built-in function, which is useful when it required to segregate any kind of data. It is used to extract or filter the data based on the given condition.

# Python filter Function 
def isPositive(a):
         return a>0

res = list(filter(isPositive, [2, 6, 3, -1, -7]))
print(res)
# Output: [2, 6, 3]

Zip Function:

zip() function creates an iterator that will aggregate elements from two or more iterables.

You can use the resulting iterator to quickly and consistently solve common programming problems, like creating dictionaries.

# Python zip Function 
user_id = [10, 11, 12] user_name = ['Mike', 'John', 'Nick']
user_Info = list(zip(user_name, user_id)) print(user_Info) # Output:
# [('Mike',10),('John',11),('Nick',12)]

Help Function:
The Python help function is used to display the documentation of modules, functions, classes, keywords, etc.
If the help function is passed without an argument, then the interactive help utility starts up on the console.

# Python help Function 
# Displaying the docs for print keyword
print(help(print))
# Output :
"""print(...)
print(value,..., sep='end='\n',file-sys.stdout,flush=False)
Error message in "if" statement
Published: 2022-10-19 14:52:32

While I was exercising an "if" statement in Ruby...

**`**lotto_number = rand(1000)

p "Your lotto number is " + lotto_number.to_s + "."

if lotto_number.even
  p "The number is even."

end
**`**
This is the code that I wrote for a lotto number drawn from 1 - 1000.  The condition is: if lotto_number.even .... Ruby then drew a random number every time I ran the code between that range. However, it did not specify whether it was odd or even.  That means, the "if statement" was not executed. 
The error pointed at line 13. It asked whether there was an unspecified object or I meant even?"  Indeed, I had forgotten the character **"?"**.  The correct code should have been:

`**lotto_number = rand(1000)

p "Your lotto number is " + lotto_number.to_s + "."

if lotto_number.even?
  p "The number is even."

end**`

After running the code again, it executed without error messages. (In the latest case, the winning lotto number was 238).
Rails system tests for multiple screen sizes
Tags: rails, ruby, capybara, testing
Published: 2022-10-19 14:41:10

_This post was extracted and adapted from [The Rails and Hotwire Codex](https://railsandhotwirecodex.com)._

Rails system tests simulate a user's actions in a web browser so it's akin to the app's real world usage. In a responsive app, this means testing on multiple screen sizes as well.

Capybara, the tool used by system tests under the hood, has a method to resize the current window during a test run. But, since the tests are not run in a set order, any test that resizes the window needs to restore the size after it's done. Otherwise, subsequent tests run in that window could fail.

Let's take a look at how to write a set of system tests for mobile screens.

## Mobile system tests

Create a subclass of `ApplicationSystemTestCase` specifically for mobile. It will resize the window in the `setup` and `teardown` methods that are invoked before and after each test case.

```ruby
require "test_helper"

class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
  WINDOW_SIZE = [1400, 1400]
  driven_by :selenium, using: :chrome, screen_size: WINDOW_SIZE
end

class MobileSystemTestCase < ApplicationSystemTestCase
  setup do
    visit root_path
    current_window.resize_to(375, 812)
  end

  teardown do
    current_window.resize_to(*ApplicationSystemTestCase::WINDOW_SIZE)
  end
end
```

We can use this new base class to write tests aimed at mobile screens. Let's say the navigation bar shows a burger menu only on mobile. We can test that as:

```ruby
require "application_system_test_case"

module Mobile
  class NavigationBarTest < MobileSystemTestCase
    test "can access sign up page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Sign Up"

      assert_current_path sign_up_path
    end

    test "can access login page via burger menu" do
      visit root_path

      find(".navbar-burger").click
      click_on "Log in"

      assert_current_path login_path
    end
  end
end
```

Running the system tests will now resize the window for the above two tests and restore the size back to desktop after they're done!

```
$ bin/rails test:system
```

_If you liked this post, check out my book, [The Rails and Hotwire Codex](https://railsandhotwirecodex.com), to level-up your Rails and Hotwire skills!_
Leveling up entry-level WordPress developers
Tags: speaking, wordpress
Published: 2022-12-01 19:00:48

---
title: Leveling up entry-level WordPress developers
published: true
date: 2022-10-19 14:38:46 UTC
tags: Speaking,WordPress
canonical_url: https://courtneyr.dev/2022/10/19/leveling-up-entry-level-wordpress-developers/
---

[
 ![humedcpm0u](https://thewpminute.com/wp-content/uploads/2022/10/humedcpm0u.jpg "Leveling up entry-level WordPress developers 1")

Leveling up entry-level WordPress developers – The WP Minute

In today’s episode of WP Product Talk, we’ll explore the methods organizations go through to level up entry-level WordPress developers on their team. This is a fantastic discussion with your weekly hosts Kim Colemen & Matt Cromwell. Today’s guest is Courtney Robertson, Web Design Dev Advocate at GoDaddy Pro. If…

 ![cropped favicon](https://thewpminute.com/wp-content/uploads/2022/02/cropped-favicon-32x32.png "Leveling up entry-level WordPress developers 2")thewpminute.com

](https://thewpminute.com/leveling-up-entry-level-wordpress-developers/)

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="location-arrow" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"></path></svg>

Hamilton Township, US

This article first appeared on:  
 ![](https://thewpminute.com/wp-content/uploads/2022/02/cropped-favicon-32x32.png)  
[Courtney Robertson -](https://courtneyr.dev)  
by [<span class='p-author h-card'>Courtney Robertson</span>](https://courtneyr.dev/author/courane01/)
Undercurl Display on Neovim and tmux with iTerm2
Tags: help, tutorial, nvim, tmux
Published: 2022-10-19 14:37:51

As you may know, it can't enable an undercurl on any English word mispelled on iTerm2 with Neovim even if setting t_Cs and t_Ce. 

This shared information are based on the dotfile from Takuya Matsuyama setting and zsh on your SHELL configuration.

First thing first, export your TERM on your ~/.zshrc. Source your .zshrc is necessary.

```
export TERM="xterm-256color"
[[ -n $TMUX ]] && export TERM="screen-256color"
```
Your .vimrc or init.lua need to add these two options

```
vim.opt.spell = true
vim.opt.spelllang = { 'en_us' }
```
Next, add Smulx=\E[4\:%p1%dm, to your TERM. 
For example smul=\E[4m, **_Smulx=\E[4:%p1%dm,_** tbc=\E[3g, tbc=\E[3g, ...

```
infocmp > /tmp/${TERM}.ti
Add Smulx=\E[4\:%p1%dm, after smul=\E[4m,
tic -x /tmp/${TERM}.ti
```
Then edit any file you prefer. This example uses base.lua file. _vim ~/.config/nvim/lua/user/base.lua

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

Move to tmux, your tmux session should inherit the TERM from .zshrc setting by switching to use screen-256color instead of xterm-256color. Performing the same process of TERM reconfiguration.

```
infocmp > /tmp/${TERM}.ti
Add Smulx=\E[4\:%p1%dm, after smul=\E[4m,
tic -x /tmp/${TERM}.ti
```

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

You can recheck your TERMINFO using the additional setting.

```
infocmp -l -x | grep Smulx
        vpa=\E[%i%p1%dd, Smulx=\E[4\:%p1%dm,
```
Your tmux session can also display the undercurl line of each misspelled word.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9b7cnm4209byrdu7z1y.png)