teleren/devto huggingface dataset:
Start using TypeScript in React Projects
Tags: javascript, webdev, react, typescript
Published: 2021-01-08 16:10:16

<b><h2>What is TypeScript?</h2></b><ul><li>Superset of JavaScript developed by Micrpsoft.</li><li>Compiles to plain JavaScript.</li>
  <li>Easily integrated into JavaScript projects.</li>
<li>Designed for development of large scale applications.
</ul>

<b><h2>Static Type Checking</h2></b>
With typescript, we can check and assign variables, parameters, and function types.

<b><h2>TypeScript Types</h2></b>
<ul>
<li>String</li>
<li>Number</li>
<li>Boolean</li>
<li>Array</li><li>Any</li><li>Null</li><li>void</li><li>Tuple</li><li>Enum</li><li>Generics</li></ul>
<b><h2>Get Start using TypeScript with reactjs</h2></b>To initialize project with boiler plate run this command 
<i>npx create-react-app my-app --template typescript</i>
<b><h3><b>With Props</b></h3></b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hsf49whovsxrh8ovb0c6.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fl46xagk9l4oki0lrwom.png)
<ul>
<li><b>React.FC</b>:React.FC show the Text component is functional component.</li>
<li><b>interface Props</b>:We are defining types there.We can also pass object(Details) to our Props</li>
<li><b>App.tsx</b>:We are passing everything in Text component.Missing anything will generate error</li>
</ul>
<b><h3><b>With hooks</b></h3></b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d4fhiksgkkvpe83luw4n.png)

<h1><b>So this was the small intro to use TypeScript with react.

Follow me on Github <a href="https://github.com/shamaz332">Shamaz Saeed</a>
My 2020 Recap
Tags: career, watercooler, writing
Published: 2021-01-08 16:10:09

As 2020 came to an end, there have been many ups and downs throughout the year. The beginning of the year was off to a good start. Everything looked positive and seemingly ordinary. I was traveling the world, attending in-person classes, going to college parties, and living the life of a 20-year-old. However, it all halted abruptly. In one week, the world came to a stop, and things I never thought twice about became unknown. I wrapped up the end of my junior year at home, which is now how I anticipated it to go.

Additionally, I had an internship lined up at the beginning of summer, which unsurprisingly got canceled. I didn’t know what I would do over the summer, but I knew I had to find something. Luckily my school posted some micro internships held virtually, and I jumped right on it. I was very fortunate to land two remote internships that taught me an immense amount about technology, user experience, research, and so much more. Not only did those internships prepare me for the workforce technically, but also mentally. Having a job and attending school are two completely different atmospheres. Both of the internships taught me how to preserve when I thought I knew nothing or was behind, be open to learning new ideas, and communicate with others on real-life projects. 

During my internships, I realized the importance of networking. Connecting with other people can get you far in life, and having a valuable relationship with people is meaningful in an abundance of ways. I decided to reach out to alumni, past and present co-workers, and even strangers to talk to them about their careers. I wanted to get an insight into what they have done/are doing and how understanding their path that they paved for themselves. Through conversation, it opened my eyes to see what I might be interested in and where I would like to be down the line. As a rising senior, I knew that I had to be ready to go once the semester started, particularly since COVID has dramatically impacted the workforce. I immediately started attending career events, virtual coffee chats and connected with the recruiters. Sure enough, all of the work I put in over the summer paid off, and I landed a job that will begin after graduation.

Looking back at the year, there were a lot of things to be grateful for. Although some of my college time was taken away from me, I could access education online, which is not possible for some people. Additionally, I spent a lot of time with my family, which holds a special place in my heart. Being with them every day is not always easy and comes with some bickering, annoyance, and frustrations. However, I wouldn’t change any of it because it all came from a good place, and I would be lying if I said I didn’t enjoy some of the arguments. 2020 is now in the past, but it has had a significant impact on my life. Now all I can do is learn from the past and look forward to the future—goodbye 2020, and hello 2021.
CSS glowing effect on hover
Tags: html, css, cwb
Published: 2021-01-08 16:07:08

The glowing on hover effect of CSS is made with HTML and CSS. It is very useful and it increases users' impression as it looks very nice, you can also use it by copy-pasting the code from this site.
<a rel="nofollow" href="https://codewithbishal.com/example/css-button-glow-effect">View it on our website</a>
View More :
<ul>
<li><a rel="nofollow" href="https://www.codewithbishal.com/example/filter-images-using-javascript">Image Gallery with Filtering</a></li>
<li><a rel="nofollow" href="https://codewithbishal.com/example/html-css-social-media-buttons">Social media icon animation</a></li>
</ul>
At first, on our webpage, there is a preview of our "Glowing button on hover" page form, then there are a few QNA and an overview of the blog. There is a button to copy and Download the codes (HTML and CSS). You can also try it on our website.

You can view and copy the source code files through the link given below. <a rel="nofollow" href="https://codewithbishal.com/example/css-button-glow-effect">View and Download Source Code</a>
How to Find Simple, Personalized Color Palettes
Tags: design
Published: 2021-01-08 15:59:21

I am honestly not great at picking out color combos that look good together, but at the same time, I do know what I like (lots of blues & greens 😊).

I came across an awesome tool called [Khroma](http://khroma.co/) that helps you narrow the color options down.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610067105911/35YYZSNsM.png)

## Khroma 🌈

[Khroma](http://khroma.co/) is an AI tool that helps you find simple, personalized color combinations. By selecting 50 (yes, 50) of your favorite colors, you train Khroma on essentially what you like and don't like. 

After calculating, it produces an infinite scroll of color combinations or palettes tailored to your preferences. 

If you don't like your results, you can always edit your colors. 

You can even select "favorites" of your color combinations and palettes. 


### Features ⭐

In additional to text/background color combos, you can also get recommendation for the following styles: 

#### Gradients

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610120689400/WiHe0kV5i.png)


#### Image Filters

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610120745999/QP1Spmxn-.png)


#### Palettes

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610120819629/BfAdV7OfE.png)


## Considerations 🤔

* After generating your infinite scroll, you might be overwhelmed with options. I recommend immediately spending a couple minutes selecting your favorites, and then bookmarking the favorites page to come back to! 

* Note Khroma uses local storage rather than relying on logins. You preferences will be saved on only your current browser on your current device. 


#### ✨ TL;DR: Use [Khroma](http://khroma.co/) to get simple, personalized color combinations based on your actual color preferences.


#### _Thanks for reading. Feel free to connect with me on [LinkedIn](https://linkedin.com/in/darian-nocera)!_
Single vs Double quote strings in PHP
Tags: todayilearned, php, webdev, programming
Published: 2021-01-08 15:56:04

In PHP, string written in single quotes is displayed 'as it is'. Variables and most of escape sequences are not interpolated.

Example,
```php
$name = 'Farhan';
echo 'Welcome $name';
// Output: 'Welcome $name';
```

Whereas in double quotes, variables and escape sequences are interpolated.

```php
$name = 'Farhan';
echo "Welcome $name";
// Output: "Welcome Farhan"
```

Edit #1:
Thanks [@cseder](https://dev.to/cseder) for correcting to use `interpolated` instead of `interpreted`.
How to Quickly Add a Contact Form to a Static Website
Tags: serverless
Published: 2021-01-08 15:23:42

A backend is typically required to handle form requests. So if you want to add a contact form to your serverless static site such as your portfolio or personal website, you'll likely need to use a third party service to handle the requests. There are many services like this, but I recommend using [99inbound](https://app.99inbound.com)&mdash; it's free and easy af. 

## Creating the Account ⚙

Note&mdash; When you create an account, use the email you'd like the contact form to send emails to, as you will **not** be able to change this once your account is created on the free plan. 

You will be taken to your dashboard where you can configure your forms and end points. 

## Forms vs. Form Endpoints 🤔

### Forms

You can create a form directly on 99inbound using their UI. This will provide you with a `<div>` containing your form and a `<script>` to handle the request. 

### Form Endpoints

> Form Endpoints allow you to use your own forms but have submissions processed by 99Inbound.

For full customizability, I would recommend just building your own form with HTML/CSS and using the provided Form Endpoint as a POST action for the form. 

## Configuring the Form Endpoint ⚙

* Create a new end point by clicking the '+' button. 

* Fill out the title and submission text. You can leave the redirect URL blank.


* Scroll to deploy. 

* Copy the endpoint

* Within your form element, paste the endpoint as an `action` attribute, with a `method` of `POST`: 

```html
<form action="ADD_ENDPOINT_HERE" method="POST" target="_blank">
```

> When a user submits the form, they will be taken to your submission message. Use `target="_blank"` like above to launch this in a new tab. 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610118226990/5N-oRxYJq.png)


I assume you're already proficient enough with HTML to build forms, but I provided an example below. 

### Building the form 🛠

Creating your own HTML form is especially easy with [Bootstrap](https://getbootstrap.com/docs/4.0/components/forms/).

Here's one built with Bootstrap using FontAwesome icons to get you started:

{% codepen https://codepen.io/darnocer/pen/mdrKjpv %}


### Stopping Spam 🚫
It's highly recommended you also include the provided _"honeypot field"_. This works as a hidden field to normal users, but is designed to trick spam bots into filling out the "fake" field so that spam can be filtered from your inbox. 


## Testing 🧪
* Add your form to your site / app. 

* You can test your form even in the development environment and verify that an email is sent to the email you signed up with to ensure it's configured correctly. It may take a few moments for the email to go through. 

* You will also be able to see all of the submitted form entries directly from your dashboard. 


####✨TL;DR: Use free service [99inbound](https://app.99inbound.com) to create a form endpoint, and add this as the POST action to your HTML form.


#### _Thanks for reading. Feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/darian-nocera/)!_
🚀10 Trending projects on GitHub for web developers - 8th January 2021
Tags: react, graphql, javascript, webdev
Published: 2021-01-08 15:22:36

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. graphqurl

curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

{% github hasura/graphqurl %}

---

### 2. material-table

Datatable for React based on material-ui's table with additional features

{% github mbrn/material-table %}

---

### 3. Jest

A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects. Fast, interactive watch mode only runs test files related to changed files.

{% github facebook/jest %}

---

### 4. React Virtualized

React components for efficiently rendering large lists and tabular data.

{% github bvaughn/react-virtualized %}

---

### 5. eleventy-high-performance-blog

A starter repository for building a blog with the Eleventy static site generator implementing a wide range of performance best practices.

{% github google/eleventy-high-performance-blog %}

---

### 6. socket.io

Socket.IO enables real-time bidirectional event-based communication. 

{% github socketio/socket.io %}

---

### 7. Octotree 

GitHub on steroids. Browser extension that enhances GitHub code review and exploration.

{% github ovity/octotree %}

---

### 8. deno-puppeteer

A port of puppeteer running on Deno

{% github lucacasonato/deno-puppeteer %}

---

### 9. react-remove-scroll

Disables scroll outside of children node. Removes and disables scroll in a "React" way

{% github theKashey/react-remove-scroll %}

---

### 10. Software Developer Folio

A clean, beautiful and responsive portfolio template for Developers.

{% github saadpasta/developerFolio %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
How did I build a web app in a day and deployed
Tags: django, showdev, news, webdev
Published: 2021-01-08 15:21:25

# [Tellasecret](https://tellasecret.live/)
You came here because of the title, yes this the article about how I build a Django app in a weekend. 
Any suggestion or feedback is highly welcome.

https://tellasecret.live/
This is the [website build in a day](https://tellasecret.live/) and gone to live with multiple iterations. At first, I thought it can be used to collect the [anonymous message from friends](https://tellasecret.live/) but it can do more than that, this can be used to collect feedback from clients to improve the service, feedback for teachers and many more. Please command your suggestion.

The goal is to build a secret messaging app with Django, then I set a deadline to complete it within a day. I start to build and map the design of the APIs and tables, I did split the work into multiple parts like APIs, tables, Ui development at the first stage. And within 3 hours, I did complete the Apis level logics and the table schema.
Next thing is to build the frontend, in Django the frontend is built using Django templates. I'm not a frontend expert this is the part where I took some extra time, changing the UI multiple time and then I did build that too.

Then its time to deploy the code in EC2, django app is connected to the [Nginx](https://www.nginx.com/) server. Check this article for reference [django-nginx-gunicorn-virtualenv-supervisor](https://michal.karzynski.pl/blog/2013/06/09/django-nginx-gunicorn-virtualenv-supervisor/), this the first time I ever try to deploy the django with Nginx. The project failed multiple times and did some late night work for more than two days and then finally deployed. 

I learn a lot in this, its just a simple website but the learning I got in this is huge, listed some extra things below.
**Breaking the parts**
* Apis
* Database
* Frontend
* Content for page
* SEO tags, [OGP](https://ogp.me/)
* Django sitemap
* Deploying the app in EC2
* Connecting Django app with the [Nginx](https://www.nginx.com/)

Thanks for reading, please do check this https://tellasecret.live/ and share it with your friends.

My secret link to message me, the sender will stay unknown.
https://tellasecret.live/link/VYaFTTz

Please leave your suggestion in command.
Don't wait for the perfect moment. It will never come
Published: 2021-01-08 15:18:06

*"I'm not going to try to interview for this job. I'm not ready yet. Will do it 1-2 years later."*

Sounds familiar, right?

We are afraid of failure. No one likes to be rejected, and nobody likes to fail interviews. We want to avoid these situations, and we do our best to postpone any decision. And we to have that fake feeling that we have more time to prepare.

The key is simple — you will never be completely ready. There will never be a moment when you can say: "Ok, today I'm ready." You will always have a feeling of missing something.

You will never be completely ready and prepared for a job interview. But it's better to try it and figure out your weaknesses instead of training too much. You can spend a year preparing for this interview, but you can hear: "Sorry, this position is already closed.". Worst case scenario — you will not get the job, but you will be able to try again in 1 year or so. And you will be a better version of yourself — you will know what to expect.

It's ok to have a feeling that I'm not good enough. Despite how comfortable this feeling, it's also a dangerous feeling. We are convenient, and we know what to expect. But it's almost impossible to evaluate yourself objectively without an external look.

How could I say that I'm deficient in job interviews if I'm not even trying?

**Ask yourself: "If I don't try it now — what would change in one year?"**

Nothing.

##—

The more we say, "I'm not ready yet," — the more difficult it would be. As a result, all our pure and beautiful dreams are gone and transformed into the following thoughts: "Well, I don't need that job. I'm happy where I am — the job is simple, nothing challenging. Yeah, there are no interesting tasks or career growth, but I don't need it."

But is it what you want?

##Storytime! 

I was dreaming about moving to live abroad. I lived in Russia, worked as a frontend developer. I was obsessed with the idea of living in Europe. But I had a problem — my English level was relatively low. I could tell myself: "Ok, Maxim, you are not ready. Let's learn English for 1-2 years and then start the job searching."

That sounds fair and logical, but it wasn't moving me closer to my dream. So instead of just studying the language, I started to research and apply to different roles. I started with companies where I didn't want to work, but I had to practice my English skills — write cover letters, talk to recruiters.

My first interviews were so bad. I was sweating, trying to find the right words. I had to ask: "Sorry, can you repeat, please?" multiple times. It's not comfortable, but it's the only way to get the experience. I got the job in a few months when I felt comfortable to speak and not sweating.

It was the best decision — don't wait for a moment when I would know English on an outstanding level but learning by practice.

##—

My advice is just that:
Don't wait for an ideal moment. It will never come. Try what you want to do, learn new things. Become the person you want to be.
tmp.spacet.me devlog part 4
Tags: dohackathon
Published: 2021-01-08 15:14:11

---
title: tmp.spacet.me devlog part 4
published: true
description: I implemented a few more integrations.
tags: dohackathon
series: tmp.spacet.me devlog 
canonical_url: https://notes.dt.in.th/20210107T191402Z9105
---

I implemented a few more integrations.

**Sending and receiving files via WebRTC.** I used [P2PT](https://github.com/subins2000/p2pt) for peer discovery and [simple-peer-files](https://github.com/subins2000/simple-peer-files) for file transfer. They are based on the [simple-peer](https://github.com/feross/simple-peer) library. I’ve never used them, and a hackathon is a great time to try out things I’ve never tried before.

![](https://static.dt.in.th/uploads/2021/01/07/tmp-webrtc-receive.gif)

After adding the extension, the “**New item**” button will have a option to receive files via WebRTC. And every file will also has a new option to send them over WebRTC.

![](https://static.dt.in.th/uploads/2021/01/07/tmp-webrtc1.jpg)

On first use, `tmp-webrtc` must be configured with a unique channel name. While active, each “sender” will distribute the file to every receiver on the same channel. Also, a single receiver can receive multiple files at once.

![](https://static.dt.in.th/uploads/2021/01/08/tmp-webrtc2.jpg)

This makes it easier for me to beam files between my Windows, Mac, iPadOS and Android devices.

While `tmp.spacet.me` is built using Next.js, `tmp-webrtc` is built using Vue 3 with Vite, mainly because I’ve never used Vite before, so why not! I don’t like running commands to generate a new project though, so [I shaved that yak and created the Fresh App Factory](https://dev.to/dtinth/freshly-baked-apps-every-midnight-1h99).

Then I deployed this to DigitalOcean App Platform as another app. I got hit by CORS issue, but thankfully DigitalOcean App Platform has the CORS setting right inside the tool. It is very straightforward to configure (unlike S3 where I had to write a JSON configuration).

![](https://static.dt.in.th/uploads/2021/01/07/do-app-platform-cors.png)

**Photopea integration:** Thanks to [Photopea's API](https://www.photopea.com/api/) I can now edit images imported to `tmp.spacet.me` in Photopea. The whole extension is a single [index.html](https://github.com/dtinth/tmp-photopea/blob/master/index.html) file.

**Improved extensions UI:** It’s now possible to delete added extensions 😂.

![](https://static.dt.in.th/uploads/2021/01/08/tmp-ext.png)

With only two days left I think what I have now is good enough for a proof-of-concept, although I think it’s not polished at all. I will spend the remaining two days on documentation and writing up the submission post.
Backend Developers— Our Top Trending Stories of the Week.
Tags: laravel, javascript, beginners, webdev
Published: 2021-01-11 21:15:07

---
title: Backend Developers— Our Top Trending Stories of the Week.
published: true
date: 2021-01-08 15:07:00 UTC
tags: laravel, JavaScript,beginners,webdev
canonical_url: https://medium.com/backenders-club/backend-developers-our-top-trending-stories-of-the-week-f92cba14b792
---

Backend Developers received some amazing content in the past few days. Here, we share our favorites.

Most Favourite of them all this week

[Backend Development: The Ultimate Guide 2021](https://medium.com/backenders-club/backend-development-the-ultimate-guide-2021-6acaf98a432d): Learn everything you need to learn backend development in 2021 from knowing nothing about backend development to getting your first job.

[Laravel Cron: The Definitive Guide](https://medium.com/backenders-club/laravel-cron-the-definitive-guide-b05cfb91a5af?source=collection_home---4------1-----------------------): So you wish to automate some tasks in your newly created application with Laravel, say you want to send out birthday messages, promotional emails or you simply want to optimize and back up your database with Laravel Cron periodically.

[How Tweakpane can help you](https://medium.com/backenders-club/how-tweakpane-can-help-you-3899a3a65956?source=collection_home---4------2-----------------------): In this article, we are going to learn how Tweakpane can help you in fine-tuning your parameters and how you can also monitor value changes.

[5 Must-Have Skills For Developers 2021](https://medium.com/backenders-club/5-must-have-skills-for-developers-2021-e64d91f273cc?source=collection_home---4------3-----------------------): The 5 must-have skills for developers in 2021 gives you an insight into what skills you really need to gain in 2021 as a developer.

[Top 5 Backend Programming Languages:](https://medium.com/backenders-club/top-5-backend-programming-languages-4008aa08f376?source=collection_home---4------5-----------------------) Top 5 programming languages is more of a prediction towards 2021, highlighting the most popular backend programming languages you should…

Thanks for reading these ones

Until next week,

Stay safe.

Solomon Eseme

* * *