teleren/devto huggingface dataset:
6 HTML and CSS Projects For Your Portfolio
Tags: codenewbie, html, css, beginners
Published: 2021-07-21 22:36:04

After speaking to seasoned developers, you will quickly realize that the best way to improve your portfolio is by building projects. It is probably the best way to get better, because along the way, you'll be facing challenges that will require research to solve, and that ultimately improves your skills. 

We've made a list of 6 HTML and CSS Projects you can practice on and include in your portfolio!

# Table of Content

[1- Waitlist Page](#1-waitlist-page)

[2- Multi-step Form](#2-multistep-form)

[3- Fiber Landing Page](#3-fiber-landing-page)

[4- Spense Landing Page](#4-spense-landing-page)

[5- Nested Comments](#5-nested-comments)

[6- Remix Landing Page with Dark/Light Mode](#6-remix-landing-page-with-darklight-mode)

### [1- Waitlist Page](https://www.codewell.cc/challenges/60b3ea4c0cc72310b5a2494d)


![Hosterr Codewell Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626774043899/gjt7aqMVP.png)

You will learn:

- CSS Transforms
- Flex or Grid
- Responsive design

### [2- Multi-step Form](https://www.codewell.cc/challenges/60e98bf3a383e41090a3c346)


![Subway Multistep Form Codewell Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626773907862/iSMGEIUul.png)

You will learn:

- Creating multi-step forms
- Creating custom components 
- Responsive design


### [3- Fiber Landing Page](https://www.codewell.cc/challenges/608a7e639691700015db16d1)


![Fiber Codewell Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626774230522/Wx0UhxC-l.png)

You will learn:

- Absolute positioning
- Flex/Grid
- Creating cards

### [4- Spense Landing Page](https://www.codewell.cc/challenges/608a7a859691700015db16c5)


![Spense Codewell Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626774490382/muMMf72dw.png)

You will learn:

- Absolute positioning
- Flex/Grid
- Creating cards


### [5- Nested Comments](https://www.codewell.cc/challenges/608bc18ee0984a001540d7a6)


![Comment Codewell Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1626774571932/thMhkO9Dv.png)

You will learn:

- Positioning
- Created nested comments

### [6- Remix Landing Page with Dark/Light Mode](https://www.codewell.cc/challenges/609f74e13167fa10b79b7b9b)


![Remix Codewell Challenge.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1626774831538/iW12Ay2Aj.jpeg)

You will learn:

- Creating dark and light mode pages
- Work on a full sign up and onboarding process
- Creating blog cards
- Using variables and mixins to make your life easier

**You can also see a walkthrough of Codewell's challenges on [Youtube](https://www.youtube.com/channel/UCJBJ7trAPcTR3UmSbDDQywg).**
Install Powerline for Fedora
Tags: linux, bash
Published: 2021-07-21 22:18:46

Powerline is a very practical optical extension for vim and the Linux shell (bash, zsh, tmux, IPython, Awesome and Qtile). 

![Alt powerline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/culkv4yd8pbexoggal4r.jpg)

Here is a tutorial on how to install and configure Powerline under Fedora Linux.

[Install Powerline for Fedora](https://administrator.pro/tutorial/install-powerline-for-fedora-769434671.html)
Day 413 : Easy
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-21 21:47:37

_liner notes_:
- Professional : More of a chill day today. A meeting got cancelled so pretty much all day to work on stuff. I've been helping a community member debug a project they have. We just couldn't figure out why their application wasn't working the way it should. I add their use case to another project I was working on to verify it worked. It's been a few weeks. Today I just separated out their use case from my application and turned it into a standalone demo. I did it on Glitch and created a set up script so they could initialize their own copy of the application and test it out. So far, they said it was working for them, so now they can take a look at what they have and what's in mine and compare. Hopefully they can find the bug. It's difficult when you can't see a person's full code or their set up. Only code snippets. Did an outline for my next blog post. Found out that a new functionality that would help make things much easier for another demo I've been working on was implemented. It works great! I think developers are really going to enjoy the new feature. Looked a little into another project that I'll be helping out with.

- Personal : I assembled the hydraulic lift that I'm looking to use to lift the container I'll be making for my van. The quality seems really good. I'll be using like 4, but wanted to get one to make sure it looks okay. I found another version from a different manufacturer and order one to see which out of the 2 I'll end up using. I also tried to get the webhook issue I was running into working. The API support said they were getting an Unauthorized response from my endpoint. I tried it myself and was getting the same thing. Cool. I added some CORS stuff to allow the request to work out. Tested it again and got a response. Cool again. Tried my application again, but it still didn't make a call to my endpoint. I sent a message back to support with some information so they can look it up on their end so we'll see what they say. Watched some anime and studied a little Japanese before going to bed.

![A beach at Sakoneta Beach, Spain at sunset going into the ocean with jagged rocks coming up out of the ground.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcy15nevb6y74ohh077v.jpg)

Looking to do the same as last night. Watch some anime while eating dinner and then work on my side project and end the night studying some Japanese. Let's see how it goes. Going to take it easy tonight.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 9plP8l8zT_Y %}
Aprende a clonar objetos en JavaScript
Tags: javascript, beginners, vanillajs, tutorial
Published: 2021-07-21 21:18:10

En Javascript se puede clonar objetos de 3 maneras 
1. Object.assing()
2. Spread operator (...)
3. JSON

### Usando Object.assign()
```js
let persona = {
  "nombre": "Ali",
  "apellido": "Sequeira",
  "edad": 21
};

let clonarPersona = Object.assign({},persona);
```
 
### Usando Spread(...)
```js
let persona = {
  "nombre": "Ali",
  "apellido": "Sequeira",
  "edad": 21
};

let clonarPersona = {
  ...persona
 };
```
### Usando JSON
```js
let persona = {
  "nombre": "Ali",
  "apellido": "Sequeira",
  "edad": 21
};

let clonarPersona = JSON.parse(JSON.stringify(persona));
```
**Cual es la diferencia?**

Tanto spread como Object.assign estan realizando algo llamado ***Shallow copy*** mientras que JSON realiza ***Deep copy***
Que quiere decir esto? se refiere a la manera en la que javascript "clono" el objeto.

***Observa este ejemplo:***

```js
 let usuario = {
  nombre: "Ali Sequeira",
  ocupacion: "Desarrollador",
  favoritos: {
    pelicula: "Kill Bill",
    comida: "Hamburguesas"
  }
};
let usuario2 = Object.assign({}, usuario);
usuario2.favoritos.pelicula = "Down of the dead";

/* Ooops! :C espera que paso? */
console.log(usuario.favoritos.pelicula) //"Down of the dead"
```
como puedes observar los valores en ambos objetos cambiaron, la rason de esto es porque Object.assign()  o spread operator solo realiza shallow copy del objeto fuente. si los valores de la fuente almacena una referencia a un objeto esa referencia tambien es copiada. Es decir algunos valores siguen conectados al objeto original. Esto no pasa con "nombre" o "ocupacion" ya que al ser valores primitivos en este caso cadenas de texto(strings) no pueden ser mutados.

***Ahora intentemos con JSON***

```js
 let usuario = {
  nombre: "Ali Sequeira",
  ocupacion: "Desarrollador",
  favoritos: {
    pelicula: "Kill Bill",
    comida: "Hamburguesas"
  }
};

let usuario2 = JSON.parse(JSON.stringify(usuario));
usuario2.favoritos.pelicula = "Down of the dead";

/* WUJU! todo sigue igual! */
console.log(usuario.favoritos.pelicula) //"Kill Bill"
```

Porque utilizando JSON no sucede esto? bueno basicamente estamos utilizando "deep" copy que viene siendo lo contrario a shallow copy, los valores estan desconectados del objeto original debido a la sintaxis con la que se escribe utilizando las funciones JSON.stringify que transforma objetos a cadenas de texto(strings)  y JSON.parse que hace la inversa, transformando las cadenas de texto(string) a objetos.
Path aliases with Vanilla Node JS
Tags: node, express, codesnippet, vanilla
Published: 2021-07-21 21:12:41

I've been working on a side-project that is more or less an experimental attempt to make a Laravel-like clone with the ExpressJS framework. Along the way, I thought to myself, "Is it possible to use path aliases with out Typescript?". I did some researching and founds lot of answers but no real, tangible solutions. I came up with something on my own. Although it's not terribly pretty or clever, it does what I want it to.

{% gist https://gist.github.com/stuart-haas/d2f7897580cfffc525c69ca89ee7afb7 %}

Take a look and let me know what you think.

Thanks for reading!
LaTeX & Maths: Math Commands for Basic Operations
Tags: codenewbie, latex
Published: 2021-07-21 21:03:06

Hello, how are you?

In this post I talk about some basic commands to create basic operations such as sub and superscipts, roots and vectors. 

> Remember that you need to import the `amsmath` and `amssymb` packages, [here](https://dev.to/latexteada/latex-maths-amsmath-and-amssymb-packages-1733) I give you a brief introduction of these packages

## Operators

1. **Basic Operations** We can sum, substact, multiply and divide with `+`, `-`, `\times` or `\cdot` and `\frac{a}{b}`
2. **Sub and Superscripts** We create a superscript with `{a}^{b}` and a subscript with `{a}_{b}`.
    - **Roots** We create a root with `\sqrt{a}` or `\sqrt[a]{b}`
3. **Over and Under-braces** An over-brace with text is `\overbrace{x+y}^{text}` and an under-brace is `\underbrace{a+b}_{text}`
4. **Vectors** We create a vector with `\vec{a}` or `\hat{a}`

Let's create something with this

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

Produces

![Screenshot from 2021-07-10 12-15-44](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55gl8gwlhjab7s9kmqjq.png)
 
Wait! Do you remember that in [this](https://dev.to/latexteada/latex-maths-inline-and-displayed-formulas-90m) post I told you that there was a difference between *inline* and *displayed* formulas, well 

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

Produces 

![Screenshot from 2021-07-10 12-21-00](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb64xp92vgxsuwz0sjfb.png)
 
Did you noticed the difference? If not, in the fraction

> The *inline* formulas adapts the size of the operator to print it in the same line while *displayed* formulas expands the size of the operations showing its real size :) 

This is all for today. Thanks for reading 

Do not forget to follow me on Twitter `@latexteada` 

Greetings :)
Attaching a debugger to Jest
Published: 2021-07-21 21:00:13

Have you ever wished you could have the power of a debugger at your fingertips during tests? Well good news, you can! And it's fairly simple to set up if you have VSCode. 

First, open the VSCode terminal and click the dropdown arrow next to the plus icon.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ozyq0wkoghltbu26vxj.png)
 
Then select "JavaScript Debug Terminal" from the list

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61ilqotq4l2pixudsip7.png)

Now it's as easy as adding a breakpoint or a `debugger` statement and running your tests with the `--watch` flag!
Time and Date with JavaScript
Tags: javascript, webdev, tutorial
Published: 2021-07-21 20:58:14

This section is all about the best JavaScript libraries for handling date and time. These libraries are used to simplify and handle the complexity of dates and times in JavaScript. There are many advantages to using these JavaScript libraries which include the fact that they can help you with parsing, formatting, and setting a wide variety of date/time formats.
The most popular JavaScript library for handling date and time is Moment.js. Other libraries for handling date/time include:
-date-fns - this library provides you with a large amount of functions for working with dates
-moment - this library has been deprecated but it still remains one of the most popular
-datejs - this library provides you with a simple interface to work with dates
—
Dates and times are essential in a variety of fields. JavaScript has a lot of libraries to help programmers handle these two concepts better.
The JSS date library is the most popular one used for date handling. It is open-source and provides a lot of options for developers who need it. The library provides methods for parsing, formatting, manipulating, and generating dates, as well as handling time zones and calendars.
This JSS library can be used with other JavaScript frameworks like Angular, React or Vue just by including the library with the respective framework package manager (NPM or Yarn).
How to create animated meteogram
Tags: datascience, python
Published: 2021-07-21 20:41:48

### Using Python and Meteoblue weather newsletter

Meteogram is a graphical presentation of meteorological variables (observed or forecasted) through time, for a specific location. The meteogram below was created by combining several forecasts from [Meteoblue](https://www.meteoblue.com/)’s newsletter.

![Meteogram for the period from 12 December to 6 January. (data by Meteoblue, animated by author)](https://cdn-images-1.medium.com/max/2000/1*zQ23IV3GKInjaFMk94MR-w.gif)

Each “frame” contains 5-day meteogram with 3 simple graphs for a specific location:

* Temperature chart with weather pictograms. The time from sunrise to sunset is indicated in light yellow.

* Clouds in different altitudes: from a few clouds (light grey) to overcast (dark grey). Dark blue bars show hourly precipitation and light blue showers. An asterisk indicates snowfall.

* Forecasts of wind speeds are blue and gusts are green. The arrowheads point in the same direction as the wind.

In this article, you will find instructions on how to create similar animation for your neighbourhood.

Read More:
https://blog.devgenius.io/how-to-create-animated-meteogram-5a446f103073
My Journey: How I, an Almost 13 Year Old, Built Inkwyl
Tags: developer, motivation, webdev, computerscience
Published: 2021-07-21 20:34:36

Hi everyone.

My name is Ved Rane.

I am the creator and administrator of Inkwyl.

I am 12, turning 13 very soon.

This is my journey.

 

So let's start from the beginning.

As a kid, I used to like drawing and making comics. Never would I have imagined I would take up programming. My dream was to become a comic artist or animator.



When I was 9, I tried out a programming language called Ruby on a site called Codecademy. I really wasn't interested and thus didn't go far.



During the summer of 2020, in the COVID-19 pandemic, I decided to try coding again. I started with HTML, a language for building websites, and found it interesting that I could build websites.



I learned CSS and basic JavaScript soon and then learned Python.



I had also seen many videos on YouTube where people built video games using a program called Unity. Fascinated, I downloaded it myself. It uses C#, so I started learning that too.



I learned C# and basic C++, then I learned Java to make Android apps, and slowly by slowly, I started building my knowledge in programming.



When I was learning HTML, it had always been my dream to build a social network. Something where people would come to have fun and share.



I had failed many times before, simply because I didn't have the knowledge.



In February of 2021, I built a little site called UnusualUnit. It was the most basic of basic chat sites. I used Node.js, a server software using JavaScript, and Socket.io, a library for using websockets, which allow for realtime communication over the web.



I took it down since no one was using it and I didn't think it was really going to succeed.



Then I built Infogetpedia. This was a Wikipedia clone also built in Node.js. I ended up deleting this too as I didn't think that had potential either. It was pretty bad come to think of it, with many questionable design choices.

That held true for my next attempt, Wispkoe. This was yet another Node.js app. This was a social network where the only thing you could do was make small posts and read others. There were no accounts, no comments, no nothing. Just a place where you enter a username, title, and post, and that's it. This didn't have persistent storage so posts would occasionally disappear.



I kept this up for a bit. I developed a video game called Bubblegum Backlands and sold it for $3.99 on a site called itch.io.



I decided to take down Wispkoe.

By this time, it was summer of 2021.



I was thinking of something to make. Then, I got an amazing idea.



"What if I made a social media for writers?"

I decided on the name "Inkwyl".



I was wanting to try out a framework called Next.js, so I used that to build Inkwyl.



A lot of coding later, I made and published Inkwyl.



As we go, I'm continously updating it with new stuff.

And that's where we are now.



It's been an awesome journey.

Thanks for reading!

Originally published at https://inkwyl.ml/story/3e2c1607-12f2-479c-a43e-9e849ffc474a
How to add content recommendations to website
Tags: datascience, machinelearning, python, javascript
Published: 2021-07-21 20:24:47


## How to add content recommendations to website

### Show users what they want (even though they don’t even know what they want)

![*(Pic. by author. All logos and posters belong to their respective owners and are used for informational or editorial purposes to identify specific products and services.)*](https://cdn-images-1.medium.com/max/5120/1*mYegKS7KJR0FptJH8MyBlA.png)

Personalized content proposals are now an established element of the Web. Most social media serve content to their users based on multiple touchpoints of the user’s interaction with the platform. (Some of them also track the user outside their pages, which has caused a whole discussion about privacy and [blocking cross-domain tracking](https://medium.datadriveninvestor.com/alternatives-to-third-party-cookies-in-2020-857609f8f2bb).) Usually, the aim is to increase some interaction rate (i.e. measured by the number of visits, purchases or other actions per user).

![*Amazon utilizes the behaviour of customers to make predictions about what similar customers would like. Can you guess for which book these recommendations appear on? (source: Amazon.com)*](https://cdn-images-1.medium.com/max/2344/0*CKkBfbeVfGs9Fqs7)

Online shops increase their revenue with clever recommendations of products that appear at every stage of the sales funnel. But non-retail sites can also benefit from the advantages of recommender systems. If you run a website that provides content, you can use content recommendations to maintain user attention and increase visits.

In this article, using an example of a movie database web site, I’ll show you how to add content recommendations to your website. We’ll discuss basic approaches to this and then use a SaaS called Pipeless, which allows you to create a database with built-in recommendation algorithms.

Read More:
https://levelup.gitconnected.com/how-to-add-content-recommendations-to-a-website-be107c336117
Build Social Network on Top of Your Website
Tags: datascience, machinelearning, python, javascript
Published: 2021-07-21 20:21:56

## Build Social Network on Top of Your Website

### How to add social features to existing web application

![*(Picture by author. All logos and posters belong to their respective owners and are used for informational or editorial purposes to identify specific products and services.)*](https://cdn-images-1.medium.com/max/3200/0*wXEPZVnidrjzi6lX)

Social media apps have already taken up a significant portion of our lives and the app market, and their numbers continue to grow. A recent hot topic was Clubhouse and its voice chat features. The social networking giants are already imitating them.

This is a common pattern in this industry. An alternative player emerges, using something new as a bargaining chip, then Facebook and Twitter copy those new features. In this scenario, they leverage their user base and don’t have to waste resources on something *as unprofitable as being creative.*

But there is another side of the coin. You also have the chance to be part of the prosperous market. By using functionalities that reminds classic social media features (likes, feeds), you can improve the user experience and reduce cognitive overhead when learning about the new app and site.

In the previous article, we’ve created a movie search engine page and [add content recommendations](https://levelup.gitconnected.com/how-to-add-content-recommendations-to-a-website-be107c336117) to it. Since we used a pre-made dataset with user ratings of movies, the recommendations are static.

In this part, I’ll show you how to breathe some life into your site and give users the ability to co-create it. Using [Pipeless](https://pipeless.io/), we’ll add like/dislike buttons and a simple activity feed for each video.

Read More:
https://levelup.gitconnected.com/build-social-network-on-top-of-your-website-b6e16bc4cc07
🦹‍♀️ Fake websites: How To Detect Phishing
Tags: datascience, machinelearning, python
Published: 2021-07-21 20:11:52

Phishing is a type of social engineering attack, in which criminals using fake websites to obtain a victim’s sensitive information such as login credentials and credit card details. The phishing websites, emails and apps disguise themselves as trustworthy by making them visually almost indistinguishable from the real ones. The criminals spend a lot of time making their sites so similar to real ones that even experienced users if they will not conscious enough, can be tricked into thinking they are on a legitimate site. The user, convinced that they’ve visited the original site, enters the password, but instead of going to the original publisher, it goes to criminals who can use it for malicious purposes.

The damage done by cybercriminals can be significant and costly, especially if they gain access to the victim’s electronic banking account. Therefore, it is important to prevent this type of attack and detect threats as early as possible. Modern browsers and operating systems have built-in mechanisms to defend users.

These are usually based on lists of known phishing sites. For example, Firefox Phishing and Malware Protection works by checking the sites that you visit against lists of reported phishing, unwanted software and malware sites.

There is also extensive literature available on using scraped page content, IP information or other HTTP properties and processing those to create machine learning models.

In this article, we will present an approach based on screenshots of suspicious sites. By doing so, we will prepare a mechanism that is versatile and resistant to code obfuscation techniques that make crawling difficult. We will create a machine learning model that resembles a real person approach to detecting fraudulent websites by visual inspection.

Read More:
https://netlabe.com/how-to-detect-phishing-websites-using-screenshots-1c8dd310901b