teleren/devto huggingface dataset:
Why Lodash?
Tags: lodash, javascript
Published: 2023-03-18 08:43:02


**lodash**는 현재 회사의 온보딩 교육 과정에서 처음 접했던 라이브리러리 였다. 

회사의 기술 스택을 전반적으로 경험해 볼 수 있는 프로젝트 였는데, 시니어 개발자 분께서 프론트엔드에서 가장 널리 쓰이고 있는 것이니, 꼭 익숙해지라고 하셨던 생각이 난다.

아래 설문조사에 따르면, lodash가 1위를 차지한 것을 볼 수 있다.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz6qlzt61fuq0okzvmoo.png" alt="image" width=250>

출처: https://2022.stateofjs.com/en-US/other-tools/


이젠 필수가 되어버린 lodash를 쓰며 느낀 장점들을 써보려고 한다.

**1. 코드의 가독성이 좋아진다**
- 함수 이름이 직관적이고, 코드를 간결하게 쓸 수 있기 때문에 그 흐름이 비교적 쉽게 이해된다.
```javascript
_.uniq([1, 1, 2]); // [1, 2]
_.intersection([2, 1], [2, 3]); // [2]
```
**2. native 함수에서 가능하지 않았던 것들이 가능해진다.**

- 예를 들어, native javascript의 `.forEach()`, `.map()`같이 Array에서만 가능했던 method들에 Object type도 적용할 수 있다.
- 함수의 확장성이 높아져서 그 활용도가 높다는 것이다.

```javascript
const person = {
 name: 'Jenny',
 age: 20,
 hasDog: true
}

_.forEach(person, (value, key) => console.log(value));
// 'Jenny'
// 20
// true

_.forEach(person, (value, key) => console.log(key));
// name
// age
// hasDog
```
개인적으로 가장 큰 장점이라고 느꼈던 부분이다.🤩

일하면서 가장 자주 썼던 함수들은 **native함수에서 복잡하게 구현하지 않아도 되는 것들**이다.
- `_.filter()`
- `_.clone()` / `_.cloneDeep()`
- `_.isEqual()`
- `_.remove()`
- `_.orderBy()`
- ...

아래 항목들은 구글링으로 찾아본 장점들이다.

**3. Cross-browser compatibility**
- **브라우저에 상관없이 동일하게 동작**하기 때문에 호환성 이슈를 신경쓰지 않아도 된다. 

**4. 에러 처리에 있어 안전하다.**

[native JS]
```javascript
const products = [
{code: ‘00123’,name: ‘Milk’ },
{code: ‘01020’,name: ‘Bread’ },
{code: ‘12232’,name: ‘Eggs’ },
]

const productCodes = products.map(product => product.code)

// productCodes -> [‘00123’, ‘01020’, ‘11232’]
```

- 이 때, `products`가 항상 Array 타입을 유지한다는 보장이 없다면?
👉 `productCodes`는 Error를 발생시키게 된다.

```javascript
const products = await SomeAPI.fetchProducts() //-> null

const productCodes = products.map(product => product.code)
//-> Uncaught TypeError: Cannot read property 'map' of null
```

lodash의 `_.map`을 사용한다면?

```javascript
const productCodes = _.map(products, product => product.code)
```

`products`가 `null` or `undefined` 이어도 `_.map`을 사용했기 때문에 empty Array를 return하게 된다.

API로 부터 정상적인 값을 받지 못해도, `productCodes`가 Array type으로 유지 되기 때문에 에러가 발생하진 않는다.

---

구글링 하면서 보다 보니, 굳이 lodash를 사용하지 않아도 된다는 의견의 글들도 여럿 보았다. ([관련 링크](https://thejs.dev/jmitchell/its-time-to-let-go-of-lodash-nqc))

이미 너무 익숙해져 버린 lodash... 자주 사용하는 method만 계속 쓰는 습관이 있는데 이외에도, 더 유용한 method들이 있다면 적극 사용하도록 노력해야겠다.
Why choose postgreSQL
Tags: postgres, apacheage, database
Published: 2023-03-15 18:45:11

PostgreSQL is an advanced open-source relational database management system that has been gaining popularity in recent years. It is known for its scalability, extensibility, and robustness, making it a popular choice for a wide range of applications. In this article, we will explore the advantages of PostgreSQL over other database systems.

**Open-source and Free**
PostgreSQL is an open-source database system that is available for free. This means that developers can use, modify, and distribute the software without any licensing fees. This makes it an affordable option for small businesses and startups.

**Scalability**
PostgreSQL is known for its ability to handle large amounts of data and users. It is designed to handle high concurrency and is known to perform well even when multiple users are accessing the database simultaneously. Additionally, PostgreSQL has built-in support for horizontal scaling, which means that it can distribute data across multiple servers to handle even more load.

**Extensibility**
PostgreSQL has a modular architecture that allows developers to extend its functionality. It supports a wide range of extensions and plugins, making it easy to add features such as full-text search, geographic information systems (GIS), and JSON support. Additionally, developers can create custom data types, operators, and functions, which provides a high level of flexibility.

**ACID Compliance**
PostgreSQL is ACID (Atomicity, Consistency, Isolation, and Durability) compliant. This means that it ensures data consistency and integrity, even in the presence of hardware failures, power outages, or network issues. It guarantees that transactions are either fully committed or fully rolled back, preventing data corruption and inconsistencies.

**Data Security**
PostgreSQL has several built-in security features that ensure the safety of the data stored in the database. It supports SSL encryption for secure communication, row-level security, and column-level security, which restricts access to data based on user permissions. Additionally, PostgreSQL supports role-based access control, which enables administrators to grant different levels of access to different users.

**Cross-platform Support**
PostgreSQL is a cross-platform database system that runs on a wide range of operating systems, including Windows, Linux, and macOS. This makes it easy to deploy the database system in different environments and reduces the need for platform-specific expertise.

**Community Support**
PostgreSQL has a large and active community of developers and users who contribute to its development, support, and documentation. The community provides regular updates, bug fixes, and new features, making it a reliable and stable database system.

In conclusion, PostgreSQL is a robust, reliable, and flexible database system that offers several advantages over other database systems. Its open-source nature, scalability, extensibility, ACID compliance, data security, cross-platform support, and community support make it a popular choice for a wide range of applications.
The React documentation has been revamped!
Published: 2023-03-18 07:43:41

It's been a long time coming. 

The old site reactjs.org now redirects to legacy.reactjs.org/docs/ and the new site can be found at https://react.dev/.

The react documentation feels a lot more modern and includes the react hooks as well as using functional components compared to class components- the more modern way to use react. 

Also like any good dev website, they have light/dark mode 😂

What do you think of the new docs?
PNPM: The Performant Package Manager for JavaScript
Published: 2023-03-18 07:18:00

PNPM is a package manager used for managing JavaScript packages. Unlike other popular package managers such as NPM and Yarn, it uses symbolic links to reduce disk space usage.

📦 **Disk space usage: **npm downloads and stores a separate copy of each package, which can quickly take up a lot of disk space. PNPM, on the other hand, stores packages in a single location and uses symbolic links to share them across projects, reducing disk space usage.

🔗 **Symbolic links:** PNPM uses symbolic links to share packages between projects, whereas npm downloads a separate copy of each package for each project. This makes PNPM more efficient in terms of disk space and installation times.

⏱️ **Installation times:** PNPM's use of symbolic links means that installation times are generally faster than with npm.

💻 **Community support:** npm has a larger community and is more widely used, meaning that there is more documentation and support available. PNPM is gaining popularity quickly but is still newer than npm.

As for where the name **PNPM** comes from, it stands for "**Performant NPM.**" The goal of **PNPM** is to improve on some of the issues faced by other package managers like npm and Yarn, including disk space usage and installation times.

Now, here's a re-written explanation of how to migrate a project to PNPM with emojis on each line:

🚀 **To migrate your project to PNPM:**

📥 Install PNPM using npm or yarn by running the following command in your terminal:

```
npm install -g pnpm
```

🔑 #npm #pnpm #yarn

📂 Navigate to your project directory and run the following command to install all dependencies listed in the package.json file:

```
pnpm install

```

📦 #dependencies #packagejson

🔍 Delete the package-lock.json or yarn.lock files in your project directory. These files are not needed as PNPM manages dependencies using symbolic links.
🔗 #symboliclinks #packagelockjson #yarnlock

🚀 Finally, to run your project, use the following command:

```
pnpm start

```



🚀 #start #run #pnpm
Animation -8 : CSS Moon loader with color effect
Tags: css, webdev, design, animation
Published: 2023-03-18 07:13:22

Are you looking for animations to enhance your website? We've got you covered with our wide selection of creative and engaging #animations. Say goodbye to endless searching and hello to seamless integration on your website!

#### We're excited to introduce our latest YouTube series, which features diverse creative and inspiring website animations.

---

In our short videos, you'll find a variety of #animations that can be easily implemented on your website to enhance user experience.


---

### CSS Moon loader with color effect 

---

{% youtube xa9i2SVnHro %}

 ---
### [Source code](https://democoding.netlify.app/loaders/css-moon-loader-with-color-effect)


---
## 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/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
The Weekend Coder: What's Your Favorite Drink to Power through Coding Sessions? ☕🥤💻
Tags: discuss, beginners, codenewbie, motivation
Published: 2023-03-18 07:00:00

We all know how challenging it can be to stay focused and energized during long coding sessions, long workdays, and long study sessions. So, let's hear it: what's your go-to drink when you need a little pick-me-up to power through? Is plain old black coffee or more like a Black Cherry Vanilla Bang? Maybe it’s a healthier option like green tea 🍵 or a smoothie 🍓🍌.

Share your favorite drinks, recipes, or tips for staying energized and productive!
How to forward a text message (SMS) from an android phone into your webhook
Tags: android, webhook, phone, opensource
Published: 2023-03-18 06:50:31

You can now program your android phone to forward messages received on your phone to your server and trigger powerful automations with tools like zapper and IFTTFT. I created an open source application called [httpSMS](https://httpsms.com) that helps you to set this up with ease

## Step 1: Get your API_KEY

Create an account on the httpSMS web application and copy your API key from the settings page. https://httpsms.com/settings

![httpsms.com settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfn9o4mp7ki6k166fx7o.png)



## Step 2: Install the httpSMS android app

Install the [httpSMS](https://github.com/NdoleStudio/httpsms/releases/latest/download/HttpSms.apk) android app on your phone and sign in using your API KEY which you copied above. This app listens for SMS messages received on your android phone. https://github.com/NdoleStudio/httpsms/releases/latest/download/HttpSms.apk


![httpsms android app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og8ctw89jmbha7riwvj4.png)



## Step 3: Set up a webhook

Once the appliation has been installed, it will be listening for SMS messages received on the android phone. You can configure the application to sent this SMS message to your server URL using a webhook. You can configure this URL under the settings page in the httpSMS application https://httpsms.com/settings


![httpSMS webhook configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meiddq18bcrvgk5j1bne.png)



## Conclusion 

Congratulations, you have successfully set up SMS forwarding from your Android phone to a webhook! This powerful automation tool can help you streamline your business workflow and save you time and effort.

You can also trigger the httpSMS application to send an SMS a simple API. You can find more information on the documentation page at https://docs.httpsms.com
This week’s newsletter is out! (18-03-2023) - Probably Dead
Tags: javascript, tech, webdev, discuss
Published: 2023-03-18 06:39:46

---
title: This week’s newsletter is out! (18-03-2023) - Probably Dead
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Probably Dead

https://markjgsmith.substack.com/p/mark-smiths-newsletter-18-03-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Peter
Published: 2023-03-18 06:38:48

[https://www.bankfanz.com/first-bank-transfer-code/](https://www.bankfanz.com/first-bank-transfer-code/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)

https://plaza.rakuten.co.jp/firstbankcode001/diary/202303180000/
https://peatix.com/user/16454847/
https://www.provenexpert.com/what-is-firstbank-transfer-code-2023/
https://www.producthunt.com/@firstbank01
https://www.divephotoguide.com/user/Firstbanktranfercode1
https://wakelet.com/@Whatisfirstbanktransfercode2023389
https://vocal.media/authors/what-is-firstbank-transfer-code-2023
https://www.lifeofpix.com/photographers/firstbanktranfercode1/
https://seedandspark.com/user/what-is-firstbank-transfer-code-2023
https://rosalind.info/users/Firstbanktransfercode1/
http://phillipsservices.net/UserProfile/tabid/43/userId/206585/Default.aspx
https://app.roll20.net/users/11748452/what-is-firstbank-transfer-c
https://speakerdeck.com/firstbankcode1
https://social.msdn.microsoft.com/Profile/What%20is%20firstbank%20transfer%20code%202023%201
https://camp-fire.jp/profile/Firstbanktransfercode1
https://plazapublica.cdmx.gob.mx/profiles/Firstbankcode1/activity
https://www.metal-archives.com/users/Firstbanktranfercode1
https://storium.com/user/firstbanktransfercode1
https://trabajo.merca20.com/author/firstbanktransfercode1/
https://www.intensedebate.com/people/Firstbankcode1
https://www.mifare.net/support/forum/users/firstbanktranfercode1/
https://pinshape.com/users/2595391-firstbank1
http://foxsheets.com/UserProfile/tabid/57/userId/124609/Default.aspx
https://www.kompasiana.com/firstbankcode1
https://leanin.org/circles/what-is-firstbank-transfer-code-1
https://www.credly.com/users/what-is-firstbank-transfer-code/badges
https://www.myminifactory.com/users/Firstbanktranfercode1
https://www.sqlservercentral.com/forums/user/firstbanktransfercode1
https://www.longisland.com/profile/Firstbanktransfercode1
https://guides.co/a/firstbank-transfer-code
https://myanimelist.net/profile/Firstbankcode1
Du an Avatar Thu Duc gia 2.7 ty
Published: 2023-03-18 06:30:05

Tiếp nối thành công chuỗi căn hộ Moonlight tại Thủ Đức là Moonlight Residences và gần đây nhất là Moonlight Avenue, cùng các dự án căn hộ chung cư trong khu vực như Lavita Garden, Lavita Charm. Hưng Thịnh tiếp tục giới thiệu đến khách hàng trong tháng 3.2023 dự án căn hộ chung cư Avatar Thủ Đức.

[Avatar Thủ Đức](https://avatarthuducc.com) là tổ hợp căn hộ gồm 6 block cao 33 tầng tại vị trí mặt tiền Vành Đai 2, phường Trường Thọ, Thành phố Thủ Đức.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz84nyam27ccbil0t2f9.jpg)
Dự án căn hộ Avatar Thủ Đức Hưng Thịnh quy mô gồm 6 block cao 33 tầng, có vị trí đắc địa ngay mặt tiền đường Song Hành, TPHCM. 
Tên gọi Avatar Thu Duc mang thông điệp của Hưng Thịnh Land khi giới thiệu về một dự án mang tính biểu tượng cung cấp giải pháp cho cách tiếp cận ngôi nhà đầu đời; là dòng sản phẩm đại diện cho không gian sống đậm chất Millennials: Hiện đại – Trẻ trung – Năng động – Kết nối – Năng lượng – Cân bằng ngay tại trung tâm thành phố trẻ Thủ Đức.
Tọa lạc ngay mặt tiền đường Vành Đai 2 – tuyến đường bộ đô thị cấp 1 vòng tròn tại Thành phố Hồ Chí Minh dài 70 km đi qua các Quận 7, 8, 12, Bình Tân, Bình Chánh và Thủ Đức; tiếp giáp với giao lộ Xa lộ Hà Nội và cách nhà ga Metro Bến Thành – Suối Tiên 1 khoảng 15 phút đi bộ, ngay khu vực cửa ngõ đi Bình Dương, Đồng Nai, Avatar Thu Duc sở hữu yếu tố tiên quyết tạo nên giá trị của Bất động sản, đó là vị trí đắc địa ngay Trung tâm Hành chính mới Khu Trường Thọ – thủ phủ của thành phố mới Thủ Đức thuộc TPHCM.
Dự án được quy hoạch hướng đến đầy đủ các tiện ích nội khu như: trung tâm thương mại, cụm rạp chiếu phim, công viên, sân chơi trẻ em, khu vực BBQ, sân thể thao đa năng, hồ bơi dài 50m, jacuzzi, khu sinh hoạt cộng đồng, khu café, đọc sách, yoga, gym… Bên cạnh đó, cư dân sinh sống tại Avatar Thu Duc còn được tận hưởng những tiêu chuẩn sống hiện đại với các tiện ích, dịch vụ ngoại khu nổi bật như hệ thống trường học sở tại đầy đủ cấp học từ mầm non đến THPT, trong bán kính 3-5km, cư dân Avatar Thu Duc có thể đến các trung tâm thương mại lớn của khu vực như Giga Mall, Nguyễn Kim, Coo.op, chợ đầu mối Thủ Đức. Dự án cũng dễ dàng kết nối với Công viên Tam Phú, Khu công nghệ cao, KCN Sóng Thần, Suối Tiên, Công viên Lịch sử – Văn hóa Dân tộc…

Liên Hệ Chúng Tôi:
Địa Chỉ: Phường Trường Thọ, Thành phố Thủ Đức, Thành phố Hồ Chí Minh
Hotline: 0905753286
Website: [https://avatarthuducc.com/](https://avatarthuducc.com/)
Twitter: [https://twitter.com/avatarthuducc/](https://twitter.com/avatarthuducc/)
Linkedin: [https://www.linkedin.com/in/avatarthuducc/](https://www.linkedin.com/in/avatarthuducc/)
Printerest: [https://www.pinterest.com/avatarthuducc/](https://www.pinterest.com/avatarthuducc/)
The Power of AI in Cyber Security Solutions for Startups
Tags: startup, machinelearning, cybersecurity, ai
Published: 2023-03-18 02:17:09

As the threat landscape of cyber security continues to evolve, traditional security solutions may no longer be enough to protect organizations from sophisticated attacks. This is where Artificial Intelligence (AI) comes into play. AI can analyze vast amounts of data, identify patterns, and quickly respond to emerging threats, making it a powerful tool in the fight against cyber crime. By leveraging the power of machine learning algorithms and advanced analytics, AI can help organizations detect and respond to cyber threats in real-time, and even predict potential vulnerabilities before they can be exploited. For startups in the cyber security industry, incorporating AI technology into their solutions can give them a competitive edge and help them stay ahead of the curve in the rapidly changing threat landscape. In this context, understanding the latest developments in AI-based cyber security and developing innovative solutions can be key to success in the industry.
Five Figma tricks to save time
Tags: figma, tutorial, figmatips, beginners
Published: 2023-03-18 06:20:07

{% youtube uN1PHVQSV8U %}

Hi guys, I hope you have a good day. We always need some tips for our work that will help us increase the speed of our work. I hope you like it.
1. Easily use Auto Spacing
2. Resize quickly
3. The magic of Figma's colour
4. Easily rename the frames
5. Easy to use auto-layout

For more information, you can watch the video I made, and if it was useful for you, please support me by liking and subscribing.
TINYMCE Editor with angular
Tags: angular, javascript, webdev, frontend
Published: 2023-03-18 06:14:59

**tinymce** editor is paid editor to use in our application. tinymce has many toolbar, plugins, and events to use in our application. today we add in our angular app.

## Setup and installation 

```
import { NgModule } from '@angular/core';

import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { EditorModule } from '@tinymce/tinymce-angular';


import { TinyEditorComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, EditorModule ],
  declarations: [ TinyEditorComponent ],
  providers: [],
  bootstrap:    [ TinyEditorComponent ]
})
export class AppModule { }


```

## Setup editor configuration

```
import {
  Component,
  AfterViewInit,
  EventEmitter,
  OnDestroy,
  Input,
  Output,
} from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'tinymce-editor',
  template: `<textarea id="editor"></textarea>`,
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  @Output() onEditorContentChange = new EventEmitter();

  editor;

  ngAfterViewInit() {
    tinymce.init({
      selector: '#editor',
      plugins: ['link', 'table'],
      skin_url: 'assets/skins/lightgray',
      setup: (editor) => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      },
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
```

## Add editor event

```
  ngAfterViewInit() {
    tinymce.init({
      selector: '#local-upload',
      plugins: 'image code',
      toolbar: 'undo redo | image code',

      /* we override default upload handler to simulate successful upload*/
      images_upload_handler: function (blobInfo, success, failure) {
        setTimeout(function () {
          /* no matter what you upload, we will turn it into TinyMCE logo :)*/
          success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
        }, 2000);
      },
    });
  }
```

## Hide toolabr & menubar

## Add domain in tinymce cloud