teleren/devto huggingface dataset:
Sort records based on multiple columns' values in SQL
Tags: sql, database, beginners, programming
Published: 2021-09-22 09:38:36

## Use Case description:

### Scenario:
We have multiple columns(in one or more tables), these columns are mutually exclusive i.e only one of these columns can have a non-null value at a given time and others will be `null`.

### Table Schema Description
* We have a `tasks` table
* Table attributes are: `id, task_owner, task_type`
* Only one of the attributes(`task_owner`, `task_type` can have a non-null value at a given time).

## Our Goal:
Our goal is to sort the records based on the values of all these columns i.e The two columns `task_owner` and `task_type` should behave as single data source, and we should be able to sort them based on the values present in this data source.
### Tasks table
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u6l1b8smn7ausrml5xi.png)

## Expected output
Note the ordering of the records, the records are sorted based on the values of the two columns `task_owner` and `task_type`.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frhdppcgaz5fnlujw1ps.png) 

## Solution
The solution is a simple one, we're going to use a generated/computed column which we'll use as a data source for sorting purposes.
The [COALESCE operator](https://www.postgresql.org/docs/9.2/functions-conditional.html), returns the first `non-null` value from its arguments.

### Solution SQL
```sql
SELECT *, COALESCE(tasks.task_owner, tasks.task_type) AS sorting_col
FROM tasks
ORDER BY sorting_col;
```

## SQL Script for Testing
* You can run & test this at [PG-SQL](https://pg-sql.com/), it lets you create tables and run SQL queries on them.

### Create Table
```sql
CREATE TABLE tasks (id int, task_owner varchar(255), task_type varchar(255));
```

### Populate Table with data
```sql
INSERT INTO tasks (id, task_owner, task_type) VALUES
(1, 'Masroor', null),
(2, null, 'Manager'),
(3, 'Alex', null),
(4, 'Yuri', null),
(5, null, 'Supervisor'),
(6, 'David', null),
(7, 'Brendon', null);
```
Tips for an efficient and productive Work from home
Tags: productivity, mentalhealth, watercooler, discuss
Published: 2021-09-22 09:54:45


**TL;DR** - The Twitter thread

This is a very opinionated and personal account of my own learnings. Please feel free to disagree or add your own experiences. We all grow by learning from each other.

I started working remotely around March 2020.
As someone who does a lot of solutioning and collaboration in the day-to-day work, it was a huge shift in work style for me. 

I lived alone, had to cook for myself, did not have proper work furniture and if you had to judge my level of activity, I was 25 kgs overweight (which I have lost now).

### Problems
What happened in the first two months of lockdown:
1. Bad sleep schedule
2. Irregular at taking baths
3. Getting irritated due to excessive amount of communication.
4. Binge eating 

### Adjustments
Slowly and eventually, I persevered through it all and learnt to fit into this "new normal". It started by shifting back with my parents and getting some mental support. Then I focused on my situation one step at a time to get rid of the problems I was facing. 

You can find a gist of my learnings in the below thread. 

{% twitter 1440604954327064582 %}


### What about you?
I hope my experience helps someone struggling with remote work. Although I would love it more if you have figured the problem out on your own and have something to share with us.

---

Please comment your experiences below or on the tweet.

You can also connect with me on [Twitter](https://twitter.com/abh1navv)
Delete a string that already exists in my array
Tags: javascript, array
Published: 2021-09-22 09:03:15

I would like to know if it is possible to delete a string already existing in my table my table when I push values with my input range

```
['--brightness 7 ', '--contrast 16 ', '--saturation 52 ','--contrast 4 ']
``` 
the result I would like 
```
['--brightness 7 ',  '--saturation 52 ','--contrast 4 ']
React Tailwind TypeScript Starter Template Free and Open Source
Tags: react, webdev, typescript, tailwindcss
Published: 2021-09-22 09:15:33

---
title: React Tailwind TypeScript Starter Template Free and Open Source
published: True
description: An open-source and free React Tailwind TypeScript Boilerplate code to start any projects with developer-experience in mind. It includes everything you need to write high-quality code with linter and code formatter.
tags: react, webdev, typescript, tailwind
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

A simple and easy-to-use React Tailwind TypeScript template to quickly start any projects with the best tools for developer-first experience in mind.

An open-source and free starter and boilerplate code with already-configured linter, code formatter, type checking and VSCode configuration for React projects.

Check out a live demo at [React Tailwind TypeScript Live demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/)

The code source is hosted on GitHub at [React Tailwind TypeScript GitHub](https://github.com/ixartz/Next-js-Boilerplate)

Here is the list of major feature:

- 🔥 Next JS 11

- 💅 Design with Tailwind CSS

- 🎉 Type checking with Typescript

- ✏️ Linter with Eslint and code formatter Prettier

- 🦊 Husky + Lint-Staged

- ✅ Easy deploy on Netlify or Vercel

- 🤖 SEO friendly

- 🎨 Include a minimalist theme

- 🚀 Production-ready, you just need to focus in your code

{% github ixartz/Next-js-Boilerplate %}
OWASP Top 10 Vulnerabilities 
Tags: owasp, cybersecurity, security
Published: 2021-09-22 09:08:45

Open Web Security Project is a non-profit charitable organization. It is a global reference for large types of vulnerabilities. OWASP Top 10 addresses the most impactful application security risks based on a larger number of data sets and opinions surveyed from a plethora of industry professionals. There have been three released in this decade — 2010, 2013, and 2017.

Let’s see the top 10 OWASP vulnerabilities

A1- Injection

Injection vulnerabilities occur when untrusted user data is processed by the web application in an unsafe way.

A2- Broken Authentication

These vulnerabilities occur when web applications fail to implement secure authentication mechanisms like weak password policies or weak storage of Credentials.

A3- Sensitive Data Exposure

Sensitive data exposure vulnerabilities occur when security controls are not implemented properly at the time of data in transit and data in the store.

A4- XML External Entities

XXE vulnerabilities occur when untrusted XML input referencing to an external entity is accepted and parsed by vulnerable XML parsers.

A5- Broken Access Control

Broken access control vulnerabilities occur when developers fail to implement proper access control policies within the web application.

A6- Security Misconfiguration

Security flaws present in the misconfiguration of application frameworks, servers, databases, etc. allow hackers to access unauthorized privileged data.

A7- Cross-Site Scripting

XSS vulnerability allows attackers to inject malicious code into dynamic web pages which in turn run malicious code such as JavaScript into browsers and compromise victims.

A8- Insecure Deserialization

Insecure Deserialization occurs when untrusted structured data is passed to be contrasted into an object. It can be used to perform various malicious tasks like remote code execution and injection attacks.

A9- Using Components with known vulnerabilities

Web applications use various vulnerable components like libraries and frameworks. These vulnerable versions are mentioned on the internet so an attacker can easily find them and leverage them to cause damage.

A10- Insufficient Logging and Monitoring

Application logs, Trace logs should be maintained in the web application to track any malicious activity. The absence of such controls allows attackers to further attack systems, tamper, and destroy data.

Hope this was helpful.
Just Glue
Tags: brainfart, pride, humility
Published: 2021-09-22 08:50:46

---
title: Just Glue
published: true
description: My feelings about my craft
tags: brainfart, pride, humility
cover_image: https://www.pouted.com/wp-content/uploads/2019/11/Austria%E2%80%94Crown-of-the-Austrian-Empire-675x781.png
---

As a software developer, I have a tendency to get carried away with what I do.  It's a great place to be, this invisible palace of connected concepts.  It's addictive to build it, to polish it, even to look for cracks and repair them with all the love of the craft.

It's a bit hard to admit, for I try to be a good and respectful person, but also, I feel a little disdain - which I properly hide - towards those unable to see this landscape I build.

Users, testers, product managers.  Mechanical engineers, hardware engineers, ... name it.  None of these have the faintest idea of the glimmering, out-of-their-worlds fabric of the software I make for them.

Without me, there would be no product to sell.  I'm doing the most important work in the company, and all shall know!

The jewels would drop of the crown if it weren't for my glue!

Wait -

Am I actually creating glue, to sit between the gold and the ruby?  Must-be-kept-in-a-tube glue, fluid and shapeless first, hidden and rigid afterwards?

Would glue engineers attribute the same glory to their glues?

"As a glue engineer, I make it possible for people to build beauty by connecting valuable parts together."



As a software engineer, I help bright people assemble their greatest ideas into wonderful products.

I want to be grateful for that, proud to be of service, and content.  And I promise to do my best to stay humble.
Open Source ETL Project For Startups
Published: 2021-09-22 07:38:50

To start your data-driven journey, there are many ways to achieve, you can build everything from the scratch or build based on the ability of third party tools, which is much more efficient and cost effective especially a good choice for most of startups.

Building based on Luigi & Metabase is what to recommend to achieve stable ETL and fast BI, and you can leverage this data solution in 15 mins.

[Watch Video & Subscribe >](https://youtu.be/fV_fbkijAKQ)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aorfk7fgor63mqhafwj8.png)
 


📚【GitHub - TLDR】
https://github.com/alibabacloud-howto/opensource_with_apsaradb/tree/main/luigi_metabase


💡【About Luigi】
https://github.com/spotify/luigi
Luigi was built at Spotify since 2012, it's open source and mainly used for getting data insights by showing recommendations, toplists, A/B test analysis, external reports, internal dashboards, etc.

It is actually a Python (3.6, 3.7, 3.8, 3.9 tested) package that helps you build complex pipelines of batch jobs. It handles dependency resolution, workflow management, visualization, handling failures, command line integration, and much more.

The purpose of Luigi is to address all the plumbing typically associated with long-running batch processes. You want to chain many tasks, automate them, and failures will happen. These tasks can be anything, but are typically long running things like Hadoop jobs, dumping data to/from databases, running machine learning algorithms, or anything else.

Reference: https://luigi.readthedocs.io/en/stable/


💡【About Metabase】
https://www.metabase.com/docs/latest/users-guide/01-what-is-metabase.html
https://github.com/metabase/metabase
Metabase is an open source business intelligence tool that lets you create charts and dashboards using data from a variety of databases and data sources. It was developed within venture studio Expa and spun out as an easy way for people to interact with data sets. It lets you ask questions about your data, and displays answers in formats that make sense, whether that’s a bar graph or a detailed table.

Metabase uses the default application database (H2) when initially start using Metabase. To enhance the database high availability behind the Metabase BI Server, it's better to use Alibaba Cloud Database RDS PostgreSQL as the backend database of Metabase. Metabase supports PostgreSQL and MySQL as the backend database. 

If you are about to launch on Alibaba Cloud, your options can be following:
RDS MySQL
RDS PostgreSQL
PolarDB for MySQL/PostgreSQL

🎁Learn more about these cloud databases, and join in our free trial program.
https://www.alibabacloud.com/product/databases#J_2463051000
N+1 Selects Problem and how To solve them
Tags: hibernate, spring, springboot
Published: 2021-09-22 08:43:10


When retrieving a list of entities from database, if those entities have many-to-one or one-to-many mapping, then it would make separate queries to load those child items.

The obvious way to fix the problem is to use join fetch. 

But you can read on the [N+1 Selects problem in Hibernate and How to Avoid it](https://springhow.com/n-plus-1-selects-problem-in-hibernate/) with examples for more info.
Arduino, JohnnyFive, Socket io and React
Tags: arduino, johnnyfive, react, socketio
Published: 2021-09-22 08:41:03

# Johnny Five Node JS server with Socket io connecting Arduino to React

I wanted to make my Arduino flash certain green or red LEDs, triggered by certain sensors and then show that in a React app at the same time. Also, in the React App web page, I wanted to click a button and then see that trigger LEDs on the Arduino. I found that one could use socket.io to do this, with the one Johnny Five JS node + Socket.io server talking to the Arduino and via socket.io talking to the React JS Node app.

Find the full instructable here:

https://www.instructables.com/Arduino-JohnnyFive-Socketio-and-React/

**So, we're creating a mashup of:**

* https://github.com/rwaldron/johnny-five

* https://www.valentinog.com/blog/socket-react/

**What to do:**

https://github.com/rwaldron/johnny-five#setup-and-assemble-arduino

* Download Arduino IDE

* Plug in your Arduino or Arduino compatible microcontroller via USB

* Open the Arduino IDE, select: File > Examples > Firmata > StandardFirmataPlus

** StandardFirmataPlus is available in Firmata v2.5.0 or greater

* Click the "Upload" button.

If the upload was successful, the board is now prepared and you can close the Arduino IDE.

From https://github.com/stewest/j5-arduino-react

* Git clone https://github.com/stewest/j5-arduino-react.git and cd j5-arduino-react

Then each from their own separate terminal:

Terminal 1:

* cd socket-io-server
* yarn install
* node app.js

Terminal 2:

* cd socket-io-client
* yarn install
* yarn start

While developing, as the client and server use specific ports, you may need to stop of all nodes and restart. - `killall -9 node` in the socket-io-server folder and restart both the server `node app.js` and `yarn start` the client.

If you find some lights not working, double check the pins assigned. I hope the Fritzing diagram helps.


**What does it do?**

* You should see a Socket.io Button, that temporarily stops the client from connecting to the socket server.

* There is a "light" sensor showing the amount of light data from from the photo resistor.

* When the Arduino board first starts it has some LEDs flashing.

* The LED status is shown as on or off. Once the node server and react app has loaded, you should be able to click the Toggle LEDs button and the Red, Green and Blue LEDs should light up for 5 seconds.

* There is a temperature display.

## References:

http://johnny-five.io/api/led.rgb/

http://johnny-five.io/examples/photoresistor

https://stackabuse.com/using-global-variables-in-node-js/

https://www.valentinog.com/blog/socket-react/

https://socket.io/docs/v3/index.html
What staging is?
Tags: devops, staging, production, testing
Published: 2021-09-22 08:33:48

# Staging environment

... is (as similar as possible) **replica of production** environment.

## It requires a copy of:

- hardware configuration
- databases
- caches etc

## Why?

This is a safe place for tests.

![Staging diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khba217na6vm00fsv9gg.png)
Planning Projects
Tags: programming, productivity, workstations, node
Published: 2021-09-22 08:20:57

So Here we are to know how to plan your project?
So in industry standard we use a special method to plan the project known as AGILE METHODOLOGY.

What is Agile?
    Agile software development refers to a group of software development methodologies based on iterative development,where requirements and solutions evolve through collaboration between self-organizing cross-functional teams. 

What is Scrum?
    Scrum is a daily team meeting of nearly 15-20 mins where we discuss our problems and work progress with our teammates.

So planning the project includes:-
    1. Requirement gathering about the project.
    2. Then breaking the projects into small atomic problems.
    3. Creating HLD documents which consists of your work to do.
    4. Conducting Daily SCRUMS to check upon work progress with teammates.
    5. Getting feedback from Customers and using that feedback to update the project.

    #For this we can use a software names- JIRA SOFTWARE.
Apply Multiple Fonts in One Cell in Java
Published: 2021-09-22 08:00:02

In the previous articles, I've introduced [how to apply different font styles in several different Excel cells using Free Spire.XLS for Java](https://dev.to/jazzzzz/apply-different-font-styles-in-excel-using-java-2ia4). Now this article will share how to apply multiple font styles in a single Excel cell by using same free API.

**Import the Jar dependency**
**Method 1:** Download the [Free Spire.XLS for Java](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it, then add the Spire.Xls.jar file to your project as dependency.

**Method 2:** Directly add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>3.9.1</version>
    </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.xls.*;

import java.awt.*;

public class ApplyMultiFontsInCell {

    public static void main(String[] args) {

        //Create a Workbook instance
        Workbook wb = new Workbook();

        //Get the first worksheet
        Worksheet sheet = wb.getWorksheets().get(0);

        //Create first Excel font
        ExcelFont font1 = wb.createFont();
        font1.setFontName("Calibri");
        font1.setColor(Color.blue);
        font1.setSize(12f);
        font1.isItalic(true);

        //Create second Excel font
        ExcelFont font2 = wb.createFont();
        font2.setFontName("Times New Roman");
        font2.setColor(Color.BLACK);
        font2.setSize(12f);
        font2.isItalic(true);
        font2.setUnderline(FontUnderlineType.Double);

        //Create third Excel font
        ExcelFont font3 = wb.createFont();
        font3.setFontName("Arial");
        font3.setColor(Color.RED);
        font3.setSize(14f);
        font3.isBold(true);

        //Insert text to cell B5
        RichText richText = sheet.getCellRange("B5").getRichText();
        richText.setText("This is an example of how to apply multiple font styles in one Excel cell using Java.");

        //Apply three fonts to the text in the cell B5
        richText.setFont(0, 21, font1);
        richText.setFont(22, 55, font2);
        richText.setFont(56, 84, font3);

        //Save the document
        wb.saveToFile("MultiFonts.xlsx", ExcelVersion.Version2016);
    }
}
```
![MultiFronts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv6weothogj02en8yq41.jpg)
[puppeteer] How to set Value for a Input Element
Published: 2021-09-22 07:58:50

![input1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzlzkkxhsp5cmmnhjeus.png)
![input2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7g069jf8va4453znyfz.png)
  Hi there,
I would like to test my app with Puppeteer.
I used REACT and TypeScript.
how can I set the input correctly? Please see the attachment.

I try the following, but without success:

1.try:
```
await page.waitForSelector('#MuiButtonBase-root');
// await page.select('#MuiTouchRipple-root');
await page.waitForSelector('#name');
await page.type('#name', 'Hello');
```
2.try:
```
await page.$eval('#MuiDialogContent-root input:MuiFormControl-root:nth-child(1)', el => el.value = 'Hello');  
```
C# SIMD byte array compare
Tags: csharp
Published: 2021-09-22 07:54:25

My byte array compare that I recently posted on stackoverflow.
https://stackoverflow.com/a/69280107/13843929

Quoting my own post on stackoverflow...
"This is similar to others, but the difference here is that there is no falling through to the next highest number of bytes I can check at once, e.g. if I have 63 bytes (in my SIMD example) I can check the equality of the first 32 bytes, and then the last 32 bytes, which is faster than checking 32 bytes, 16 bytes, 8 bytes, and so on. The first check you enter is the only check you will need to compare all of the bytes."

It is the fastest performer in my tests.

```
using System.Runtime.Intrinsics.X86;

internal class Program
{
    public unsafe bool SIMDNoFallThrough(byte[] arr1, byte[] arr2)
    {
        if (arr1 == null || arr2 == null)
            return false;

        int arr1length = arr1.Length;

        if (arr1length != arr2.Length)
            return false;

        fixed (byte* b00 = arr1, b01 = arr2)
        {
            byte* b0 = b00, b1 = b01, last0 = b0 + arr1length, last1 = b1 + arr1length, last32 = last0 - 31;

            if (arr1length > 31)
            {
                while (b0 < last32)
                {
                    if (Avx2.MoveMask(Avx2.CompareEqual(Avx.LoadVector256(b0), Avx.LoadVector256(b1))) != -1)
                        return false;
                    b0 += 32;
                    b1 += 32;
                }
                return Avx2.MoveMask(Avx2.CompareEqual(Avx.LoadVector256(last0 - 32), Avx.LoadVector256(last1 - 32))) == -1;
            }

            if (arr1length > 15)
            {
                if (Sse2.MoveMask(Sse2.CompareEqual(Sse2.LoadVector128(b0), Sse2.LoadVector128(b1))) != 65535)
                    return false;
                return Sse2.MoveMask(Sse2.CompareEqual(Sse2.LoadVector128(last0 - 16), Sse2.LoadVector128(last1 - 16))) == 65535;
            }

            if (arr1length > 7)
            {
                if (*(ulong*)b0 != *(ulong*)b1)
                    return false;
                return *(ulong*)(last0 - 8) == *(ulong*)(last1 - 8);
            }

            if (arr1length > 3)
            {
                if (*(uint*)b0 != *(uint*)b1)
                    return false;
                return *(uint*)(last0 - 4) == *(uint*)(last1 - 4);
            }

            if (arr1length > 1)
            {
                if (*(ushort*)b0 != *(ushort*)b1)
                    return false;
                return *(ushort*)(last0 - 2) == *(ushort*)(last1 - 2);
            }

            return *b0 == *b1;
        }
    }

    static void Main(string[] args)
    {
    }
}
```