teleren/devto huggingface dataset:
7 Essential Security Terms - Part 1
Tags: security, mobile, ios, android
Published: 2022-08-11 04:50:29

Mobile app services are now creating a more convenient world, providing users with unprecedented innovation and convenience.

However, it is often very unfortunate that innovative services collapse at once due to events such as 'unauthorized withdrawal of money in the app', ‘credit card information leakage' and ‘personal information leakage' as a result of competitive focus on merely providing convenience of the service.

Through this post, we will be covering 7 essential security terms that can help you to succeed in mobile app services.

I hope this content will help those who are unfamiliar either with technology or with security in recognizing and preparing for the essential elements of successful app services.

**1. Tampering**

Tampering refers to hackers' unauthorized changes to mobile apps. The technology to defend tampering is called anti-tampering. Through tampering, the malicious users modify the service in purpose of using paid content for free of charge by bypassing the payment system or stealing confidential information of the service. In addition, the more serious reason for Tampering(Modifying) apps is that hackers often distribute those apps to unspecified people, or black market, which can result in fatal secondary damage to mobile services.

**2. Decompile**

​How are mobile apps created? First, a developer writes the source code.  Then, this source code is modified to the machine-recognized language and installed in the mobile. The decompile technique is to convert these apps (which are made up of machine language that only a computer is capable of understanding) back into a source code that people can easily understand. Since source code contains very important information in the service, malicious users analyze vulnerabilities in the service. In this respect, decompiling technique is used to steal important information that are embedded within the source code. 

**3. Rooting**
Smart phones have limited root (the highest administrator) account permissions to prevent users from operating the system at will. Therefore, 'root' can be a super user who can control everything in a smartphone by hacking into the administrator's rights.

Hackers root mobile devices when they decide this information is needed to acquire administrator rights to attack apps. 
In order to protect your service, it is important to detect whether your device’s rooting is on when the app is running. ​

**4. Virtual Machines**
Virtual machine is a type of software that provides a virtual smartphone environment on a PC. The original purpose was to allow users to enjoy smartphone applications on PCs, but hackers are using them as a means of hacking.

NOX, Bluestacks, etc. are main examples of virtual machine tools.  ​

In the next posting, we'll cover Debugging, Code Obfuscation and Code Encryption! 

To know more about how to protect your mobile app?
[Come and visit LIAPP](https://liapp.lockincomp.com/?utm_source=devto&utm_medium=social&utm_campaign=20220811)
Day 1: Python Object and Data Structure Basics
Tags: 100daysofcode, python, webdev, javascript
Published: 2022-08-11 04:48:00

## I wanted to give a quick run down on how I'll be splitting up my daily blog

In the first portion, I'll review what I learned from the '2022 Complete Python Bootcamp" course. I'll mainly touch base on the core concepts of the section and what I learned (or struggled to learn). The second portion of the blog will be dedicated to the project I completed in the sections of the "100 Days of Code: Python" course. This read should be short, considering it's just covering the basics.

### Numbers, Variables, and Strings

The first couple of lessons should not come as a surprise to anyone privy to development in any language. I could pick these concepts up easily because the syntax is very strait-forward and was easily adaptable from knowing primitive types in JS. What I noticed was different off the bat was `print()` vs. `console.log()`. They pretty much produce the same result but just typed differently. Another difference between JS and Python was the naming convention for Objects and Arrays. In Python, they are called `Dictionaries/Lists` and `Sets`, respectively. If I'm missing any other key differences that would be good to note, let me know in the comments! Most of everything else functions the same way in terms of strings and assigning variables. In the lesson, they touch base on Booleans and File I/O, but since the 100 Days of code project for Day 1 only covers String and Variables, I'll save my learnings on that for another day (most likely tomorrow 😄).

### 100 Days of Code Project: Day 1 - Band Name Generator

Alright, so this project was pretty simple. It's basically just `print()` statements and `input()` statements with variables. The objective was to ask a couple of questions and have the result concatenate the two answers in a `print` call. The code I did to complete this is below:
```
print("Welcome to the band name generator")
input("Which City Did You Grow Up In?")
city = input("Which City Did You Grow Up In?\n")
pet = input("What Is Your Pet's Name?\n")
print("your band name could be " + city + " " + pet)
```
I will say if I were to do this in JS, there would be a bit more syntax needed. Other than that, I think Day 1's project was pretty straightforward.

### EOD
That about wraps it up for Day 1. If anyone has taken these courses in Udemy and has notes, let me know! Also, if anyone wants to just chime in, please do as I am open to any helpful corrections, tips, and lessons 😁.

#### If you want to keep up with my progress or just want to add me as a peer, check out my social links below and give me a follow!

<ul>
<li><a href="https://twitter.com/RingoMandingo93" target="_blank">🐦 Twitter</a></li>
<li><a href="https://github.com/kdleonard93" target="_blank">💻 Github</a></li>
<li><a href="https://discord.com/users/407639833146818570" target="_blank">👾 Discord</a></li>
<li><a href="https://www.linkedin.com/in/kyle-leonard93/" target="_blank">👔 LinkedIn</a></li>
</ul>
Dynamically Adding FontAwesome Icons in NextJS
Tags: nextjs, react, webdev, programming
Published: 2022-08-11 04:36:00

There are a diverse ways in adding FontAwesome in a NextJS Project.

### Here is my favourite and most recommended approach.


Install the following:

---

**1.** 👉 React FontAwesome

```
npm install @fortawesome/react-fontawesome
```
or 
```
yarn add  @fortawesome/react-fontawesome
```

---

**2.** 👉 FontAwesome SVG Core
```
npm install @fortawesome/fontawesome-svg-core
```
or 
```
yarn add  @fortawesome/fontawesome-svg-core
```

---

**3.** 👉 Fontawesome Free SVG Solid Icons

```
npm install @fortawesome/free-solid-svg-icons
```
or 
```
yarn add  @fortawesome/free-solid-svg-icons
```

---

**4.** 👉 FontAwesome Free Brand Icons

```
npm install @fortawesome/free-brands-svg-icons
```
or 
```
yarn add  @fortawesome/free-brands-svg-icons
```
Mastering the art of technical writing (workshop)
Tags: writing, tutorial, beginners, productivity
Published: 2022-08-11 04:36:00

Learn to write about complex topics in a clear and engaging way. This event is for anyone who wants to write better.

In this event workshop, you'll learn how to write with clarity and precision, so that your audience can understand what you're saying. You'll learn to avoid jargon and buzzwords, as well as how to structure your writing so that it's easy for readers to follow along.

You'll also learn about writing for technical audiences and how to apply your skills in professional settings. We'll talk about everything from knowing who has authority over what information to how to write up something that's been said before in a way that makes it sound new or fresh. We'll also cover some of the most common mistakes made by technical writers, and give you tips for avoiding them at all costs!

## Topics that will be addressed:

- Writing for websites, blogs, and social media
- How to tell a story with your words
- The importance of research
- How to stay focused when writing
- How to choose words
- Making use of active voice and passive voice
- Avoiding jargon words
- How and what kind of visuals to include
- Proofreading!
- How to make use of right tense
- Using certain guidelines and tools to make your article stand out

The goal of this workshop is to help you become a better technical writer—one who can clearly articulate the purpose of a piece without sounding like a robot!

Register today, it's free. => [https://aviyel.com/events/430/mastering-the-art-of-technical-writing](https://aviyel.com/events/430/mastering-the-art-of-technical-writing)
A diagram of the constellation of useful UI libraries
Tags: favoriteuilibraries
Published: 2022-08-11 04:33:00

When refactoring a frontend, it can be useful to have a "toolbelt" of different libraries to move from a complex set of html/css to - for example - react or cleaner css principles.  CSS is especially problematic to refactor because of how it cascades to other parts of an app. 

Here are a few tools worth considering:

![constellation of UI libraries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjcrzbt5b6moy7unqar6.png)
Job Announcement Website: Boilerplate Code
Tags: javascript, webdev, react, opine
Published: 2022-08-11 04:32:00

{% embed https://dev.to/sokhavuth/table-of-contents-2o4e %}
GitHub: [https://github.com/Sokhavuth/opine-job](https://github.com/Sokhavuth/opine-job)
Deno Deploy: [https://khmerweb-job.deno.dev](https://khmerweb-job.deno.dev/)
<br/>
<p>
Opine is a web framework designed to run on top of Deno runtime. As a result, we need to install Deno runtime on our local machine first before being able to use Opine framework. To download and install Deno runtime, we can follow the instructions on Deno's website here: <a hef="https://deno.land/#installation">download and install Deno</a>.
</p>
<p>
To easily create a bare bone Opine web application, we need to install Opine CLI by writing code on Terminal window as below:
</p>
```
deno install -f -q --allow-read --allow-write --allow-net --unstable https://deno.land/x/opinecli@2.0.0/opine-cli.ts
```
After Opine CLI was installed, we can create a bare bone or boilerplate Opine application by writing command on Terminal window as below:

```
opine-cli opine-job && cd opine-job
```
To run our application, we need to write the command:

```
deno run --allow-net --allow-read --allow-env mod.ts
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1tv5vrcolpbjl1bkcbg.png)
Multiples mode using same as dark mode class by Tailwindcss
Tags: tailwindcss, javascript, module
Published: 2022-08-11 04:31:00

Tailwind - A utility-first CSS framework
Dark mode is supported in Tailwindcss, you can see it [here](https://tailwindcss.com/docs/dark-mode)

However, you want to edit your own mode. Please follow these steps

1. Installation `tailwind` to your project ([docs here](https://tailwindcss.com/docs/installation))

2. After complete install, you can see `taiwind.config.js (cjs)`

3. Create a `themes` folder to store your own themes

4. Create files `your-theme.js` in folder `themes` and insert this code

```javascript
const plugin = require("tailwindcss/plugin");

const themeName = "your-theme-name"; // this is name of your custom theme (dark, red, light, ...)

module.exports = plugin(function ({ addVariant, e }) {
  addVariant(`${themeName}`, ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${themeName} .${e(`${themeName}${separator}${className}`)}`;
    });
  });
});
```

5. Open `tailwind.config.js`, import your custom theme by option plugin

```javascript
/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("./themes/your-theme.js")], // edit the path if it doesn't match your project structure
};
```

6. Finish, you can use your custom same as [dark mode](https://tailwindcss.com/docs/dark-mode) in Tailwind

```html
<h1 class="text-red-500 dark:text-white red:text-red-800 orange:text-orange-700">Hello</h1>
```

NOTE: Don't forget to add a class to the html tag if you want the attribute to be enabled `<html lang="en" class="red">`
Table of Contents
Published: 2022-08-11 04:30:00

<dl>
    <dt><h2>A. Introduction</h2></dt>

    <dd><h4><em>1. <a href="https://dev.to/sokhavuth/boilerplate-code-2pb">Boilerplate Code</a></em></h4></dd> 

<dd><h4><em>2. <a href="https://dev.to/sokhavuth/job-announcement-website-environment-variable-database-2jg1">Environment Variable & Database</a></em></h4></dd> 

<dd><h4><em>3. <a href="https://dev.to/sokhavuth/job-announcement-website-application-session-4epb">Application Session</a></em></h4></dd>

<dt><h2>B. Login Page</h2></dt>

<dd><h4><em>1. <a href="https://dev.to/sokhavuth/job-announcement-website-route-to-login-page-17p4">Route to Login Page</a></em></h4></dd>

<dd><h4><em>2. <a href="https://dev.to/sokhavuth/job-announcement-website-building-login-page-3780">Building Login Page</a></em></h4></dd>

<dd><h4><em>3. <a href="https://dev.to/sokhavuth/job-announcement-website-creating-superuser-4fj8">Creating Superuser</a></em></h4></dd>

<dd><h4><em>4. <a href="https://dev.to/sokhavuth/job-announcement-website-authenticate-user-4lkp">Authenticate User</a></em></h4></dd>

<dt><h2>C. Dashboard Post Page</h2></dt>

<dd><h4><em>1. <a href="https://dev.to/sokhavuth/job-announcement-website-route-to-post-page-34e0">Route to Post Page</a></em></h4></dd>

<dd><h4><em>2. <a href="https://dev.to/sokhavuth/job-announcement-website-building-index-page-e5a">Building Index Page</a></em></h4></dd>

<dd><h4><em>3. <a href="https://dev.to/sokhavuth/job-announcement-website-building-post-page-303k">Building Post Page</a></em></h4></dd>

<dd><h4><em>4. <a href="https://dev.to/sokhavuth/job-announcement-website-creating-post-item-3cdl">Creating Post Item</a></em></h4></dd>

<dd><h4><em>5. <a href="https://dev.to/sokhavuth/job-announcement-website-reading-post-items-1iko">Reading Post Items</a></em></h4></dd>

<dd><h4><em>6. <a href="https://dev.to/sokhavuth/job-announcement-website-editing-post-item-4n02">Editing Post Item</a></em></h4></dd>

</dl>
Cách xử lý bàn phím máy tính bị đổi nước tại nhà
Tags: banphimmaytinhbidonuo
Published: 2022-08-11 04:19:20

Hiện nay, tình trạng bàn phím máy tính bị đổ nước, đổ sửa xảy ra khá thường xuyên. Tình trạng đó xảy ra là vì thói quen vừa ăn uống vừa sử dụng máy tính để làm việc, học tập, giải trí... dẫn đến đôi khi bất cẩn làm đổ nước lên bàn phím là điều khó tránh khỏi.
Vậy cách xử lý khi bàn phím máy tính bị đổ nước tại nhà như thế nào? Cùng [dienthoai247.com](https://dienthoai247.com/) tìm hiểu chi tiết tại: [https://dienthoai247.com/cach-xu-ly-may-tinh-bi-do-nuoc-vao-ban-phim-tai-nha.html](https://dienthoai247.com/cach-xu-ly-may-tinh-bi-do-nuoc-vao-ban-phim-tai-nha.html)
CSS sizing: rem % vw em px 超簡易使用指南
Published: 2022-08-11 03:43:00

rem: 每個element的font-size, width, height 如果需要指定就用rem，不需要指定就用%，或是auto。

%: 比例縮放的時候用

vw: 

1. reset css有的會有，請specify你的body為100vw，避免網頁超出去。

2. 1200px以上的media query內，把rem換成vw。這樣在電腦可以有完美尺寸的畫面。不過這有點看人用，用rem換size的網頁也大有人在。。。

em: 在font-sizing指定的情況下，像是letter-spacing等等的間距的時候用，可以根據你的font-size調整。

px: 做border、box-shadow等小東西的時候用



大概4john，請記得基本尺寸一定用rem，除了可以依據user preference自動更動以外，在手機上面也顯示得出來，如果你在1200px下用vw的話，字會超級小。。。
Project: BgSub
Tags: automatical, background, ai
Published: 2022-08-11 03:41:28

We recently launched bgsub.com, a website that automatically removes image backgrounds using AI technology.
There are many similar sites on the internet, but what makes BgSub different is that it doesn't require uploading images, so there are no privacy issues.
In addition, BgSub automatically adjusts the color of the image to make the background look more harmonious after replacement. And it's all free.

Website: https://bgsub.com/
Điện lạnh công nghiệp Việt Phát
Published: 2022-08-11 03:37:21

Điện Lạnh Công Nghiệp Việt Phát chuyên thu mua máy lạnh công nghiệp lớn, nhà xưởng giá cao trên địa bàn TP.HCM và các tỉnh lân cận… Thu mua máy lạnh cũ, thu mua hệ thống lạnh dân dụng, công nghiệp chiller, hệ thống thiết bị nhà hàng, nhà xưởng, xe nâng, xe xúc, máy công cụ, sắt thép, cao su...

![Uploading image](...)

Mọi chi tiết xin liên hệ: 

ĐIỆN LẠNH CÔNG NGHIỆP VIỆT PHÁT
Địa chỉ: 811C  Quốc Lộ 1a, Phường Bình Hưng Hòa A, Quận Bình Tân, TP.HCM
Điện thoại: 0962153636
Website: [](http://dienlanhvietphat.com.vn/)
Maps: [](https://g.page/r/CZe5vPtnFcdJEAE)
Dev Journal - Day 3 - Odin Project - JS Fundamentals 4 - Arrays
Published: 2022-08-11 03:04:22

**Arrays**

- Arrays are a special type of variable used to store multiple values like strings, HTML elements, or even other arrays.
- Those values can then be accessed by referring to their index number.
- Javascript arrays are zero indexed, meaning that the first element or item in an array is at index 0, the second is at index 1, and the final item or element is always one less than the length of the array.

**Syntax**

- An array is preferably created in the array literal format, declared with the _const_ keyword. Example,
 ```
const provinces = [“Alberta, “British Columbia”, “Ontario”];
```
- Note: Arrays can also be created in the _new_ keyword format below. though this is discouraged for readability and execution speed reasons.
```
const provinces = new Array(“Alberta, “British Columbia”, “Ontario”) 
```

**Manipulating Array Elements**
- An array element can be accessed by its index. Example "provinces[1]" will access “British Columbia” in the province array above.
- Array elements can be changed by assigning a new value to the index. So in our example, I can change the value of the second element, British Columbia (index 1) to a different value by
```
const provinces = ["Alberta", "British Columbia", "Ontario"];
provinces[1] = "British Columbia";
provinces[1] = "Quebec";
console.log(provinces); //[“Alberta, “Quebec”, “Ontario”]
```

**Array Properties**

- Length property returns the length of an array, or the total number of items in that array, and is always one more than the index of the highest array value

```
 const provinces = ["Alberta", "British Columbia", "Ontario"];
 console.log (provinces.length] //3
```

- Sort property sorts the array
 ```
const provinces = ["Alberta", "British Columbia", "Ontario"];
console.log(provinces.sort()); //“Alberta”, “Ontario”, “British Columbia”]
```

**Array Methods**
Learned about using array with the following methods/operations:

- Array.isArray() to determine if an argument is an array. Returns "true", or false otherwise
- Array.push(...items) adds items to the end of the array and returns the new length of the array.
- Array.pop() removes the element from the end and returns that element.
- Array.shift() removes the element from the beginning of the array and returns it.
- Array.unshift(...items) adds items to the beginning of the array
- Array.splice() method adds new items to an array.
- Array.slice() method slices out a piece of an array.

**References**
1. [The Odin Project](https://www.theodinproject.com/lessons/foundations-fundamentals-part-4)
2. [Javascript.info - Arrays] (https://javascript.info/array)
Teaming 🆙
Published: 2022-08-10 23:32:00

Well, a few things have changed since my last post. We all presented ideas for our Umbrella Project through presentation. After that, we were paired with one of our fellows on one of our projects. The biggest thing from that is having to collaborate. Team work has always been hard for me because I find it hard to give input. I usually just go along with whatever. I don't know if that's the easy way out, but I know that's not how a team works. How will I ever learn that way? Collaboration is a way to know more about something than you already know yourself. My partner and I must accommodate each other and not have a one-sided affair for it to work. Collaboration is all about communication and we must be consistent. 
![Collab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gr4pw7jz61c4q2nhron.png) 

We are on week 2 with our host company. It is still a scary situation. We are now thrown on teams to work with others😱. This is where the art of collaboration comes in. In our Friday Huddle with Develop Carolina we had a guest speaker. He spoke all about collaborating. Zac taught us **trust** is very important in collaboration. And there are 8 pillars of trust:

1. consistency
2. clarity
3. character
4. confidence
5. commitment
6. contribution
7. connection
8. compassion

We all know there is no **I** in team. We must learn to work with others to have success. Without a team success _may_ be possible, but the load is heavier alone. 
 ![Henry Ford Quote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75bbw7oqz8228ag1feoe.png)
How to deploy React + Nginx on AWS ECS (FARGATE)
Tags: aws, react, nginx, nelsoncode
Published: 2022-08-11 01:15:00

For this example I will use Vite to create the React project

```bash

npm create vite@latest frontend -- --template react-ts

```
#### Project folders

```bash
├── Dockerfile
├── frontend
│   ├── index.html
│   ├── package.json
│   ├── public
│   │   └── vite.svg
│   ├── src
│   │   ├── App.css
│   │   ├── App.tsx
│   │   ├── assets
│   │   │   └── react.svg
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
└── task-definition.json
```

### Dockerfile

```dockerfile
FROM nginx:latest

EXPOSE 80
# Frontend with production files
COPY  ./frontend/dist /usr/share/nginx/html
```

### Publish Image to Docker Hub

```bash
# BUILD FRONTEND

cd ./frontend && npm run build && cd ..

docker login -u $DOCKER_USER -p $DOCKER_PASSWORD
docker build . -t $DOCKER_USER/react-app:latest

docker push $DOCKER_USER/react-app:latest
```

### Task Definition

task-definition.json
```json
{
  "containerDefinitions": [
    {
      "essential": true,
      "name": "app",
      "image": "nelsoncode/react-app:latest",
      "portMappings": [
        {
          "containerPort": 80,
          "hostPort": 80,
          "protocol": "tcp"
        }
      ]
    }
  ],
  "cpu": "256",
  "family": "fargate-task-definition",
  "memory": "512",
  "networkMode": "awsvpc",
  "runtimePlatform": {
    "operatingSystemFamily": "LINUX"
  },
  "requiresCompatibilities": ["FARGATE"]
}
```

### Register Task Definition

```bash
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=
export AWS_DEFAULT_REGION=us-west-1

aws ecs register-task-definition --cli-input-json file://task-definition.json

```

### Create cluster (FARGATE)


![Create cluster (FARGATE)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ij6yoqu93brfdhw9zllr.png)

### Cluster name and create VPC


![Cluster name and create VPC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab1d4ybp5qi3jvw4u19g.png)

### Select Type, Task definition, service name and number tasks


![Select Type, Task definition and service name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr02wrmxe76agpdheoc2.png)


![task definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdjkbgrslakdr1f7w9u2.png)

### Configure network


![Configure network cluster AWS ECS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kikgbncob6bneui0gevr.png)

### Verify status

![verify status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wmezooqaxjf3qcaeben.png)

### App in production


![ECS FARGATE WITH REACT JS AND NGINX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55r00yktc9y92y7kb5vd.png)

### GitHub Repository

https://github.com/NelsonCode/aws-ecs-fargate-nginx-react
Welcome Thread - v186
Tags: welcome
Published: 2022-08-11 00:31:19

---
title: Welcome Thread - v186
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Doctor on ABC show saying "right on time"](https://media.giphy.com/media/l1J9MTa7XfOCix5iU/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**