teleren/devto huggingface dataset:
Make the Disney.com Landing Page in 90 minutes
Tags: css, webdev, tutorial, html
Published: 2021-12-26 23:03:58

## How to make the disney.com landing page in under 90 minutes - part 1

*Hello, and welcome to my awesome blog! 😊*![Disney](https://media2.giphy.com/media/d8SMqAtm3D9bYfOtcs/200.gif)

This blog is part 1, of my under 90 min YouTube tutorial where I am going to show you how you can copy the disney.com landing page only using vanilla html and css. This project also focuses heavily on flexbox, so if you want to get some practice with that then this is the perfect tutorial!

### Watch the tutorial on YouTube:
{% youtube 6SUBhdvK31A %}

In this first part, I'm showing you how to set up the html, and the styling for the mobile version of the website. In the second part I am going to show you how to make the page fully responsive and look good on desktop.

I have made a git repository that you can clone to follow along the tutorial (which I recommend)  
https://github.com/SebCodesTheWeb/disneyclone


## --About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch). I started this project to get some practice with css flexbox.

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself and making tutorials on my 
 [YouTube-channel](https://www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA) .

It would be awesome if you would follow along me on my journey and learn with me. You can follow my  [blog ](https://sebcodestheweb.hashnode.dev) and subscribe to my  [YouTube channel](https://www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA). And if you liked the YouTube video then it would really make my day if you left a comment or liked this post.

![Friends-gif](https://c.tenor.com/hdvxjTbUuzsAAAAC/thumbs-up-friends.gif)

Keep Coding.
React hooks
Tags: react, hooks, javascript
Published: 2021-12-26 22:35:17

---
title: React hooks
published: true
description: 
tags: react, hooks, JavaScript
//cover_image: https://bit.ly/3quobJh
---

React hooks...what is this? Yep, I know you might have heard of it some how, somewhere but don't have complete knowledge of what it is, if that's the case fear not I'm here to break it down to you the simplest way to digest it.

Let's start with React itself. What is React? In a simple word, it is a JavaScript framework that allows you to write your code easier and faster by reducing the amount of code you have to write, through the already made functions you can call and use; rather than creating yours afresh.. Oh that's a lot.

Now what are hooks? Hooks are now special functions that allow you to access some special functions in react; which will greatly minimize how many lines of code you write.

Let's see some examples that will make it simpler to understand.

Take for example, you want a particular section of your code to run immediately a page loads, you apply `useEffect()` function in react by importing it as in `import {useEffect} from react`.
Taking this React function as an example, you can call a function or a part of your code whenever, for example you can have an e-commerce and you want the cart items to increment when a user adds an item to cart, all you do is to check if the increment button was clicked and if it's clicked, increment the cart items by 1. Very simple and basic.

This is just a basic introduction to hooks, you can learn more from the official site https://reactjs.org/docs/hooks-intro.html
Ditch iTerm for Alacritty and tmux
Tags: tmux, terminal, tutorial, productivity
Published: 2021-12-26 22:34:35

## setting up terminal theme

First thing that needs to be done is how to manage terminal theming. But for the full experience (inactive window dimming) this is an important first step.

What's important here is setting index color 18.

### alacritty-shell option 1

Follow the instructions for installing [alacritty-shell](https://github.com/casonadams/alacritty-shell)

### alacritty theme manual update option 2

Copy a 256 color theme from [alacritty-themes](https://github.com/aarowill/base16-alacritty) into alacritty.yml file.

## setting up tmux

Add the following snippet to `tmux.conf` file. 
**NOTE** if using alacritty-shell use `colour247` instead of `colour18`

- Note `fg=colour2` is terminal green
- Note `bg=colour18` is using the index color set from the theming above.  It is important that colour18 is a lighter/darker shade of the background color.  Usually by about 5-10 lightness values.

```conf
set -g pane-active-border-style fg=colour2,bg=colour18
set -g pane-border-style bg=colour18
set-window-option -g window-active-style bg=terminal
set-window-option -g window-style bg=colour18
```

## see it in action

also using [walh](https://github.com/casonadams/walh) vim theme for dimming with vim screens.

![dimming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38z0zbvih4eg4blmhlqb.png)

![dimming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57scqtrtfmbdtw5046hl.png)
 
![dimming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y392l8i5jchr8l3ch5x8.png)

![dimming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kelm2rbc4yglu0zjgdm0.png)
CompileSwift Podcast – 2021 Wrap Up
Tags: podcast, swift
Published: 2021-12-29 02:54:16

---
title: CompileSwift Podcast – 2021 Wrap Up
published: true
date: 2021-12-26 22:21:38 UTC
tags: Podcasts,Swift,
canonical_url: https://peterwitham.com/podcasts/cs-s03-e21/?utm_source=rss&utm_medium=rss&utm_campaign=cs-s03-e21
---

A short wrap up for the end of year CompileSwift podcast so you can get to those celebrations.

{% spotify spotify:episode:7qC5en4z5bzs7V9S4inqZL%}

The post [CompileSwift Podcast – 2021 Wrap Up](https://peterwitham.com/podcasts/cs-s03-e21/) appeared first on [Peter Witham](https://peterwitham.com).
Context may be reactive in Svelte if...
Tags: svelte, context
Published: 2021-12-26 21:55:08

> **NOTE** : In case codesanbox.com IDE would throw an error on initial load, just try to reload the IDE

{% codesandbox context-may-be-reactive-dz5y4 %}

> ...if re-invoking `setContext(context_key, context_value)` again with same _context_key_ but different _context_value_ , make sure typeof, in this case, typeof [object Object] preserved, this way you definitely can see (_if you followed comments carefully_) that we can have context reactive , unless I missed a part somewhere, then please correct me in the comment section below , thanks !
5 Solutions: Reverse String Algorithm in JS
Tags: javascript, algorithms
Published: 2021-12-26 21:32:33

Reverse string is a popular algorithm question that can be asked during interviews. Here are five different ways to solve it: 

**Solution 1:**

```
function reverse(string){
  return string
  .split('')
  .reverse()
  .join('');
}
```



**Solution 2:**

```
function reverse(string){
    let revString = '';
     
    for (let i = string.length - 1; i >= 0; i--){
        revString = revString + string[i];
    }
    return revString
  }
```



**Solution 3:**

```
function reverse(string){
    let revString = '';
     
    for (let i = 0; i <= string.length -1; i++){
        revString = string[i] + revString; 
    }
    return revString
  }

```

**Solution 4:**

```
 function reverse(string){
      let revString =''; 
    for (let char of string){
        revString = char + revString; 
    }
    return revString
  }
```

**Solution 5:**

```
function reverse(string){
    let revString = ''; 
    string.split('').forEach(char => 
        revString = char + revString
    );
    return revString;
}
```
8 Healthy Habits to become more Productivity for Developers
Tags: webdev, productivity, management, codenewbie
Published: 2021-12-26 21:24:43

In this short post ,i share with you 8 tips help us to be more productivity. 

- Sleep well for 8 hours a day
- Drink 6-8 glasses of water a day
- Do exercises or walking for 30 min.
- Eat Healthy Food .
- Read a book. 
- Learn new thing everyday.
- Sit  in the sun For 15 min or take vitamin D.
- Enjoy your live.
 

Do you have another tip? tell us.
[AWS Experiment] 2 - Lambda in Private Subnets
Tags: aws
Published: 2021-12-26 21:01:00

# Experiment goal: Can we use AWS Lambda functions in our private subnets?


```js
const https = require('https');

exports.handler = (event, context, callback) => {
    const https = require('https');

    https.get('https://encrypted.google.com/', (res) => {
      console.log('statusCode:', res.statusCode);
      console.log('headers:', res.headers);
    
      res.on('data', (d) => {
        process.stdout.write(d);
      });
    
    }).on('error', (e) => {
      console.log("Error");
      console.error(e);
    });
};
```
> *Lambda function code to check the internet connection (Node js)*

```bash
aws lambda invoke --function-name vpc-lambda-2 out --log-type Tail --query 'LogResult' --output text --region us-west-1 | base64 -d
```
> *A bash command to invoke the Lambda function from an EC2 instance.*

## First Experiment - Can we invoke a Lambda function in a private subnet from an EC2 instance in a public subnet?

### Launches

- I deployed an EC2 instance in a public subnet to connect through AWS console.

- I deployed a Lambda function inside of the private subnet, with a route table without any internet gateway route specified.

### Attaching roles

- The EC2 instance has an attached role of `LambdaFullAccess`

- I attached `AWSLambdaVPCAccessExecutionRole` to the Lambda function, which gives it a permission to manage elastic network interfaces to connect your function to a virtual private cloud (VPC).


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

> *Attached policies of the Lambda function.*

![Private subnet's routing table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jilce63joefqnb8ovpqv.png)

> *There is no IGW configured for 0.0.0.0/0* in private subnet.

- **...and I was able to invoke a Lambda function from an EC2 instance in the different subnet(public), because of `AWSLambdaVPCAccessExecutionRole` that I attached to the Lambda function.**

- And at the same time, I was able to confirm there is no internet access, which is an intended situation.

![No internet access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rdyafkf36cir6221zm0.png)

> *Lambda function has been fired, but there was no internet connection*

## Second Experiment - Accessing the internet from the Lambda function

- [AWS Tutorial Link](https://aws.amazon.com/premiumsupport/knowledge-center/internet-access-lambda-function/)

- There are two options which are:

1. NAT
2. VPC Endpoint

### 1. Using NAT

- I created a NAT attached Elastic IP and associated with the public subnet.

![NAT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d1zovfqrniwi8p30gl2.png)

> *Updated the routing table of the private subnet.*

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qbk77fydfnl881wpzw3.png)

> *Lambda function successfully reached out the internet.*

### 2. Using VPC Endpoint

...update later

## Conclusion
Dec 26: Dev Holidays Guide ⛄️
Tags: stateofdevs, bahhumbugtip, mentalhealth, tips
Published: 2021-12-26 20:46:15

Bah Humbug Tips are my own way of coping & recovering from burnout & holiday stress.

###🎄  Today's Bah Humbug Tip of the Day. 
{% twitter 1475154465728520194 %}

######🎁 Today's Options 
{% twitter 1475154467574013959 %}

You can find more tips here & on [Twitter](https://twitter.com/stateofdevs). Let me know in the comments if any of these tips helps.

> If you're struggling w/ burnout & open to sharing your story, please [take the State Of Devs survey](https://stateofdevs.com/helps/dev). 🗳 Thanks!
The UNI Auth System
Tags: beginners, webdev, node, react
Published: 2021-12-26 20:30:02

---
title: The UNI Auth System
published: true
description: 
tags: beginners, webdev, node, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx20vtdgfwr5stdogpb0.png
---

Merry Christmas every one
before I stop working for two months I wanted to do one more thing for the beginners developers in node and react
it's a gift you can check it now or after Christmas

a simple auth system made with node, express, react and some cool styling with tailwind

you can make it your start for creating your next project

I hope it helps you create something cool or make you improve your skills

and tell me if there is something more I can add to the project to make it better

[check the project from here](https://github.com/mahmoud-bebars/Uni-Auth-Model)
Spotify Wrapped Animation using GSAP
Tags: codepen
Published: 2021-12-26 20:27:03

<p>The lovely original Spotify site <a href="http://harunpehlivan.fm.tc/" target="_blank">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</a> is built in WebGL but I wanted to have a stab at it using DOM elements and of course Greensock's GSAP using the SplitText plugin.</p>

{% codepen https://codepen.io/harunpehlivan/pen/jOGajWW %}
Svelte – props downlifting (pattern) & uplifting (anti-pattern)
Tags: svelte
Published: 2021-12-26 19:58:44

To feel oneself completely on foot you need to be able go back and forth, right? So here it goes...

---

> **NOTE** : In case codesanbox.com IDE would throw an error on initial load, just try to reload the IDE !

### <u>Svelte state downlifting (pattern)</u>

{% codesandbox svelte-state-downlifting--pattern-l4oz0 %}

> You probably noticed I've used slots , I'll guess this is "at a good place at a good time" to exploit slots tho...

### <u>Svelte state uplifting (anti-pattern)</u>

{% codesandbox svelte-state-uplifting--anti-pattern-hvpem %}

> ...

---

If any suggestion how to improve the source code or relevant , please let me know in the comment section below . Take care !
pros and cons of Props, State, Props drilling & Context API.
Tags: react
Published: 2021-12-26 19:52:17

**Props**: Props is where assigning properties. Props are used for reuse of components with custom value. Props are external, immutable and controlled by whatever renders the component.

**State**: State is where you store property value. State is internal, mutable and controlled by the component itself.

---
**Props vs State:**

_props_:

- props pass through the component
- props use as parameter
- props are external and immutable

_state_:

- state stay within the component
- state declared inside the function
- state are internal and mutable

---

**What is prop drilling?**
When you pass data from one part to another part by the help of some additional part, that additional part is called props drilling.


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

**Problem of prop drilling**:


- Updating data format
- Renaming props

**Updating data format**: If you pass an object and where you want to add another property like department, then you have to update all the nested components. 
`<App user={"name": "Harsh", "department": "cse"} />`

**Renaming props**: If you want to rename your props name, then you have to rename all the nested components.
For example: user to myUser
`<App myUser={"name": "Harsh", "department": "cse"} />`

---

**Context Api**: React context is a way to manage state globally.
-It solves props drilling issues
-It can be used together with the useState hook to share state between deep nested components more easily.


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

---

It has three parts like
-firstly, import React.creatContext
-secondly, create Context.provider
-thirdly, create  Context.Consumer


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy561sfn488rh73nr77v.PNG)
In this figure, we see that, import React.creatContext and create Context.provider and Context.Consumer

---


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swbmgsmdfmyu2qsucw9y.PNG)
16 useful resources to design and develop beautiful web apps
Tags: webdev, css, design, ux
Published: 2021-12-26 19:51:33

<!-- ## Table of contents -->

## Learn & Master 📑

| Resource | Description |
| -------- | ----------- |
[CSS in Depth - Keith J. Grant](https://www.manning.com/books/css-in-depth) | Highly recommended and reviewed book to improve and master the fundamentals and concepts as well as get introduced to branching technologies.
[CSS Protips](https://github.com/AllThingsSmitty/css-protips) | A collection of tips to help take your CSS skills pro.
[BEM by example](https://sparkbox.com/foundry/bem_by_example) | BEM is a popular naming convention for CSS class names. This thorough guide covers the fundamental concepts and has plenty of examples.
[UI & UX cheat sheet pdf](https://drive.google.com/file/d/1sxsRHa20MhW0X8NYuxUvhrIT3XLoGDtM/view) | 21 Quick, and Easy Tips to help you improve your designs fast.



## Practice & Compete 🤓

| Resource | Description |
| -------- | ----------- |
[Flexbox Zombies](https://mastery.games/flexboxzombies/) | CSS Flexbox fundamentals educational game.
[CSS Grid Garden](https://cssgridgarden.com/) | CSS Grid layout fundamentals educational game.
[Frontend Mentor](https://www.frontendmentor.io/challenges?sort=difficulty&#124;asc&languages=HTML&#124;CSS) | Various challenges from easy, simple and small website sections to advanced and complex full projects. Highly recommended.
[CSS Battle](https://cssbattle.dev/) | CSS competitive code golfing. Fun and thematic small challenges.


## Tools 🛠

| Resource | Description |
| -------- | ----------- |
[Animista](http://animista.net/) | CSS animations toolbox.
[CSS Tricks](https://css-tricks.com/) | Up-to-date articles, guides and more content you should check out.
[CSS Cheat Sheet](https://htmlcheatsheet.com/css/) | -
[Grid Cheat Sheet](https://grid.malven.co/) | -
[Flexbox Cheat Sheet](https://flexbox.malven.co/) | -


## Inspiration ✨

| Resource | Description |
| -------- | ----------- |
[CSS Nectar](https://cssnectar.com/) | CSS website design showcase. Websites are submitted and voted as website of the day. Winners are permanently added. You can browse by category, feature and color.
[Best Website Gallery](https://bestwebsite.gallery/) | Collection of handpicked beautiful websites being updated since 2008.
[Siteinspire](https://www.siteinspire.com/) | Yet another showcase with thousands of websites and plenty of search filters.


<!--
## TITLE

| Resource | Description |
| -------- | ----------- |
[QWEQWE](wwwQWEQWEcom) | loremIpsum.
[QWEQWE](wwwQWEQWEcom) | loremIpsum.
[QWEQWE](wwwQWEQWEcom) | loremIpsum.
-->


Leave a comment with a resource you feel also must be shared here.

_If you found any broken link or want yours removed, please contact me._
Easiest Way to Implement Heatmaps in your React applications 
Tags: react, heatmaps, googlemapreact, javascript
Published: 2021-12-26 19:39:38

To implement Heatmaps visualization in react apps, we need 

1. Google Maps API key  
2. google-map-react package
 
To get Google Maps API key, visit this [page](https://developers.google.com/maps/documentation/javascript/get-api-key) and follow the instructions.

As mentioned above, we use **google-map-react** package.
You can install it by running,

```
npm i google-map-react
```
To get more info about this package, visit [--><--](https://www.npmjs.com/package/google-map-react)

Now lets create a Heatmaps.js component.
**Heatmaps.js**
```
const Heatmaps = () => {
  return (
    <GoogleMapReact
      bootstrapURLKeys={{ key: YOUR_API_KEY }}
      defaultCenter={{ lat: DEFAULT_LAT, lng: DEFAULT_LNG }}
      defaultZoom={4}
      heatmap={{ positions: LIST_OF_POINTS, options: {} }}
      heatmapLibrary={true}
    ></GoogleMapReact>
  );
};
```
Pass the coordinates data in **heatmap** props and don't forget to set **heatmapLibrary** props _true_.

The **LIST_OF_POINTS** passed to positions[in heatmap prop] is an array of coordinates. Export coordinates array by creating a new file HeatmapPoints.js.
**HeatmapPoints.js**

```
export const LIST_OF_POINTS = [
  {
    lat: 9.9256235,
    lng: 78.1177802,
  },
  {
    lat: 9.920991599999999,
    lng: 78.1118825,
  },
  {
    lat: 9.9206833,
    lng: 78.1123521,
  },
  //Add as many coordinates you want.
]
```
**Note**
Make sure the container element of Heatmaps components has width and height. The map will fill the parent container, but if the container has no size, it will be collapsed.

Hope you find this useful!
Week-4 Day-6
Published: 2021-12-26 19:37:25

1. My target: Now I am looking for an internship to develop my skill and knowledge. Then after completing the internship I want to join a full-time job.

2. Where and how: (কোথায় বা কোন দেশে জব খুজতেছো ):
I am especially interested in the USA, India, UK, etc.

3. Expectation: I want a paid internship. Because I want to develop my skill through it which will also support me financially then I want to join the full-time job. 

4. আমার কি কি জিনিস ইম্প্রুভ করা উচিত 
Ans: I think I need to improve my skill specially on backend.I also want to learn MySQL though I worked on MongoDB.In addition, I want to develop my skills in new technologies also.I want to focus on redux, angular, MySQL, etc.

5. Sincerity: Time management
Ans : 
Sincerity : 
A sincere person takes pride in their work and is careful of the ramifications their actions can have on others. Sincerity is an essential element of life. A sincere person is always welcomed because of his truthful mind, friendly attitude, and unaffected and real personality. 

Time management : 
Time management affects performance and productivity at work. It will improve employee efficiency and help to meet deadlines, and produce better quality work. Improving your time management at work allows you to enhance your performance and achieve your desired goals.

6. Professionalism: The concept of professionalism goes beyond ethics; it encompasses image, manners, respect, appearance, excellence, quality, expertise, and other factors. 

7. Honestly: We believe honesty is the foundation of deep and meaningful relationships between companies and their employees and customers.

8. Commitment: Job commitment is the feeling of responsibility that a person has towards the mission and goals of an organization. When an individual has job commitment, he or she is more likely to perform tasks and responsibilities that will help an organization achieve a goal.

9. Challenge 
Challenging jobs provide an opportunity to strengthen, develop, and learn skills applicable to the work world. That’s why I like challenges in my job which make me so happy after success.

10. Ethics
Examples of ethical behaviors in the workplace include; obeying the company's rules, effective communication, taking responsibility, accountability, professionalism, trust, and mutual respect for your colleagues at work.