teleren/devto huggingface dataset:
Developing Serverless Applications with Cloudflare Workers
Tags: javascript, beginners, programming, tutorial
Published: 2024-06-30 00:36:29

## Introduction

Serverless computing has been gaining popularity in recent years, with businesses and developers looking for ways to cut costs and increase efficiency. One of the major players in this field is Cloudflare Workers, a serverless platform that allows developers to build and deploy applications without managing any infrastructure. In this article, we will explore the advantages, disadvantages, and features of developing serverless applications with Cloudflare Workers.

## Advantages

One of the biggest advantages of using Cloudflare Workers is the cost savings. With no infrastructure to manage, businesses can reduce their infrastructure and operational costs. Additionally, Cloudflare Workers offer high scalability and elasticity, as they can handle sudden spikes in traffic without any additional configuration. Another advantage is the simplified development process, as developers can focus on writing code without worrying about managing servers or load balancing.

## Disadvantages

One of the main disadvantages of using Cloudflare Workers is the lack of control over hardware and software resources. This can become an issue for applications that have specific requirements or need to use certain libraries or frameworks. Another potential drawback is the lack of customization options, as everything is managed by Cloudflare.

## Features

Cloudflare Workers offer various features that make it a popular choice for serverless application development. These include support for multiple programming languages such as JavaScript and Rust, built-in caching and routing capabilities, and integration with other Cloudflare services such as DDoS protection and CDN.

### Example of Cloudflare Workers Code

```javascript
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return new Response('Hello World!', {status: 200})
}
```

This simple example demonstrates how to handle HTTP requests using Cloudflare Workers. The code listens for fetch events and responds with "Hello World!" for every incoming request.

## Conclusion

In conclusion, developing serverless applications with Cloudflare Workers has numerous advantages, including cost savings, scalability, and simplified development process. However, it may not be suitable for all applications due to the lack of control over resources and customization options. It is important for businesses and developers to carefully evaluate their requirements before deciding to use Cloudflare Workers for their serverless applications.
Reason you are not valuable as a web developer
Tags: javascript, beginners, webdev, programming
Published: 2024-06-30 00:30:47

The reason why some web developers find it difficult and struggles in the space can simply be traced to proverb 22:29 "show me a man skillful in his business he shall stand before kings and not obscure men". Amplified precisely.

Yeah you have a skill(web development) bravo, but ask yourself are you skillful in that skill. Skillfulness is the subtle or imaginative ability in inventing, devising, or executing something. Remember the only criteria to stand before kings(professionals, Top leaders etc) is being skillful at what you do(web development).

Do you know what? "Skillful people only become useful and successful when they are relevant". Are you current with market trend and technologies? "When you are not current you become outdated making you irrelevant". So if you decide to become skillful ensure you are relevant as a web developer.

"When you are not relevant you become a servant, and relevancy comes by intentionality and intentionality starts with a change of mentality"

You must be intentional about being relevant, pay the price, take courses, practice, strive harder to become the best at what you do.

I hope I inspire somebody, and if you have question for me let me know. I am CrownCode
Revolutionize Language Learning
Tags: opensource, language, showdev, productivity
Published: 2024-06-30 00:00:23

Say goodbye to dedicated study time and meet [Vocabulary Booster!](https://github.com/huseyn0w/vocabularify) Vocabulary Booster lets you learn new words while you watch videos, code, or browse. This desktop app offers flexible learning modes, language selection, and a comfortable dark mode, making vocabulary building a seamless part of your day. Start learning effortlessly today!
TailwindCSS on Rails: Minimize Collapsible Sidebar
Tags: rails, tailwindcss
Published: 2024-06-30 23:00:05

---
title: TailwindCSS on Rails: Minimize Collapsible Sidebar
published: true
date: 2024-06-30 00:00:00 UTC
tags: rails,tailwindcss
canonical_url: https://blog.corsego.com/tailwind-collapsible-sidebar
---

A ruby friend named Daniel emailed me a request for this feature:

![email request for this blogpost](https://blog.corsego.com/assets/images/tailwind-sidebar-request.png)

Here’s my solution, Daniel:

![Tailwind collapsible sidebar](https://blog.corsego.com/assets/images/taiwlind-sidebar-toggle-save.gif)

- ✅ Collapsible sidebar
- ✅ Save state
- ✅ Elegant solution

First, create a stimulus controller to collapse sidebar. Write the current state to cookies

```
// app/javascript/controllers/sidebar_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["sidebarContainer"];

  toggle(e) {
    e.preventDefault();
    this.switchCurrentState();
  }

  switchCurrentState() {
    const newState = this.element.dataset.expanded === "true" ? "false" : "true";
    this.element.dataset.expanded = newState;
    document.cookie = `sidebar_expanded=${newState}`;
    // document.cookie = `sidebar_expanded=${newState}; path=/`;
  }
}

```

The toggle can be triggered by a button like this:

```
<%= button_to "Toggle", nil, data: { action: "click->sidebar#toggle" }

```

Toggling the button will update `cookies[:sidebar_expanded]`.

This is accessible in CSS via `[[data-expanded=false]_&]:`. You can use it as a **condition**!

Here’s a sidebar that hides text like `"Home"` & `"Buttons"` when `data-expanded=false`:

```
<!-- app/views/layouts/_sidebar.html.erb -->
<nav class="bg-slate-400 hidden md:flex flex-col text-center p-4 justify-between sticky top-20 h-[calc(100vh-80px)]" data-controller="sidebar" data-expanded="<%= (cookies[:sidebar_expanded] || true) %>">
  <div class="flex flex-col text-left">
    <%= link_to root_path do %>
      <span>🏠</span>
      <span class="[[data-expanded=false]_&]:hidden">Home</span>
    <% end %>
    <%= link_to buttons_path do %>
      <span>🔘</span>
      <span class="[[data-expanded=false]_&]:hidden">Buttons</span>
    <% end %>
  </div>
  <div class="text-left">
    <%= button_to nil, data: { action: "click->sidebar#toggle" } do %>
      <span class="[[data-expanded=true]_&]:hidden">➡️</span>
      <span class="[[data-expanded=false]_&]:hidden">⬅️</span>
      <span class="[[data-expanded=false]_&]:hidden">Toggle</span>
    <% end %>
  </div>
</nav>

```

🤠 Voila!
Titanic for HNG
Published: 2024-06-29 22:57:51

## **Introduction**
This analysis about the dataset of passengers that were onboard when the British Luxury Passenger Ship (named Titanic) sank on the 15th of April, 1912.
The purpose for this surface-level analysis is to have the statistical view of the age-range of the passengers on the ship.

The Titanic dataset has the following columns:
- PassengerId: This is the identifier for each passenger
- Survived: This informs us if a particular passenger survived (with value 1) or not (with value 0)
- Pclass: This is the ticket class, either upper (1st), middle (2nd) or lower (3rd)
- Age: The age of the passenger
- SibSp: The number of siblings for spouse the passenger boarded the ship with
- ParCh: The number of parent or children the passenger boarded the ship with.
- Fare: The amount the passenger paid for the trip
- Cabin: The cabin identifier for the passenger
- Embarked: The port the passenger onboards (either Cherbourg, Queenstown, Southampton)

## **Observation**
Missing Data in the dataset
The columns with missing data are: Cabin, Age and Embarked with Cabin having the highest number of missing values with 687 and Embarked having the lowest with 2 while Age sits in the middle with 177.
All other columns don't have missing value(s).

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


## The image below gives the description of each column
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y0nbjojdapx588jsvpm.png)
Since our purpose is the age of passengers, it can be seen that:

- the minimum age is 0.42
- the mean(average) age is 29.70
- the maximum age is 80


## The below is the box plot of Survived against Age.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqeuwfo6jfhxfdg5jere.png)


## **About HNG**
HNG Internship is a remote internship aimed at providing real life experience on projects to interns all over the world. This is the [link](https://hng.tech/internship) to the official website.
It also serves as a pool for skilled professional because the interns there would have experience with real life impacting projects, here is the [hire link](https://hng.tech/hire).
lit Comparision REact.js vs Vue.js
Tags: hng, webdev, react
Published: 2024-06-29 22:57:23

The advantage of frontend in web applications cannot be undermined as it involves the part where users are welcomed before interacting with what the web application in entirety have to offer.
Generally frontend technologies are tools which are employed to build the part of web application that clients or user interact with, the most basic examples are the HTML(Hypertext Markup language), CSS(Cascading Style Sheet) and JavaScript, the HTML enables placing contents right on the web, while the CSS ensures the styling of the content in terms of adding colors, fonts, backgrounds, layouts etc. The website may have static behavior in a way without adding JAVASCRIPT, it ensures interactive web pages.
Frontend part of any project are very important as to enticing or calling the attention of users, certain frontend frameworks makes the work beautiful, easier, scalable and reusable, frameworks  are structure which you can build on giving it no need to start entirely from the foundation…. 
React.js and Vue.js are popular frontend framework tools used to build user interfaces, talking about their differences, React is better in a way.
React is a Javascript library which is used for building user interfaces for web and native applications, React was developed by Facebook to perform this task, known for flexibility which is very useful in building complex applications, React was released on March 26 2013 in other to address some issues in Facebook user interface which later was made open-source, React has a big community and many resources which can be leveraged on, working with large scalable apps, React has always been recommended to be more effective.
Vue.js is a frontend framework known for being easy to use and the clear separation of HTML, CSS and JavaScript which is easy for beginner to make use of, uses also virtual DOM(Document Object Model) for efficient rendering like React, Vue is suited for simpler and quickly scalable projects.
HNG Internship is a internship anyone with that competitive fire aspiring to grow in the tech industry may not want to miss, having a basic frontend knowledge in HTML, CSS and JavaScript may not just be enough in building nice, scalable projects, having researched and seeing the advantage of laying hands on projects using React.js framework, I’ll be so glad to participate in this track during this version of HNG Internship as I believe it will help boost my growth and cause a rapid increase in knowledge in the area of frontend technology, thanks to HNG for the privilege and I strongly believe with the way the program is designed I’ll not only learn but also network with great minds on the platform. 
Incase you’re still doubting HNG check this out #HNG-PREMIUM
Web Development from my view.
Published: 2024-06-29 22:52:09

To build websites and/or web apps you need:

HTML - Markup language 
CSS - Styling language 
JavaScript

JavaScript is your programming language. It wakes up your sleeping HTML/CSS website, adds life to it and makes it dynamic. Because your website now contains JavaScript, users can interact with your websites from clicking buttons to making payments and beyond.

The basics of web development are those languages above. Then moving forward you'll see the need for libraries and frameworks like React and Next.

React is a JavaScript library
Next is a React Framework.

There's a difference between a library and a framework.

To have a smooth experience learning React, it's better your JavaScript is decently solid. 

Building with React is still HTML, CSS and JS under the hood. So having a sound knowledge of HTML, CSS and JavaScript makes the learning of any JavaScript library or framework easier.

React is not the only JavaScript library, there are others but the most popular three you'll hear are:

React
Vue
Angular 

React is like default because it's hot in the market. Doesn't mean you can't learn the others. A solid JS background and you can pick any of them up.

**HNG11** 
It's an opportunity to be a part of this internship,whether you're a beginner or  you're familiar with what's going on, you're certain to grow. To grow with like minds, gain connections and share what I know with others will be a "mission accomplished" for me at HNG.
 
I'm eager to sharpen my React skills and learn more during this internship. If you're interested in joining this cohort,the best time to join is right now. 👇https://hng.tech/internship

If you're interested in looking for elite freelance talent,you need one link 👇
https://hng.tech/hire

I'm Ogbonnaya Johnson, a front-end developer with a scoop of backend development.
Mobile Developement Platforms and Architecture
Tags: react, development, mobile, android
Published: 2024-06-29 22:27:01

##** Introduction**
There are approximately 6.5 billion smartphone users. There are various Mobile application development platforms and architecture to facilitate the design, develop and testing of mobile applications. It is the combination of services, technologies and or tools for end to end application development.

##** Mobile Application Development Platforms and Architectures**
Here is a non-exhaustive list of mobile developement platforms.

1. Android (Using Android Studio)
2. Ionic
3. React Native
4. Xamarin
5. Flutter
6.Cordova (Apache)

The [HNG Internhip Uses React Native](https://hng.tech/internship).
I am exploring react native to understand it. I believe it component based will reduce the barrier to faster continuos learning and development. I think it is suitable for beginners and experts alike. [You can hire  Interns proficient in mobile development at HNG](https://hng.tech/hire)  
Thank you for reading.
Basic Data Analysis on the Iris Flower Dataset (HNG 11)
Tags: datascience, intern, analyst
Published: 2024-06-29 22:19:02

This task was part of my data analysis internship with HNG11. It is a requirement for all interns in stage zero to proceed to the next stage. The task was relatively simple. I only had to review a dataset from a list of given options. The objectives are to identify initial insights from the dataset at first glance and to discover patterns, trends, or anomalies.

I chose the Dataset on Iris Flowers and performed Basic Exploratory Data Analysis using Python and the libraries in a notebook file. At an initial glance, the file containing the dataset (.data) has 150 rows of 5 values each (5 columns), with each value on a row separated by a comma (comma-delimited). The first four values are numerical variables, while the last one is a categorical variable which could immediately be identified as the label of the dataset. However, there was no description in the original file for any of the variables.

Accompanied with the data file was another text file giving a clearer description of the variables represented in the data file. With this information, I imported the data into the notebook, and read it into a DataFrame object using pandas library, assigning appropriate names for the columns of the dataset. In order, the columns are ‘sepal length (cm),’  ‘sepal width (cm),’ ‘petal length (cm),’ ‘petal width (cm),’ and ‘class.’

Using appropriate methods in pandas, I discovered the mean of each of the numerical variables ‘sepal length (cm),’  ‘sepal width (cm),’  ‘petal length (cm),’ ‘petal width (cm)’ to be 5.84, 3.05, 3.76 and 1.20 respectively (to 2 d.p.). Also, I observed that the categorical variable ‘class’ had only three unique values for three kinds of Iris flowers: ‘Iris-setosa, ‘Iris-virginica’ and ‘Iris-Versicolour.’ All of this information was also pointed out in the text description file. Another observation was that each of the three values for the categorical variable was represented the same number of times in the dataset; which means there were 50 Iris-Setosa flowers, 50 Iris-Virginica flowers and 50 Iris-Versicolour flowers.

With the aid of plotting and graphing tools, it was clear that a linear relationship exists between the petal width and the petal length, as well as between the petal length and sepal length of the flowers. The Iris-Virginica flowers had the longest petals and sepals, with the Iris-setosa flowers having the shortest ones. This can be seen in the graph below.

There is a clear correlation between the measurements of the sepals and petals of the flowers and their respective class. Meanwhile, the graph would suggest that petal length and width have a higher influence in determining the flower class than the sepal width. This could be considered in making inferences from a new dataset without the label.

[](https://hng.tech/internship)
[](https://hng.tech/premium)




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98o4dyqls6viwdyvs6mi.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30aq4o6fay5m6qsd1dr9.jpg)
Beyond Vanilla JS: Svelte vs. Inferno
Tags: webdev, frontend
Published: 2024-06-29 22:06:46

>For those looking beyond plain JavaScript, Svelte and Inferno offer intriguing front-end framework options:

**Svelte**: Blazingly fast due to its innovative compile-time approach. This eliminates the virtual DOM manipulation found in React, resulting in a smaller footprint. However, Svelte's young age translates to a less developed ecosystem and potential debugging hurdles.

**Inferno**: A lightweight powerhouse, Inferno boasts a virtual DOM claimed to be twice as fast as React's. It also offers smooth migration from existing React projects. The trade-off? A smaller feature set compared to React, missing functionalities like server-side rendering.

**Choosing Your Weapon:**

**Peak Performance:** Svelte takes the crown for speed and minimal bundle size.
**Swift React Migration:** Inferno shines for speed-focused React project transitions.
**Established Powerhouse:** React remains the go-to for a mature ecosystem and extensive features.

**HNG**
HNG utilizes ReactJS for good reason. React's component-based architecture promotes code reusability, maintainability, and a clear separation of concerns. 

Here at HNG, I expect to leverage React's strengths to:

Build interactive and dynamic web applications for various NLP (Natural Language Processing) tasks.
Contribute to a collaborative coding environment where React's clean syntax fosters clear communication and code maintainability.
Explore the vast React ecosystem of libraries and tools to streamline development and enhance functionalities.

[https://hng.tech/hire][https://hng.tech/internship]
Understanding Documentation: A Critical Skill.
Published: 2024-06-29 22:01:39

I remember when I had to integrate an AI into the application I was building, and the deadline was approaching. I was too lazy to go through the whole documentation, and it wasn't very user-friendly, which eventually cost me about two days out of the tight time I had left. So, I had to sit down, read it properly, and test it with their playground to fully understand what they were trying to convey. Then I implemented it, and it was all done without much stress. I really understood what I was doing throughout the process. I don't think I'd want to make such mistakes again.

I decided to participate in the ongoing [HNG internship](https://hng.tech/internship) to improve my ability to collaborate effectively with team members. My goal is to better understand their coding intentions and project goals with ease, reducing miscommunications and enhancing productivity. This experience will help me avoid the mistakes I've made in the past and develop a more efficient approach to teamwork and problem-solving.

You can also get a certificate by subscribing to their [premium](https://hng.tech/premium) offer here.
Analyzing a Dataset and Writing a “First Glance” Technical Report
Published: 2024-06-29 21:58:16

[HNG Intership | HNG](https://hng.tech/internship)


## **Introduction**
The purpose of this technical report is to examine and identify actionable insights at “first glance” from the Titanic Dataset sourced from kaggle.
The Titanic Dataset has been studied by data scientists and academic communities for some time now and has continued to garner the attention of scientists. The data is about the tragedy of RMS Titanic; a British ocean liner that sank on 15th April, 1912 as a result of striking an iceberg on her maiden voyage. There were an estimated 2,224 passengers and crew on board. The dataset contains data of children, male and females.

## 
**Observations**
There were more males on the ocean liner than there were females.
 A Lot of the observations were missing the age field. 
The average age was 32 yrs. (from the training dataset)


## **Conclusion**
The dataset is very important in the analysis of determining who survived or not. Feature engineering could be applied to the dataset to fill the missing fields or removed totally. Further exploration of the dataset is needed to ascertain trends like the class of the passengers and if certain features determine the survivability of a passenger.

[Find a Hire HNG](https://hng.tech/hire)