teleren/devto huggingface dataset:
Purging TailwindCSS without ejecting Create-React-App
Tags: tailwindcss, react
Published: 2020-06-06 08:33:32

What's Purging: Purging is a term for eliminating unused css code. It decreases css file size in production to help browser load files faster. You may hear the term, <b>tree shaking</b> , normally used in the context of eliminating unused libraries to decrease js bundle size. Purge is the same concept.

There's an [official doc](https://tailwindcss.com/docs/controlling-file-size/) to configure purge feature, but it doesn't go into the setup in the create-react-app environment. So if you want a step by step guide on using purge feature without ejecting your create-react-app, keep reading:

TailwindCSS 1.4.0+ has added PurgeCSS natively, users can now directly configure tailwind.config.js to eliminate unused css code in production.

* First, you need to create a <code>tailwind.config.js</code> file.
* Second, add all the js or jsx files that contains Tailwindcss classes under content property.
* You also have the option to add "whitelist" for a list of class Names to <b>not be purged</b> 

```js
module.exports = {
  purge: {
    content: [
      './src/*.js',
      './src/*.jsx'
    ],
    options: {
      whitelist: ['bg-color-500']
    }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],

}
```

Once the config file is done, we need to run the build. 

The only way to trigger purge is by setting <code>NODE_ENV=production</code>.
You can either <code>export NODE_ENV=production</code> in the console first or you can add it as a prefix before run script in <code>package.json</code>,

```js
  "scripts": {
  "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.css",
    "prestart":"npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "prod:build": "NODE_ENV=production npm run build:tailwind react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject
  },
```

When you run <code>npm run prod:build</code>
1. first it will set production as NODE_ENV variable
2. run build:tailwind which then will trigger purge feature
3. and build your React app with the purged version of tailwind.css

Make sure in your <code>index.js</code>, you are referencing the compiled Tailwind css file instead of index.css.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './tailwind.css';
import * as serviceWorker from './serviceWorker';

``` 

For more questions DM me on Twitter @jmhungdev
container less cloud computing - wascc
Tags: cloud, webassembly, rust, polyglot
Published: 2020-06-09 08:11:47

---
title: container less cloud computing - wascc 
published: true
description: web assembly on the server without a browser, with hot swap capabilities
tags: cloud, webassembly, rust, polyglot
//cover_image: https://direct_url_to_image.jpg
---

If you are curious about a container less secure server side future you need to watch this talk.

At time index 19min it's getting real. Kevin Hoffman demonstrates how hot swap of modules is possible, means deployment with zero downtime, not only of code but also of attached resources like key value stores etc.

This is super exciting! What do you think about this possible future?
{% youtube vqBtoPJoQOE %}
[Read more about waSCC.](https://wascc.dev/)
Daily Developer Jokes - Tuesday, Jun 9, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-06-09 12:00:21

---
title: "Daily Developer Jokes - Tuesday, Jun 9, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jun%209%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e0be565.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How did pirates collaborate before computers ?

___A:___ Pier to pier networking.
 -->
Designing the Life You Want to Live
Tags: womenintech, codenewbie, devjournal
Published: 2020-06-09 12:34:18

_This post was originally published on June 9, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Something's been on my mind for a while that I'd love to share here. It's been an idea that's been simmering in my head for the past few weeks (maybe month or two, who really knows where our ideas come from or when they arrive?).

It's the idea that if we're not currently living the lives that we want to live in the future, then we need to make changes *now* to be able to live the types of lives we want to.

Now, I'm not talking about wanting to be extremely wealthy in the future future, and then acting as though you are *now* and consequently spending exorbitant amounts of money as a result. In my humble opinion, that's actually not a great (or sustainable) idea.

What I'm talking about mostly has to do with our own habits, beliefs, and systems of both work- and home-life.

For example, in the not-so-distant past, I would work myself to the absolute bone every single day without rest. If you've been reading along with me for any amount of time, then you may know that I've been rather focused on having time for working hard and also having designated time for resting and taking intentional breaks from said work.

One example of how I see it: if I want to be a conscious and fully-present parent to a child one day, I need to pay attention to how conscious and fully present I am *now*, each and every day of my present life.

I can't keep going on, entertaining my workaholism and can't-stop-won't-stop mentality now if I don't want that to be my reality in six, twelve, eighteen plus months from now.

The thing is - we don't just wake up one day totally different from how we've been our whole lives. We really have to work to change those habits and life systems.

We may think we'll "grow up" as the years go on, but I think our current habits actually tend to get further and further ingrained - and thus more difficult to change - as the years pass us by.

So for me, those designated times of rest and breaks from working are kind of revolutionary.

I'm not doing it each day for its own sake, but rather I'm consciously designing the very life I hope to be leading in which I don't need to make these very intentional efforts since I will have already built the foundations for them by living that way today and tomorrow and so on.

Thanks for reading! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)
Road to Genius: beginner #2
Tags: javascript, beginners, computerscience
Published: 2020-06-09 13:30:03

Each day I solve several challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, but you will learn a ton of new and interesting things as you go.

![programming challenge](https://dev-to-uploads.s3.amazonaws.com/i/ftawl7qp35s4f6s92po4.png)

This challenge is slightly more complex than the previous one. Don't be fooled by the amount of code, let's dissect the challenge.

As you can see at the bottom comments, there is only one bug we need to solve 💚 (a number), and we get a list of answers to choose from.


The code starts by creating 3 arrays, the first two (`a1` and `a2`) are filled with numbers, the third `arr` is empty. Then we have a while loop, whose condition is the length of `a1` and `a2`. This means, as long as those two arrays are not empty, it will execute the code inside the loop `{...}`.

This inner code pops from `a1` and `a2` respectively into `x` and `y` variables. Then it compares `x` with `y`, if `x` is greater than `y` it first adds `x` into `arr` then `y`, in the other case it adds first `y` then `x`. This is all we need to know.


The challenge also states that `R` should be 6. `R` is some value from `arr` at an unknown position (=index) represented by our bug 💚 (a number). So all we need is to find an index of `arr` such that the value at that index is 6.


Here's an example:
`let demo = [2, 4, 6]`
an array is zero-indexed, meaning the first element is at position (index) 0, the second element is at index 1, and so on...
In this example the value 6 is at index 2.


Now back to our challenge. We know that the loop takes elements from two different arrays, and adds them to a new array, all we need is find the position (index) of a value 6. Notice that there are 2 possible answers, because number 6 appears twice in `a2`. But we are very lucky since one of these numbers appears at the very end of `a2`. All we need is evaluate the inner loop just once to find the index, like this:

```
x = 1   (pop from a1)
y = 6   (pop from a2)
if (x > y)    this is false
...
else {        here we go
  arr.push(y)
  arr.push(x)
}

'arr' is now [6, 1]
```

value 6 is at index/position 0 in 'arr'
this means that 💚 should be 0.

![programming challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/rqf1jcer5rm1ttuzlt6w.png)

---

If you feel inspired and motivated to upgrade your coding + debugging skills, join me on the Road to Genius at https://nevolin.be/codr/
Beginner Python tips Day - 06 try...except...else...finally
Tags: python, beginners, codenewbie, tips
Published: 2020-06-09 15:32:33


```python
# Python Day 06 - try...except...else...finally

# try, except(also known as catch) and finally pattern is seen in many programming language
# but on top of that Python comes with else block as well,
# else block runs before finally block
# when there is no exception in the try block

# Example 1

try:
    print(100/0)
    # Doesn't print anything because there is an exception
except ZeroDivisionError:
    print('This does run as there is ZeroDivisionError')
else:
    print("This doesn't run as there is an exception in try block")
finally:
    print('This runs regardless of the exception')

# Example 2

try:
    print(100/5)
    # Prints 20.0
except ZeroDivisionError:
    print("This doesn't run as there is no ZeroDivisionError")
else:
    print("This runs as there is no exception in try block")
finally:
    print('This runs regardless of the exception')

```
A Rust Client for PostgREST
Published: 2020-06-10 12:59:25

At [Supabase](https://supabase.io), we rely heavily on [PostgREST](https://postgrest.org/en/stable/index.html), an open source tool that turns your Postgres database into a RESTful API. We even have our own JavaScript client for it in the form of [postgrest-js](https://github.com/supabase/postgrest-js).

But I use Rust, and it's required by my religion to rewrite everything in Rust, so rewrite it I did. To wit: [postgrest-rs](https://github.com/supabase/postgrest-rs) 🦀.

# 🤔 What can I do with it?

postgrest-rs brings an ORM interface to PostgREST. This means you can interact with Postgres (through PostgREST) from within Rust. For example:

```rust
use postgrest::Postgrest;

let client = Postgrest::new("https://your.postgrest.endpoint");
let resp = client
    .from("table")
    .select("*")
    .execute()
    .await?;
```

# 🤷‍♀️ Why would I want it?

Say I have a table of `users`, and I want to know the name of the last user that logged on. In PostgREST, you do this by making the following request:

```
GET https://your.postgrest.endpoint/users?select=username&order=last_seen.desc HTTP/1.1
Accept: application/vnd.pgrst.object+json
```

This gets cumbersome and error-prone as queries get more complex. Compare this to its equivalent in postgrest-rs, which feels more at home:

```rust
let client = Postgrest::new("https://your.postgrest.endpoint");
let resp = client
    .from("users")
    .select("username")
    .order("last_seen.desc")
    .single()
    .execute()
    .await?;
```

There are many other cool stuff you can do, such as switching schemas, row filtering, calling stored procedures, and much more. You can check out the repo [here](https://github.com/supabase/postgrest-rs) and play around with it. 

And there you have it! 🎉

This project is part of my internship at Supabase. I saw that there was an interest in a [Rust client library](https://github.com/supabase/supabase/issues/5), and offered to work on that, among other things. Soon after, I'm writing a Rust library, and it was great! So credit where it's due: the Supabase team for all the support, and of course, PostgREST! 

---

We'll announce all our future features with more freebies here on DEV first. Follow us so that you don't miss out.

[Sign up](https://app.supabase.io) for our early alpha!

![Follow us on dev.to](https://dev-to-uploads.s3.amazonaws.com/i/mc0g5gv3k3py5jsh8rdr.gif)
Simplifying: Stacks and Queues
Tags: stack, queue, computerscience, javascript
Published: 2020-06-09 22:36:03

 ![Simplifying:  Stacks and Queues](https://dev-to-uploads.s3.amazonaws.com/i/khmy0stm6k8gldct97yi.jpg)

Stacks and queues: this is how I remember them:

**Stacks:** I picture something vertical: a pile of plates,a bottle.

**Queues:** I picture something horizontal: a pipe, a line (I join first, I get served first).

    Stacks - LIFO:  you can only add(append, push) and remove(pop) from the back(top,end).
    Queues - FIFO : add (enqueue,append) to the back(rear), only remove(dequeue,popleft) from the front .

LIFO : Last in, first out. 
FIFO : first in, first out. 

If you are JavaScript developer, you are unconsciously working with stacks and queues everyday:
- You use stacks every time you run your code: "function call stack".
- You use queues every time you run asynchronous code: "The event queue" of the event loop.

Here are some examples of stacks and queues in the real world:

**Stack:**
- Your favorite text editor: undo/redo feature.
- Backtracking: your browsers "back" button.
- Reverse : try to reverse your name.

**Queue:**
- Order processing: you stand 6 feet apart from everyone as you wait in line to place your order with a cashier.
- Message processing: your long SMS messages are stored in a queue( messages are sent in the order they are received). Test this feature out on twitter by exceeding your 143 character limit
  
---
Now, how have you used stacks and queues consciously in your career?

    Let's talk about your usage of these data structures or concepts in your projects.

- I coded a Java paint application to draw shapes on a canvas : https://github.com/moyarich/JPaint.

- I used the open source [bull queue manager](https://github.com/OptimalBits/bull) in my project to control the pace at which I send data to a API. Each subsequent item is sent to the API, after it connects to my webhook url. I wrote this custom function(https://gist.github.com/moyarich/4d6735b8d417c5e2f7e5f03469d32fb7)to get bull queue to manually process only one job in the queue on demand.
Debugging 
Tags: swift, beginners
Published: 2020-06-10 00:29:38

When will you use breakpoints?

   A- Breakpoints placed within your code where it will pause so that you can inspect the program for any bugging issues. 

Why would you change the iOS simulator?

   A- The reason you'd change the iOS simulator is to make sure the bugs are fixed within all device and aren't localized to one iOS.
Serve Website/Api from your own system
Tags: api, hosting, agile, opensource
Published: 2020-06-10 03:05:08

Have you ever seen a condition when you need to change your design or API frequently to meet the demand?
I did, a few days back. Because of lockdown, My colleagues and I were working on a project from home. We are not in the same local network, so to connect backend and frontend I had to push to code to server then my colleagues start working.
Then I found a service called [NGROK](https://ngrok.com/)

[**Ngrok is a cross-platform service that enables you to expose your local development server to the internet.**](https://www.blog.guidefather.in/2020/06/host-websiteapi-from-local-system-ngrok.html#how-ngrok-work)

## How to use NGROK
- Go to their [website](https://ngrok.com/download)
- Download setup for your OS and exact it.
- Open terminal in the same folder and type

  > **./ngrok http port_to_map**

example ./ngrok http 3000
Ngrok will provide you an URL. Using which you can access your api/website publically.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tmuma76gb6hrnk2kk0dl.png)
If you want to know more you can check this link [Host website from local system](https://www.blog.guidefather.in/2020/06/host-websiteapi-from-local-system-ngrok.html).
I believe using NGROK is more easy than reading this article.
If you have a better alternative or solution, please let me know. I would love to explore.

▀█▀ █░█ ▄▀█ █▄░█ █▄▀   █▄█ █▀█ █░█
░█░ █▀█ █▀█ █░▀█ █░█   ░█░ █▄█ █▄█
6 Ways to Loop Through an Array in JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2020-06-10 12:37:29

Dealing with arrays is everyday work for every developer. In this article, we are going to see 6 different approaches to how you can iterate through in Javascript.

[**Continue reading...**](https://www.codespot.org/ways-to-loop-through-an-array-in-javascript/)
Deploy A React app on GitHub pages
Tags: react, github, deploy
Published: 2020-06-15 10:41:34

GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project on  [GitHub Pages](https://pages.github.com/).

I will be deploying a project I did today (Nov, 28 - 2020). To follow along, feel free to clone or fork the repo. 

Link to the repo:  [GitHub/myRepo](https://github.com/ChrisAchinga/myRepos/tree/174080e27061235d153ff10e51ac0ad3f5661222) 


>A programmer's learning tool is by practicing     --I said that.

Let's Get Started:

## Step 1: Install the Dependencies:

I use npm for my projects, so after cloning the repo, open the project on your terminal or cmd (windows) and execute:

```shell
npm install
```

### Install the *gh-pages* package as a dev-dependency of the app

```shell
npm install gh-pages --save-dev
```

## Step 2: Define Homepage in package.json

In the `package.json` file in your react app and add homepage property using the given syntax:

```shell
http://{username}.github.io/{repo-name}
```

where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Below is an example for my project:

```json
"homepage": "http://ChrisAchinga.github.io/myRepos",
```

![screenshotpng](https://cdn.hashnode.com/res/hashnode/image/upload/v1606575051396/lUBJUjw-F.png)

## Step 3: Deploy script in `package.json` file

Now we can add the deploy script in the package.json file. In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

```json
"scripts": {
  // some code before
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
```

So your "scripts" should look like this:

![Screenshot from 2020-11-28 17-56-54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1606575468680/qe4IOKIDk.png)

## Step 4: Deploy Your App
Update your GitHub repository using git commands:

```shell
npm run deploy
```

## Step 5: Commit and Push to GitHub

On your project terminal, run the deploy script

```shell
git add .
git commit -m "gh-pages deploy"
git push
```


Kudos your React app is ready for view... on https://chrisachinga.github.io/myRepos/

Get The Complete Source Code:

%[https://github.com/ChrisAchinga/myRepos]
TIL: you can use `cd ~number` to navigate back to previously visited directories
Published: 2020-06-15 18:31:19

If you are a heavy user of the command line (as I am 🤓), there is a high chance that you use the command `cd` quite often to navigate back and forth to different directories.

Besides the popular `cd <dir>`, `cd` has some more capabilities that are not so widely known and can make the navigation between different directories much more efficient.

Let's say we have the following directory structure and we have to navigate through those folders.
```console
parent
├── child1
│   └── grandchild1
└── child2
    └── grandchild2
```

For example, we have to run the following commands:

```sh
cd child1
cd grandchild1
cd ../../child2
cd grandchild2
```

Did you know that you can use `cd ~2` to navigate back to `~/parent/child1/grandchild1`?

Let me try to explain how this is working.
All the directories that we have visited are stored in a stack. To display this stack, we can use the command `dirs -v`, which will output something like the following: 

```console
0	~/parent/child2/grandchild2
1	~/parent/child2
2	~/parent/child1/grandchild1
3	~/parent/child1
4	~/parent
```

You can now use the number on the left of the directory to navigate through the stack. In our case, we are using `cd ~2` to navigate to the item in position 2.

Isn't that cool? Especially compared to the alternative(`cd ../../child1/grandchild1`)? :sunglasses:

---
➡️ This post was originally published on my [blog](https://diamantidis.github.io).
imbalanced-learn 0.7.0 is out 
Tags: machinelearning, python, datascience
Published: 2020-06-16 02:24:53

imbalanced-learn, probably, is your favorite python package that offers a number of re-sampling techniques commonly used in datasets showing strong between-class imbalance.


This is release should be be fully compatible with the latest version of `scikit-learn`. 

### Maintenance

- Pipelines can cope with older versions of `joblib`.
- Common tests have been refactored.
- Feature warnings have been removed.
- Imposing keywords only arguments as in `scikit-learn`.

### Changed models  
- `imblearn.ensemble.BalancedRandomForestClassifier` is expected to give different results for the same input (using the same random state).
- Fix `make_index_balanced_accuracy` which was unusable due to the latest version of `scikit-learn`.
- Raise a proper error message when only numerical or categorical features are given in `imblearn.over_sampling.SMOTENC`.
- Fix a bug when the median of the standard deviation is null in `imblearn.over_sampling.SMOTENC`. 

### Bug fixes  
- `min_samples_leaf` default value has been changed to be consistent with `scikit-learn`
### Enhancements  
- The classifier implemented in imbalanced-learn, `imblearn.ensemble.BalancedBaggingClassifier`, `imblearn.ensemble.BalancedRandomForestClassifier`, `imblearn.ensemble.EasyEnsembleClassifier`, and `imblearn.ensemble.RUSBoostClassifier`, accept `sampling_strategy` with the same key than in y without the need of encoding y in advance.
- Import `keras` module lazily.


### Installation  
You can install it either by using pip
```
pip install imbalanced-learn -U
```
or by using the conda package manager
```
conda update imbalanced-learn
```

The changelog can be found [here](http://imbalanced-learn.org/stable/whats_new.html#version-0-7), while installation instructions, API documentation, examples and a user guide can be found [here](http://imbalanced-learn.org/stable/).

Happy hacking,
Chris