teleren/devto huggingface dataset:
Type Widening Is Kinda Weird
Tags: typescript, webdev
Published: 2022-12-29 16:51:15

---
title: Type Widening Is Kinda Weird
published: true
description: TypeScript does type widening for us out of convenience. Sometimes it's weird though, and here's how you fix it. 
tags: TypeScript, WebDevelopment
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oii9mca5v7blhmz32uz.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-29 16:38 +0000
---

Do you notice how in TypeScript that when you initialize a variable to a boolean, string or number, that TypeScript infers the type to be exactly that? A boolean, string or number.

For example:
```ts
let a = 4
a = 5
a // is 5 since type is number not 4
```
> 💡 Keep in mind, if you use `const` it prefers the more specific type `4`

This is a huge feature of TypeScript! Type Inference is essential to writing easy to read, and maintainable TS codebases. It removes a lot of verbosity as well as reduces the amount of type code that has to be updated when a type upstream changes.

However there are some times, where this can cause weird errors. For example, I didn’t guess at first glance that the below code would cause a type error:
```ts
type User = {
  kind: 'user'
  name: string
};

function userName(user: User) {
  return user.name;
}

const user = {
  kind: 'user',
  name: 'Jane',
};
```
Can you spot the error?

If you caught it, great! If not, here's the issue you'll see from TypeScript:
```
Argument of type '{ kind: string; name: string; }' is not assignable to parameter of type 'User'.
  Types of property 'kind' are incompatible.
    Type 'string' is not assignable to type '"user"'.
```
Essentially what's happening is `kind` gets widened to type `string` when creating the `user` object, but the function expects `kind` to be type `'user'`.

## Solution

So what's the solution?

Use `as const`:
```ts
const user = {
  kind: 'user' as const,
  name: 'Jane',
};
```
When we use `as const` it tells TypeScript that we don't want the inference to prefer the wider type of `string` but instead use the more narrow type `'user'`. And in this case, our error above goes away!

---

Like what you read? Want to support me?

A cup of coffee goes a long way 🙏

Why not buy me one? https://ko-fi.com/danjfletcher
An elegant string recognition algorithm
Tags: beginners, algorithms, pattern, pseudocode
Published: 2022-12-29 16:48:23

As a part of my IT journey on Codecademy, I had a project task to  design a pattern searching algorithm. This is a commonly used algorithm that searches for a specific value within a larger set of data. I have conceived an algorithm in my mind and proceeded to write out its pseudocode as well as its Python code.


**Pseudocode**:


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



**Python code**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hchau5ij54niap3rhb6a.png)
Scopes are way more powerful than you think !
Tags: programming, laravel, php, productivity
Published: 2022-12-29 16:37:36



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

Rather than describing what scope is because there are already many articles and videos explaining “What Scopes are !” . Instead, I’ll show you
how powerful scope is and how you can save time by using it .

In short, scopes are not just for querying status active or completed etc…
but today i will show you what they can actually do .

Let’s take an example suppose we are making a filter which sorts the products by low-to-heigh , heigh-to-low etc… a basic filter !,
now if we want to apply this logic we will do it like this :

```
public $sortBy = "";

switch($this->sortBy){
 
 case 'low-to-heigh':
    Product::orderBy('sale_price', 'asc')->get();
case 'heigh-to-low':
    Product::orderBy('sale_price', 'desc')->get();
case 'featured':
    Product::where('featured',-1)->get();
default:
    Product::all();
}
```

Assume if we want to add more filter for eg- filter by category so we can add category like this:

```
switch($this->sortBy){
 
  case 'low-to-heigh':
      Product::where('category_id',$categoryId)->orderBy('sale_price', 'asc')->get();
  
  case 'heigh-to-low':
      Product::where('category_id',$categoryId)->orderBy('sale_price', 'desc')->get();
  
  case 'featured':
      Product::where('category_id',$categoryId)->where('featured',-1)->get();
  
  default:
      Product::all();
}
```

Now if you have noticed we added the category query in every condition so that’s against the D.R.Y principles now this is where scopes comes into play and also this can be a 1 liner , yes you heard that right this can be 1 liner lets see…

First of all we will define a scope called SortBy:
and we will add an additional parameter called $sortBy which will be dynamic and we will copy the filter code into scope

```
public function scopeSortBy($query,$sortBy)
{
    switch($sortBy){
     
     case 'low-to-heigh':
        $query->orderBy('sale_price', 'asc')->get();
     case 'heigh-to-low':
        $query->orderBy('sale_price', 'desc')->get();
    case 'featured':
        $query->where('featured',-1)->get();
    default:
        Product::all();
    }
}
```
now lets define another dynamic scope called scopeCategoryFilter and we will add the category query inside the scope

```
public function scopeCategoryFilter($query,$category)
{
 $query->where('category_id',$category);
}
```
now lets merge this scope into 1 query
```
Product::CategoryFilter($category->id)->SortBy($this->sortBy)->get();
```
As you can see we reduced so many lines of code into 1 liner and now you can use it anywhere wherever you want
and you can also chain as many scopes as you want !
How to design Spotify app in Figma step by step in 40 minute | Figma tutorial | UI tutorial
Tags: webdev, beginners, figma, tutorial
Published: 2022-12-29 16:37:20

{% youtube L4teh_TOVLY %}

Hello!! Creative People,  Today I want to share with you UI Design (Spotify App Design).

 I hope you like this version and give your opinion in the comment box. If I have any problem then I recover my net video. Thanks for watching this video, and please do SUBSCRIBE to my channel. 
 
How to design Spotify app in Figma step by step in 40 minute | Figma tutorial | UI tutorial
, thanks.
Decrease the complexity of embedded systems development
Tags: embedded, microservices, opensource, luos
Published: 2022-12-29 16:28:01

Over the last years, the development and debugging complexity has increased significantly, due to the amount of new features on devices. A report by the University of Cambridge found that developers spend up to 50% of their programming time debugging.

⏩ [Read the article](https://techcrunch.com/2022/12/20/simplify-debugging-to-reduce-the-complexity-of-embedded-system-development/?guccounter=1)

Nicolas Rabault presents different ways to reduce this complexity on TechCrunch.
Planning a new JavaScript Framework
Tags: webdev, javascript, opensource, api
Published: 2022-12-29 16:15:51

## Current Status of *Ramen*🍜
So as of Right now, Ramen is able to do a lot of cool stuffs such as getting cookies, setting cookies with different sort of options, going to a specific route and being able to get all the query parameters, being able to get all the data passed on from the request and a lot of different stuffs.

We also have some socials now!!
Twitter: [@RamenJs](https://twitter.com/RamenJs) 
Notion: [This can act as a documentation / announcement board](https://celestial-can-1ae.notion.site/Ramen-An-open-source-Backend-Rest-API-Framework-15b227a413e54909b7d64e03d655c084)

## Future plans
1. One of the Ideas is Being able to connect to different databases and manipulate them should be built-in rather than installing different types of ORMs for Different Databases and this is something which I will work on. I definitely have to do a lot of research before getting on to it!

2. Adding different examples in the codebase, with the current state of ramen I think we should be able to implement a lot of different complex examples such as Authentication, Authorization and a lot of different stuffs.

3. Add tests and convert the codebase to TypeScript, So when I started this project I thought that I should write this all in plain JavaScript. But, as people recommended I will switch the codebase to typescript

4. Add Routers which can be passed on to the `append` function just like express have it. It is very helpful and can help developers to split their code and routes in different files and folders.

5. Think about View engines like EJS and others

So that is it for the development of Ramen for now, I'll update you guys on any further developments on Ramen :D

Until then here's another cute cat gif :3
![cat gif :3](https://media.giphy.com/media/yFQ0ywscgobJK/giphy.gif)
CodePen Designs - 13 : Emoji Art Maker -Automatic Emoji Mosaics
Tags: codepen, css, codependesigns, design
Published: 2022-12-29 16:02:14

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 13

<p>Using over three thousand emojis  analyzed on-the-fly and used as pixels,  this fun and useful utility can make ultra-high (or ultra-low) resolution emoji mosaics from any image!</p>

<p>You can control the resolution  and customize the look of the final result by tweaking the settings. </p>

<p>A desktop computer is recommended for the best experience.</p>

<p>If you are dead serious about emoji mosaics, check out the "version 2" of this application, features double and treble sized emojis, videos, effects, and more:</p>

<p><a href="https://www.EmojiArtMaker.com" target="_blank">https://www.EmojiArtMaker.com</a> </p>

{% codepen https://codepen.io/sweaver2112/pen/RwomyVL %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
My first PI
Tags: raspberrypi, opensource, programming, linux
Published: 2022-12-29 15:44:28

I finally got one. This year for Christmas my lovely partner got me a raspberry pi. It was basically the only thing I asked for so it was a big surprise… not. It's the modal 3 A+ so not exactly the latest and greatest but it will be fine to learn with. I already have a few ideas of what to do with it. 

## What is a raspberry pi
A single board micro computer. These computers are made by the raspberry pi foundation. A UK based charity with a specific mission.  
To enable young people to realize their full potential through the power of computing and digital technologies.  
These computers run Linux, in a flavor specific to the raspberry pi with the main appeal being price point and power consumption. These boards are often under 50 bucks and are extremely modular. 
Due to this they have many use cases and are loved by computer science and IT enthusiasts worldwide. 


## what will I do with it
Well learn Linux. I have been a windows user up until now. But being a dev I use the terminal a lot so I am in good shape. 
My first few ideas are to set it up as a VPN server so I can access my home network from anywhere. Or make the pi into my own DNS server. The pi comes loaded with Java and python dev environments so learning those languages would probably be next on my list. What's so exciting is the list of possibilities and how endless it feels. 

All and all this little computer should be a lot of fun to experiment with. Have you ever owned a raspberry pi? What did you do with it? Leave a comment and let me know.
What Is "NaN"
Tags: javascript, beginners, programming, webdev
Published: 2022-12-29 15:39:45

# So what is **NaN** ??

**_spoil : It's a Number_**

## Table of contents

1. NaN beginners introduction
2. My tips to verify number
3. My second tips to verify the opposite

## 1 - What we need to know about that ? Basically... 3 things for beginners

> 1 - NaN is the result of an arithmetic operation that was invalid.
> 2 - For many of us NaN == Not A Number, but for sure, it has a _'number'_ type.
> 3 - We can not compare NaN to itself.

To illustrate all these things I will show you some examples :

* #1

```js
    const whatIsNaN = 1 / "a"
    console.log("#1 - You can have "NaN" like that : 1 / a = " + whatIsNaN);
```

* #2

```js
    console.log("#2 - The type of NaN is : "+typeof NaN);
```

* #3

```js
    if (NaN === NaN) {
        console.log("We never catch this log");
    } else {
        console.log("But always this log");
    }
    
    //If you need to catch a NaN, you can use that : 

    if (Number.isNaN(NaN)) {
        console.log("I'm a NaN !");
    }
```

-------------------

## 2 - My tips

In my experience, the method that I prefer to use to check if a variable is a "number" :

```js
//The regex to match with numbers.
const nbRegex = /^-?[0-9]\d*(\.\d+)?$/

/*
Here you can see how many elements in your array 
do not match with the regex that we defined.

Here "args" is an array
 */
function isNotNumber(args) {
  return args.filter(arg => !arg.match(nbRegex)).length;
}
```

So, with this function if the return is more than 0 ?
It's the proof that the array you passed as an argument contains some stuff that is not a number :

```js
//Here "args" is an array
if (isNotNumber(args) > 0) {
    console.log("This array does not contain number only.");
    return
}
```

-------------------

## 3 -  My second tips to verify the opposite

In an other way you can just delete the "!" in the filter function to have the perfect oposite and only stuff that is not numbers :

```js
//Here "args" is an array
function isNotNumber(args) {
  return args.filter(arg => arg.match(nbRegex)).length;
}
```

To test that :

```js
//Here "args" is an array
if (isNotNumber(args) > 0) {
    console.log("This array does contain some number.");
    return
}
```
A JavaScript framework with web component
Tags: javascript, webcomponents, frameworks, webdev
Published: 2022-12-29 15:33:26

https://github.com/kstdx/tml

Hey!
I've created a new JavaScript framework and I'd like to introduce you to it! It's called tml.

# features
1. Buildless.
tml doesn’t need to build.
This is because tml is based on Web Component API.

2. Simple, Lightweight.
The contents of framework are very simple, so tml is 3kb lightweight.

3. No virtual dom.
Some frameworks like React using virtual dom internally, but tml doesn’t. But tml is using shadow dom so the performance is super.

4. Super easy syntax
You can write counter code like this:

```js
const App = (me) => {
    me.init({ count: 0 })
    return me.html`
        <button @click=${() => me.$count++}>count</button>
        <p>${me.$count}</p>
    `
}
```

Great :D

You can get more examples in [the GitHub Repository](https://github.com/kstdx/tml), so now try it!
Join my journey as a self-employed developer
Published: 2022-12-29 15:25:00

Hey there, it's Dominik! 👋🏼 I am a self-employed web-developer based in Innsbruck, Austria 🏔️

I am also a teacher and build digital products and solutions.

Heads up, I am starting a newsletter. In my newsletter, I want to give you insights on what I learned, what went good and what went wrong. You will receive links to content I enjoyed and will be the first to know when I launch a thing or two. 💌

The newsletter starts on Tuesday, 10.01.2023 (10/01/23 for all of my american fans out there). 🚀

You can sign up here for free:

[https://mailchi.mp/cd82168021b4/newsletter-sign-up](https://mailchi.mp/cd82168021b4/newsletter-sign-up)

I would be happy if you would support me and join my journey!
Thanks!

## Want to know more?

Here are some anwers for questions you might have, might not. 

###Why am I doing this?

I like reading stories from people in the industry a lot. They inspire me, give me ideas. Continous learning and getting better as a person and developer is really important to me. Going out and talinkg about my story helps me improve - and maybe inspires someone out there.

###You are a web developer. Why are you using MailChimp Landing Pages?

To be honest, I wanted to have a blog or a newsletter for a long time. In fact, this was one of my new years resolution for 2022. The year is ending, I don't have a blog or a newsletter yet. So I start unperfect and will adapt on the go.

###What will I be writing about?

I will write about my projects and the things I learn while coding, managing and communicating. You will also get insights in my process and the way I work.

###What is my experience?

I am self-employed web-developer since 2020. Before that, I worked as developer and project manager in local agencies for 3 years. Besides beeing developer, I've been teaching web development for 4 years.

###What is my tech stack?

I consider myself Full Stack Developer. I mostly use ReactJs and GatsbyJs for the Frontend, Laravel for Backend. As CMS, I use WordPress or Dato.

###What am I working on at the moment?

Right now, I am supporting two agencies as an external developer. I am also doing two website-projects (one nearly finished, one just started). Since one year, I am working on an app that will also be published soon.
How Much Does Cloud Rendering Services Cost !
Published: 2022-12-29 15:21:09

**Clear Answer :** Nobody can not know without checking all material, Light, Meshes inside your scene by [Cloud Rendering Services](https://www.kibrit.com.tr/rental-gpu-render-farm/). Sometimes the first frame may include just basic models, after 60 frames, the scene may have much more mesh which will affect rendering time/cost. In order to understand the cost of the whole animation, We render from different frames of your animation.

Lets say your animation includes 1000 Frame, Our technical team will render via Our [Cloud Render Farm](https://www.kibrit.com.tr/rental-gpu-render-farm/) from 1–300–700–950th frame as sample to check average rendering time

**Simple math is:**
(( 1th frame “40 second” + 300th frame “10 second” + 950 Frame “90 second” ) / 4) * Total Frame in 3d animation “1000” = 35000 Second = 583 Minutes

**Example :** it is the same 3d Object with different displacement map affect rendering time

![Kibrit Creative Solutions Online Cloud Render Farm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i82z5lewvrp3nls6vrbe.jpg)

![Kibrit Creative Solutions Online GPU Cloud Render Farm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbv6oceul68vud0biwj4.jpg)


![Kibrit Creative Solutions Lumion Cloud Render Farm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cr3tqpb63l93yjaqn8x.jpg)
[World's Most cost effective Cloud Render Farm](https://www.kibrit.com.tr/rental-gpu-render-farm/)
Dictionaries in Python.
Tags: programming, python, dictionary
Published: 2022-12-29 15:18:40

**1. What are dictionaries in Python**

- Dictionary is one of the data types which is used to store data in the pairs of key : data.

- It is ordered.

- It is mutable.

- Keys should not be duplicated but data can be same.

- Dictionaries are written with curly brackets.

**2. Creating a Dictionary**

1. It is encloses in curly {} braces.
2. Separated by a comma (,).
3. It holds values in pairs of keys corresponding with data.
4. Keys cannot be repeated and are immutable.
5. Data can be of any Datatype.

2.1 Example

```
dict = {1: 'A', 2: 'B', 3: 'C'}
print(dict)
```
OUTPUT
{1: 'A', 2: 'B', 3: 'C'}

**3. Accessing data of a dictionary**
We can access the data by their respective keys.
**3.1 Syntax**

```
dict = {1: 'A', 2: 'B', 3: 'C'}
print(dict[1])
```
OUTPUT
A
**4. Adding elements to a dictionary**
Syntax:

```
dict = {1: 'A', 2: 'B', 3: 'C'}
print("old dictionary")
print(dict)
new_dict=dict[4]='a'
print("Updated dictionary")
print(dict)
```
OUTPUT:
old dictionary
{1: 'A', 2: 'B', 3: 'C'}
Updated dictionary
{1: 'A', 2: 'B', 3: 'C', 4: 'a'}
Flowchart editor dgrm.net / announcement / I halved the source code
Tags: javascript, svg, programming, webdev
Published: 2022-12-29 14:54:13

[dgrm.net](https://dgrm.net/) | [GitHub](https://github.com/AlexeyBoiko/DgrmJS)

Just want to announce that [dgrm.net](https://dgrm.net/) was refactored.
Now the code is half as much. Project structure is simplified. There are so few source code files that they all fit on one screen.
<br/>
![Code - number of lines of code. The top table is the old version, the bottom is the new one. The new version has 2 times less code.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro48urivuhgo4n2xyqcv.png)_Pic 1. Code - number of lines of code. The top table is the old version, the bottom is the new one. The new version has 2 times less code._ 
<br/>
![Was: 60 files and complex structure. Now: 27 files and a simple structure, all files fit on one screen.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l67g6x8hvcyom6qvfukh.png)_Pic 2. Was: 60 files and complex structure. Now: 27 files and a simple structure, all files fit on one screen._
How to Create Custom Cursor Without Using Frameworks
Tags: css, javascript, beginners, tutorial
Published: 2022-12-29 14:51:13


{% youtube UMdvufdewD8 %}

In this video, we'll walk you through the steps needed to create a custom cursor for your website or application,
without relying on any external frameworks. 
We'll also provide some tips and tricks for making the process easier and faster.


⏱️ Timestamps
-----------------------------
0:00 - Intro
0:32 - What you will need
1:03 - The basic HTML structure
1:28 - Styling the cursor
2:26 - The JavaScript
How to stay consistent as a programmer
Tags: webdev, programming, beginners, tutorial
Published: 2022-12-29 14:45:26


![How to stay consistent as a programmer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjp5ygcma7hemycfvnmq.jpg)
Here are a few tips to help you stay consistent as a programmer:

1. **Set specific goals:** Determine what you want to accomplish as a programmer and create a plan to achieve those goals. This will help you stay focused and motivated.

2. **Practice regularly:** Consistency is key to improving your skills as a programmer. Make a commitment to practice regularly, whether that means working on personal projects or tackling coding challenges.

3. **Stay organized:** Keep your workspace and codebase organized to make it easier to focus on your work and stay productive.

4. **Seek feedback:** Asking for feedback from other programmers or mentors can help you identify areas for improvement and stay on track.

5. **Take breaks:** Don't be afraid to take breaks to rest and recharge. This can help you stay fresh and focused when you return to your work.

6. **Stay up-to-date:** Make an effort to stay current with the latest programming technologies and best practices. This will help you stay relevant and competitive in the field.

7. **Be patient:** Consistency takes time, and it's important to be patient with yourself as you work towards your goals. Don't get discouraged if you encounter setbacks or challenges – just keep working and you will improve over time.