teleren/devto huggingface dataset:
Typescript
Published: 2022-02-25 06:01:50

                


**What is TYpescript:--**

TypeScript is a strongly typed programming language which is built on JavaScript and developed and maintained by Microsoft. It is a syntactical superset of the JavaScript programming language. It’s an open source programming language. It is designed for the large applications development and  transcompiles to JavaScript. It provides optional static typing, classes and interfaces. Typescript doesn’t run in the browser. The code which is written in typescript is compiled to JavaScript, then runs in the browser.

So, We can say that TypeScript is a strongly typed, object oriented, compiled language.

**How Typescript works:--**
	Typescript has a relation with javascript. It offers all javascript features in its type system. JavaScript provides language primitives like string and number without  checking that we’ve consistently assigned these but TypeScript does. Besides, typescript knows javascript and generates types for many cases. 

Example:- If we create a variable and assign it to a particular value, TypeScript will use the value as its type.


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

**Features of typescript:--**

- 
Browsers can’t compile typescript code, a compiler compiles typescript code into javascript and runs on browsers. That means the code of typescript  is compiled to JavaScript for the purpose of execution.

- 
TypeScript can run on any environment where JavaScript runs on.
Typescript also supports other js libraries and JavaScript can also be written in TypeScript.  Like:-
        i)Front-end in any framework ;
       ii) Backend in Node js ; 
      iii) Cross-platform mobile apps in React Native ;
 

- 
It supports OOP concepts like classes, objects, interfaces and inheritance etc.

- 
Typescript is javascript and javascript is typescript because 
Typescript starts with Javascript and ends with JavaScript. And, as a superset of JavaScript any valid .js file can be renamed to .ts and compiled with other TypeScript files.

- 
Typescript takes the basic building blocks of a program from JavaScript. So, we only need to know JavaScript to use TypeScript.
   

**Difference between Typescript and Javascript:--**	

- 
TypeScript checks a program for errors before execution but javascript doesn't.

- 
JavaScript is dynamically typed. But Typescript provides optional static typing.

- 
JavaScript is an interpreted single threaded programming language. It needs to be run to test and see if it is valid or not. But TypeScript transpiler provides the error-checking feature. Which helps to highlight errors before the script is run by compiling the code and generating compilation errors if there is any syntax error.



			Finally

Typescript isn't the altar of JavaScript, instead expanding it with new, valuable features. Everything that can be written in JavaScript can also be written in TypeScript.
February 25th, 2022: What did you learn this week?
Tags: discuss, weeklyretro, weeklylearn
Published: 2022-02-25 05:47:20

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-90d %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>

Photo by <a href="https://unsplash.com/@qmikola?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mikołaj</a> on <a href="https://unsplash.com/s/photos/book?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Laravel 9 Autoload Custom Helper Functions Example
Tags: laravel
Published: 2022-02-25 05:43:48

Hi,

Today, I would like to show you laravel 9 create custom helper functions. This post will give you a simple example of laravel 9 creating a global function. We will look at an example of laravel 9 create a custom helper file. Here you will learn laravel 9 to create a global helper file.

we know Laravel 9 also provides helper functions for array, URL, route, path, etc. but sometimes we may require more custom helper functions for our project. so we need to create our own custom helper file and define global functions that can easily use it.

Here, I will give you a few steps to show you how to create a custom helper function in laravel 9.

[Laravel 9 Autoload Custom Helper Functions Example](https://www.codecheef.org/article/laravel-9-autoload-custom-helper-functions-example)
When should we use Let and const in our code🤔.
Tags: javascript, webdev, beginners, programming
Published: 2022-02-25 05:26:43

## Why we should use let and const in our code? 
So the Let and Const come in ES6 Update and the let and const are often used by many developers,  if you went and watch a tutorial now, you'll get to see let and const everywhere. 
So the let is use to declare a variable, and we can reassign the value of the let declare variable anywhere in our program.
And the Const is used to declare a variable, and we cannot mute the value of the const to declare the variable in our program.

### So when we use let? and when we use const? 
 use let when you are sure that you will need to change the value of a variable throughout your program. 

#### For Example 
```
let age = 19;
```
So in this example, I declare a variable age with the let keyword, because I know that the value of the age variable is need to be changed after a year. and I can change it in my code anywhere. like this.

```
let age = 20;
```

and use const when you are sure that you will not need to change the value of a variable throughout your program. 

#### For Example 

```
const birthYear = 20;
```
So in this example, I declare a variable with the const keyword, because I know that the value of the birthYear variable is don't need to change anywhere in my program. And same thing with any variable that are declare with const variable we can't reassigned the value of them or cannot change them in anywhere in our program.
3 Lessons I've Learned For Conducting Better Code Reviews
Tags: codereview, beginners, career, tutorial
Published: 2022-02-25 05:26:19

I love doing code reviews.

I'm far from the best code reviewer. So I'm always looking for ways to improve the code reviewing process for myself and my team. In the past 4 years, I've learned a lot about effective code reviewing.

Here are 3 lessons I found worth sharing:

## 1/ No one is above code reviews
All code changes need to go under review.

Did a senior or junior developer write the code change? It doesn't matter. Developers are humans and humans will inevitably make mistakes. Hand your code over to a fresh set of eyes. I'm confident they'll be able to catch mistakes (if any) in the code.

Here's a quote from [Code Complete](https://www.goodreads.com/book/show/4845.Code_Complete) about the effectiveness of code reviews:

> … software testing alone has limited effectiveness – the average defect detection rate is only 25 percent for unit testing, 35 percent for function testing, and 45 percent for integration testing. In contrast, the average effectiveness of design and code inspections are 55 and 60 percent.

## 2/ Make it a habit to participate in code reviews
Ever feel like you have nothing to contribute in a code review?

It's OK because you don't need to know everything about the code change to participate. Here are 2 tricks I use to make sure I'm an active participant:

### Trick 1: Ask questions
- Is there something you don't understand? 
- Does something need more clarification from the author? 
- Are you not sure if a specific change was intentional?

Submit your questions to the author. There is no shame in asking. In the worst case scenario, you learn something new. In the best case scenario, you might help the author catch a bug.

### Trick 2: Celebrate wins
Give kudos to the author.

Send them a thank you note for fixing the nasty bug. Everyone enjoys a little appreciation. When someone notices my hard work, it makes my day 10x better.

Don't be afraid to celebrate the wins--big or small.

## Distribute the knowledge to other team members
There was one questionable habit I had early in my career.

I always assigned the same reviewer to my code reviews. No one else. I did it because I believed that person could give me the best feedback. And I thought it was the quickest way to merge my code.

But there was one problem.

I wasn't being transparent with my team. By not assigning other team members, I wasn't giving them an opportunity to learn about my changes or review it.

I was hoarding knowledge. I was contributing to a low [bus factor](https://en.wikipedia.org/wiki/Bus_factor). Now, I assign all relevant people to the code review. The people I want feedback the most, I make to sure to assign them as mandatory reviewer.

---
Thanks for reading! Are there any code review lessons you've learned? Let me know in the comments or on [Twitter](https://twitter.com/maupanelo).
Laravel 9 Eloquent Mutators and Accessors Example
Tags: laravel
Published: 2022-02-25 05:17:53

Hi Dev,

This post will give you examples of laravel 9 mutator and accessor examples. Here you will learn laravel 9 accessors and mutators examples. you will learn mutators and accessors in laravel 9. you will learn what is mutator in laravel 9. you will do the following things for laravel 9 eloquent getter and setter example.

Laravel provides Accessors and Mutators in Eloquent. First of all, I will give you a simple definition of what is Accessors and Mutators in Laravel Eloquent, Then I will give you a very simple example where you will understand what it works.

[Laravel 9 Eloquent Mutators and Accessors Example](https://www.codecheef.org/article/laravel-9-eloquent-accessors-and-mutators-example)
How to update postgres (default user) password and rails+ruby compatibility table
Published: 2022-02-25 05:03:37

First login into postgres server

```
$ sudo -u postgres psql
```

Change the password

```sql
ALTER USER postgres WITH ENCRYPTED PASSWORD 'postgres';
```

Then go and change the conf

```
$sudo nano /etc/postgresql/9.5/main/pg_hba.conf
```

Change from peer to md5
Instead of this
 

```
local   postgres   postgres   peer
```
 
Change to this

```
local   postgres   postgres   md5
```

Then restart server

```
$ sudo service postgresql restart
```


Credits:
https://stackoverflow.com/a/69778580/379779

https://www.fastruby.io/blog/ruby/rails/versions/compatibility-table.html
Web Development: Docker
Tags: docker, webdev, student, programming
Published: 2022-02-25 04:13:00

Docker, the leader of the industry for developing and maintaining websites. Docker is extremely powerful because it allows developers to package applications into containers. This has many benefits including saving time, money, and allowing for scalability. It allows allows for developers to test applications in its own "Container" in a timely manner.

## How To Get Started With Docker
Honestly before 2 weeks ago, I had no idea what Docker was. I learned lot with how and why it works once I started to get hands on with docker. But before we get into that I wanted to address what docker needs in order to run your application.

#### DockerFile
The docker file is the most crucial part needed to set up an application in docker. Here is an example of a simple docker-file for the newsAPI micro service that I can post how to setup in docker towards the end of this post.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2cbghr3izng44bcca8q.png)
Basically what this "DockerFile" does is that is automates all the code and commands needed to setup the application on a new device(In this case the new device is the new docker instance.)

###### How to create a DockerFile within the Docker Playground
Step One: Add a new instance into your docker playground

Step Two: Clone the necessary project from GitHub Example: `get clone "GitHub Link here"` Note: Do not use parenthesis in your code for this step

Step Three: Create your Docker file by using: `touch DockerFile` 

Step Four: You can now use the editor to insert the necessary code into your DockerFile (Use the screenshot above to help you setup the correct commands needed into your docker file.) Note: Some Applications will need more steps within the file to get it to run within docker.

### newsAPI Micro service Fully setup
Here are some screen shots to show what the end result looks like once you are able to get the newsAPI Micro Service setup.
Screenshot 1(the end result):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82zk10au1b7mmc36tmp8.png)
Screenshot 2(Manually searching through the API data base for tesla info):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/439q85p997fwk4aomtbu.png)

## Links to get started with Docker
#### Link 1 
[Docker 101 Tutorial](https://www.docker.com/101-tutorial)
#### Link 2
[Walkthrough Setting up newsAPI microService with Docker](https://github.com/heyMP/ist402-docker/tree/master/labs/7-news-api-microservice)
Every new programmer can't be a programmer
Published: 2022-02-25 04:37:13

**Learning** to code and mastering it can take years for a ***beginner***. Most people ***give up*** before they **truly** get started.

**In the beginning, we get very  excited about the concept of learning to code**. 

## Here is the solution 
{%youtube V3-chI-0QBY%}

But later in most cases, *students* or *beginners* give up ***quickly***. Because they find it **difficult** to continue. They get stuck, and they face difficulty in finding the *solution* for the code.  


Learning to program isn’t an ***overnight*** journey. But, it’s also not as ***difficult*** as people think about it.

All it just requires is **dedication**, **passion**,  **interest**, and definitely ***patience***. 

There are so many **online resources** available to learn to code  *easily*, *quickly*, and *effectively*.

#📝Conclusion#
If a single *doubt* ever clouds in your **mind**, remember, that every ***programmer*** this path before. None of them more **destined to** become a *developer* than ***you***.  

Whichever path you are currently on, be it college or coding BootCamp, the only barrier to success is your  work ethic and confidence to persevere.
How To Create Dark And Light Mode Website Using jQuery
Tags: javascript, jquery, html, css
Published: 2022-02-25 03:50:50

In this tutorial, I will show you how to create a dark and light mode website using jQuery. As you can see many website and mobile applications are provided a light theme as well as a dark theme to the user, It is useful for websites that have long content and requires users to focus on the screen for a long time.

Using jquery we perform dark and light mode in website or day and night mode website. we can see dark and light mode features are very useful for the user especially when your website has more content or text, So, here we will see how to add dark and light mode to the website step by step. 

```
Step 1 : Create HTML File
Step 2 : Add CSS for Dark and Light Mode
Step 3 : Add Button for Dark and Light Mode
Step 4 : Add Script for Dark and Light Mode Theme
```

Output: 

![How To Create Dark And Light Mode Website Using jQuery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvh807jk6vgdr9jye3xb.png)


![How To Create Dark And Light Mode Website Using jQuery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lgt6qid5f01le17goql.jpg)


---

> **_[Read More : How To Create Dark and Light Mode Website using jQuery](https://techsolutionstuff.com/post/how-to-create-dark-and-light-mode-website-using-jquery)_**
Connect with others sharing your real-time coding status inside VS Code
Published: 2022-02-25 03:49:05

Feeling the co-presence of others while working does not just foster camaraderie, it is often the spark that leads to conversations that make communities grow closer together.
 
![Coding status inside VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeewe9ufer9v35oie5e6.png) 
> Get your own coding status at https://app.stateful.com/

## How Does It Work?
You can share your real-time coding status. Actively and passively. You can easily toggle the level of information you are sharing, both for community and beyond. Default sharing settings are Activity, Language, and Availability. Availability will let others know when you are heads down coding. Go ahead, [get your own coding status](https://www.stateful.com/@admc), select what's included, and share it with other devs.

## Invite More Familiar Faces
You probably agree that work time’s more fun when you are surrounded by others. Invite your friends, coworkers, and classmates into this social experience. The more the merrier. Invite them via the [embedded email form](https://stateful.com/@admc) or just grab [your personalized URL](https://stateful.com/@admc) and slide right into their DMs.

Happy coding! Cheers,
Sebastian
การใช้ Pydantic Model กับ Form Data ใน FastAPI
Tags: fastapi, pydantic, formdata, python
Published: 2022-02-25 03:44:07

ปกติถ้าหากจำนวน Fields ใน Form มีไม่มากก็ไม่มีปัญหาเราสามารถเขียนแบบปกติได้ เช่น

```python

@app.post("/abc", response_model=bool)
def abc(id: int = Form(...), name: str = Form(default=None),status: str = Form(default="single")):
  return True
```

แต่ถ้า Fields มีเยอะ ๆ สัก 10 Fields ขึ้นไป Code ก็จะเริ่มดูยากยาวมาก การใช้ Pydantic model เข้ามาช่วยก็จะจัดการง่ายขึ้น ปกติเราใช้ Pydantic model  ใน Body แบบ JSON กันอยู่แล้วแต่สำหรับ Form Data จะมีลูกเล่นนิดหนึ่ง ค้นหาใน internet ไปเจอวิธีที่คิดว่าง่ายที่สุดละเลยบันทึกไว้สักหน่อย

### ต้นฉบับที่ผมนำมาใช้

[stackoverflow](https://stackoverflow.com/a/65547551)

## ตัวอย่าง model.py

```python
from typing import Optional

from fastapi import Form
from pydantic import BaseModel


def form_body(cls):
    cls.__signature__ = cls.__signature__.replace(
        parameters=[
            arg.replace(default=Form(default=arg.default) if arg.default is not inspect._empty else Form(...))
            for arg in cls.__signature__.parameters.values()
        ]
    )
    return cls

@form_body
class Profile(BaseModel):
    passport_no: Optional[str]
    hn: Optional[str]
    patient_guid: Optional[str]
    prefix: str = "นาย"
    first_name: str
    last_name: str
    prefix_eng: str = "Mr"
    first_name_eng: Optional[str]
    middle_name_eng: Optional[str]
    last_name_eng: Optional[str]
    gender: int = 1
    birth_date: Optional[str]
    mobile_phone: Optional[str]
    installed_line_connect: Optional[str]
    address: Optional[str]
    moo: Optional[str]
    road: Optional[str]
    chw_code: Optional[str]
    amp_code: Optional[str]
    tmb_code: Optional[str]
    address_full_thai: Optional[str]
    address_full_english: Optional[str]
    nationality: Optional[str]

```

ในส่วนของ Form มันจะมีหลัก ๆ อยู่สามแบบคือ

* บังคับ
* มีค่า Default
* มีก็ได้ไม่มีก็ได้

ผมเลยปรับในตัว Decorators เพิ่มเติมให้มันปรับตาม Model ที่เรากำหนดไว้

```python
arg.replace(default=Form(default=arg.default) if arg.default is not inspect._empty else Form(...))
```


## ตัวอย่าง Router

```python
from model import Profile
from fastapi import Depends, FastAPI, File, UploadFile

app = FastAPI()

@app.post("/abc", response_model=bool)
def abc(profile: Profile = Depends(Profile), photo: UploadFile = File(...)):

  return True

```

## ตอน Render ก็จะได้ประมาณนี้


![Swagger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gz3xlxpfzjzo3lekx25q.png)


![Swagger input with default](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owv4d0v6awnu5s90da7y.png)


ลองเอาไปประยุกต์ใช้กันดูครับ
Google Summer of Code Detailed Post (1/5)
Tags: gsoc, opensource, javascript, beginners
Published: 2022-02-25 03:40:42

hey, everyone!!
Since the Google Summer of Code is around the corner, I thought it would be a great idea to share my learnings and insights with you all. I will write a series of posts detailing one issue at a time, I will try to cover all the basic questions and details. Hopefully, this will provide some value and help you decide your GSoC organisation as well.

What is Google Summer of Code?
To participate and get some good results out of it. It is important to know all the basics of the program. What is the true meaning of GSoC and why Google is running this program?

Basic - The Google Summer of Code, often abbreviated to GSoC, is an international annual program in which Google awards stipends to contributors who successfully complete a free and open-source software coding project during the summer. The contributors work under different mentors from the project, who guide you throughout your project experience. 

I would advise you to go through Google's Offical documentation once.

- Points to keep in Mind

1. Since the start of 2022, Google has announced that everyone can participate in the program without the need of being a student. This means that even if you aren’t currently enrolled in an institute, you can still participate even working officials can participate in this program. However, this would also mean that a lot more people will be applying, therefore bringing in a lot more competition.

2. As GSoC Contributors, you won’t be working with Google but with your selected Organization. I will detail more about organizations and organization selection later on.
 
3. The program’s official timeline starts from March 7. Google will announce all of the organizations and their Project listings after that, and everyone will have time to discuss the project up until April 4-19, when the official Application period begins. 

I worked with Processing Foundation on their p5.js project. On this project, I worked on internationalization(i18n) and the Deployment of a new version of p5.js. A new website was created and deployed in this project for more details you can refer to my medium article.

That's about it make sure to read my other posts, as this was just a beginner's post. In the upcoming posts, I will share more details regarding selecting open source organisations and how to work with them.

#gsoc #opensource #googlesummerofcode #experience #coding
SQL-Quick tip #1 - Range of Int
Tags: tsql, sqlserver, sql, mssql
Published: 2022-02-25 03:34:47

## 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.

### Generate a range of int

When testing your code you may need a range on integer and the trick for generating such a range is to use the `ROW_NUMER() OVER(PARTITION BY 1 ORDER BY somecolumnOfSomeTable)`

In the code below we are using the syscolumns table, so be aware that this specific query will only generate up to about 3000 number. To increase the number of returned rows you have to be creative using syscolumns cross join with the syscolumns table that will return more than 9 million rows or use one of your own table that has the appropriate number of rows.
```sql
DECLARE @range TABLE ([Range] INT)
DECLARE @numberOfInts INT = 24

 INSERT INTO @range
 SELECT 0 AS Range
  UNION
 SELECT TOP (@numberOfInts) ROW_NUMBER() OVER(PARTITION BY 1 ORDER BY A.name) AS 'Range'
   FROM syscolumns A

SELECT * 
  FROM @range
```

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