teleren/devto huggingface dataset:
5 Important Rules in Website Design
Tags: javascript, webdev, beginners, programming
Published: 2022-02-10 13:55:33

**Facebook Twitter Share
When it comes to your website, extra attention should be paid to every minute detail to make sure it performs optimally to serve its purpose. Here are seven important rules of thumb to observe to make sure your website performs well.

1) Do not use splash pages

Splash pages are the first pages you see when you arrive at a website. They normally have a very beautiful image with words like “welcome” or “click here to enter”. In fact, they are just that — pretty vases with no real purpose. Do not let your visitors have a reason to click on the “back” button! Give them the value of your site up front without the splash page.

Click [here](https://tinyurl.com/3m4rw6ar
) to get instant access.

2) Do not use excessive banner advertisements

Even the least net savvy people have trained themselves to ignore banner advertisements so you will be wasting valuable website real estate. Instead, provide more valueable content and weave relevant affiliate links into your content, and let your visitors feel that they want to buy instead of being pushed to buy.

3) Have a simple and clear navigation

You have to provide a simple and very straightforward navigation menu so that even a young child will know how to use it. Stay away from complicated Flash based menus or multi-tiered dropdown menus. If your visitors don’t know how to navigate, they will leave your site.

4) Have a clear indication of where the user is

When visitors are deeply engrossed in browsing your site, you will want to make sure they know which part of the site they are in at that moment. because confusion means.. “abandon ship”!.

Click [here](https://tinyurl.com/3m4rw6ar
) to get instant access.

5) Avoid using audio on your site

If your visitor is going to stay a long time at your site, reading your content, you will want to make sure they’re not annoyed by some audio looping on and on on your website. If you insist on adding audio, make sure they have some control over it — volume or muting controls would work fine.**
UI Components: How to make Outline Gradient Button with Transparent Background🤷‍♂️
Tags: webdev, beginners, tutorial, css
Published: 2022-02-10 12:57:35


During developing 🧑‍💻 website’s at my workplace, I was facing some difficulty when it comes to outlining some div or button with gradient color. After hours crawling on google, I find the solutions.. 

I wanted to share my thought about it and maybe you guys have another different approach to really **save our time ⏰** solving the issues.

## Goal🎯
So, on this article the goal 🎯 was making an **Outlined Gradient Button with Transparent Background aka with opacity**

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

here’s the spell 🧙‍♂️ what is it look like in CodePen ✍️


{% codepen https://codepen.io/ridhoanshory/pen/eYeWdYy
 %}

If you guys have another thoughts leave a comment I'll update the post base on your solutions as well.. cheers🍻
I Enjoyed Buiding My Portfolio.
Tags: beginners, html, css, javascript
Published: 2022-02-10 12:48:01

Today was my off day and I spent most of time coding. Building witout any instruction. It was my first experience. 

I only used html and css to make basic structure of my portfoliio page. 

It ejoyed doing that althought I struggled with some flexbox aligning and had to checkback scrimba sessions I previously watched. 

It is a small begining but I believe that with enough time and my effort it can be something very special I created. 

Joy of creation is something I had been missing out in my life. 

You can check out what I made today and give some feedback for improvement. It would be much appreciated for begginner coder. 

[My Portfolio](https://kjw0116.github.io/Jaewoo-Portfolio/)
Everything You Should Know About Flutter
Tags: flutter, sdk, opensource, dart
Published: 2022-02-10 12:16:19


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox0wcvwuk2h29axdrcw6.png)
**What is Flutter SDK?**
Flutter is a Software Development Kit developed by Google
Flutter is preferred for the cross-platform development of apps
The first stable version of Flutter SDK was released in 2018
The SDK is an open-source UI development kit used for multiple apps
The programming language for Flutter in DART

**How does Flutter Work?**
Flutter works with a 2-D widget rendering engine and the Dart framework
Flutter simplifies the management of an app by showing all its functions as widgets
The framework also supports animation and gestures

**Some Facts Linked with Flutter**
Flutter is the fastest growing app development skill among developers
68.17 percent of [mobile app developers](https://www.rlogical.com/hire-dedicated-developers/hire-mobile-app-developer/) prefer Flutter as the most loved development tool
The number of contributors on Flutter for open-source projects is 13000
According to Google trends query analysis, the Flutter query score is 86

Get to know here [Reasons to choose Flutter SDK](https://www.slideshare.net/PrabhuS89/everything-you-should-know-about-flutter-251148014/PrabhuS89/everything-you-should-know-about-flutter-251148014)
3 Websites That Help To Understand More About Virtual Dom
Published: 2022-02-10 12:09:25

One of the main principals of react is Virtual Dom. Many react developers know about Virtual Dom, how it works and how it helps. But Beginner react developers maybe didn't got the idea about Virtual Dom. So, here are some links that might help you understand this easy concept.

[Codeacademy](https://www.codecademy.com/article/react-virtual-dom)

[Reactjs.org](https://reactjs.org/docs/faq-internals.html)

[Programming with mosh](https://programmingwithmosh.com/react/react-virtual-dom-explained/)

Thank you for your time.
Handle Array.prototype.includes in TypeScript
Tags: typescript, javascript, tutorial
Published: 2022-02-10 12:06:08

If you are working with typescript, sooner or later you will encounter an issue with `Array.prototype.includes`

```typescript
const PROPS = ['a', 'b', 'c'] as const;

PROPS.includes('d') // error

const includes = (elem: string) =>
    PROPS.includes(elem) // error
```

I don't want to dig into type theory problem of this issue. I just will provide you with curried generic solution.
```typescript
const PROPS = ['a', 'b', 'c'] as const;

const withTuple = <
    List extends string[]
>(list: readonly [...List]) =>
    (prop: string): prop is List[number] =>
        list.includes(prop)

const includes = withTuple(PROPS);

const result = includes('d')

declare let str: string

if (includes(str)) {
    str // "a" | "b" | "c"
}
```

However, it is still not cool. Our function works only with strings. What if we have a list of numbers or other primitives ?

First of all, we need to create utility type which will be able to convert literal type to to more wider type. I mean, it should convert literal type of 42 to number

```typescript
type Primitives =
  | string
  | number
  | bigint
  | boolean
  | symbol
  | null
  | undefined

type InferPrimitive<T, P> = P extends any ? T extends P ? P : never : never;

type Inference<T> = InferPrimitive<T, Primitives>

{
  type _ = Inference<2 | 's'> // stirng | number
  type __ = Inference<42> //  number
}
```

Now we can use our type with curried function

```typescript
type Primitives =
  | string
  | number
  | bigint
  | boolean
  | symbol
  | null
  | undefined

type InferPrimitive<T, P> = P extends any ? T extends P ? P : never : never;

type Inference<T> = InferPrimitive<T, Primitives>

{
  type _ = Inference<2 | 's'> // stirng | number
  type __ = Inference<42> //  number
}

const PROPS = ['a', 'b', 'c'] as const;

const withTuple = <
  List extends Primitives[]
>(list: readonly [...List]) =>
  (prop: Inference<List[number]>):
    prop is Inference<List[number]> & List[number] =>
    list.includes(prop)

const includes = withTuple(PROPS);

includes(2)       // expected error
includes(['str']) // expected error

const result = includes('d') // ok

declare let str: string

if (includes(str)) {
  str // "a" | "b" | "c"
}
```
As you might have noticed, TS allows you to call `includes` only with `strings`.

That's all.
[Ann] Hablamos sobre Object-relational Mapping (ORM)
Published: 2022-02-10 11:56:37

---
canonical_url: https://www.thebigbranchtheory.dev/post/hablemos-sobre-orms/
---
En este nuevo episodio de The Big Branch Theory, hacemos un breve introducción a que es un ORM y usamos ejemplos y experiencias para definir:

- Ventajas y desventajas
- ¿Porqué usar un ORM?
- Y si no usamos un ORM... ¿Qué hacemos?

Todo esto y más, incluso un breve repaso sobre `No Code / Low Code` es lo que hablamos en este episodio.

- [Web](https://www.thebigbranchtheory.dev/covers/hablemos-sobre-orms.png)
- [Spotify](https://open.spotify.com/episode/4yhqHu0Gq1Cl03a1QarlO6)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy81NmUwZjc4L3BvZGNhc3QvcnNz/episode/MzAxOWM0MzctMDEwOC00NjhkLTkzY2YtYjNhNTljMDhiZjc4?sa=X&ved=0CAUQkfYCahcKEwigh5XQgPX1AhUAAAAAHQAAAAAQAQ)
- [Apple](https://www.thebigbranchtheory.dev/post/hablemos-sobre-orms/)
- [Anchor](https://anchor.fm/thebigbranchtheory/episodes/Hablemos-sobre-los-ORMs-e1e4m6n)


{% spotify spotify:episode:4yhqHu0Gq1Cl03a1QarlO6 %}
How to Build React Native App
Published: 2022-02-10 11:56:11

React Native is a JavaScript framework for rendering mobile applications in iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

In other words, web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React Native is a great choice for building cross-platform mobile applications. So if you do not have the necessary technical background to understand react native then the best option is to hire a dedicated React Native developer on an hourly or project basis based on the stage of development.

For example, if you are building the react native app from scratch then on a project basis is the suitable option. While if you would like to only develop a specific part/ feature then hiring a developer on a per hour basis is a good option.

Experts are the best bet for any entrepreneur or business looking to leverage the latest technology for developing an app that will lead to business growth. I hope the post helps you clarify the need for an expert to develop a high performance react native mobile app.
How to learn anything faster!
Tags: webdev, javascript, css, html
Published: 2022-02-10 11:04:43

I was revising Front-end stuff, Was watching advanced CSS topics over and over but at the moment I realize that only following the tutorial isn't enough for me, 
Then I do explore a whole new thing,

'**If I do any projects from my own-self, and at the same time if I apply those properties / attributes in my projects from those tutorials I already watched. And this time I am catching everything faster**'

summery: 
> ## Learn by doing
Blog Project Part 2: Template Engine
Published: 2022-02-10 10:53:38

## Create Public Folder, Put Your Static Files in It

Starting files for Blog project: https://drive.google.com/file/d/1yWS-hrxi7MwsyU2YxpcCpfXd6ilws1Xw/view

- This is a homework project from Patika.dev and they provide starting files for this project.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eesus3cd9o9xaplmc2i.PNG)

Once that's done, save public folder on the app `app.use(express.static("public"))`

## EJS Module

EJS stands for Embedded JavaScript templates. It will make our code more functional because we won't be repetitive anymore.
**Download ejs** type `npm i ejs` and hit enter on terminal. Then, add `const ejs = require("ejs")` on **app.js** file to import ejs.
Also, add this on your code `app.set("view engine", "ejs")`.

So far your code should look like this:

```
const express = require("express"); // imported express
const ejs = require("ejs");
const app = express(); // assigned express func to app constant

// ENGINE SET
app.set("view engine", "ejs"); // set engine as ejs that looks at view folder
app.use(express.static("public")); // look at public folder for static parts of the webapp
```

Now, let's get the routes. Since I talked about them in one of my previous blogs, I won't bother to get it into detail here.

```
// ROUTES
app.get("/", (req, res) => {
  res.render("index");
});

app.get("/about", (req, res) => {
  res.render("about");
});

app.get("/add_post", (req, res) => {
  res.render("add_post");
});
```

Precisely, the code above: When root URL entered, render me the index file. When /about URL entered, render me the about file, and when /add_post URL entered render me the add_post file. `res.render()` method renders files.
I added those files in my views folder, you can see it here:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0wgflgveawntwrtlzof.PNG)

### Partials

I made a partials file where I store repeated codes, such as header, footer and navigation. They are in `.ejs` format and not HTML.

Call an `.ejs` file in your code: `<%- include("partials/_header.ejs") -%>`. Put \*\_\_\_ in the beginnings of your ejs file, it's a convention.
To observe the full code please check out my [Github profile](https://github.com/aahmetmeliksah/cleanBlogPatikaHW)

That's it for now. Take care and keep coding!
Strapi v4 flatten complex response structure.
Tags: strapi, strapiv4, graphql, webdev
Published: 2022-02-10 10:49:12

As we know that the strapi version 4 returns a very complex response structure. With nested data and attributes properties. This gets very confusing and tough to manage if your working with a large set of collections. 
The repetitive response structure of the version 4, bugged me out to constantly add the data and the attributes property. So this is a function which flattens the response structure and helps you work with the version 3 of strapi without much workover.

---

How to use it?
1) import the function file.
2) const flattenData = flattenObj({...data});

<u>NOTE</u>: The data in step 2 is the data that is return from the response of strapi.

---

```
export const flattenObj = (data) => {
    const isObject = (data) =>
        Object.prototype.toString.call(data) === "[object Object]";
    const isArray = (data) =>
        Object.prototype.toString.call(data) === "[object Array]";

    const flatten = (data) => {
        if (!data.attributes) return data;

        return {
        id: data.id,
        ...data.attributes,
        };
    };

    if (isArray(data)) {
        return data.map((item) => flattenObj(item));
    }

    if (isObject(data)) {
        if (isArray(data.data)) {
        data = [...data.data];
        } else if (isObject(data.data)) {
        data = flatten({ ...data.data });
        } else if (data.data === null) {
        data = null;
        } else {
        data = flatten(data);
        }

        for (const key in data) {
           data[key] = flattenObj(data[key]);
        }

        return data;
    }

    return data;
    };
```
Use browser extension to download Vimeo videos without download button.
Tags: tutorial, ios, android, web3
Published: 2022-02-10 10:47:54

To download a video on Vimeo without a download button, here is a quick guide:
1. Go to [vimeomate.com](https://vimeomate.com/) and select an extension type (Chrome/Edge) to install.
2. Go to vimeo.com and select the Vimeo video you want to download. You can download any Vimeo video that can be played (including Vimeo videos embedded in your personal website)
3. Select the video quality to complete the download.
8 Essential Services to Improve your Security on the Internet 🚀
Published: 2022-02-10 10:46:56

{% youtube czFimENgMJI %}

---

Improving your security on the internet is an essential now. 🙋🏼

We see more and more individuals having their accounts hacked. 😳

However, it is possible to be safe by using services to protect yourself, protect your identity on the internet or even your browsing or payments. 😊

It's really wide, but very interesting. 👨🏼‍💻

In this video, I give you the 8 essential points that you must follow as an individual to be safe on the internet.
Or at least harder to hack than its neighbour. 🙅🏼

---

*If you like this content, push the like button, that helps spread the message.* 👍🏼
*If you think it can be useful to anyone in your network, share it.* 📨

---

Video produced by [Wild & Secure](https://wildnsecure.com), your consulting firm to all things security and real estate.
If you want to receive weekly quality content about security, subscribe to our newsletter on our website.
Setup environment React Native for MacOS M1
Tags: macbookm1, m1, macos, reactnative
Published: 2022-02-10 10:44:26

MacOs with chip M1 has different setup for environment React Native, some people got error and didn’t got any solution. In this article I will share to you how to setup React Native on MacOs M1

## 1. Install Brew
Open your terminal and copy this
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

If install finish, **copy on the red line first** and press enter then **copy on the blue line** and press enter
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewau86oco7kmq0birp98.png)
Check brew version by
```
brew --version
```
If you can see brew version, it's mean brew already installed  on your mac

## 2. Install Node
Back to terminal, and type this 
```
brew install node
```
Check your node version by 
```
node --version
```

## 3. Install Watchman
Now we need to install watchman
```
brew install watchman
```

## 4. Install Xcode
Go to AppStore and install Xcode. It’s take a bit long time for installation because Xcode have a huge size. Wait until finish like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc9qskjs9m7zh9d1lwrt.png)

After you open Xcode it will show alert ask to install Rosetta. I’m not sure we actually need it. Let’s press **NOT NOW** and we install as soon as we need.

Now we open the Xcode and we go to preferences. You can see on this picture
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz78rx0yl46wjk2dd22k.png)

Go to **_locations_** path and **_click command line tools_** let’s select **_Xcode version_**

## 5. Set iOS simulator
Now we need to install emulator or simulator by click **Components** and choose emulator what we want to. It also take a bit long time because size a quite big. If installation was finish, it will look like this. Let's pick for iPhone 12 or 13

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

## 6. Install Ruby
Install ruby by Open Terminal and copy this
```
brew install ruby
```

## 7. Install cocoapods
install cocoapods by specify folders where we need to install, this is very important. So I would like to be
```
sudo gem install -n /usr/local/bin ffi cocoapods
```
now we can see our pod version by type this on terminal
```
pod --version
```

Installation was finish. Now we can create new React Native project by type
npx react-native init ExampleYourProject


## (Add On) 8. If you still got error, follow this section. If not, you don’t need to follow this
if you still got error, trying use this
```
sudo arch -arch x86_64 gem install cocoapods
```
then copy this
```
sudo arch -arch x86_64 gem install ffi
```
then it’s possible to run it to your ios folder by going to your project and cd/ios and type this
```
arch -arch x86_64 pod install
```

Yey congratulations now you are already finish all React Native setup environment.
If you have any question, feel free to ask me on
email : **charismakurniawan@gmail.com**
instagram : **charismaaji**
Getting Started With Python
Tags: python, beginners, tutorial
Published: 2022-02-10 10:38:35

## <u>Introduction:
</u>
Python is a general purpose, high level, interpreted language with easy syntax. It was developed in 1989 by Guido Van Rossum, it is named after the British comedy group Monty Python (I'm also a big fan of their movies and sketches). In the past decade Python has seen an exponential increase in its popularity among developers.

## Why is Python so popular?

The biggest reason is its easy-to-learn syntax. Python also boasts a great number of use cases including but <u>not limited to</u>: 
- AI and Machine Learning

- Web Development

- Data Visualization

- Game Development

- Data Analytics

- Financial-Technology

- Cyber Security

- Automation

- Testing

## Getting Started

1. Download the latest version of Python for your operating system [here](https://www.python.org/). You can also read more about setting up a python development [here](https://wiki.python.org/moin/BeginnersGuide/Download)

2. Create a new folder where you will be saving you python files, let say FirstApp.

3. Open your text-editor, then navigate to the folder you created (FirstApp).

4. Create a new file called app.py then enter the following code into the file:

`print("Hello, World!")`
5. Save the file.

That was easy! Now for the REAL magic.

Using Command Prompt on Windows or Terminal on UNIX (macOS or Linux) Navigate to the FirstApp folder and type the following command

```
Python3 app.py
```

If everything went according to plan, you'll see the following message on screen:

```
Hello, World!
```

There you go! You just wrote your first program in Python!
I hope you can learn more soon!
Create Responsive width and height in React Native
Tags: reactnative, javascript, mobileapp
Published: 2022-02-10 10:23:27

For Website or Mobile Developer sometimes width and height is a problem for different sizes of devices. To fix that problem, we need to create Responsive Size

If you are using React Native, you can use this

Usually for the first step I create folder utils and create index.js on utils folder.

We need to 
import {Dimension} from 'react-native'

Then we initiate for default height and width

```
const heightMobileUI = 896;
const widthMobileUI = 414;
```

after that we need to create function

```
export const responsiveWidth = width => {
  return (Dimensions.get('window').width * width) / widthMobileUI;
};

export const responsiveHeight = height => {
  return (Dimensions.get('window').height * height) / heightMobileUI;
};
```

Yep, we’re  finish for create responsive size! The question is, how can we use that?

Here's step to using that, for example:

```
import ResponsiveWidth from '../utils' 
// import same as location you create

<View style={{
width:responsiveWidth(100), 
height: responsiveWidth(100), 
backgroundColor:'red'}}>

      <Text> Example </Text>

</View>
```

Yeayy now you already use for responsive size. You may ask why I use responsiveWidth on height? Because we use size base on width device, if device have different size it will different size also.