teleren/devto huggingface dataset:
How capitalize the first letter of each word in a string?
Published: 2022-09-16 22:50:40

Hi! I'm Mayu.
In this post, I introduce how to change letter's case in JavaScript.

Now, here is a sentence about me.

**i LOVE JaVa SpaRRoW!**

How do you feel when you read this sentence?
A little weird...is it?
(By the way, recently I realized this is an expression of interesting intonation. I didn't know this before I started learning English, so I am happy about this realization!)

So, let's make function to the sentence to be more readable :)✨

```javascript
function changeLetter(text) {
    let word = text.split(" ");
    let arr =[];
    for(let i= 0; i < word.length; i++){
        arr.push(word[i].charAt(0).toUpperCase() + word[i].substring(1).toLowerCase());
    }
    return arr.join(" ");
}

console.log(changeLetter('i LOVE JaVa SpaRRoW!'));
// I Love Java Sparrow!
```

**1. Set space as separater and split sentences into words.**
- [**split()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) to split sentence with spaces(" ").

**2. Add elements that capitalized only the first letter to the array.**
- use loop because each texts have more than 2 words.
- [**charAt()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt) method that returns new string
- [**toUpperCase()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) method returns the calling string value converted to uppercase
- [**substring()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) method that returns the part of the string
- [**toLowerCase()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) method returns the calling string value converted to lowercase
- [**push()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) method that adds elements to the end of an array

**3. Return to a sentence with a space between words.**
- [**join()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.

reference: [mdn](https://developer.mozilla.org/en-US/)
Difference between _app.js and _document.js files in Next.js
Tags: nextjs, react, javascript, html
Published: 2022-09-16 22:33:50

## Introduction
Next.js is a Framework which build above React.js, Next.js Team called it The React Framework for Production, Which let you optimize your React Applications throw [SSG](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), [ISR](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) and [SSR](https://nextjs.org/docs/basic-features/pages#server-side-rendering) Strategies.

In this Article we will know wthat is Difference between [_app.js](https://nextjs.org/docs/advanced-features/custom-app) and [_document.js](https://nextjs.org/docs/advanced-features/custom-document) files in Next.js.
So let's get started... 👉

---

## _app.js File
When You create a new Next.js Project you will notice that there is a file in the pages directory called `_app.js` and if you open it you will see the following code:

```typescript
import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp
```

You can name the app.js file as the Root of all Components in your Next App, Which Means that Every Page that you will create in the _pages_ directory will move to throw the _MyApp_ Component.
This is a beautiful Feature:

- Which let you add a Global Layout Component on all Your Project Pages like _Navbars_ and _Footers_...etc

- You Can Also add Your Basic _Meta Tags_ to All Pages throw [Head](https://nextjs.org/docs/api-reference/next/head) Component.

## _document.js File
This file is unknown to a lot of Next.js Developers unlike the _app.js file which is famous, And This is due to its low use In addition You should create it to use It.

_document.js file lets you Overwrite the Basic HTML structure on Your Next App.
Let's See How...

Create an js File on Pages Directory and name is as "_document.js" and Put the following Code in It:

```typescript
import Document, { Html, Main, Head, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
```
This is the Default Structure for HTML in Your App, Now you can Edit It like add the `lang` Attribute to `html` tag and more.

> ❗️Notice that 
- _document.js lets you edit only html code structure which means that you can't add javascript events in  it.
- `Head` Component in _document.js is Completely different from Head in _app.js file

---

## Conclusion
Use __app.js_ file when you need to add some Global Layout or Meta Tags And use the __document.js_ file only if you need to edit the basic structure of your HTML Code.
What exactly is Networking and Content Delivery
Tags: aws, networking, cloud
Published: 2022-09-16 22:33:18

A few years back when I first heard about **Networking and Content Delivery** it wasn't quite clear to me what it meant and as a beginner understanding the basics concepts was the most important thing to me.
So, in this article I'll give you the proper introduction to one of the basic set of services on the AWS Cloud.

## Networking 🌏
As we might all know a network(computer) is basically a set of computers that are connected together over a shared medium to share information, and we have them from on-premises datacentres to the Cloud. By using networks especially on the Cloud, we want to guarantee that our resources run on a properly configured, low latency and high throughput network. Right now, you must be questioning "isn't the cloud just plug and play, do I have to configure routers and switches? 😭"...
<img width="100%" tyle="width:100%;height:0;padding-bottom:56%;position:relative;" src="https://media.giphy.com/media/xD2iBpuVXcJO/giphy.gif">
... Obviously "no" 🤗, but at some level we must be able to make some configurations to the service provided to us to address our needs because not everything comes out of the box, for example we might have scenarios where we would like to connect our AWS network to our external(on-premises). 


## Content Delivery 📦
We have our networks configured and running, great! But networks weren't meant to be configure and just stay still, they exist to serve content, the same ways roads we built to allow vehicles to travel around. Content delivery relies on the underlying network to delivery content and application to users around the world.
You can imagine Networking and Content Delivery as jelly and peanut butter.
<img width="100%" tyle="width:100%;height:0;padding-bottom:56%;position:relative;" src="https://media.giphy.com/media/iFsCkq1xk05l4DbgrY/giphy.gif">

## Networking and Content Delivery Services
Below is a list of some Networking and Content Delivery services:

- [VPC](https://aws.amazon.com/vpc/)

- [Transit Gateway](https://aws.amazon.com/transit-gateway/)

- [PrivateLink](https://aws.amazon.com/privatelink/)
- [AppMesh](https://aws.amazon.com/app-mesh/)
- [API Gateway](https://aws.amazon.com/api-gateway/)
- [Cloud Map](https://aws.amazon.com/cloud-map/)
- [CloudFront](https://aws.amazon.com/cloudfront/)
- [Route 53](https://aws.amazon.com/route53/)
- [Global Accelerator](https://aws.amazon.com/global-accelerator/)
- [Direct Connect](https://aws.amazon.com/directconnect/)
How to update WP User Billing and Shipping Meta via WP Rest API
Tags: webdev, wordpress, php, programming
Published: 2022-09-16 22:14:56

> How to update WP User Billing and Shipping Meta via WP Rest API
> Hey guys, have you been looking for a way to update user billing and shipping info via API. This video is for you.

{% embed https://www.youtube.com/watch?v=mfz-1Yey9tg %}
Fixing an annoying Whatsapp "feature"
Tags: javascript, webdev, showdev
Published: 2022-09-16 22:12:30

This is a short post. Whatsapp had the archived chat feature for a while, I started finding it annoying at a point since I would keep track of the number:
![archived count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op2no3ptch2co4bh41cg.png)

Well, I thought maybe I could write a script, perhaps an extension to hide it, since well, I was able to do as much with devtools by inspecting and adding `display:none`.  
It's janky but it works, I mean all it needs to do is upon the page load, get the element of the div with the number by classname, and add the style `display:none`.  
Seems pointless, but well it was fun little thing to find I could do.
Here's how it looks after it:

![No archived count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deioj09d9pfyvr5v9gvq.png)

Here's the script,  
[chrome](https://github.com/sarcXD/harch-wa-ch)  
[firefox](https://github.com/sarcXD/harch-wa-ff)  

P.S. Haven't documented adding it, probably cause I've been the only one using it.
New to the DEV community
Tags: beginners, programming, career, opensource
Published: 2022-09-16 22:03:55

I'm a new dev to the DEV community and I wanted to write my first post requesting for advice or assistance in how to make a better digital impact that will help me attract employers and customers alike. Also, if there are any fairly easy open source projects that anyone may know of or need more contributors for, I would love to learn of them and begin setting my digital footprints in technology. Any advice or suggestions are welcomed and thank you in advance for simply reading my post!
Learning TypeScript personal notes
Tags: typescript, beginners
Published: 2022-09-16 21:31:40

```
let str: string = 'pawan';

let no:number = 30

let flag: boolean  = true;

let d: null = null;

let e: undefined = undefined;


console.log(no)

console.log(str)



// Array


const cars:string[] = ['a','b','c']

const nums:number[] = [1,2,3,4]

const bool: boolean[] = [true, false];


function printCar(models : string[]){
    models.forEach(element => {
        console.log(element)
    });
}

printCar(cars)


function callIt(model: number | string){
    console.log(model)
}

callIt('true')





// TYPE

type mo = number | string



function printtCar(model: mo){
    console.log(model)
}

printtCar(2)



// Function Type


function pr(cb: Function){
    cb(20,'bmw')
}

type voo = number | string

pr((no : number, str : String )=> console.log(no, str))






// Interfaces
// large scale applications



type Car =  {
    make: string,
    model : string | number,
    sedan: boolean
}

interface Carr  {
    make: string;
    model : string | number;
    sedan: boolean;

    //functions
    accelerate : () => void;
    decellarate() : void;
}


// Objects

function voe(obj_name: {param_a?: string, param_b : number}):void{
console.log(obj_name.param_b)
}

// interface Bv {
//     nm: string
// }

// interface b2 extends By{
//     nm2: number
// }




// Special Types


let car:any = 'bmw'

car = 'honda'
car = true
car = 22



// unknown 

// let a: unknown = document.getElementById('my-element');
// we can throw what ever we want with unknow type


// void
// function returns nothing



// never
function crash(model:number): never{
    throw new Error('car crash')
}
// it doesn't never returns values / anything not even void  maybe kill process | terminate thing 





// Literal types   ( if declared with const )

type Bike = 'NOO' | 123

// const bike: Bike = 'wha';
const bike: Bike = 'NOO';





// Literal interface

const care = {
    make: "honda" as "honda"
}

// care.make = 'mbw'
care.make = 'honda'





// Tuples 

// only last paramater optional allowed

type CARRR = [number | boolean,string?];


// make readonly
type CARRR2 = readonly [number | boolean,string?];

// OR

let cDetails = [2021, 'bmw'] as const;
// cDetails[1] = 'akj';



const ar: CARRR = [1,'2']
console.log('tuples, -> '+ ar)


// maybe use tuple for API calls






// Rest Parameter

type carTuple = [number,string, ...number[]]

const car3 = [2021, 'bmw',23,123,34];


console.log(car3)





// IMPORTANT


// TYPE ASSERTATION    explicility mentioning when don't know

const myCanvar = document.getElementById('canvas') as HTMLCanvasElement;


// NULL ASSERTATION  when you don't have confirmation but sure about values types use -> !
function doSome(model: number | null){
    model!.toString()
}

doSome(null)


// IMPOSSIBLE ASSERTATION

type YO = string | null

const car1 = 'form' as YO;




// IMPORTANT






// export {}


```
Embedded Systems Weekly #118
Tags: rust, embedded
Published: 2022-09-16 21:24:55

So? Did you recognize what is in the header without reading the description? I had to think twice to find the answer. Probably, it's because I'm more on the software side than on the hardware side.

**Happy reading!**

## Articles 
[How Transistors Work](https://youtu.be/CQtSS6g00h0)
This video details how work BJT transistors (Bipolar Junction Transistors). It is a very good one, but if you are more interested in how work FET transistors (Field-Effect Transistors) you should look at [New FinFet Semiconductor Structure and Function](https://youtu.be/c-3p8moNXfI)

[Has UML Died Without Anyone Noticing?](https://garba.org/posts/2021/uml/)
It can sound like a rant of the author, but I find some real questions in this article. I already had a similar discussion when Boeing got troubles because of big engineering errors. How bad is the use of informal diagrams to software quality and safety? The author writes "at the organisational level, software isn’t being engineered any longer". Do you feel the same then the author? Do you think software engineering is still currently missing the point?

[Bringing Rust to Space - Setting up a Rust ecosystem for the VA108XX MCU family](https://robamu.github.io/post/rust-ecosystem/)
When a person working in satellites is learning Rust, everybody wins a new supported target.

## News / Business
[An F-16 pilot died when his ejection seat failed. Was it counterfeit?](https://www.airforcetimes.com/news/your-air-force/2022/09/13/an-f-16-pilot-died-when-his-ejection-seat-failed-was-it-counterfeit/)
This is a horror story for any component buyer. Six transistors are being suspected of being counterfeit, and it is evaluated as the potential reason for the failure.

## Tools / Libraries
[SiliFuzz - Fuzzing CPUs by proxy](https://github.com/google/silifuzz/)
A few days ago, Google open-sourced this new tool. The approach described in the [paper](https://github.com/google/silifuzz/blob/main/paper/silifuzz.pdf) was completely new for me, and I have to admit surprising. In the end it looks like effective as they have already identified a few [bugs](https://github.com/google/silifuzz/#bugs).

## Jobs
[Stem, Embedded Software Engineer, Full-time, United States (Full remote)](https://jobs.embedsysweekly.com/job/Kpla86MK/embedded-software-engineer)
Stem provides solutions that address the challenges of today’s dynamic energy market.

## Misc
[Byte Magazine Volume 08 Number 08 - The C Language](https://archive.org/details/byte-magazine-1983-08)
I can't explain why, going through the pages of this magazine from 1983 makes me happy. I'm sure some of you will feel the same...

[Castle Drawing](https://projectf.io/posts/castle-drawing/)
This FPGA demo shows how one can draw a castle using only shape rasterization and finite state machines. Why not?
The proper way to stack card items in CSS
Tags: html, css, columns, cards
Published: 2022-10-05 17:13:17

---
title: The proper way to stack card items in CSS
published: true
date: 2022-09-16 21:09:11 UTC
tags: html, css, columns, cards
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t86buffduxlf12ru7jmi.png
canonical_url: https://blogs.somnathpaul.in/the-proper-way-to-stack-card-items-in-css
---

Here is the story, So I was building my [portfolio website](https://somnathpaul.in) and I wanted to create some blogs post cards to show case my recent articles. But while I built the cards and fetched the articles, I found out that the brief about the articles were of different lengths and thus let to cards of different heights. It was creating an extra gap between rows. Like this 👇

### Using Flexbox or Grid

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662850549481/nN6SucFYa.png)

Well, you can make an argument why not use `align-items: stretch;`? Well, I don't want empty space in the cards either.

So let me get to the main part! Why not customize each item with flexbox or grid here? Well, you can when each item sizes are known and the number of items is static, but in my case, each card had different length and the height of the card was only found after the API call is made.

So, I googled a lot but most Stack overflow post ended up with 'You cannot do that with vanilla CSS'. But after a lot of digging, I found out about multi-Column layout and that was a big pain relief 😮💨.

Now look how the cards are stacked 👇

### Using Multi Column layout

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662850602208/4FhMjkzbb.png)

```
.blog_container{
  column-count: 2;
}

```

Now look at the gap between the cards. This single line of code saved me from so much headache. Learn more about CSS columns 👉 [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns).

If you have a better solution, feel free to comment below!
Kody
Tags: webdev, opensource
Published: 2022-09-16 20:30:25

# Kody
is an online web editor for modern front end development that makes creating and sharing web apps faster. Including most popular frameworks like VueNext, ReactJs and more.

## Features

- [x] Transpilers: typescript, coffeescript, babel, livescript
- [x] Css: Sass and Less
- [x] Templates : React, Preact, VueNext, NanoJsx, RxJS, Jquery
- [x] Oauth Github
- [x] PWA

## Built with
- Superbase
- React
- React Router
- Ace Editor
- Recoil
- Netlify

### Captures
![](https://i.ibb.co/QkrTBbD/editor.png)

### Author
- Haikel Fazzani

### License
MIT
Algorithms Challenge (1) How to print out Fibonacci series in two lines code
Tags: fibonacci, java, algorithms, beginners
Published: 2022-09-16 20:26:00

Print out Fibonacci numbers in range 0 - 100 

Concept :  print out two numbers every time

Code in java: 

```
public class fibonacci {
   public static void main(String[] args) {
         for(int a = 0, b=1; a < 100 ; a+=b, b+=a)
             System.out.println(a + "," + (b<100 ? b + ",": ""));
    }
}
```
Result : 
0,1,
1,2,
3,5,
8,13,
21,34,
55,89,
A good name is to be chosen rather than great riches...
Tags: beginners, programming, productivity, career
Published: 2022-09-16 17:14:02

	

---

Ruby is a high-level programming language that was created in the 1990’s. It is an object-oriented language and is frequently used in backend development. I am a student at Flatiron school, and our introduction to the backend was made using Ruby. One of the challenges my group ran into while doing our phase project was how to name our different objects. A situation came up where I realized that naming conventions should not just apply to those working on the project, but they must make sense to people outside of that project. Names should also be “readable”. Your naming convention should use real words and phrases as much as possible.
	Most important, in my opinion, is that your names be descriptive. Your names should tell the reader what an object is, and where it fits into the hierarchy. A series of variables named “c1, c2, c3”, etc are obviously related. It’s good that you can tell that these variables are related, but that doesn’t tell us anything else about them. Are they also related to the variables named “b*”? You can’t really tell from the name. If c1 refers to the name of a city, then the variable could be called city, or cityName. If c1 is an array that incorporates data about a city, perhaps cityData would be good. Or if there are multiple data sets, maybe cityDemographics, cityGovernment and cityMeteorology would be more appropriate. It is also entirely possible that “city” is too generic, and cityDemographics should actually be anytownDemographics to differentiate it from other cities. 
	While descriptiveness is crucial, there are several smaller concepts that can also make or break your naming convention. While descriptiveness is the most important thing, it is not the only thing. If you require an entire line of code to describe a variable, you may need to revisit how your code is organized and rethink the names! A name should be just long enough to be descriptive enough. Consistency is also an important concept in naming. The way you name objects should be similar throughout your project. A reviewer jumping around in your code should not see a jarring difference from component to component. Your naming convention should stay professional. We are all guilty of using nicknames and funny words for objects, but code should be written with a view to being reviewed by managers with no sense of humor. Also, production code with unprofessional references to the project will not endear the customer to the development team.
	There is too much content on naming conventions to cover in a blog post. This is a simple post meant to cover a few basics, and give a beginner and idea of what good names would entail and pitfalls to avoid. Starting now using a descriptive and professional naming convention will benefit you later in your career. Even if you work by yourself, using a good naming convention can help if you need to bring in help. In short, everybody needs to use good names!
A Developer's Connectivity
Published: 2022-09-16 19:52:36

Picture a software engineer. What are some characteristics? Are they approachable? Are they willing to be helpful? Are they eager to ask for help? Some people would answer no to many of those questions. When I started my journey as a software engineer, I also had an image of an anti-social, unapproachable individual as a stereotype for a developer. But as I have continued farther into the industry, I have found the opposite. 

A healthy Software engineering industry requires connectivity. A more connected industry leads to more knowledge shared and better programs and during my career as a software engineer, short as it may be, I have met far more approachable developers than unapproachable developers. While that may be just the nature of entering a new industry and meeting more approachable people, I also believe it is because the best developers are the ones that are the most connected to their peers. These developers ask the most questions and are willing to take the time to help solve other developers' issues. This has changed my stereotype of a software engineer from an isolated individual, to a hyper-connected teammate. If I want to continue to progress as a developer, I will need to stay as connected to my peers as I can. 

This can mean more than just asking for help, it can also mean sharing knowledge, encouraging others, initiating help to new team-members or new developers. Actively connected to peers may not feel natural or comfortable, but it is important to maintain a healthy and vibrant developer community.