teleren/devto huggingface dataset:
Ocean Whispers: Crafting Digital Waves with CodeParrot VS Code Extension
Tags: css, html, codeparrot, codingbuddy
Published: 2024-02-25 16:54:43

{% codepen https://codepen.io/soniya1/pen/BabXjwY %}
Hey fam! 🙌 Ever wondered how to bring that chill, beachy vibe to your web projects? 🏖️ Well, buckle up, 'cause I've got a cool CSS trick that's about to make your site look waves better. We're diving deep into creating an animated ocean scene, complete with rolling waves 🌊 and a shining sun ☀️, all with just HTML and CSS. Yeah, you heard it right, no heavy JS or plugins needed! 🚫💻

And guess what? This whole vibe was brought to life using the **_CodeParrot VS Code extension_** 🦜✨ That's right, this isn't just any coding session; it's a creativity boost powered by one of the slickest tools in the code editor game. Whether you're a seasoned pro or just dipping your toes in the coding world, CodeParrot makes it super easy and fun to experiment with new ideas and bring them to life.

- **Full-Screen Paradise** 🖥️🏝️: Setting the `html, body` to full width and height (`width: 100%; height: 100%;`) because we want our ocean view to fill the screen, giving you that immersive beach experience.

- **Midnight Waves Backdrop** 🌌: The body's got a deep navy hue (`background: #03151f;`), setting the stage for our ocean scene to really pop. It's like the deep ocean under a moonless sky.

- **Ocean Scene Canvas** 🖼️🌊: Our `#ocean-scene` is where the magic happens. It's sized just right (`width: 300px; height: 300px;`), centered perfectly, and even has a bit of shadow for that 3D effect. Plus, the background gradient mimics a stunning beach sunset.

- **Here Comes the Sun** ☀️: The `.daylight` div is our bright, cheerful sun, chilling in the top corner, making sure those waves glisten.

- **Wave on Wave** 🌊➰: The `.wave-first`, `.wave-second`, and `.wave-third` classes are our ocean's layers, each with its own shade of blue and animation speed. It's all about creating that dynamic, moving water effect.

- **Rotating Around** 🔄: Thanks to our `@keyframes rotateWave`, every wave gets that cool, rotating animation, making the ocean come alive. It's a 360-degree journey for every water droplet.

- **CSS Sorcery** 🧙‍♂️✨: This entire setup? Achieved with just CSS. No heavy JavaScript or external libraries needed. It's like we've conjured up the ocean using nothing but some style spells.

- **Powered by CodeParrot** 🦜💻:  This whole beach vibe was created with the help of the CodeParrot VS Code extension. It's like having a coding companion that brings your creative ideas to the digital shore.

So, there you have it, peeps. Our "Ocean Whispers" scene is a blend of CSS magic, creative vibes, and a touch of CodeParrot genius. Ready to dive into your own code ocean? 🌊🖥️✨
sınıf tabanlı ve prototip tabanlı
Published: 2024-02-25 16:53:05

Sınıf tabanlı dil ve prototip tabanlı dil arasındaki fark, nesne yönelimli programlama yapmak için kullandıkları paradigmalardır. Nesne yönelimli programlama, veri ve işlevleri bir arada tutan nesneler adı verilen soyutlamalar kullanarak programlama yapmaktır1.

**Sınıf tabanlı dil, nesnelerin sınıflar adı verilen şablonlardan oluşturulduğu bir paradigmadır. Sınıflar, nesnelerin ortak özelliklerini ve davranışlarını tanımlar. Sınıflar arasında kalıtım adı verilen bir ilişki kurulabilir. Kalıtım, bir sınıfın başka bir sınıfın özelliklerini ve davranışlarını miras almasını sağlar. Sınıf tabanlı dillerde, nesnelerin türü sınıflar tarafından belirlenir. Popüler sınıf tabanlı diller arasında Java, Python ve C++ bulunur.
**
**Prototip tabanlı dil, nesnelerin prototipler adı verilen var olan nesnelerden klonlanarak oluşturulduğu bir paradigmadır. Prototipler, nesnelerin özelliklerini ve davranışlarını tanımlar. Prototipler arasında delegasyon adı verilen bir ilişki kurulabilir. Delegasyon, bir nesnenin başka bir nesneye özellik veya davranış sormasını sağlar. Prototip tabanlı dillerde, nesnelerin türü prototipler tarafından belirlenir. Popüler prototip tabanlı diller arasında JavaScript, Lua ve Self bulunur.**

Özetle, sınıf tabanlı dil ve prototip tabanlı dil arasındaki fark, nesnelerin nasıl oluşturulduğu ve nasıl ilişkilendirildiğidir. Sınıf tabanlı dil, nesneleri sınıflardan türetir ve kalıtım ile ilişkilendirir. Prototip tabanlı dil, nesneleri prototiplerden klonlar ve delegasyon ile ilişkilendirir.
🚀Unlocking the Power of NGINX - A Web Server Marvel! 🚀
Tags: webdev, webserver, nginx
Published: 2024-02-25 16:31:00

Today, let's delve into the world of NGINX, a robust web server that goes beyond the basics. 🌐✨

NGINX is more than just a web server; it's a high-performance, open-source solution that excels at serving static content, handling reverse proxying, and even managing load balancing. Let's explore its versatility with a few key scenarios.

---

**1. Serving Static Content with NGINX:**

One of NGINX's strengths is efficiently handling static content. Here's a snippet of NGINX configuration to serve static files:

```
nginxCopy code
server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/static/files;
        index index.html;
    }
}

```

In this scenario, NGINX efficiently delivers static files like HTML, CSS, and images, enhancing your website's speed and responsiveness.

---

**2. Reverse Proxy Magic:**

NGINX shines as a reverse proxy, mediating requests between clients and backend servers. Consider a scenario where you have a Node.js app running on **`localhost:3000`**. NGINX simplifies the process:

```
nginxCopy code
server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

```

Now, NGINX acts as a gateway, seamlessly directing traffic to your Node.js app. 🚪

---

**3. Load Balancing Brilliance:**

Imagine your application gaining popularity, and you need to distribute incoming traffic among multiple servers. NGINX simplifies load balancing with ease:

```
nginxCopy code
http {
    upstream backend {
        server server1.example.com;
        server server2.example.com;
        # Add more servers as needed
    }

    server {
        listen 80;
        server_name example.com;

        location / {
            proxy_pass http://backend;
        }
    }
}

```

NGINX ensures that each request is intelligently distributed across your backend servers, optimizing performance and maintaining stability. 🔄⚖️

---

**Conclusion:**

NGINX is a powerful ally in the realm of web servers, offering speed, flexibility, and reliability. Whether you're serving static content, acting as a reverse proxy, or managing load balancing, NGINX stands tall. Dive into its configurations, embrace the versatility, and elevate your web infrastructure. What's your favorite NGINX use case? Share your thoughts! 🚀💬 #NGINX #WebServers #TechInnovation
JS array methods
Published: 2024-02-25 16:29:30

* `array.split()` turns a string into an array and returns the array
```
const text = "I love doing web development";
const myArray = text.split(" ");
//output: [ 'I', 'love', 'doing', 'web', 'development' ]
const newArray = text.split("");
//output: [
  'I', ' ', 'l', 'o', 'v', 'e',
  ' ', 'd', 'o', 'i', 'n', 'g',
  ' ', 'w', 'e', 'b', ' ', 'd',
  'e', 'v', 'e', 'l', 'o', 'p',
  'm', 'e', 'n', 't'
]
```
* `array.slice()` take a cut of the original array and return the cut part
```
const myArr = ['apple','pear','strawberry']
const cut = myArr.slice(0,1)
//output: 'apple' it slice between the zero index and the first index
```
* `string.slice()` can also be used on a string. **Note**: .slice doesn't change the original string or array. The cut includes the start and excludes the end
```
const myText="I have a golden retriever"
const cut = myText.slice(3,5)
//output: 'av' 
```
* `array.splice()` can be used to add/remove one or multiple elements in an array. **Note**: it does change the original array

for removing element(s):
```
const array = ["I", "love", "doing", "web", "development"];
console.log(array.splice(0, 2));
//output: [ 'I', 'love' ]
console.log(array);
//output: [ 'doing', 'web', 'development' ]
```
for adding element(s):
```
array.splice(0, 2, "hello");
console.log(array);
//output: [ 'hello', 'doing', 'web', 'development' ] it removes the elements between index 0 and 2 and adds the provided element to the 0th index
array.splice(5, 0, "very", "much", "!");
console.log(array);
//output: [ 'I', 'love', 'doing', 'web', 'development', 'very', 'much', '!' ] it found the 5th index and remove 0 element and add the provided elements to the 5th index
```
How do I check my C drive space?
Published: 2024-02-25 16:28:48

Certainly! To check the available space on your C drive in Windows, you have a couple of options:

Using Windows Settings:
Open Settings by pressing Win + I or searching for it in the Start menu.
Click on System.
Select Storage.
Under the (C:) section, you’ll see what’s taking up space on your main hard drive.
Click the “Show more categories” option to view storage usage from other file types.
Optionally, click “View storage usage on other drives” under the “More storage settings” section to check other drives if you have multiple hard drives.

[For more detailed instructions, you can refer to this article](https://basicstech.info/how-to-clean-c-drive/)
Learning System Design
Tags: learningsystemdesign, systemdesign
Published: 2024-02-25 15:58:20

I have recently started learning System Design concepts. What is System Design and what does it facilitates us with? I want to share what I have learnt till now. Feedback is appreciated. 


System design is divided into two levels, high level system design and low level system design.

## HLD(high-level-design) VS LLD(low-level-design)

HLD uses non-technical to partially technical terms to map various components, structure and flow of the project. It also includes the plan to select technologies to be used in the project, things to focus on achieving and things that should be avoided.

On the other hand, Low Level Design (LLD) deals with selection of coding standards to be used to build a decent flow of data. It focuses on writing maintainable, efficient and reusable codes. Basically, LLD is directly related to actual code. 


## Horizontal Vs Vertical Scaling

Scalability is one of the most important features to consider once a project is ready for use.

While deciding scaling techniques, there are two things to be considered i.e. horizontal scalability and vertical scalability.

Horizontal Scalability means dealing with the number of machines to handle the load on the server. When load on the server would be increasing, horizontal scaling suggests to increase the number of machines/servers.

While Vertical Scalability refers to configurations of each machine to handle the load faster and with more efficiency. In this case we increase the individual capacity of each machine to handle more load.

## Capacity Estimation

Capacity estimation refers to estimate required resources such as storage, memory and processing power to handle the load easily.

I came to know the importance of the ability to estimate the requirements to run specific types of application. Although, there are tools to estimate requirements for provided details of an application but that may differ in real world scenarios.

In conclusion, as a newcomer to system design, I'm eager to continue learning and refining my skills. I welcome any suggestions or corrections to improve my understanding.

Thanks for your time!
GoLang First Program - Hello, World
Published: 2024-02-25 15:19:39

In this tutorial, we will write a simple "Hello, World!" program in GoLang.

```
package main

import "fmt"

func main() {
	fmt.Println("Hello, World!")
}
```

**Explanation of the Code**

- **`package main`**: This line defines the package name. Every Go file starts with a package declaration. Packages are Go's way of organizing and reusing code. The `main` package is special because it tells Go that this file will be the entry point of the program. Only the `main` package can contain the `main` function, which is where execution of the program starts.
- **`import "fmt"`**: This line imports the `fmt` package, which contains functions for formatted I/O (Input/Output) operations. Here, you're using it to print text to the console.
- **`func main() { ... }`**: This defines the `main` function. As mentioned, the `main` function is the entry point of your Go program. The braces `{ }` enclose the body of the function.
- **`fmt.Println("Hello, World!")`**: Inside the `main` function, this line calls the Println function from the `fmt` package. `Println` stands for "print line", and it outputs the string "Hello, World!" to the console, followed by a newline character.

## Run the Program

Save your file with a `.go` extension, for example, `hello.go`. Open a terminal or command prompt, navigate to the directory where your file is saved, and run the program by typing `go run hello.go`. You should see the output `Hello, World!` printed to the console.

## Process

When you run the program using `go run`, the Go compiler compiles the code into an executable binary, and then immediately runs that binary.
JavaScript : Unable to link an image on the home page to a carousel on the gallery page.
Tags: javascript, programming, html, beginners
Published: 2024-02-25 15:18:52

Certainly! To link an image from the home page to a carousel on the gallery page using JavaScript, you can follow these steps:

**HTML Setup:**
Make sure both your home page and gallery page have the necessary HTML structure. For example, on the home page, you might have an image like this:

`<!-- Home Page - index.html -->
<a href="gallery.html">
  <img id="galleryLink" src="path/to/home-image.jpg" alt="Home Image">
</a>
`
And on the gallery page:

`<!-- Gallery Page - gallery.html -->
<div id="carousel" class="carousel">
  <!-- Your carousel content goes here -->
</div>
`
**JavaScript Code:**
Add the following JavaScript code to your home page (inside a <script> tag or an external JavaScript file):

`<!-- Home Page - index.html -->
<script>
  document.getElementById('galleryLink').addEventListener('click', function(event) {
    event.preventDefault(); // Prevents the default link behavior
    window.location.href = 'gallery.html'; // Redirects to the gallery page
  });
</script>
`

This code adds a click event listener to the image. When the image is clicked, it prevents the default link behavior (following the href) and redirects the user to the gallery page.

Include JavaScript File:
If you have an external JavaScript file, make sure to include it in the <head> section of your home page:

`<!-- Home Page - index.html -->
<head>
  <!-- Other head elements -->
  <script src="path/to/your/script.js" defer></script>
</head>
`
Replace "path/to/your/script.js" with the actual path to your JavaScript file.

**Ensure Carousel Initialization:**
In your gallery page, make sure the carousel is properly initialized. Depending on the carousel library or script you are using, this step might vary. Ensure that the gallery page has the necessary scripts and stylesheets to make the carousel work.

For example, if you are using a library like Bootstrap Carousel, you might need to include the Bootstrap CSS and JS files:

`<!-- Gallery Page - gallery.html -->
<head>
  <!-- Other head elements -->
  <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
  <script src="path/to/bootstrap/js/bootstrap.min.js" defer></script>
</head>
`


Adjust these steps based on your specific gallery page setup and the JavaScript carousel library you are using. If you provide more details about your gallery page and the carousel script, I can offer more specific guidance.

Thanks for reading,
DGI Host.com
DIFFERENCE BETWEEN FUNCTIONAL TESTING AND NON-FUNCTIONAL TESTING
Published: 2024-02-25 15:03:07

Functional testing is noting but testing the functionality of the application like testing the each and every component independently and thoroughly with respective to the given requirement it is known as functional testing.
In functional testing we have different testing's they are as follows. UNIT TESTING, INTEGRATION TESTING, SYSTEM TESTING, REGRESSION TESTING.
Unit testing is nothing but testing the individual units and builds.
Integration testing is testing the integration between two units.
system testing is testing weather the system is working properly.
Regression testing is about testing the old features as well as the. features which are added newly to the application weather all features are working properly.
NON-functional testing is used to test the performance of the application by applying load on the app to test how well the app is working under different conditions.
EXAMPLE: we can take amazon for these like testing individual modules like mobiles and electronics comes under unit testing and testing weather after selecting mobile it is adding to the cart or not is called integration testing. system testing is all features are working fine or not. Regression testing is like testing new feature like they added mini tv to the amazon then they will check all old features and the new feature also.
NON-FUNCTIONAL TESTING :testing weather the app is able to open when 100000 users are trying to open at a time
52 Free Figma Weather Glassmorphism Icons
Tags: figma, freebie, icons, ui
Published: 2024-02-25 14:36:58

Discover the Weather Icons collection by Bilal Arve, featuring 52 stunning icons in the glassmorphism style. Crafted with care, these icons beautifully represent a range of weather conditions, from sunny days to snowy landscapes. Enhance your Figma designs with clarity and elegance using these meticulously designed icons, available for free download. Let Bilal Arve's Weather Icons bring a touch of sophistication to your weather-related projects.

**Author: Bilal Arve**
[Download](https://www.figma.com/community/file/1126777451931792118)

### See Also
✍[Figma Free Glassmorphism Presentation Template](https://neattemplate.com/figma-templates/figma-free-glassmorphism-presentation-template/)
✍[Figma Freebie Glassmorphism Icons Simplified](https://neattemplate.com/figma-icons/figma-freebie-glassmorphism-icons-simplified)
✍[24+ Free Figma x Lottie Animated Emoji Pack](https://neattemplate.com/figma-icons/24-free-figma-x-lottie-animated-emoji-pack/)
✍[Figma Free Glassmorphism Presentation Template](https://neattemplate.com/figma-templates/figma-free-glassmorphism-presentation-template/(opens in a new tab))
Repository & Docker hub
Tags: ibbus, repository, dockerhub, versioncontrol
Published: 2024-02-25 14:20:25

The repository is a collection of related container images, grouped under a single name. Each repository typically serves a specific purpose, such as hosting images for a particular application, service (or) component.

✅ Organization
✅ Access Control
✅ Versioning
✅ Customization

DockerHub is the heart of the Docker ecosystem, a centralized platform for storing, sharing, and managing Docker container images. 

It's akin to a marketplace where developers can discover a plethora of pre-built containers ready to be deployed in their applications.

✅ Image Hosting
✅ Collaboration
✅ Version Control
✅ Integration
No need to learn Class Names of CSS libraries
Tags: webdev, css, javascript, discuss
Published: 2024-02-25 14:16:58

Ok it's a short post 
So , do you know about Tailwind or Bootstrap , probably yes that's why u clicked on this post 

So , you know every class name??
No I m sure , nobody can learn all

So you check them very frequently on documentation. 

And it wastes a lot of time

Or you are working with a team 
Where everyone is fighting that use this and that

Or all are wanted to make something for them which is customizable with everyone's opinion and custom syntax ....


Introducing ...
NextGenCSS (again)
With custom syntax
Now you can change the syntax very easily

For example :- 

You hate the default syntax of padding 
```css
.pd-1{...}
```

Then you can change it whatever your team wants 
```css
.my-pd-1{..}
```


You can see its already revolutionary that's why it is 
NEXTGEN OF CSS
PLS STAR THIS AND SHARE WITH OTHER TO SHOW SUPPORT TO THIS INDIE DEV
Github :- https://github.com/rudransh61/NextGenCSS-
The Making of a Professional Engineer: Admiral Rickover
Tags: leadership, management, productivity, beginners
Published: 2024-02-25 14:09:37

What does it mean to be a professional or to practice a profession?

There is no one better to define this for us than, [Admiral Rickover](https://en.wikipedia.org/wiki/Hyman_G._Rickover?ref=journal.hexmos.com).

He truly walked the talk, and got the job done.

These are my takeaways from Admiral Rickover's essay: *"Engineering in Practice".*

What exactly is a profession?
-----------------------------

Practicing a profession means - mastering theoretical knowledge in a field, and applying it to everyday problems.

A profession is "intellectual in content, practical in application".

The reasons why the professions receive respect
-----------------------------------------------

Traditionally - the professions have been seen with respect for these reasons:

-   Esoteric content
-   Useful to everyone
-   Long & Costly preparation to practice
-   Usually practiced by people of above average intelligence, education & character

Till 19th century only the university faculty in theology, law and medicine were called professional men.

Advent of *Engineering*
-----------------------

With the expansion of knowledge, new professions started appearing.

"Engineering" is a relatively new profession.

From remote antiquity, we've had useful "skilled crafts".

The old crafts became engineering.

With the advent of science & massive energy sources it flourished.

A body of *organized knowledge and procedures which require lengthy course of professional study* emerged as a result of intense development.

Continue reading the article [here](https://journal.hexmos.com/rickover-series-03-engineering-in-practice/?src=hn)