teleren/devto huggingface dataset:
Terminal Website in Minutes!
Tags: typescript, programming, news, showdev
Published: 2022-05-31 02:16:19

[Secret Terminal](https://secret-terminal.vercel.app/)


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



After surfing through the internet, I've found this very cool GH Repo on a Terminal [Credit](https://github.com/m4tt72/terminal). Very easy to add commands and configure it yourself using the **config.json**. Use credit link or [my repo](https://github.com/GabrielPedroza/Secret_Terminal) to clone it. I also used [this](https://coolsymbol.com/) to get cool symbols. Feel free to clone it and overall have fun with it and message me if you have or need any help ❤️
Relicx | Made with React JS
Published: 2022-05-31 02:00:44

![Relicx | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653326608/large_relicx_made_with_react_js_b24744faaa.png "Relicx | Made with Javascript | React JS")


### Digital Experience Monitoring & Testing for DevOps

> Improve software quality with digital experience monitoring and testing that enables DevOps teams to release frequently with confidence.
> 
> ### Ship Fast. Firefight Less.
> Debug front end issues fast with session replay, test real user flows in your CI/CD pipeline, measure release readiness with CX risk score.
> 
> ### Why Relicx?
> Relicx monitors and tests your application exactly the way it’s used in production. By starting with the end user experience, Relicx enables engineering and testing teams to:
> 
> #### Maximize innovation velocity
> Release frequently with confidence with digital customer experience testing built into your CI/CD pipeline.
> 
> #### Measure, predict, improve
> Measure quality in production, identify broken user flows prior to release, and prioritize fixes based on the customer impact.
> 
> #### Resolve customer issues faster
> Proactively identify problem user sessions, quickly diagnose and resolve issues.
> 
> #### Increase developer productivity
> Save enormous time and effort creating and maintaining tests, and more time creating high-quality digital user experiences.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Relicx on Twitter](https://twitter.com/withjavascript/status/1531454114772688900?s=20&t=5Q7wqXGDBUwkcvA4oyHHRQ)
 |
| Medium | [Relicx on Medium](https://medium.com/@madewithjavascript/relicx-made-with-react-js-e94d07275d03)
 |
| Facebook | [Relicx on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0ibWr6bvPkCiorwZE4AkceP6Z8ZoNZRv1t8aMdHuR3oWXP5evqx49y3pVAmQ2FxwWl)
 |
| Tumblr | [Relicx on Tumblr](https://madewithjavascript.tumblr.com/post/685729082595540992/relicx-made-with-react-js-digital-experience)
 |
| LinkedIn | [Relicx on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6937219994363600897)
 |
| Pinterest | [Relicx on Pinterest](https://pin.it/AGNiRCP)
 |

Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
SQL-Quick tip #15 - Random dates
Tags: tsql, sqlserver, sql, mssql
Published: 2022-05-31 01:59:12

## Sql Server tips and tricks

This is part of a series of quick tips and tricks I have accumulated over the year, that I think can be useful for others.
If you have similar short tips and tricks please leave a comment.

### Random date

This is a simple but useful tip i have used many times working on different projects, where i needed some testdata that should contain random dates.
The script below show how you can generate random dates. And you can combine this tip with [SQL-Quick tip #5 - Create a sequence of date and time](https://dev.to/coderallan/sql-quick-tip-5-create-a-sequence-of-date-and-time-4m6a)

```sql
SELECT DATEADD(DAY, ABS(CHECKSUM(NEWID()) % 365), CAST(DATEPART(YEAR, GETDATE()) AS VARCHAR(4)) + '-01-01') AS [Random date], 'Random date in the current year' AS Comment
UNION
SELECT DATEADD(DAY, ABS(CHECKSUM(NEWID()) % 365), '2000-01-01'), 'Random date in the specific year'
UNION
SELECT DATEADD(DAY, ABS(CHECKSUM(NEWID()) % 3650), '2000-01-01'), 'Random date between 2000-01-01 and 2010-01-01'
UNION
SELECT DATEADD(DAY, (ABS(CHECKSUM(NEWID())) % 65530), 0), 'Random date between 1900-01-01 and 2079-06-06'
```

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nrr7ksvfcneqh9li0ae.png)

The script below will generate a sequence of dates and times with an interval of 30 minutes for 2 days from the random starting date
```
DECLARE @stepSizeInMinutes INT = 30; -- Change this line to change the time interval
DECLARE @from DATETIME2 = DATEADD(DAY, ABS(CHECKSUM(NEWID()) % 365), CAST(DATEPART(YEAR, GETDATE()) AS VARCHAR(4)) + '-01-01');
DECLARE @to DATETIME2 = DATEADD(DAY, 2, @from);
-- Create Recursive Discrete Table
WITH Recursive_CTE AS
(
       SELECT @from AS TimestampUtc
        UNION ALL
       SELECT DATEADD(MINUTE, @stepSizeInMinutes, TimestampUtc) 
         FROM Recursive_CTE
        WHERE TimestampUtc < @to
)
SELECT *
  FROM Recursive_CTE
 ORDER BY TimestampUtc
OPTION (MAXRECURSION 0);
```

![Sql Server Management Studio screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1k9a4kjg20xfgqkdxkd.png)
We Build the Devs' Lists, TOGETHER !
Tags: discuss, meta
Published: 2022-05-31 01:47:25

I don't have an idea to write the intro for this post.

But I have a snippet for the idea (/problem):
```js
/*
  SOME_NUMBER Websites for SOME_THING
+ Best Extensions for SOME_THING
+ Top Tools for SOME_THING
+
...
= SOME Stuff for SOME_THING
*/
```
So, what about **Building the Devs' Lists, TOGETHER !**

I've been building my own collections about `Productivity`, `VS Code Extensions`... in the form as below:
```js
/*
+--------------------------+------------------+----------+------------+
| Name                     | Home page        | Category | Notes      |
+--------------------------+------------------+----------+------------+
| Bracket Pair Colorizer 2 | visualstudio.com | N/A      | Deprecated |
+--------------------------+------------------+----------+------------+
*/
```

For community-purpose, I think we should have a button to **Contribute** some one's own items (if not listed yet) and add 2 columns (1) `Used` (2) `Using`, as in the table below:
```js
/*
+--------+------+-------+-----------+----------+-------+
| Name   | Used | Using | Home page | Category | Notes |
+--------+------+-------+-----------+----------+-------+
| Sample |  X   |   X   |           | N/A      |       |
+--------+------+-------+-----------+----------+-------+
*/
```

And, it will be great if these lists can be deployed on [dev.to](//dev.to).
¿Qué es HTML, cómo se usa y con que se come?
Tags: codepen, html, tutorial, webdev
Published: 2022-05-31 01:29:23

**HTML** significa **H**yper**T**ext **M**arkup**L**anguage (O lenguaje de marcado de hipertexto).

Tal vez has oído hablar de otros lenguajes de marcado como **XML** (E**x**tensible **M**arkup **L**anguage - Lenguaje de Marcado Extensible) o **YML** (**Y**et Another **M**arkup **L**anguage - Otro lenguaje de marcado más).

Sin importar el navegador que usas (Chrome, Safari o Firefox), tienen un solo propósito y es interpretar sus archivos. Como los archivos HTML,CSS y JavaScript del sitio web que debe mostrarse.

Por ejemplo, aquí tenemos un poco de código HTML que dice que nuestro sitio web debe tener un título llamado “Mi Sitio” y en el cuerpo debe haber un encabezado que diga “Hola Mundo!”.

```
<html>
   <head>
       <title>Mi Sitio</title>
   </head>
   <body>
       <h1>Hola Mundo!</h1>
   </body>
</html>
```
Felicidades! Con esto ya has hecho tu primer sitio web!

Si pasamos ese código a nuestro navegador, lo abrirá y lo mostrará así con el título del sitio web generalmente en la barra superior y ese H1 o ese “gran encabezado” que aparece en el cuerpo de nuestro sitio web. 


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

Para poder practicar fácilmente con HTML, podemos usar un sitio llamado codepen.io. Puedes registrarte en el sitio de forma gratuita con tu cuenta de mail, twitter, facebook o github (Recomendado)

Una vez iniciada la sesión, como puedes ver se te permite ingresar HTML, CSS y JavaScript.


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

Los tres tipos de archivos se interpretarán y se mostrarán debajo como su sitio web.

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

Ahora vamos a necesitar algún texto con el que trabajar o tener algo a lo que podamos darle estructura.

Si vas a [La Isla Del Tesoro](https://gutenberg.org/cache/epub/45438/pg45438.txt), podrás ver el libro “LA ISLA DEL TESORO“. 

Como puedes ver, el libro se encuentra como texto sin formato. Tiene todos sus textos, pero absolutamente ninguna estructura.

Copiando la primera parte del libro a nuestro editor en codepen, podemos darle formato utilizando los tags de HTML como se muestra aqui debajo (Haz click en “HTML” para ver el código)

{% codepen https://codepen.io/fullsnacker/pen/KKQovmv %}

En el próximo artículo, revisaremos la anatomía de los tags de HTML!
Web3 Solidity + JavaScript 32 hour course recap #4
Tags: webdev, javascript, programming, s
Published: 2022-05-31 01:16:41

timestamp: 52:08 - 1:20:50

First we made a transaction between the accounts in our Metamask wallet. Then we went to Etherscan and the Rinkeby Etherescan to look at the details of the transactions, and understand what the details mean.

I also found out what a [nonce](https://www.hypr.com/nonce/) was, and how to pronounce it.

We spent a long time going over the [https://andersbrownworth.com/blockchain](https://andersbrownworth.com/blockchain) demo site that illustrates _why_ we say that blockchains are immutable.

Corrupted blockchains get voted off the island, because you would have to rewrite the entire linked list. Very much a headache.
Use ScheduledExecutorService to implement delayed tasks — delayed video release
Tags: java, executorservice, scheduled, springboot
Published: 2022-05-31 00:56:56

Using ScheduledExecutorService can implement timed tasks (such as the function of timed release)

First define local variables in the class

```java
ScheduledExecutorService service = Executors.newScheduledThreadPool(50);
```
Executors.newScheduledThreadPool(50); Factory pattern is used here.

factory pattern

It is mainly to provide a transition interface for creating objects, so as to shield and isolate the specific process of creating objects and achieve the purpose of improving flexibility.

```java
@PostMapping("/ops/scheduled/publish")
    public ResponseResult scheduledPublish(@RequestBody ScheduleVideoDto dto) {
        List<Integer> vids = dto.getVids();
        if (vids.isEmpty()){
            return ResponseResult.of().withErrorMessage("Failed to publish video, please select a video to publish");
        }
        Date pushTime = dto.getPushTime();
        if (pushTime==null){
            return ResponseResult.of().withErrorMessage("Failed to publish the video, please re-select the publishing time");
        }
        for (int i = 0; i< vids.size();i++){
            int status =  videoService.getStatusById(vids.get(i));
            if (status==1) vids.remove(vids.get(i));
        }
        if (vids.isEmpty()){
            return ResponseResult.of().withErrorMessage("Failed to publish video, the selected videos are all published");
        }
        long delay = pushTime.getTime() - System.currentTimeMillis();
        vids.forEach(vid->{
            videoService.updatePushTime(vid,pushTime);
            service.schedule(() -> videoService.publish(vid), delay, TimeUnit.MILLISECONDS);
        });
        return ResponseResult.of();
    }
```
Pass in the release time PushTime in the dto passed in the interface

```java
long delay = pushTime.getTime() - System.currentTimeMillis();
#The release time minus the current time is the delay time delay
```
Calling ScheduledExecutorService

```java
public ScheduledFuture<?> schedule(Runnable command,
                                   long delay, TimeUnit unit);
```
api method

It can realize the function of publishing video at a fixed time
Day 22/100 of code complete
Tags: webdev, programming, beginners, 100daysofcode
Published: 2022-05-31 00:56:16

decided to take a one day break to rest and also rethink my direction and end goal. In order to be able to land in a some starter job or career, I want to aim to be a full stack developer within a year and 3 months.  Let’s see.
How do you use "find" vs "get" prefix?
Tags: database, typescript, beginners, api
Published: 2022-05-30 22:32:45

Coming from a world where "find" and "get" are (were) used interchangeably, I find myself staring at a piece of code for over 10 minutes not being able to decide how to proceed.

I know naming is one of the most difficult task in programming, however I feel like in this particular case there should be like an unwritten rule for how we should prefix a method.

To be more specific, let's assume we want to fetch a user from the DB by its ID. 

```ts
    public async getOneById(id: number): Promise<User> {
        const user = await this.userRepository
            .createQueryBuilder("u")
            .where("u.id = :id", {id})
            .getOne();

        if (!user)
            throw new Error(`User with ID "${id.toString()}" not found.`);

        return user;
    }
```

The same method can be used to return `null` in case the user is not found:

```ts
    public async findOneById(id: number): Promise<User | null> {
        return await this.userRepository
            .createQueryBuilder("u")
            .where("u.id = :id", {id})
            .getOne();
    }
```

I'm struggling to decide if I prefer the above or if the `find` and `get` should be swapped around.

I don't know if there's any "standard", wasn't able to find anything conclusive.

What do you think? Does / should the same convention apply regardless of the programming languange?
stdout: Type Guards and Narrowing in Typescript
Tags: typescript, functions
Published: 2022-05-31 17:48:48

---
title: stdout: Type Guards and Narrowing in Typescript
published: true
date: 2022-05-31 00:00:00 UTC
tags: typescript,functions
canonical_url: https://nabeelvalley.co.za/stdout/2022/31-05/type-guards/
---

Type guards (also known as Narrowing) allow us create conditions under which an object of one type can be used as if it is of another type. We usually use this in conjunction with union types to allow us to specify different handling of the types based on the resulting value

#Contents

- [Using typeof](#using-typeof)
- [Using in](#using-in)
- [Using is](#using-is)
- [References](#references)

## Using `typeof`

We can use the `typeof` keyword in javascript to find out what type an object is. This is useful if we have an object that can take on different structures, for example

```ts
type Data = string[]
type GetData = Data | (() => Data)

```

In the above example, we have a type called `GetData` which can be either some data or a function to get data. Using this, we can can create a function which fetches data like so:

```ts
const fetchData = (getData: GetData): Data => {
  if (typeof getData === 'function') {
    return getData()
  }

  return getData
}

```

## Using `in`

Javascript also has the `in` operator which can be used to infer types by us checking a property of an object

```ts
type SimpleData = { 
  name:string;
}

type ComplexData = {
  name: {
    first: string;
    last: string;
  }
  isComplex: true;  
}

type AnyData = SimpleData | ComplexData
```

We can then use the `in` operator to check the existence of a property of an object by using it along with a key that we expect to be in one object but not another

```ts
const getComplexName = (data: AnyData): string => {
  // isComplex is the name of the key that we expect in `ComplexData` but not `SimpleData`
  if ('isComplex' in data) {
    return [data.name.first, data.name.last].join(' ')
  }

  return data.name
}

```

## Using `is`

We can use the typescript `is` keyword to specify that the return of a boolean means that a variable satisfies a specific condition

For example, we can create a function that basically does what the `in` operator in the above function does:

```ts
const isComplex = (data: AnyData): data is ComplexData => {
  return (data as ComplexData).isComplex
}

```

This can be used in place of the `in` check in the above example like so:

```ts
const getComplexName2 = (data: AnyData): string => {
  // isComplex is the name of the key that we expect in `ComplexData` but not `SimpleData`
  if (isComplex(data)) {
    return [data.name.first, data.name.last].join(' ')
  }

  return data.name
}

```

## References

- [My TS Notes](../../../docs/javascript/typescript-basics)
- [MDN The `in` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)
- [MDN The `typeof` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)
- [TS Docs on Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)
Episode #2 of Revisiting Product Engineering - Decision making
Published: 2022-05-30 22:45:00

All of us are making decisions all the time and no one deliberately wants to make poor decisions for the product we care for. It is the notion of time and circumstances that are acting upon which concludes the health of those decisions.
Not all decisions are same, a problem has to be solved before Christmas because there is an opportunity cost, if the problem is solved after the Christmas it will loose its value , some decisions are strategic and can wait , for example we have to optimize the development cost , some decisions are hard to change for example choice of a programming language to solve problem and some decisions are easy to change. 
We as humans have biases and as group we have group biases too,on the other side we are socially influenced through social media , our friends in technology talking about new shiny technologies , someone talking about a technology in some conference and we fall for these temptations and form preferences and opinions. We should not forget as mentioned in the [purpose](https://dev.to/smsufyian/product-engineering-episode-1-5hcg) that our purpose is to solve problems. I have seen many times that decisions made by engineers are based on preferences and opinions for example a practice is better then some other practice , we should do that. What we are missing many times are realities , yes every one of us wants that shiny straight surface with everything smooth but realities are far from straight road. The purpose of decision is to move forward. So how do we take decision ?   
First and foremost data is the key, try to make decisions based on the data.The type of work we are engaged in is effected by multiple variables , and I came across the concept [UCurve optimisation](https://innolution.com/resources/glossary/u-curve-optimization) in the book [Principle of Flow in product development](https://www.amazon.de/-/en/Donald-G-Reinertsen/dp/1935401009/ref=sr_1_1?keywords=the+principles+of+product+development+flow&qid=1659389006&s=books&sprefix=principle+of+flow%2Cstripbooks%2C81&sr=1-1) ,and I think it can help in making tradeoffs. 
I also think for decisions which are hard to change for example choice of a programming language we should take into account [global picture rather then thinking locally ](https://en.wikipedia.org/wiki/Think_globally,_act_locally).

Even then there is always the case that decision turns out unhealthy, but the learning from that decision should be incorporated for improvising the decision making process for next time.
Day 52: Article 5 now!
Published: 2022-05-30 22:44:32

Hi!
Whew! article 5 is out slowly by slowly the stash is growing now Tailwind CSS is up and running and today I have officially started the implementations starting from the navigation bar. There are still more articles to look into including one about `mocking different files with Jest`, the series about `github actions` and the one about `Redux` but they will have their time as I continue writing.
The plan for tomorrow is to work on the landing page carefully  creating components and learning about Typescript. by the way in the upcoming weeks I will start Looking into Typescript probably will be doing an article about it soon too.
That's enough for today, off to sleep

signing off...
5 basic styled-components skills I’ve learned
Tags: react, beginners
Published: 2022-05-30 22:09:30

This is my memo for using styled-components.

 1. [Basic syntax](#basic-syntax)

 2. [Use props](#use-props)

 3. [Use custom components](#use-custom-components)

 4. [Create reusable variable](#create-reusable-variable)

 5. [Create reusable css snippets](#create-reusable-css-snippets)

## Basic syntax
```javascript
    import styled from "styled-components"

    const StyleContainer = styled.cssSelector`
    // your styles
    `
```
This is the example for styling a button.
```javascript
    const BaseButton = styled.button`
      padding: 10px;
      background-color: #333;
      color: white;
      border-radius: 20px;
      border: none;
      cursor: pointer;
    `;
```
## Use props

Since this is JS, you can pass props.

This is the example to leverage this feature to share same stylings but change background color depending on the page number.
```javascript
    export const PageContainer = styled.div`
      min-height: 100vh;
      background-color: ${(props) => props.color};
      color: white;
      padding: 10px;
    `;
```
Use this component with a color prop.
```javascript
    import { PageContainer } from "./Page.style"

    const Page2 = () => {
      return (
        <PageContainer color="#5bb381">
          <h1>Page2</h1>
        </PageContainer>
      );
    };
    export default Page2;
```
## Use custom components

You can style other components as well as css selectors.

This code snippet uses Link from react-router-dom.
```javascript
    const LogoContainer = styled(Link)`
      text-decoration: none;
      ${linkStyle}
    `;
```
I will tell the wired syntax ${linkStyle} later.

You can use other style components to extends the styling.
```javascript
    const BaseButton = styled.button`
      padding: 10px;
      background-color: #333;
      color: white;
      border-radius: 20px;
      border: none;
      cursor: pointer;
    `;

    const SecondaryButton = styled(BaseButton)`
      background-color: white;
      border: 1px #333 solid;
      color: #333;
    `;
```
## Create reusable variable

We can have JS variables as css variables. The basic syntax is create JS variables and wrap it around with ${} when you use it.
```javascript
    const blue = "blue";
    const LinkContainer = styled(Link)`
      ${linkStyle}
      &:hover {
        color: ${blue};
      }
    `;
```
## Create reusable css snippets

You can create css snippets similar to @maxin in scss.
```javascript
    const black = "black";

    const linkStyle = css`
      color: ${black};
      cursor: pointer;
    `;

    const LogoContainer = styled(Link)`
      text-decoration: none;
      ${linkStyle}
    `;
```

The whole code is available [here](https://codesandbox.io/s/compassionate-colden-g8tiuk?file=/src/components/layout/Navigation.jsx).

[**styled-components**](https://styled-components.com/)

The original article is [here](https://medium.com/@lada496/5-basic-styled-components-skills-ive-learned-2879db3836fa)