teleren/devto huggingface dataset:
React + Tailwind starter template
Tags: react, tailwindcss
Published: 2020-11-21 17:30:12

---
title: React + Tailwind starter template
published: true
description: create-react-app integrated with Tailwind 2.0
tags: react, tailwindcss
---
I struggled a lot to integrate Tailwindcss with create-react-app few months back while working on a pet-project. Since then I thought of creating a starter template out of it so that new projects can be easily bootstrapped with that.
Finally I created a starter template with `cra + tailwindcss`.

https://github.com/WorkNTrack/create-react-app-tailwind-starter

It can be used to quickly get started with zero configurations. Production builds are enabled with `purge` so that unused css won't be dumped in the production builds.

For info or how the integration is done, please follow this blog in which I have explained each of the steps.
https://blog.24x7dev.com/blog/tailwind-with-react/
How to create a Stack using JavaScript
Tags: javascript, beginners, tutorial
Published: 2020-11-21 16:54:08

JavaScript comes with some out of the box data structures. This includes Arrays and objects. Linked List, graphs, trees, queues, and stacks are not included with JavaScript. these data structures need to be constructed using a class. The data structures mention are important to know since different data structures excel at storing and retrieving data more efficiently than others depending on the scenario. Today we will be covering how to make a Stack. 

##**What is a Stack?**

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

A stack is a data structure that follows a simple rule. Last-in, first-out, or LIFO. You can think of the stack as a pile of dishes. If you add a dish you must put it on top of the pile and if you want to remove the dish you need to remove it from the top of the pile.

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

A common use for this data structure is the call stack. Functions are stack on top of each other until the function returns and functions will start popping off the stack. 

##**What does a Stack Contain and how to build it?**
```javascript
class Stack{
    constructor(){
        this.data = [];
    }
}
```

To get started building a stack we need to create a stack class and inside the constructor, the object will be initialized with an empty array( `this.data` ); 
###**push()**

```javascript
    push(value){
        this.data.push(value);
        return this;
    }
```


The first instance method that will be covered push. push takes in a value as a parameter. Push adds nodes to the end of the array. Finally, return the instance of the class. 

###**pop()**
```javascript
    pop(){
        return this.data.pop();
    }
```
The instance method pop() removes values from the end of the array.  We will be using array building methods to remove a value from the end of the array. The pop() method will be used. Calling pop on the array will return the 

###**peek()**
```javascript
    peek(){
        return this.data[this.data.length - 1]
    }

```
The instance method peeks () returns the last value of an array.

###**empty()**
```javascript

    empty(){
        if(this.data.length === 0){
            return true;
        } else {
            return false; 
        }
    }
```
Finally, the empty() instance method just returns true if there are any values in the stack or false if the stack is empty.

```javascript
function sumArray(arr, sum = 0){
    if(arr.length === 0) return sum;
    sum = arr.pop() + sum;
    return sumArray(arr, sum)
}

sumArray([1,2,3,4])
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/izo1afxap97mwj8u1c3r.png)

Stacks are very simple to build using array methods and are frequently used in recursion. Recursion is when a function calls itself. You will have to get familiar with the call stack and recursion to be able to traverse trees and graph data structures. I hope this gave you a bit of insight into what stacks are and what they are used for.
python framework
Published: 2020-11-21 16:43:44

he unittest unit testing framework was originally inspired by JUnit and has a similar flavor as major unit testing frameworks in other languages. It supports test automation, sharing of setup and shutdown code for tests, aggregation of tests into collections, and independence of the tests from the reporting framework.

To achieve this, unittest supports some important concepts in an object-oriented way:

test fixture
A test fixture represents the preparation needed to perform one or more tests, and any associated cleanup actions. This may involve, for example, creating temporary or proxy databases, directories, or starting a server process.
<a href="https://pythonslearning.com/2020/11/which-is-the-python-3-10-release-date.html">python 3.10 release date</a>

test case
A test case is the individual unit of testing. It checks for a specific response to a particular set of inputs. unittest provides a base class, TestCase, which may be used to create new test cases.
Git ohjeet suomeksi: Muokkaa edellistä committia
Tags: finnish, git, tutorial, gitsuomeksi
Published: 2020-11-21 16:43:24

Joskus git-kommitin tekemisen jälkeen tekisi mieli tehdä muutoksia - korjata commit-viestin kirjoitusvirhe tai tehdä vielä pieni muutos koodiin. 

Tässä artikkelissa kerrotaan ohjeet commit-viestin muokkaamiseen sekä edellisen commitin tiedostojen muuttamiseen. Bonuksena myös ohjeet Vim-editorin käyttämiseen.

📝 Git-historiaa ei kannattaa muuttaa, jos olet jo puskenut (_push_) committeja remote-repositorioon muiden käytettäväksi, sillä muiden ihmisten historian sotkeminen ei ole hyvä tapa.

Alla on ohjeet commit-viestin muuttamiseen (ohjeet 1 ja 2) sekä edellisen commitin tiedostojen muuttamiseen (ohje 3):

### 1. Edellisen commit-viestin korvaaminen uudella

Kirjoita komentoriville uusi commit-message amend-parametria käyttäen:
`git commit --amend -m "uusi commit message"`

### 2. Commit-viestin muokkaaminen ja Vim-editorin käyttö

Jos haluat muokata commit-viestiä, jätetään `-m` (_message_) parametri pois, jolloin viesti avautuu gitin tekstieditoriin (yleensä Vi tai Vim). Tässä ohjeet editorin käyttämiseen:

1. Anna komento `git commit --amend`
2. Editori avautuu commit messagen muokkaamista varten
3. Paina tietokoneen näppäimistöltä `i` ja editori siirtyy kirjoitustilaan (_insert_)
4. Muokkaa commit-messagea. Risuaidalla (_#_) alkavat rivit eivät kuulu git-committiin. 
5. Paina näppäimistöltä `esc`, jolloin editori siirtyy komentotilaan
6. Uusi commit message tallennetaan ja editori suljetaan kirjoittamalla `:wq` ja painamalla  näppäimistöltä enter/rivinvaihto (tässä `:` aloittaa komennon, `w` tarkoittaa _write_ (eli tiedoston tallennus) ja `q` tarkoittaa _quit_)
<br>

Vim-editorin sulkemisesta löytyy läjäpäin meemejä. Tämä naurattaa: "Olen käyttänyt Vimiä nyt noin 2 vuotta, lähinnä siksi, että en tiedä miten se suljetaan."

[![Twiitti tililtä @iamdeveloper: "I've been using Vim for about 2 years now, mostly because I cant' figure out how to exit it."](https://dev-to-uploads.s3.amazonaws.com/i/9q3iqn72hotsh206wofd.png)](https://twitter.com/iamdevloper/status/435555976687923200)

<br><br>
### 3. Tiedostojen muuttaminen edelliseen committiin

Edellisen commitin tiedostoja voi muuttaa `amend` -parametrin avulla seuraavasti:

1. Tee tiedostoihin halutut muutokset (lisää uusia tiedostoja tai tee muutoksia tiedostoihin):
2. Lisää tiedostot staging-tilaan komennolla `git add` ja tiedostonimi
3. Tässä välissä kannattaa ajaa komento `git status` ja tarkistaa, että halutut tiedostot ovat stagingissa
4. Commitoi lisäys edelliseen committiin komennolla `git commit --amend` tai `git commit --amend -m "haluttu commit message"`

### Loppusanat

Jos tämän jutun git-versiohallintaan liittyvä terminologia kuulostaa vieraalta, ohje suomeksi löytyy esimerkiksi [LevelUP-koodarien sivuilta](https://oslevelupkoodarit.github.io/materials/versionhallinta-ja-git.html).
pt-archiver Incorrect date value: '0000-00-00' for column
Published: 2020-11-21 16:41:58

This was a weird one. I had a bug that inserted records with `0000-00-00` for a short while many years ago on an older version of MySQL.

The strange thing here, is you can't actually search for the records with `0000-00-00` since newer versions of MySQL consider this an invalid date, they reject the query.

To find the invalid records use:

```sql
SELECT * FROM table WHERE CAST(dateField AS CHAR(10)) = '0000-00-00'
```

Or just fix the problem in one query:

```sql
UPDATE table SET dateField = NULL WHERE CAST(dateField AS CHAR(10)) = '0000-00-00';
```
Why the state not update?
Published: 2020-11-21 16:33:40

    const [result, setResult] = useState({Loading: true})
    const findState = async () => {
        const res = await fetch(api_state)
        const data = await res.json()
        console.log(data.countryName);
        const Country = (data.countryName)
        setResult({...result,Loading:false})
        console.log('Result', result);
    }
Day 2 -> 40 days of code
Published: 2020-11-21 16:06:08

Portals provide a first-class way to render children into a DOM node that exists outside the DOM 
Hierarchy of the parent component.
A React portals provides a way to render an element outside of its component hierarchy ie in a separate component.

Syntax: ReactDOM.createPortal(child,container)

Usage:
->floating menus 
->widgets
A new way of ORM in Java (ObjectiveSQL)
Published: 2020-11-21 15:09:30

ObjectiveSQL is an ORM framework in Java base on ActiveRecord pattern, which encourages rapid development and clean, codes with the least, and convention over configuration.

Features
1) Dynamic code generation with JSR 269 for Java API of database access
2) Full Java API of database access without coding
3) Dynamically SQL programming with Java syntax, and very close to SQL syntax

See more: https://github.com/braisdom/ObjectiveSql
re:invent 2020 Sessions
Tags: aws
Published: 2020-11-21 15:05:06

The following are some inital re:invent 2020 Sessions that I recommend into Machine Learning and Data Analytics. I am aiming to few some these and give a wrap up as apart of my www.comsum.co.uk punditry. 

## Machine Learning:
* How to use fully managed Jupyter notebooks in Amazon SageMaker
* Implementing MLOps practices with Amazon SageMaker
* Reinventing medical imaging with machine learning on AWS
* From POC to production: Strategies for achieving machine learning at scale
* Secure and compliant machine learning for regulated industries
* How to use machine learning and the Data Cloud for advanced analytics (sponsored by Snowflake)
* Train and tune ML models to the highest accuracy using Amazon SageMaker
* Fast distributed training and near-linear scaling with PyTorch on AWS
* Train large models with billions of parameters in TensorFlow 2.0
* Choose the right machine learning algorithm in Amazon SageMaker
* Interpretability and explainability in machine learning
Privacy-preserving machine learning
* Build quality ML models easily & quickly with Amazon SageMaker Autopilot
* Scaling MLOps on Kubernetes with Amazon SageMaker Operators
* Machine learning inference with Amazon EC2 Inf1 instances
* Architectural best practices for machine learning applications
* Accelerate machine learning projects with pretrained models
* Detect machine learning (ML) model drift in production

## Data Analytics
* How BMW Group uses AWS serverless analytics for a data-driven ecosystem
* How FINRA operates PB-scale analytics on data lakes with Amazon Athena
* Break down data silos: Build a serverless data lake on Amazon S3
* Serverless data preparation with AWS Glue
* Run big data analytics faster at lower cost with Amazon EMR
* Improving analytics productivity for overwhelmed data teams (sponsored by Matillion)
* 5 best practices for migrating large analytics systems to AWS (sponsored by Teradata)

## Serverless and Containers
* AWS Fargate: Are serverless containers right for you?
* Getting started building your first serverless web application
* Serverless everything: Replatforming for speed and ownership (sponsored by Datadog)
* Scalable serverless event-driven architectures with SNS, SQS & Lambda
* AXA: Rearchitecting with serverless to accelerate innovation
* Power modern serverless applications with GraphQL and AWS AppSync
* Best practices for securing your serverless applications
* CI/CD for serverless applications
* Becoming proficient with serverless application observability
* Decoupling serverless workloads with Amazon EventBridge
* Best practices for security governance in serverless applications
POURQUOI CERTAINS SITES ONT D'ÉNORMES FOOTERS ?
Tags: ux, uiweekly, startup, beginners
Published: 2020-11-21 14:52:37

Pourquoi de nombreux sites Web ont-ils d'énormes pieds de page SEO? On les trouve partout, mais personne n'en parle. Alors changeons cela.

**Tout d'abord, de quoi parle-t-on ?**

Les liens internes sont des signaux forts pour Googlebot sur ce qu'il faut explorer, indexer et classer.

Par défaut, la plupart des structures de site créent une hiérarchie descendante de pages. Un menu ne propose que du top niveau (les catégories les plus généralistes) et les sitemaps traitent toutes les pages de la même manière

Alors que les pieds de page SEO peuvent fournir un niveau supplémentaire de signaux.


**Lire la suite :**
https://www.loracle.io/post/pourquoi-certains-sites-ont-denormes-footers
¿Como encontrar un comando ejecutado anteriormente en GNU/Linux?
Tags: spanish, linux, beginners
Published: 2020-11-21 14:50:40

A veces ejecutamos comandos que resuelven una tarea muy específica en nuestro sistema. Puede ser que hayamos hecho una búsqueda de un archivo usando expresiones regulares o quizás accedimos a un servidor por medio de ssh y ya no recordamos la dirección IP. Volver a crear la expresión regular desde cero puede consumir mucho tiempo y quizás volver a encontrar la IP también puede consumir más tiempo que si simplemente pudiéramos recuperar el comando. Podemos encontrar un comando ejecutado anteriormente en GNU/Linux de manera sencilla, aquí te expongo como.

Una manera de hacerlo sería efectuar una búsqueda de la parte del comando que recordamos en el historial del comando. Esto puede hacerse de la siguiente manera:

```bash
history | grep "comando que buscamos"
```

El comando history nos mostrará la lista de comandos usados, el carácter pipe "|" redirigirá el resultado al comando grep, el cual buscará la cadena de texto que le específiquemos.

## Comando CTRL + R

Hay otra manera aún más sencilla de efectuar esta búsqueda. Este método es una combinación de teclas que, a pesar de su sencillez y facilidad de uso, no son muy populares, incluso entre los usuarios regulares de entornos GNU/Linux.

Primero abriremos una terminal, acto seguido presionaremos **_CTRL + R_**, esto modificará el cursor de la siguiente manera:

```bash
(reverse-i-search)`': history
```

Conforme presionemos las teclas irán apareciendo los comandos que coincidan con esa búsqueda. Si el comando que buscamos está en el archivo ~.history se mostrará al instante.

Para más tutoriales como este, sígueme en [twitter](https://twitter.com/neon_affogato) o [suscríbete a mi newsletter](https://coffeebytes.dev/no-te-pierdas-ninguna-de-nuestras-entradas/)
Add Tailwind V2 into React in 5 minutes
Tags: beginners, react, tailwindcss, css
Published: 2020-11-21 14:47:07

# What is React?
**[React](https://reactjs.org/)** is JavaScript library for building user interfaces.

# What is Tailwind?
**[Tailwindcss](https://tailwindcss.com/)** is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.


# Requirements
- [Nodejs](https://nodejs.org/) version **8.10** or Higher.

### Getting Started
Today we are going to add tailwind css in our React application without using npm.

### Installation

Using [create-react-app](https://create-react-app.dev/docs/getting-started) we are going to generate a new react project.

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

## Add Tailwindcss into Our react App

Inside the **public** folder, locate the file **index.html**.
and add the Tailwindcss CDN link **``https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css``**.

It will looks as it under.
`````` <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
 ``````

**Congratulations.**
We have successfully add **Tailwindcss** inside our React App.
![party-image](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/238/face-with-party-horn-and-party-hat_1f973.png)
PANDAS, STOCKS, how do you get a stock price, per cell in a csv file?
Published: 2020-11-21 14:43:44

I have a CSV file of a numbers sheet of stocks ive found,
one "catch" is that I have a "-" or "+" in the cell to show why I wrote it down,

how do you loop/cycle through to get a stock price for each?
BUT, I do have duplicated stocks, its 50 rows of stocks that could have 10-20 per day.
My Button is better than your Button
Tags: react, css, design, a11y
Published: 2020-11-21 14:19:58

There is a weird bunch of people in the web development industry. These people want to make everything themselves. This means you find people crafting their own component libraries and/or Design Systems, and in worst case each project has their own. These are almost always made from scratch, and very rarely any of these is CSS-based.

In addition they're almost guaranteed to be imperfect re-implementations of native web elements with lacking usability or accessibility. But when you add those requirements in you suddenly have many kilobytes worth of code doing stuff the browser already does! The user pays the price waiting the code to load, and when you notice there is a performance hit you can always split more code. Woohoo. I'm excited. Even more complex tech to learn!

Of course there are reasonings for going this way. Especially the Select element is one that is often used as a perfect example of a native element that can't be "styled enough", thus using as the prime example of a component that **must** be written yourself.

But I think there is another thing at play here as well. One of the things is that we like to do things creatively, and remaking the same components over and over again with all the interesting technical challenges is a joy. You can sure make that Button flatter looking and more robust than the 25 year old battle tested browser native Button.

The core problem here is privilege. These components get recreated by people who are fully ablebodied and are generally blind to people who use things differently than they themselves do. Often you do get the minimal done: you click and select, boom, it works! Or you touch in phone and select, boom! Now it is perfect! Nothing to it. Maybe someone in the team is wise enough to suggest Enter key to work as well, and then that is that.

They're completely ignorant to the fact that you can write ABCD in a Select element and it magically selects the Abc option from the Select element with B, C, and D being the other options. Or that you can use arrow keys to browse through the list of element without ever opening the list of options.

The social ignorance here is annoying at a minimum, and segregating at worst.

Are you doing components like these from scratch? I have news for you. It is simply arrogant to keep thinking you're doing a great job with the recreations.

You're not doing a great job. You're writing code that will be thrown out a year or two after leaving the project, because the next guy noticed your implementation didn't do thing X so they rewrite it so that it does the thing X well, but fails to consider the thing Y, and so the infinite loop of re-implementing the Button continues.

So many wasted hours on nothing.
About error levels and logging
Tags: errors, logging, monitoring
Published: 2020-11-21 14:02:33

---
title: About error levels and logging
published: true
description: how do you define error levels?
tags: #errors #logging #monitoring
//cover_image: https://direct_url_to_image.jpg
---

Logging is an important part of development as well as monitoring and maintenance. It allows any technical party to answer questions about how the application is behaving and what went wrong when things need investigating.

But logging always comes at a cost. Whether it's logging to disk, stdout/stderr or directly shipping to a remote service, logging takes up resources, bandwidth, memory/cpu and so on - not to mention storage space wherever it ends up.

Which begs the question - what should we log? In most logging systems, there are some clear cut levels of logging. Usually, these are:

- FATAL: the application ran into an issue that cannot allow it to safely continue, risking data corruption or affecting other services that depend on it. It must shutdown and handle control to external systems (orchestrators, systemd, etc) which will decide on a restart or not.

- ERROR: the application ran into an unexpected behaviour that can be recovered from but it may have affected operations or may require user intervention. Eg: someone needs to be notified of what happened.

- WARN(ING): an event unexpected during the "happy flow" has occurred. In the event of an error, people should find useful information here which may explain it.

- NOTICE: anything outside of the happy flow could come in here which would allow for a more detailed flow of information about how the system runs. (note: I found the many Go loggers don't have this).

- INFO: anything. I use this to track variables of interest and how values may be affected, returns of important functions and the like.

- DEBUG: same as above but with extra context and generally more (any function should have this).

Other levels that are particular to different platforms:

- TRACE: I have seen it only in log4j. Not sure how it would differ from DEBUG (perhaps this is what it stands for in practice?)

- PANIC: some Go loggers have this, which also calls Go's panic function. The difference here is that Fatal errors shouldn't affect other goroutins that may be in effect at the time of an Error or Fatal error. While the system may not be in a position to recover in those cases, it's left to a simple system exit, meaning that the application's other goroutines/threads have a chance to complete. Opposite that, panic means stop everything, now.

What about you? What's your meaning for error levels? Are there more?