teleren/devto huggingface dataset:
How To Use NPM ES Modules With Deno
Tags: deno, beginners, tutorial, codenewbie
Published: 2020-07-23 08:37:38


[Deno](https://deno.land/) has the ability to consume ES modules. Thanks to this, we can utilise Pika's [Skypack CDN](https://www.skypack.dev/) to install and run any of our favourite NPM packages on the CDN that support ES modules!

## Installing a module

In our example, we are going to install and run a short `XState` example in Deno. I will write more on XState in future posts, but for now we are using this as an example of "picking an ESM module from Skypack CDN and getting it going".

First, head to the [Skypack CDN](https://www.skypack.dev/) website and search for your favourite NPM package to see if the corresponding ES module is available.

![Searching XState on the Skypack CDN website](https://github.com/okeeffed/dennisokeeffe-blog/blob/master/content/assets/2020-07-23-skypack-dev.png?raw=true)
<figcaption>Searching XState on the Skypack CDN website</figcaption>

## Running an example

In a new directory, create a new file `touch index.ts` and add the following to the file:

```ts
import { Machine, interpret } from "https://cdn.skypack.dev/xstate"

type State = {
  value: string
}

// Stateless machine definition
// machine.transition(...) is a pure function used by the interpreter.
const toggleMachine = Machine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
})

// Machine instance with internal state
const toggleService = interpret(toggleMachine)
  .onTransition((state: State) => console.log(state.value))
  .start()
// => 'inactive'

toggleService.send("TOGGLE")
// => 'active'

toggleService.send("TOGGLE")
// => 'inactive'
```

The code above it the example "Hello, World!" code found on the XState website with a minor type `State` added and used on the `onTransition` function.

From here, we can simply run the code with `deno run index.ts` and voilà! We have a working XState package!

```s
> deno run index.ts
Compile file:///Users/dennis.okeeffe/Project-Imposter/blog-repos/deno-xstate/index.ts
inactive
active
inactive
```

Rinse and repeat for any ESM packages you can find on the Skypack CDN. Happy coding!

P.S. this is easily my shortest post to date. If you prefer these quick tips, let me know and I will do more as I go along through my work day.

_Image credit: [Brian McGowan](https://unsplash.com/@sushioutlaw)_

_Originally posted on my [blog](https://blog.dennisokeeffe.com/blog/2020-07-23-using-npm-modules-with-deno/). Follow me on Twitter for more hidden gems [@dennisokeeffe92](https://twitter.com/dennisokeeffe92)._
Hosting Workshop at dream platform
Tags: a11y, performance, workshop
Published: 2020-07-23 08:25:37

---
title: Hosting Workshop at dream platform
published: true
description: Excited to host a workshop on 24th July: Intro to Web Accessibility.
tags: a11y, performance, workshop
cover_image: https://navdeepsingh.in/static/b2dc50070b4615a2340952f3244f7645/71d44/navdeep-singh-codelandspeaker.png
---

I am super excited to host a workshop based on web accessibility on my dream platform CodeNewbie in collaboration with DEV.to 

Timing: **24th July: 1:00 pm UTC**
Venue: *Zoom Link (will be shared by organizers)*
Duration: **2-3 hours**

Gonna give hands-on experience on basics of web accessibility aka a11y (a-total 11 chars-y) and my participants will walk away understanding accessibility guidelines, tools, and testing.

Understand what is ARIA-* in your html5 code and what is its use and many more. Our focus in the workshop is to make web site operable i.e it can be used by assistive technologies like screen-readers and make it keyboard accessible.

Hola!! 

Many many things at the workshop. See you there.
Nullish coalescing operator ??
Tags: javascript, codenewbie, node, react
Published: 2020-07-23 08:02:31

It is used when you want to return a default value if left-hand-side value/condition is null or undefined only


Example:

```javascript
const getVal = (target) => {
 return target.value ?? 'default';
};

console.log(
 getVal({ value: 'Hello'}),
 getVal({ value: 0 })
 getVal({ value: ''}),
 getVal({})
);
```

Output: ```Hello 0 default```



It is different from Logical-Or operator, `||`

`||` checks if the left-hand value/condition is falsy



Example:
```javascript
const getVal = (target) => {
  return target.value || 'default'
};

console.log(
  getVal({ value: 'Hello'}),
  getVal({ value: 0 }),
  getVal({ value: ''}),
  getVal({})
);
```

Output: ```Hello default default default```


### DIFFERENCE

`??` returns default when left-hand-value/condition is null or undefined only.

`||` returns default when left-hand-value/condition is falsy.


Note: Older browsers may need a polyfill
Ván MDF Là Gì?
Published: 2020-07-23 07:35:02

 Ván MDF Là Gì?
Ván MDF sử dụng làm nội thất ở mọi nhà,văn phòng công ty. Nhưng không phải ai cũng biết về tính chất vật lý, phân loại ván và tiêu chuẩn ván cũng như quy trình sản xuất ván như thế nào. Bài viết dưới đây phần nào giúp bạn hiểu hơn về loại vật liệu nội thất phổ biến nhất hiện nay.


Ván MDF là loại gỗ nhân tạo làm từ sợi gỗ lấy từ loại gỗ cứng hoặc gỗ mềm liên kết với chất kết dính tạo thành tấm dưới nhiệt độ và áp suất cao.


Tính Chất Vật Lý
- Các thành phần cấu tạo ván mdf thường 80-82% sợi gỗ, 7-9% keo ureformaldehyd, 6-8% nước và 1% sáp parafin. 
- Tỷ trọng 600kg / m3  đến 700 kg / m3, ván có độ dày từ 2,3mm đến 25mm.

Phân Loại Ván MDF
- Ván MDF thường có màu vàng nhạt.
- Ván MDF chống ẩm có màu xanh nhạt lá cây
- Ván MDF chống cháy thường có màu đỏ
- Các loại ván được phân chia theo tiêu chuẩn e2, e1, e0, carb p1, carb p2 theo hàm lượng formaldehyde giảm dần trong ván.

Ván MDF có tác động gì với môi trường?
Chất lượng ván mdf đã được cải thiện nhiều trong những năm qua. Các nhà sản xuất đã giảm dần lượng formaldehyde và tìm nhiều nguồn nguyên liệu thân thiện với môi trường bao gồm các loại gỗ rừng trồng, phế liệu, giấy tái chế, tre, sợi carbon và polyme.
Khi các nhà sản xuất đang bị áp lực phải đưa ra các sản phẩm xanh hơn, họ đã bắt đầu thử nghiệm và sử dụng chất kết dính không độc hại. Nguyên liệu mới đang được giới thiệu. Rơm và tre đang trở thành sợi phổ biến vì chúng là nguồn tài nguyên tái tạo đang phát triển nhanh.

Quan Ngại Độ An Toàn Khi Sử Dụng

Khi MDF cắt ra, một lượng lớn các hạt bụi chứa chất formaldehyde được thải ra không khí. Bạn cần phải đeo mặt nạ phòng độc và vật liệu được cắt trong môi trường được kiểm soát và thông gió. 
>> Nguồn: http://www.vanmdf.info/van-mdf-la-gi
Top 10 perks and benefits in British tech companies
Tags: career
Published: 2020-07-23 07:46:39

![Perks and benefits in the UK](https://dev-to-uploads.s3.amazonaws.com/i/nmo8tq5dfqw9y98hvvvc.jpg)

ITShifing.com [has analyzed](https://itshifting.com/blog/what-perks-and-benefits-do-british-tech-companies-offer-to-their-employees) websites of 180 [tech companies](https://itshifting.com/uk/companies) in the United Kingdom and found out what perks and benefits they offer to their employees.

Health care and retirement plans are the most common benefits: they are mentioned by 71% and 62% of the companies analyzed, respectively. 

This is the share of tech businesses that consider these benefits worth mentioning on their websites — the real percentage might reach 100% as health care insurance and pension plans are among the must-have services that should be offered to all permanent employees.

![Top 10 benefits](https://itshifting.com/photos/content/common-perks.png)

Other popular (50% or more companies) perks and benefits in the UK include annual leave, learning and development opportunities, snacks and drinks, and flexible hours.

Out of 127 companies that **mention health care benefits** on their websites, some also offer:

- Dental coverage — 40%
- Vision coverage, eye test vouchers or paid eye tests — 37%
- Monthly free or subsidized massages, or weekly massages onsite — 8%
- Mental health support/coaching, mental leave or access to an external counselor — 8%
- Yoga sessions/classes in the office or yoga membership — 5%
- Meditation sessions — 2% of companies

Out of 112 companies that mention **annual leaves and holidays**, some also offer:

- 25 days of annual leave — 24%
- Flexible vacation — 13%
- Unlimited vacation — 11%
- Paid sick leave — 10%
- Possibility to buy additional days — 9%
- Annual leave increasing with years of service to 27–30 days — 7%
- Sabbaticals for long service — 4% of companies

Out of 109 companies that mention **learning and development** opportunities, some also offer:

- Training budget — 16% (3 companies specify the annual personal budget: £1,000)
- Attending conferences — 16%
- Access to the office library and professional books — 13%
- Tuition reimbursement — 11%
- Certification support — 8%
- Language courses — 2% of companies

Out of 103 companies that mention **snacks and drinks** as their perks, some also mention:

- Kitchen, canteen or café in the office — 34%
- Coffee — 29%
- Fruit — 26%
- Beer — 14%
- Tea — 14%
- Catered lunches — 13% of companies

Out of 93 companies that mention **flexible hours**, 22% also mention work from home or remote work opportunities. 

Out of 60 companies that mention **sports**, 39% mention corporate gym membership of gym reimbursement, 13% mention ping pong, and 7% table tennis. Surprisingly, football is favored by only two companies.

Less common perks include Cycle to Work scheme, stock options, commuter benefits, volunteer days off, and more.

Source: [ITShifting.com](https://itshifting.com/blog/what-perks-and-benefits-do-british-tech-companies-offer-to-their-employees)
Things to Know While Migrating From Magento 1 to Magento 2

Tags: magento2migrationservices, magento2upgradeservices, magentodevelopmentcompany, hiremagentodeveloper
Published: 2020-07-23 07:35:44

With the same vision, Magento 2 was introduced in 2015 as an upgraded system above Magento 1. Recently, it was announced that Magento 1 will no longer be supported by Magento after June 2020, which did create a stir among people. 

This particular news made Magento eCommerce site holders think about Magento 1 to <a href="https://rocktechnolabs.com/magento2-migration-service/">Magento 2 Migration</a>.
Gỗ Ghép Tràm TPHCM
Published: 2020-07-23 07:33:53

QUY CÁCH GỖ GHÉP TRÀM

Gỗ ghép tràm được sản xuất theo kích thước  là 1200m x 2400mm, 1000mm x 2000mm với các độ dày từ 8mm, 10mm, 12mm, 15mm, 17mm, 25mm, tiêu chuẩn AA, AC, BC và CC .

Gỗ ghép tràm được sản xuất từ gỗ tràm tự nhiên chủ yếu được trồng ở vùng duyên hải miền trung, Tây Nguyên và Đông Nam Bộ. Gỗ tràm được cắt thành các thanh gỗ theo yêu cầu qua công đoạn hấp sấy, bào, phay, cắt ghép, ép, chà nhám và phủ gia công bề mặt các vật liệu như keo bóng, veneer hoặc melamine để hoàn thiện thành phẩm theo yêu cầu.

PHƯƠNG THỨC SẢN XUẤT VÀ TIÊU CHUẨN GỖ TRÀM GHÉP

Gỗ tràm ghép được sản xuất theo 2 cách: 

+ Gỗ tràm ghép song song gồm nhiều thanh gỗ tràm cùng chiều dài, có thể khác chiều rộng, ghép song song với nhau. 

+ Gỗ tràm ghép mặt gồm nhiều thanh gỗ tràm ngắn, ở hai đầu thanh gỗ tràm ghép được xẻ theo hình răng cưa (finger joint) cho nên gỗ tràm ghép theo dạng này  thấy hình răng cưa trên bề mặt.

Gỗ tràm ghép được sản xuất các tiêu chuẩn:

+ Gỗ tràm ghép chuẩn AA có bề mặt đẹp, không có mắt hư, bề mặt đồng màu, vân đen sang trọng nên thường được ứng dụng làm nội thất kiểu cổ điển.

+  Gỗ ghép tràm chuẩn AC có bề mặt A đẹp tuyệt đối, mặt C có mắt hư nên thường dấu mặt này vào trong khi gia công sản xuất như  tủ bếp, kệ lưu trữ, mặt bàn, lót sàn, lót gác. 

+ Gỗ ghép tràm chuẩn BC hoặc CC chủ yêu để làm vật liệu xây dựng vì không có giá trị để làm nội thất. BC hoặc CC thường phủ lớp mỹ thuật như veneer, melamine hoặc PVC để tang hiệu quả kinh tế.
Gỗ ghép tràm chuẩn AA

Gỗ ghép tràm chuẩn AA

ỨNG DỤNG GỖ GHÉP TRÀM

Gỗ tràm ghép được sử dụng rộng rãi trong sản xuất đồ gỗ nội thất, gỗ mỹ nghệ, phổ thông nhất là các loại bàn ghế, tủ bếp, kệ gỗ, ván sàn, ván lót gác, vật liệu xây dựng… được làm từ gỗ ghép tràm, không những mang đến độ bền cho sản phẩm mà các thanh gỗ được ghép với nhau tạo thành hoa văn lạ mắt có tính thẩm mỹ cao.
Tại kho ván gỗ tràm ghép Trần Lai luôn có sẵn hàng với thông số kỹ thuật như sau:

Kích thước: 1000mm x 2000mm, 1200mm x 2400mm, độ dày ván: 8mm, 12mm, 15mm, 18mm, 20mm, 22mm, 25mm, dung sai kích thước  ván: ±1mm. Tiêu chuẩn bề mặt: đạt tiêu chuẩn aa, ac, bc, cc, độ phẳng cao, bề mặt không trầy xước, nứt nẻ, sọc nhám, các mối ghép gắn khít tốt, không hở, không xì keo.

>> Nguồn: http://www.vanmdf.info/go-ghep-tram
Bảng Giá Gỗ Ghép Cao Su, Gỗ Ghép Thông, Gỗ Ghép Tràm
Tags: goghepcaosu, goghepthong, gogheptram
Published: 2020-07-23 07:30:55

BẢNG GIÁ GỖ GHÉP (gỗ ghép thông, gỗ ghép tràm, gỗ ghép cao su) 2020
(Đơn giá áp dụng cho đơn hàng trên 15 tấm)

+ BẢNG GIÁ GỖ GHÉP CAO SU

Gỗ ghép cao AB 10MM: 465.000/ tấm 
Gỗ ghép cao AC 10MM: 455.000/ tấm 
Gỗ ghép cao AB 12MM: 490.000/ tấm 
Gỗ ghép cao AC 10MM: 480.000/ tấm 
Gỗ ghép cao AB 17MM: 620.000/ tấm 
Gỗ ghép cao AC 17MM: 575.000/ tấm 
Gỗ ghép cao AB 18MM: 630.000/ tấm 
Gỗ ghép cao AC 18MM: 585.000/ tấm 

Gỗ ghép cao su CC 10MM phủ 1 mặt xoan: 415.000/ tấm 
Gỗ ghép cao su CC 10MM phủ 2 mặt xoan: 480.000/ tấm 
Gỗ ghép cao su CC 10MM phủ 1 mặt sồi: 450.000/ tấm 
Gỗ ghép cao su CC 10MM phủ 2 mặt sồi: 550.000/ tấm 
Gỗ ghép cao su CC 18MM phủ 2 mặt xoan: 595.000/ tấm 
Gỗ ghép cao su CC 18MM phủ 2 mặt sồi: 705.000/ tấm 

+ BẢNG GIÁ GỖ GHÉP TRÀM

Gỗ ghép tràm 12MM (1,2m x 2,4m): 460.000 / tấm
Gỗ ghép tràm 12MM (1m x 2m): 490.000 / tấm
Gỗ ghép tràm 15MM (1,2m x 2,4m): 460.000 / tấm
Gỗ ghép tràm 15MM (1m x 2m): 410.000 / tấm
Gỗ ghép tràm 17MM (1,2m x 2,4m): 570.000 / tấm
Gỗ ghép tràm 25MM (1m x 2m): 860.000 / tấm

+ BẢNG GIÁ GỖ GHÉP XOAN MỘC

Gỗ ghép xoan mộc 12MM AA: 530.000 / tấm
Gỗ ghép xoan mộc 12MM AC: 480.000 / tấm
Gỗ ghép xoan mộc 15MM AA: 615.000 / tấm
Gỗ ghép xoan mộc 15MM AC: 540.000 / tấm
Gỗ ghép xoan mộc 17MM AA: 675.000 / tấm
Gỗ ghép xoan mộc 17MM AC: 555.000 / tấm

+ BẢNG GIÁ GỖ GHÉP THÔNG

Gỗ ghép thông 12MM AA: 565.000 / tấm
Gỗ ghép thông 12MM AC: 545.000 / tấm
Gỗ ghép thông 17MM AA: 695.000 / tấm
Gỗ ghép thông 17MM AC: 655.000 / tấm

+ BẢNG GIÁ PHỦ GIA CÔNG BỀ MẶT GỖ GHÉP

- Phủ veneer xoan 0,3MM 1 mặt: 75.000/mặt
- Phủ veneer sồi 0,3MM 1 mặt: 105.000/mặt
- Phủ keo bóng: 40.000 /mặt

>> Nguồn: http://www.vanmdf.info/bang-gia-go-ghep-cao-su-go-ghep-thong-go-ghep-tram-2020
How to Hire a Dedicated Magento Developer

Tags: hiremagentodevelopers, magento2upgradeservices
Published: 2020-07-23 07:28:43

Hiring Magento expert for your Magento based eCommerce platform will provide several benefits and even lessen your burden. But the process of choosing the right person is a monotonous task as there are several points that one needs to keep in mind.

Visit here:- <a href="https://rocktechnolabs.com/hire-dedicated-magento-developer/">Hire Magento Developers</a>
rsync - 10 examples in 11 days (Day 07)
Tags: linux, bash, rsync, tutorial
Published: 2020-07-23 07:23:28

# Day 07

> 10 examples in 11 days

## Sync Local to Remote over SSH

Today I will talk about how we can sync files from our local machine to our remote machine using **ssh**.

I have a remote machine where I will be connecting to. I use ssh with a public and private key to connect to it and this way I will not have to be asked for a password.

> Note: I will not show the local nor remote machines IP. Instead I will always display 111.111.111.111 IP as remote and 222.222.222.222 as local

I have a folder called _~/backup-to-upload/_. Inside of this folder I store the latest backup file as a _.tar.gz_. This file will be sitting there waiting for me to **rsync** it into my remote machine. Once I have upload the _tar_ backup, it gets deleted leaving the _~/backup-to-upload/_ folder empty.

Let's see the syntax:

```
iamgroot@laptop:~$ rsync (1)--progress (2)--remove-source-files (3)-vhre (4)ssh (5)[backup file to upload] (6)iamgroot@111.111.111.111:(7)[remote backup folder]/
```

Let's see what the above syntax does:

1. **--progress**: shows progress while synching
2. **--remove-source-files**: after transfer it will remove source file
3. I used **-vhre**

   - **-v**: verbose
   - **-h**: human readable
   - **-r**: recursive
   - **-e**: allows us to use ssh as remote shell and execute its commands

4. **ssh**: invoking the _ssh_ service to be used as remote shell.
5. backup file to upload with full path
6. ssh connection
7. remote folder

> Note: If the remote folder doesn't exist it will be created

Let's see what I have at my remote machine before we run the rsync command

```
iamgroot@remote-instance:~$ ls
scripts
```

Now let's upload our tar file to the remote machine

```
iamgroot@laptop:~$ rsync --progress --remove-source-files -vhre ssh /home/iamgroot/backup-to-upload/backup.tar.gz  iamgroot@111.111.111.111:backups/
sending incremental file list
backup.tar.gz
            195 100%    0.00kB/s    0:00:00 (xfr#1, to-chk=0/1)

sent 295 bytes  received 43 bytes  75.11 bytes/sec
total size is 195  speedup is 0.58
```

Checking if the tar backup file got removed from source

```
iamgroot@laptop:~$ ls -a backup-to-upload/
.  ..
```

Empty!!!

Now let's check on the remote machine and first I will check if the folder backups was created and then if it has our backup.tar.gz

```
iamgroot@laptop:~$ ssh iamgroot@111.111.111.111
Last login: Thu Jul 23 00:38:46 2020 from 222.222.222.222
iamgroot@remote-instance:~$ ls
backups  scripts
iamgroot@remote-instance:~$ ls -a backups/
.  ..  backup.tar.gz
```

As you can see, it not just created the backups folder, it uploaded our tar file.

Awesome, another example accomplished!

---

Ok, that'll be for today's example, thanks for reading, ping me if you need any help!!!

Follow, ❤ or 🦄
Ome-i For Random Video Chatting
Tags: omei
Published: 2020-07-23 07:16:50

If you are looking at the website which is an alternative of omegle ( https://omegle.co.com/ ) and Chatroulette then check out ome-i. Ome-i is a popular platform for random video talk with a stranger person. You can begin the chat without registration account. The video chatting process is atop much easy and many filter options available for more making more enjoyable video calls. https://ome-i.com/
🤔 What are the best resources for starting an opensource project?
Tags: discuss, help
Published: 2020-07-23 07:15:16

---
title: 🤔 What are the best resources for starting an opensource project? 
published: true
description: 
tags: discuss, help
//cover_image: https://direct_url_to_image.jpg
---
I'm trying to kick off a couple of projects in the Codú Discord but just want to make sure I have some community/OSS standards in place.

What's the place/resources you have found on starting an opensource software project?

Thanks!
Day 10-Insufficient Logging and Monitoring Tryhackme OWASP Top 10 Challenge
Tags: tryhackme
Published: 2020-07-23 07:03:05

[Task 31] [Day 10] Insufficient Logging and Monitoring 

#1 What IP address is the attacker using?
Answer> 49.99.13.16

#2 What kind of attack is being carried out?
Answer> brute force

Explanation:

As you see in the given login log file status-code is client-side error code (401) Unauthorised attempting with this IP address 49.99.13.16 and continuously attempting for user login in a short sequence of time which means some automated tools (like brute-force) Trying combinations of usernames and passwords to gain access to users’ accounts.
Detecting and fixing ANR in android apps
Tags: android, anr, java, kotlin
Published: 2020-07-23 06:26:16

To fix ANR issues, the most effective way is to make sure all the resource intensive operations, especially those that are expected to take more than 16 milli seconds per frame be delegated to worker threads.

Read more on how to detect and fix ANR in android apps here - https://www.blog.finotes.com/post/how-to-detect-and-fix-anr-in-android-apps

Update: A new blog on the topic is available at https://www.blog.finotes.com/post/detecting-and-fixing-anr-in-android-apps. This provides more insights into how to pinpoint the exact root cause of ANR in android apps.
Laravel 7 Rest Api Authentication with Passport
Published: 2020-07-23 06:09:25

**Laravel 7 rest api authentication**. Here, you learn how to create restful APIs with passport authentication.

As well as, learn how to install passport auth in your laravel application and configure passport auth with laravel app.
 
Then, you will learn how to create restful authentication APIs using passport in laravel tutorial.

This laravel 7 passport authentication tutorial will guide on how to install passport & configure passport in laravel app. And implement a restful authentication APIs with passport in laravel app.


### Laravel 7 Rest Api Authentication with Passport Tutorial

Follow the below following steps and create RESTful authentication APIs in laravel apps with passport:

1. Step 1: Install Fresh Laravel Setup
1. Step2: Configure Database Details
1. Step 3: Install Passport Packages in Laravel
1. Step 4: Run Migration and Install Passport Auth
1. Step 5: Passport Configuration
1. Step 6: Create APIs Route
1. Step 7: Create Controller & Methods
1. Step 8: Now Test Laravel REST API in Postman

Checkout full article here [https://www.tutsmake.com/laravel-7-6-rest-full-apis-with-passport-authentication/](https://www.tutsmake.com/laravel-7-6-rest-full-apis-with-passport-authentication/ "https://www.tutsmake.com/laravel-7-6-rest-full-apis-with-passport-authentication/")
VSCode Keyboard Shortcut
Tags: vscode
Published: 2020-07-23 05:58:51

`ctrl + d` select word, select next word เลือกคำ
`ctrl + l` select line เลือกทั้งบรรทัด
`ctrl + shift + [` or `ctrl + shift + ]` fold/unfold พับเก็บ

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

https://www.youtube.com/watch?v=QkewBB_HOh4
Build a desktop app using HTML/CSS/JS & Electron
Tags: javascript, electron, tutorial
Published: 2020-07-23 05:56:03

If you know how to build a website you can build desktop app’s with the Electron framework.

As an introduction to the framework we’ll create a simple desktop clock application.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wfltqo9l0qint9o6t4pj.gif)

Before getting started it’s recommended to have a current version of [node.js](https://nodejs.org/en/) installed.

Ok, first let’s create the folder/file structure required for this project:

```
electron-test/
├─ package.json
├─ index.js
├─ index.html
├─ script.js
├─ style.css
```
##package.json

This file Indicates which command to run when we start the application:

```
{
  "name": "electron-test", 
  "main": "index.js",  
  "scripts": {
    "start": "electron ."
  }
}
```

Note: Don’t use `"name": "electron"` or the Electron installation will fail.

##Install Electron

Open up a new terminal window in the project folder and then run the install:

```
npm install --save-dev electron
```

This downloads all the required node modules and adds the dev dependency to our package.json.

##index.js

This file is used to create windows and handle system events.

For our clock app we’ll create a small (190×80) fixed size browser window:

```javascript
const { app, BrowserWindow } = require("electron");

app.whenReady().then(createWindow);

function createWindow() {
  const win = new BrowserWindow({
    width: 190,
    height: 80,
    resizable: false,
  });
  win.loadFile("index.html");
}
```

##index.html

Very basic HTML file that loads the CSS and JS for the the clock functionality:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Clock App</title>     
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
```

##script.js

Fetch’s the current time and updates it each second (1000 milliseconds) in the index.html.

```javascript
function getTime() {
  time = new Date().toLocaleTimeString();
  document.body.innerHTML = time;
}
setInterval(getTime, 1000);
```

##style.css

Lastly the CSS to improve the appearance of our clock:

```css
body {
  font-family: monospace;
  font-size: 32px;
  background-color: black;
  color: greenyellow;
  text-align: center;
}
```

The `monospace` font prevents the clocks position shifting when the numbers change.

##Start the application

We can now start our application by running the following command:

```
npm start
```