teleren/devto huggingface dataset:
Build a Creative Agency Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-08-19 13:11:35

{% youtube olASpEtIwRY %}

Build a Creative Agency Website Using HTML CSS JavaScript

This video will show you how to build a creative agency website using html css javascript

[Github Repo](https://github.com/codewithsadee/pixology)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/10ssXyyO4zFiGLs6AM_DtoHzYNnS4caGm/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:25 - File structure
5:54 - Project initial
12:08 - Header
27:10 - Hero section
42:44 - Service section
56:14 - Feature section
1:01:44 - Project section
1:12:08 - Newsletter section
1:17:15 - Blog section
1:27:19 - Footer
1:41:23 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Share your GitHub Profile and Let's all connect
Tags: discuss, github, beginners, programming
Published: 2022-08-19 13:09:50

Let's all connect on GitHub by sharing our Profiles!!
Link your Profile down below, I am interested in checking out your projects and getting feedback on my own.
I will start first 🚀🚀
Here is my link : [Sadeedpv](https://github.com/Sadeedpv)
Create AWS EC2 From AWS CLI with Public IP
Tags: aws, awscli, ec2
Published: 2022-08-19 12:58:07

In this article will explain how to create an ec2 instance with the AWS CLI option from the command line interface. AWS CLI is an easy and fast option for creating single or multiple ec2 instances. Using AWS CLI you can automate total AWS infrastructure build and also, you can query the exesisting infrastarture.

read more:
https://thedbadmin.com/create-aws-ec2-with-aws-cli/
[Redis Hackathon Submission Post Placeholder Title]
Tags: redishackathon
Published: 2022-08-19 12:53:49

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission
[Note]: # (Share what you built, how you built it, and the inspiration behind the idea! Please make sure the project links to the appropriate GitHub repository, and includes the [MIT](https://choosealicense.com/licenses/mit/), [Apache](https://www.apache.org/licenses/), [BSD-2](https://opensource.org/licenses/BSD-2-Clause), [BSD-3](https://opensource.org/licenses/BSD-3-Clause), or [Commons Clause](https://commonsclause.com/) license and a README.)


### Submission Category: 

[Note]: # (Select between Minimalism Magicians, Microservice Mavens, MEAN/MERN Mavericks, Wacky Wildcards – Descriptions of requirements listed in the announcement post.)

### [Optional: Video Explainer of My Project]

[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)

### Language Used
[Note]: # (Select the language you used for your project – must be one of the following: C#/ASP.NET Core, Java/Spring, JS/TS/Node.js, Python)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% embed link_to_your_repo %}` to share a GitHub repository)

BTW, your Github code’s README file should contain the details as [per this template](https://github.com/redis-developer/hackathon-docs/blob/main/README.md).

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

### Collaborators

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent ONLY to the person who posts this submission and they will distribute the prize evenly.)

[Note]: # (All collaborators with DEV profiles listed here will receive a badge, however, prizes including sticker packs will only be sent to the member who publishes the post, with the person expected to distribute the prizes evenly amongst their collaborators.)

[Reminder]: # (Submissions are due on August 29th, 2022 @ 11:59 PM UTC).

- - - 

[Note]: # (Please ensure  that the footer content below is part of your post when publishing. Please delete this note in parentheses but do not delete the content below.)


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Benefits of Microsoft 365 Migration
Published: 2022-08-19 12:47:00

As companies around the world asked their employees to work from home in 2020, one of the most popular productivity suites for enterprise software, Microsoft Office 365, will help employees work from any device or location. We've simplified the process of ensuring secure access to your applications. As more companies now prepare to make working from home a permanent feature after the pandemic,  more may be moving to Microsoft 365.

Businesses adopting Microsoft 365 have many benefits, including: 

**Accessibility** 
As your workforce becomes more distributed, [Microsoft 365 Migration](https://www.o365cloudexperts.com/office-365-migration/) helps you access your applications and data from anywhere and on any device. Your data is also protected from disasters that can destroy onsite equipment.

**Safety**
Security is a concern for many organizations as they move to the cloud, and Microsoft 365 has key security features like automatic encryption built-in.

**Efficiency**
Adopting Microsoft 365 frees up  IT infrastructure project group members' time to focus on more strategic work.

**Scalability** 
Purchasing licenses that cover multiple employees facilitates adding users to the system.

**Cost**
Moving to the cloud reduces his CAPEX and his OPEX associated with purchasing, maintaining, powering, and cooling on-premises equipment. Migrating to Microsoft 365 can also help reduce licensing costs, as it may involve migrating from a volume licensing agreement with Microsoft to the Microsoft 365 cloud-licensed version of MS Office.

**Conclusion** 
Microsoft 365 offers many benefits, including Ease of use for new hires making it an effective migration option. Hosting providers such as Apps4Rent are solely responsible for providing the availability of the O365 platform.
Termux getting terminated after 15s on starting the VNC server.
Tags: termux
Published: 2022-08-19 12:45:05

I was trying to run Manjaro(modded linux) on the Redmi Note 10S (Android 12 MIUI Global 13.0.2). The problem is thta after the installation of the Manjaro OS i run the bash script to launch the session for starting the VNC server but the process gets terminated after a time period of about 15 seconds. Can somebody help?
CoDe SmElL 159 - mIxEd_cASe
Tags: javascript, webdev, beginners, programming
Published: 2022-08-19 12:37:09

*Serious development is done by many different people. We have to start agreeing.*

> TL;DR: Don't mix different case conversions

# Problems

- Readability

- Maintainability

# Solutions

1. Choose a case standard

2. Hold on to it

# Context

When different people make software together they might have personal or cultural differences.

Some prefer [camelCase](https://en.wikipedia.org/wiki/Camel_case)🐫, others [snake_case](https://en.wikipedia.org/wiki/Snake_case)🐍, MACRO_CASE🗣️, and [many others](https://en.wikipedia.org/wiki/Naming_convention_(programming)#Multiple-word_identifiers).

Code should be straightforward and readable.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/f0858b7401a061b1d87ad5e488a85bc3)
```json
{
    "id": 2,
    "userId": 666, 
    "accountNumber": "12345-12345-12345",
    "UPDATED_AT": "2022-01-07T02:23:41.305Z",
    "created_at": "2019-01-07T02:23:41.305Z",
    "deleted at": "2022-01-07T02:23:41.305Z"
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/3dd8fd30a0c8c50538b401cbfb746ecc)
```json
{
    "id": 2,
    "userId": 666, 
    "accountNumber": "12345-12345-12345",
    "updatedAt": "2022-01-07T02:23:41.305Z",
    "createdAt": "2019-01-07T02:23:41.305Z",
    "deletedAt": "2022-01-07T02:23:41.305Z"
  // This doesn't mean THIS standard is the right one
}
```

# Detection

[X] Automatic 

We can tell our linters about our company's broad [naming standards](https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k) and enforce them.

Whenever new people arrive at the organization, an automated test should politely ask him/her/.. to change the code.

# Exceptions

Whenever we need to interact with out of our scope code, we should use the client's standards, not ours.

# Tags

- Naming

# Conclusion

Dealing with standards is easy.

We need to enforce them.

# Relations

{% post https://dev.to/mcsee/code-smell-48-code-without-standards-2f5m %}

# More Info

{% post https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k %}

[All naming conventions](https://en.wikipedia.org/wiki/Naming_convention_(programming)#Multiple-word_identifiers)

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [Wolfgang Hasselmann](https://unsplash.com/@wolfgang_hasselmann) on [Unsplash](https://unsplash.com/s/photos/camel)  

* * *

> If you have too many special cases, you are doing it wrong.

_Craig Zerouni_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
𝟲 𝗚𝗶𝘁 𝗵𝗮𝗰𝗸𝘀 𝘆𝗼𝘂 𝘀𝗵𝗼𝘂𝗹𝗱 𝗱𝗲𝗳𝗶𝗻𝗶𝘁𝗲𝗹𝘆 𝗸𝗻𝗼𝘄🚀
Tags: webdev, github, git, opensource
Published: 2022-08-19 12:28:21

## 𝟭. 𝗠𝗼𝗱𝗶𝗳𝘆 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗿𝗲𝗰𝗲𝗻𝘁 𝗰𝗼𝗺𝗺𝗶𝘁
use git commit --amend

## 𝟮. 𝗙𝗶𝗻𝗱 𝗯𝗿𝗮𝗻𝗰𝗵𝗲s 𝗯𝘆 𝗰𝗼𝗺𝗺𝗶𝘁
use git branch --contains<commit>

## 𝟯. 𝗥𝗲𝗺𝗼𝘃𝗲 𝗳𝗶𝗹𝗲 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝗹𝗮𝘀𝘁 𝗰𝗼𝗺𝗺𝗶𝘁
use git rm --cached <file-to-remove>
followed by git commit --amend

## 𝟰. 𝗥𝗲𝗻𝗮𝗺𝗲 𝗯𝗿𝗮𝗻𝗰𝗵𝗲𝘀 𝗹𝗼𝗰𝗮𝗹𝗹𝘆
use git branch -m old-name new-name
For more information type
git help branch

## 𝟱. 𝗪𝗵𝗮𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝗶𝗻 𝗮 𝘀𝗽𝗮𝗻 𝗼𝗳 𝘁𝗶𝗺𝗲
use git whatchanged --since="2 weeks ago"

## 𝟲. 𝗧𝗶𝗺𝗲 𝘁𝗿𝗮𝘃𝗲𝗹𝗶𝗻𝗴 𝘂𝘀𝗶𝗻𝗴 𝗚𝗜𝗧
use git reflog
It shows you the list of all the things you've done so far.
Typescript WTF Moments 6: Non Collapsing Object Unions
Tags: typescript, webdev, programming, tutorial
Published: 2022-08-19 12:25:47

---
series: Typescript WTF Moments 
---

Object unions of same type do not collapse

```ts
type a = 1 | 1 // 1, collapsed
//   ^?

type b = { a:1 } | { a:1 } // { a:1 } | { a:1 }, do not collapse
//   ^?

type c = { a:1 } | { a:1 } | { a:1 } // { a:1 } | { a:1 } | { a:1 }, do not collapse
//   ^?
```
[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAhlC8UCMUA+yoHpPIDRQGMB7AGxJjAGcIATAWAChsoWA9AfkcdEigCMEUAN6wAXCgC+aYWMlYcImOKhT0i5RPw0iUAHZFghUuSoRGzNpwbdw0AoPVy1sldMevm71TKVOfGrR19Q2IyCmpzHEsgA)

this should be fine most of the time but it can be problematic if we use identical check on it

**union is equal to union, but not equal to non union**

```ts
type o = 1 | 1 // 1
//   ^?

type p = { c:1 } | { c:1 } //  { c:1 } | { c:1 }, what?
//   ^?


type IsSame<T, U> = (<G>() => G extends T ? 1 : 2) extends <
    G
>() => G extends U ? 1 : 2
    ? true
    : false

type q = IsSame<p, {c:1 }> // false, huh?
//   ^?

type r = IsSame<p, {c:1 } | {c:1}> // true, ok
//   ^?

type s = IsSame<p, {c:1 } | {c:1} | {c:1}> // true, huh?
//   ^?

type k = IsSame<p, {c:1 } | {c:1} | {c:1} | {c:1}> // true, huh?
//   ^?
```

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

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBA9lC8UCMUA+yoHpPIFDakID0B+XXUSKMBKAbygGMAuFAXzXqdag4K5btODQbwA0UAO4ALAIbAy-KKXIVw0AJIBnAMqyAthAA8AFQkBVAHy0AFEYDilmwEoE1+1AgAPYBAB2ACZaUCZQJBjMUABMrt6+gcFGuISE9rhOrvDunj7+QVDmYRHRySnhwABOAK4QpYSRAGayADZatWpUAI602nqGRmASdKJs1gRNrRAS0lXSijjEZB3QFT26BsaD9CPCgqNYOJU1EjAA1vgLykuU0MGIvRsDQzvow6wcr3tjh9VTUDNzC4pFTLKCnNZ9TbPHgfbbvXbwz7vb5QI5-AHzYEkIA)
Take the Web Designing Course From A2n Academy & Advance your career
Tags: webdesigningcourse
Published: 2022-08-19 12:05:00

One of the most popular and rapidly growing IT training courses nowadays is web design. You will find it simpler to comprehend HTML, CSS, and JavaScript ideas if you have some knowledge of web design. If a web developer has mastered all the ideas, they may build their own website from the ground up.

A **[web design course](https://www.a2nacademy.com/course/web-design-course)** is now more important than ever because of the rise in demand from clients and architects. Students may climb the website architecture ladder and hone their skills by learning through teaching. They also assist you in creating a strong portfolio, which can encourage you to take your career more seriously.

The best location to study **[web designing Course](https://www.a2nacademy.com/course/web-design-course)** is A2n Academy. With the assistance of our highly qualified specialists, we offer top-notch web design training internationally.

We think it's critical to comprehend the fundamentals of web design before delving into difficult coding languages. We designed our engaging, engaging courses to make learning for you quick and enjoyable.

A fantastic option to learn the basics and the most advanced web planning methods is to enroll in a web designing Course in Pune. A2n Academy, a center for teaching professionals in web design, development, and marketing, has officially opened its doors.
🔥 Node reload alternative Nodemon
Published: 2022-08-19 12:03:00

Hi guys, i built a simple tool that automatically restarting the node application when file changes, similar to Nodemon.

## **Features**
- Lightweight, Fast and simple to use.
- Automatic re-running.
- Manual restarting.
- Monitoring multiple directories.
- Ignoring files.
- Delaying restarting.

## **How to use it**
```shell
npm install -g noderel 
# cli
noderel --entry bin/server.js
```
![Console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mblcu7txpmairpdrql6b.png)

## **Documentation**
[Readme](https://github.com/wutility/noderel/blob/main/Readme.md)

## **Contribution**
[All pull requests are welcome, feel free](https://github.com/wutility/noderel)
How to run Docker commands in CMD/PowerShell powered by Docker running in WSL2
Tags: docker, wsl, windows, powershell
Published: 2022-08-19 11:49:00

In the last [tutorial](https://supernovaic.blogspot.com/2022/02/how-to-compile-docker-images-in-windows.html), we learned how to create Docker images without Docker Desktop in Windows. However, this can break our daily duties, especially if we have automated anything. This can be fixed in three steps:

1) Start Docker in Ubuntu using:

```
sudo dockerd
```

2) Open a new CMD/PowerShell window without closing the Ubuntu one.

3) Add the prefix **<u>_wsl_</u>** before every docker command and run them.

```
wsl docker --version
wsl docker --help
```

![[preview]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y481fvxhfu7a93mvink5.jpg)

And that's all. You can find other [tutorials](https://devblogs.microsoft.com/commandline/integrate-linux-commands-into-windows-with-powershell-and-the-windows-subsystem-for-linux/) on how to remove the prefix, but this is the easiest and fastest option.

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)
Configure Alert Manager with Basic Authentication in Microsoft Azure WebApp
Tags: azure, monitoring, tutorial, alertmanager
Published: 2022-08-19 11:40:18

**Goal :**

- Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp.

**Pre-Requisite :** 

- [Deploying AlertManager Image to Azure Container Registry Using Azure CLI](https://dev.to/suryabhansv/deploying-alertmanager-image-to-azure-container-registry-using-azure-cli-1mlb)
- [Setup Alertmanager in Microsft Azure (WebApp) using Azure CLI](https://dev.to/suryabhansv/setup-alertmanager-in-microsft-azure-webapp-using-azure-cli-2pdj)



**Steps**

1. [Create a web.yml file (documentation)](https://prometheus.io/docs/guides/basic-auth/#creating-web-yml)

2. [You can also use bcrypt generators on the web](https://bcrypt-generator.com/)


![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6igdbp3vny3cxpdxz19x.png)
![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xvfbnzvnlqxn4m7mbcq.png)
![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lu2g6d02ylpghozgxim.png)

* ` web.yml (Upload this file in **suryasalertmanager ** Storage Account Share)`
```
basic_auth_users:
  suryauser: $2a$12$6g5f3MZriVtoOZ7GrCEwzuTBxnPQwHurpktXTXUu1neg/XZeHzipy
```

![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21neo0p7tnyzaitwvxjg.png)



* `Set an Startup Commmand for Alert Manager WebApp which includes web.yml`
```
az webapp config set --name $WebAppName --resource-group $ResourceGroupName --startup-file `
"--config.file=/etc/alertmanager/config.yml --web.config.file=/etc/alertmanager/web.yml --storage.path=/alertmanager --cluster.advertise-address=0.0.0.0:9093"
```

![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2012tymko9lb4adiyn1b.png)

![Configuration of Alert Manager Basic Authentication in Microsoft Azure WebApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mb1csom30puwhzc2ptd.png)
The best way to start your developer career
Tags: career, beginners
Published: 2022-08-19 11:27:00

I get this question a lot:

> Ayooooo! I wanna get into coding. What languages do you recommend?

Normally, I’d give the standard answer of Python or Javascript — each being a widely adopted language with many great resources available for learning. But lately I’ve been giving that response a little more thought.

In my opinion, the best way to start your developer career is by investing your time and energy into something that inspires you about technology. For example, if you like using apps, learn to make one yourself. If web design interests you, learn how to create a website. If you’re more into algorithms and maths, why not focus on something related to data science or machine learning?

The reason I say this is because from my own personal experience, I feel like focussing on web and mobile app development would have been a better use of my time at uni. Don’t get me wrong, all four years were incredibly valuable for learning theories & concepts, increasing my chances of employability and of course, making good friends. But (speaking only technically), I’ve only used a subset of what I’ve learnt from my degree in the real world and everything I’ve learned about web development since I did via some YouTube videos & online tutorials.

If getting a degree in computer science isn’t looking like an option, or something you’re not interested in, a lot of the online courses available assume no prior programming knowledge. This makes it even easier for beginners to get into coding — if you were worried you needed to know the basics beforehand. Not to mention, these courses are typically much cheaper than a £9000+ per year degree (at least here in the UK). For instance, [freeCodeCamp](https://www.freecodecamp.org) offers a wealth of knowledge and certifications for absolutely no fee whatsoever. People literally use the platform to get the knowledge they need and then get the job they want.

Speaking of which, if you’re completely stuck and don’t know where to begin, I’d recommend taking a look at a few junior level job adverts and taking note of what sort of programming languages and tools they expect you to be familiar with. Find some trends and commonalities in those ads and then, commit to learning that tech! Once you’re comfortable, use those skills to build a portfolio that will demonstrate your abilities to potential employers. The earlier exposure you have to the languages and tools you’ll be working with every day, the better!

If you were looking for some quick and dirty method to start your coding career, this probably isn’t what you wanted to read. Not gonna lie, coding in general is not the most straightforward thing to pick up and instantly become a master at. Even I still question my life choices every time I’m left gazing upon a meaty bug. But it’s the same with anything worthwhile — your time, energy and genuine commitment will be required to succeed. So regardless of whatever you’re seeking to learn, commit to it and you’ll get there. 💪🏾
How to move react component and it's html element into another parent component?
Tags: react
Published: 2022-08-19 11:25:00

I'm working on building a low code WYDIWYG platform to build web pages. So we need to drag a component(also a react component) from an old parent to a new one. The component should be reused to prevent destroy and rebuild it. The dom elements(vnode tree) of the component should be kept cause of some third party libs may alter dom directly.

In other words, move a react component to another parent component whit it's html element.

These components don't need props and other interactions with it's parent.