teleren/devto huggingface dataset:
Logo reveal card hover effect
Tags: codepen, css, webdev, ui
Published: 2023-07-28 17:06:25

{% codepen https://codepen.io/Smit29/pen/WNYYRab %}

Hey everyone! I'm excited to share my latest project where I explored the creative possibilities of CSS and built a captivating dynamic logo using **83 different-sized divs!**

🟨 The Idea:
The inspiration behind this project came from my passion for CSS and graphic design. I wanted to challenge myself to create something unique, and the idea of crafting a logo purely with CSS divs seemed like an exciting prospect.

🟨 Designing Process:
To begin, I used Adobe XD to design the logo layout and calculate the precise positions for all the 83 divs. (I used **uiverse.io **logo. uiverse.io is a great website for hundreds of custom elements made with CSS.)This step helped me visualize the final outcome and fine-tune the logo's overall appearance.
![Adobe Xd Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr48sprlam008jihdfnh.png)


🟨 Data Organization:
To efficiently implement the design, I created an Excel sheet where I documented all the necessary information for each div, such as size and position coordinates. This allowed me to keep track of every element and streamline the coding process.
![Excel Data for size, top position and left position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te8f48bk8e9q2k833hig.png)


🟨 HTML and SCSS Implementation:
With the design and data ready, I started coding the project using HTML and SCSS. The random placement of the divs within the card was the first step to achieve a dynamic and playful effect when the logo is not formed yet.
Arranging the 83 divs to random places in the card was no small task! It took a substantial amount of time and dedication to ensure that the divs didn't overlap during the hover effect. 
![Implementation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhsxsyx1mdvgqul185gk.png)


🟨 Hover Effect - Unveiling the Logo:
The magic happens when you hover over the card! All the divs smoothly transition to their designated positions, coming together to form the stunning logo I envisioned.

[My UIVERSE Profile](https://uiverse.io/profile/Smit-Prajapati)
Headless CMS explained ✨
Tags: frontend, wordpress, website, webdev
Published: 2023-07-28 16:58:39


🎯 What is a Headless CMS? 

A headless CMS is a modern approach to content management, where the content is separated from the presentation layer. It provides a central hub to create, manage, and deliver content to various platforms and devices, giving you the freedom to create engaging user experiences without being tied to a specific frontend.


🌐 Key Benefits 

✅ Seamless Content Distribution: With a headless CMS, you can publish content across websites, mobile apps, IoT devices, and more with ease.

✅ Faster Development: Decoupling content from the frontend allows developers to work independently, accelerating development cycles.

✅ Flexibility & Personalization: Tailor content to specific audiences and deliver personalized experiences for your users.


💻 Tech Stack

Headless CMS typically works with APIs, making integration with your preferred tech stack a breeze!

📌 Frontend: React, Vue.js, Angular, etc.
📌 Backend: Node.js, Ruby on Rails, Django, etc.
📌 Database: MongoDB, PostgreSQL, MySQL, etc.


🚀 Popular Headless CMS Options

1️⃣ Strapi: A fully customizable open-source CMS written in Node.js.
2️⃣ Contentful: Developer-friendly, cloud-based platform with a powerful API.
3️⃣ Sanity: Real-time collaborative CMS with a rich text editor and flexible data structure.


🔍 Is Headless CMS Right for You?

✅ Do you need to deliver content to multiple platforms?
✅ Want to build a dynamic and personalized user experience?
✅ Need faster development cycles and seamless collaboration between teams?

If you answered YES to any of these, then a headless CMS might be the perfect fit for your content management needs!


📝 Conclusion:

Headless CMS empowers you to take full control of your content and its delivery. Say goodbye to limitations and hello to endless possibilities! 🚀
Why the 1880 US Census lead to the invention of the computer
Tags: youtube, algorithms, computinghistory
Published: 2023-08-11 19:17:47

---
title: Why the 1880 US Census lead to the invention of the computer
published: true
date: 2023-07-28 16:44:44 UTC
tags: YouTube,Algorithm,ComputingHistory
canonical_url: https://ncot.uk/why-the-1880-us-census-lead-to-the-invention-of-the-computer/
---

How did the 1880 US Census and the end of World War 2 lead to the invention of the computer? What was it that kickstarted the Information Age? Come with me as we find out how the need to count everyone in 1800s America directly lead to the modern information age and all the technology we take for granted.

So just how do you count everyone in a large country like the US, and once you’ve gathered all that data, how can a machine be instructed to sort and organise the information so it makes sense to someone?

In fact, how do we even program computers to sort data? Sorting is a fairly easy thing for people to do, we do it every time we want to play a game using cards. However what process would we take when using a computer?

In this video I go through the history of why it’s necessary to automate this task, the people involved and then look at several [sorting algorithms](https://en.wikipedia.org/wiki/Sorting_algorithm) – [bubble sort](https://www.youtube.com/watch?v=xli_FI7CuzA), insertion sort, quick sort and merge sort.

{% embed https://youtu.be/mHRkDezkRps %}

<!-- YARPP List -->
### Related posts:

1. [Atari ST Mouse – How’s it work anyway?](https://ncot.uk/atari-st-mouse-hows-it-work-anyway/ "Atari ST Mouse – How’s it work anyway?")
2. [Switch Joycon Drift Repair](https://ncot.uk/switch-joycon-drift-repair/ "Switch Joycon Drift Repair")
3. [Conways Life in Z80 Assembly](https://ncot.uk/conways-life-in-z80-assembly/ "Conways Life in Z80 Assembly")
A Beginner's Guide to Poetry. (Easy Python Packaging and Depency Management)
Tags: python, python3
Published: 2023-07-28 16:41:11

This video discusses Python Dependency management using Poetry. Python Poetry is a popular dependency management and packaging tool for Python. It was created to simplify the process of managing project dependencies and packaging Python applications. 

Python Poetry is designed to be easy for developers to use, and it can package up their projects in a way that makes them easy to share with others. Many developers find it helpful because it takes care of a lot of the technical details automatically, making the whole process smoother. It's a popular choice in the Python community and works well with other tools that developers commonly use.
{%youtube rlbXxZqaOVU%}
D5 #100DaysOfOSS
Tags: 100daysofcode, 100daysofoss, programming, opensource
Published: 2023-07-28 16:38:05

D5 #100DaysOfOSS with #saucedopen


Today, I used Express JS and Postman API to establish and examine the backend of my simple project. Also got a chance to review some pull requests from the Postman Docs repository. 

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

#100DaysOfCode #opensauced #OpenSource
How to host a node.js application in cPanel
Tags: node, cpanel
Published: 2023-07-28 16:30:48

Node.js is a popular, event-driven JavaScript runtime where you can use to build robust web applications. If you are already familiar with creating node.js apps, you may be wondering how to get your app onto a shared server. In this article, I explain how to host a node.js application in cPanel.

To deploy node.js application on hosting, firstly you have to create the application. You can create application using cPanel graphical interface by selecting **Setup Node.js App** under **Software** section of cPanel home screen.

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

Now click **CREATE APPLICATION** to begin the application setup on the Node.js App page:


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

Then on the **CREATE APPLICATION** form, fill out the following fields:

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

- Node.js version: Choose your preferred version from the dropdown list. (Latest version is recommended)
- Application mode: Select either Development or Production from the list. One may initially choose Development and then switch to Production.
- Application root: It is for the location of application files in the file system. To form the full path to the application files in the cPanel home directory, the value will be appended to "/home/>username</>applicationroot<".
- Application URL: It is to form a web URL of the application.
- Application startup file: The very first file that the application will process once it has been launched.
- Environment variables: This is a user-definable value that can affect the way running processes will behave on a application.

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

Click **CREATE** after finishing the form. After created successfully an application starts automatically. Then, click **STOP APP** to stop the application and upload your all node app files on application root from **File Manager**. Now, you need to back on Node.js App page for install dependencies. For install dependencies, click **Run NPM Install**. After successful installation, click **START APP** to start again the application.

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

Now "It works!"

> If you want to run MongoDB with your node app, then you need to open port 27017 for your hosting by creating a support ticket.
Create EC2 Instance
Tags: scor32k, aws
Published: 2023-07-28 16:19:13

# Create EC2 Instance

In this post we will learn to create an EC2 Instance.
For full tutorial follow [this](https://www.youtube.com/watch?v=Dc0t4LDOySY&list=PLdpzxOOAlwvLNOxX0RfndiYSt1Le9azze&index=4&pp=iAQB) video 

1.  Signup/Login to the console. Follow [this](console.aws.amazon.com/) link

2. On the search bar search `ec2` and click on the 1st option or url with text **ec2** _i.e_ ec2

3. Click on the **red colored rectangle** mentioned below

	![Instance Creation](https://imgur.com/wXFU4jU.png)

4. Click on the **Launch Instance**

![](https://imgur.com/utMETuI.png)


5. Fill the details
- Name -> [any name](https://imgur.com/7WPpqrQ.png) of the instance of your wish. 
	
	![Name of instance](https://imgur.com/7WPpqrQ.png)

- OS Image -> the OS you want for your remote server. 
	- [recommended](https://imgur.com/XUUsFlB.png): **ubuntu**
	
	
![OS Image](https://imgur.com/XUUsFlB.png)

- Instance type -> This include the combinations of cpu, storage, memeory, networking capacity.
	- You choose as per your requiremtns.
	- [recommended](https://imgur.com/mErPeiI.png): **t2.micro** as this is included in free tire

![Instance Type](https://imgur.com/mErPeiI.png)

- Key Pair login 
	- This will be used for you to login in your aws instance

	- Create new one or choose existing
	- Creating new  key pair
		- Click on [create new](https://imgur.com/PCLh5Ph.png)
		- Give **[any name and leave rest unchanged](https://imgur.com/OuJXoOj.png)** and then click on the **create key pair**. Download it to any location
		- Once the above steps are done, click on the [reload icon](https://imgur.com/wyh3sdT.png)
		- Then, choose the [key](https://imgur.com/rh0pDyV.png) from the dropdown
	- User existing one 
		- click on the [reload icon](https://imgur.com/wyh3sdT.png)
		- Then, choose the [key](https://imgur.com/rh0pDyV.png) from the dropdown
- **Leave rest as it is.**

6) Click on the **Launch Instance.**

7) After all this, [Click on](https://imgur.com/tXyNKnl.png) on the Successfully initiated launch of instance **i-xXXxXXxx** 
	-	i-xXXxXXxx -> your instance ID. Every instance will have its own ID
	
![Click on instance id](https://imgur.com/tXyNKnl.png)

8) Probably your screen should be like [this](https://imgur.com/js5Fs18.png)

![Screen](https://imgur.com/js5Fs18.png)

9) Click on the **[Instance ID](https://imgur.com/3lCZAah.png)**

![Instance ID](https://imgur.com/3lCZAah.png)

10) Copy the **[Public Ip Address](https://imgur.com/0ZKfYXi.png)**

![Ip Address](https://imgur.com/0ZKfYXi.png)

10) Open your [favourate terminal](https://imgur.com/yYOhmnC.png) 
	- Goto the path where the key pair file [was](https://imgur.com/gOi8lxB.png) downloaded.
	- use command `chmod 400 filename.pem`, as like [this](https://imgur.com/JedyEOY.png).
		- If you are interested behind the scene of `chmod 400` follow [this]().
12.   Type the commad 
	
```bash 
ssh -i /path/of/key/downloaded ubuntu@public.ip.address

```

![Command](https://imgur.com/50FXasm.png)
	
- Click yes and **enjoy**

![Final Output](https://imgur.com/1ex8kJQ.png)
DILI #8: This is BS.
Published: 2023-07-28 16:10:59

Today, I will talk about BS. You've guessed it, it's Binary Search! Opposed to its more nonsensical cousin, BS is a really efficient and most definitely sensible algorithm to find an item from a sorted array or vector. 

For starters, I did not do a good job covering array and just jumped to doing a problem. So, here we go. An array is like a list of items where you can store many of same type of data in one array. Imagine going into a supermarket, there are different sections for meats, vegetables, fruitsa and etc. Each of those sections is an array and they're storing something of their own types. So, a "meat" array can only store "meat" and nothing else but "meat".

The same thing also applies to vector but the only key difference is an array size/length has to be established beforehand. Whereas a vector size/length can grow or shrink dependent on the type of "meat" you took or put back.

That should brief the basics of array and vector. Now, we need to talk BS. BS works by dividing a sorted list in half repeatedly until you've reached the desired result. For example, try playing the higher lower number game. I will think of a number in a range and you can try to guess it. The most efficient way to do it every single time is to guess the halfway point. And everytime, we will get closer and closer to the answer by a half. And to put this in code, Here's a step-by-step description of using binary search to play the game above: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k3mg4jtq0dj7ac319ux.png)
1. Let min = 1 and max = n.
2. Calculate the average.
3. If you guessed it, yay!.
4. If I say higher, set your min to that halfway point.
5. If I say lower, set your max to that halfway point.
6. Then rinse and repeat from step 2.

This is the simplest form of BS:

```c++
#include <iostream>
using namespace std;

int binarySearch(int array[], int x, int low, int high) {
  while (low <= high) {
    int mid = low + (high - low) / 2;

    if (array[mid] == x)
      return mid;

    if (array[mid] < x)
      low = mid + 1;

    else
      high = mid - 1;
  }

  return -1;
}

int main() {
  int array[] = {1, 2, 3, 4, 5, 6, 7, 8, 9};
  int x = 4;
  int n = sizeof(array) / sizeof(array[0]);
  int result = binarySearch(array, x, 0, n - 1);
  if (result == -1)
   cout << "Not found";
  else
    cout << result;
  return 0;
}
```

With this, you can find the item in your list most efficiently. Just sort the array or vector and BS your way to the answer. With BS-ing in your skillset, you can make everyone gasped of how amazing you are!

REFERENCES:
[GeeksforGeeks](https://www.geeksforgeeks.org/binary-search/)
Angular Performance Improvement
Tags: angular, improvement, performance, cache
Published: 2023-08-11 09:59:02

---
title: Angular Performance Improvement
published: true
date: 2023-07-28 15:34:14 UTC
tags: angular,improvement,performance,cache
canonical_url: https://zakimohammed.medium.com/angular-performance-improvement-bb2f513e5918
---

![](https://cdn-images-1.medium.com/max/800/0*yD-2COzAPZlO_8mn.jpg)

Gaining performance is not an easy job; a lot of hair loss cases has been reported in order to achieve tiniest bit of improvement in term of app speed.

In this series our focus will be to save those losing hairs by doing what best we can do to speeden up the app. This includes post related to Brotli, Gzip, Caching, API data caching, etc.

1. [Gzip Dockerized Angular App With Nginx — Ngdocker | CodeOmelet](https://codeomelet.com/posts/gzip-dockerized-angular-app-with-nginx-ngdocker)

![](https://cdn-images-1.medium.com/max/800/1*kqP4ScQ7VapPryRFuKEQcg.jpeg)

Leveling up by taking performance improvement measures for our super friendly NgDocker app. In this article, we will explore how we can enable Gzip to improve performance at a hulking scale.

[2. Nginx Cache Config For Dockerized Angular App — Ngdocker | CodeOmelet](https://codeomelet.com/posts/nginx-cache-config-for-dockerized-angular-app-ngdocker)

![](https://cdn-images-1.medium.com/max/800/1*ZMLtVuxGQ6OGcJaxTgMF_Q.jpeg)

App running so fast, even the cops are chasing! Not breaking any law here just configuring Nginx caching for our Dockerized Angular app. In this article we will address the need for speed for our super silly NgDocker app by setting up the Nginx cache configurations for static files.

[3. Cache Angular Http Request Using @Ngneat/Cashew | CodeOmelet](https://codeomelet.com/posts/cache-angular-http-request-using-ngneat-cashew)

![](https://cdn-images-1.medium.com/max/800/1*4BRAL2zK85BdcFoQpQb09g.jpeg)

The time of not wasting time on caching HTTP request data has come. Presenting @ngneat/cashew package to do the needfully; it takes our stress of manually creating service variables to hold up the HTTP requests data again and again. In this article we will explore @ngneat/cashew dope package for caching HTTP requests.

[4. Brotli Dockerized Angular App With Nginx — Ngdocker | CodeOmelet](https://codeomelet.com/posts/brotli-dockerized-angular-app-with-nginx-ngdocker)

![](https://cdn-images-1.medium.com/max/800/1*rlNP-9ZlxudJ0nClpTixZg.jpeg)

Patience is the key to success; not heard or followed by any of the web app visitors. We want everything to be loaded within blink of an eye. This is the place where Brotli shines. In this article, we will explore how we can enable Brotli in the NgDocker app to improve performance at a marvelous scale.

_Originally published at_ [_https://codeomelet.com_](https://codeomelet.com/series/angular-performance-improvement)_._
How do you start coding?
Tags: beginners, career, discuss, learning
Published: 2023-07-28 15:25:56

This was a fun clip to record. We look back at how we started coding and reflect on what it took to get started :)

https://www.youtube.com/watch?v=4r63H-n-Snk

{% youtube https://www.youtube.com/watch?v=4r63H-n-Snk %}
It's Follow Friday! Who's Lighting up Your dev.to World? ✨💫
Tags: discuss, followfriday
Published: 2023-07-28 15:00:00


Following fellow developers is like adding extra sprinkles to your feed 🧁🎉 --more collaboration, more helpfulness, more fun!

Show off why people should follow you or recommend top-notch developers. Go wild and do both! (Follow-backs are cool, but no pressure!)

Let's get this community groovin' and growing together!
In your own opinion, what makes a tutorial beginner friendly?
Tags: discuss, beginners, writing, programming
Published: 2023-07-28 14:58:50

[I asked this question on Twitter](https://twitter.com/SavvasStephnds/status/1684830317360627712?s=20) (sorry, X) and got some amazing responses so far. Thought it'd be appropriate to ask here as well. 🙂
The Tiny Advice Blog: Critical Thinking Deficits of ChatGPT Developers. The Solutions.
Published: 2023-07-28 14:34:32

Every developer in today’s world has made contact with at least one form of artificial intelligence (AI) on the internet. Among the AI tools, Chat Generative Pre-trained Transformers (ChatGPT) stands out and is currently the most popular AI tool right now.
ChatGPT is simply a chat buddy that gives answers to questions. However, this AI cannot give you detailed solutions to challenges you might encounter in your day-to-day job as a developer if you do not input the human aspect of critical thinking into your questions.

Many developers are not aware of this and slowly erode their critical thinking skills through the continuous use of this AI tool.

For example, if a developer creates a full-stack e-commerce web application using code snippets and guides from chatGPT, it is mentally more challenging to get the same developer to design a Unified Modelling Language (UML) for the same web app compared to someone who never consulted the AI chatbot during the process of development.
Developers can avoid this by;

1. Read and understand every line of code copied from chatGPT rather than copying, pasting, and moving on to another part of the code s long as it works.
2. Break down every inquiry on chatGPT to the tiniest detail to have a full grasp of what each part of the code does.

3. Write down every process that gave rise to each inquiry on chatGPT and the line of code generated.

Try these and you’ll be grateful you did
What If - Remade in Next.js
Tags: nextjs, react, webdev, javascript
Published: 2023-07-28 14:28:48

## What is it?
This is a website where you will face hypothetical scenarios (what if), and you can enter your thoughts for each of them.

After you enter your thought, you will be able to view what other user's have said, and compare your thoughts to their's!

I originally made this website in Flask (Python) about a year ago, but I decided to remake it in Next.js.

## Demo

[Check out the website!](https://what-if-scenarios.vercel.app/)

## Technologies Used
- Next.js
- React
- MongoDB
- CSS
- JSX

## Want to be a moderator?

If you want to be a moderator, either email me at vulcanwmemail@gmail.com or DM me on [Twitter](https://twitter.com/VulcanWM).