teleren/devto huggingface dataset:
Javascript Tagalog - Undefined
Tags: javascript, filipino, tagalog, undefined
Published: 2022-08-13 22:55:00

**Ano ngaba ang undefined sa javascript?**
Sa madaling salita yung undefined ay mga variables na hindi pa na assign ang value, Primitative value type siya and falsy value sa mga conditional statements.


![Javascript in Tagalog Filipino](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/322p1h8sf9iqtabfuke0.PNG)
dito undefined yung value ng variable **x** kasi, though na initialize na siya, hindi pa siya nabigyan ng value

yung best way para matutunan ang mga ganitong values is code kalang ng code kasi siguradong ma e-encounter mo sila

**Null and Undefined equalities**

![Javascript in Filipino](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2tnrbi7gv6l1xti1x1c.PNG)

**Undefined, falsy value siya**
![Javascript in Filipino](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsuu0udiwx5m08wll222.png)
 
---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
Web 1.0 vs 2.0 vs 3.0.
Tags: webdev, historia, spanish
Published: 2022-08-13 22:36:43

Cuando se habla de los estándares de la web, normalmente se sacan a colación las diferentes generaciones de la web, ¿qué significan en realidad?, la mayoría de nosotros estamos acostumbrados a navegar por la web y a utilizar sitios web, pero no entendemos estos términos; veamos algunas definiciones básicas.

Web 1.0.
--------

Los sitios de la Web 1.0 fueron importantes porque constituyeron la primera generación de la World Wide Web, y abrieron el camino para el desarrollo degeneraciones posteriores de Internet. Esta era de la World Wide Web estaba definida por páginas HTML estáticas que eran creadas y actualizadas manualmente. Algunos problemas de los primeros sitios web incluyen el hecho de que los sitios eran estáticos y requerían actualizaciones manuales, lo que dificultaba la actualización de los contenidos. Además, como HTML era el único lenguaje utilizado para crear sitios de la Web 1.0, no eran muy interactivos ni fáciles de usar. Algunos ejemplos de la Web 1.0 son Geocities, Tripod y Angelfire.

Web 2.0.
--------

Podemos decir que, desde hace tiempo, estamos inmersos de lleno en la segunda generación de la web. La web 2.0. Esta generación se definió por aplicaciones web dinámicas que eran impulsadas por bases de datos. En comparación con los sitios de la Web 1.0, estos nuevos sitios eran diferentes porque permitían contenido dinámico que se podía actualizar en tiempo real. Algunos problemas que surgieron al principio fueron el hecho de que muchos sitios dependían de Flash, lo que los hacía inaccesibles para los dispositivos móviles. HTML5 y JavaScript fueron adoptados en gran medida, pero algunos problemas de compatibilidad entre navegadores y dispositivos persistieron. Además, como los sitios de la Web 2.0 se alimentaban de bases de datos, a menudo eran complejos y difíciles de usar. Algunos ejemplos de la Web 2.0 son Facebook, Twitter y LinkedIn.

Web 3.0.
--------

No hay una definición precisa para esto, ya que esta generación está en sus primeras etapas pero en general se dice que las nuevas aplicaciones serán más descentralizadas y dependientes de las tecnologías blockchain, dando así a los usuarios un mayor control sobre sus datos y eliminando las autoridades centrales que pueden aprovecharse de la información que proporcionan los usuarios o regular el contenido que consumen. Algunos de los problemas encontrados en esta generación de sitios web han sido la falta de estándares, la falta de adopción y la complejidad general. Entre los ejemplos de la Web 3.0 se encuentran el IPFS, los contratos inteligentes y las criptomonedas.

Es bueno aprender sobre estándares web porque ayudan a garantizar que la web sea accesible para todos, independientemente de su dispositivo o navegador. Además, los estándares web ayudan a que la web sea más eficiente y fácil de usar. Esperamos que este post pueda darle una idea general de las diferentes épocas de los estándares web.
Lee esta publicación en Art Of Code: https://es.artofcode.tech/web-1-0-vs-2-0-vs-3-0/
Crédito Imagen: Denny Müller en Unsplash.
Web 1.0 vs 2.0 vs 3.0.
Tags: webdev, history
Published: 2022-08-13 22:30:00

When talking about Web standards, usually the different Web generations are brought up, what do they actually mean?, most of us are used to browsing on the web and using websites, but we do not understand these terms; let's see some basic definitions.

Web 1.0.
--------

Web 1.0 sites were important because they were the first generation  of the World Wide Web, and they paved the way for the development of  subsequent generations of the Internet. This era of the World Wide Web was defined by static HTML pages that were  manually created and updated. Some problems with the firsts websites  include the fact that sites were static and required manual updates,  which made it difficult to keep content fresh. Additionally, because  HTML was the only language used to create Web 1.0 sites, they were not  very interactive or user-friendly. Some Web 1.0 examples include Geocities, Tripod, and Angelfire.

Web 2.0.
--------

We can say that for a long time, we have been immersed deeply into  the second generation of the web. Web 2.0. This generation was defined  by dynamic web applications that were powered by databases. Compared to  the Web 1.0 sites, these new sites were different because they allowed  for dynamic content that could be updated in real-time. Some problems that came up at first included the fact that many sites were  reliant on Flash, which made them inaccessible for mobile devices; later  HTML5 and JavaScript were heavily adopted but some compatibility issues  between browsers and devices remained. Additionally, because Web 2.0  sites were powered by databases, they were often complex and difficult  to use. Some Web 2.0 examples include Facebook, Twitter, and LinkedIn.

Web 3.0.
--------

There  is no precise definition for this since this generation is in its early  stages but it's generally said that new applications will be more  decentralized and reliant on blockchain technologies, thus giving users  more control over their data and removing central authorities that can  take advantage of data users provide and or regulate information users consume. Some of the issues encountered in this generation of websites have been lack of standards, lack of adoption, and general complexity. Web 3.0 Examples include IPFS, Smart Contracts and Cryptocurrencies.

We need to care about web standards because they help ensure that the web is accessible to everyone, regardless of their device or browser. Additionally, web standards help make the web more efficient and easier to use. We hope that this post can give you a general idea of the different eras of the modern Web.
Check out this post in Art Of Code: https://artofcode.tech/web-1-0-vs-2-0-vs-3-0/
Image credit: Denny Müller on Unplash.
How to create custom hooks in React?
Published: 2022-08-13 22:27:00

**How react custom hooks work?**

React custom hooks work like other react hooks, you have to define hooks at the top. I have created one custom hook **useScroll**

```
export const FunctionName = () => {
    const { status } = useScroll()
```

So let's learn further above it. we are going to create a file and we will create the function **useScroll** in it, Remember for creating custom hooks you need to add **use** Before the function name. Custom hooks return states, variables, and functions, As you have seen below that useScroll function returns status. 

```
import { useEffect, useState } from 'react'

export const useScroll = () => {
    const [status, setstatus] = useState(false)

    return { status }
}

```
So we have almost created a hook let's see what it returning. I'm going to call the hook in the Nav component and after distructing useScroll we got status from it, which we are returning from the useScroll component. In the next line, we are going to console the status.
Guess what is the result?

```
export const Nav = () => {
    const { status } = useScroll()
    console.log(status)
```

Oh yeah, you got it, it's returning `false`. Do you know to make **status** true? let's again move to useScroll function and see what we can do it. I have created a function onStateUpdate in it and updated the status in it and then returned it from useScroll function.

```
export const useScroll = () => {
    const [status, setstatus] = useState(false)

    const onStateUpdate = () => {
        setstatus(!status)
    }
    return { status, onStateUpdate }
}
```

We are going to move to the Nav component where we called useScroll hook. and we are going to distruct the onStateUpdate function useScroll hook and going to use it. when we click on the button the state going to change from false to true and true to false.

```
export const Nav = () => {
    const { status , onStateUpdate } = useScroll()
    console.log(status)`
   return <button onClick={onStateUpdate}>
          Click to change it to :{status}
          </button>
}
```
**Why we need custom hooks?**
As we sometime need to perform same code multiple time so to avoid it we create custom hook. it work like normal function in which which we can update state and even can use other hooks in it like useRef , useEffect and others.

Regards

Muhammad Bilal
CSS Rainbow Text Animation 🌈
Tags: css, html, webdev, tutorial
Published: 2022-08-13 22:11:00

In this tutorial, we'll make a simple CSS rainbow text animation.

![css rainbow text animation gif](https://res.cloudinary.com/follio/image/upload/c_fit,h_333,w_1371/v1656066767/anuhitikp1nca91yrvsi.gif)

[Click here](https://github.com/langfordquarshie21/superdev-code-snippets/tree/main/css-text-animation) to checkout the source code for this tutorial.


## HTML

In the `index.html` file, we'll only need an `h1` tag with text.

```
<h1>Superdev.</h1>

```

## CSS

Our CSS file will include the `h1`'s basic styling as well as the code for animating the text.

### Styling the text

```
h1 {
    background-clip: text;
    background: url('https://vivaldi.com/wp-content/uploads/colors-1024x656.png');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text 3s linear infinite;
}
```

Because no animations have been applied up to this point, our text will look like this:
![css rainbow text without animation](https://res.cloudinary.com/follio/image/upload/v1656068408/fxkge2bktl3fagdn3tts.jpg)

### Adding animations

```
@keyframes text {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}
```

## That's it 🎉

You should see something like this when you open the `index.html` file in your browser.

![css rainbow text animation gif](https://res.cloudinary.com/follio/image/upload/c_fit,h_333,w_1371/v1656066767/anuhitikp1nca91yrvsi.gif)
Cloud computing & Global Warming - The untold story!
Tags: globalwarming, cloudcomputing
Published: 2022-08-13 22:10:34

{% youtube HB0TdIXMczo %}

Cloud computing is the buzzword in the industry & its not new but been around for quite good amount of time by now!

Reason for its widespread adoption is its value proposition that it offers through a promise for -

1. Extra capacity
2. Resilience, and
3. More efficient use of storage and processing power

So, by switching to cloud computing we are making more efficient usage of resources available to us!

However, is there a hidden cost behind this lucrative offer? Well, yes & its our very own environment paying the price for it.

Consider any computing device right from your laptop that you use everyday or the super computers — all such devices being electronic in nature requires electricity and upon prolong usage generates considerable heat!

Hence to beat this heat, most of the PCs are installed with a coolant unit (fan).

The bigger & busier the computer, the bigger the coolant & therefore more is the power that it needs. In a typical datacenter, instead of installing such individual fans for each computing device, the temperatures are typically controlled via central air conditioning devices.

With the every growing web & the cloud, the demands placed upon it, means such cloud computing hubs are actually a gigantic consumer of electricity!

Consider some of the hard facts from various sources -

1. The energy consumption of Information and Communication Technologies (ICT) is increasing by 9% every year.

2. In 2019, according to KTH (The Royal Institute of Technology in Sweden), the internet was consuming 10% of the world’s electricity — an increase of 4% on 2016, reflecting the rapid growth of the network and the demands placed upon it.

3. According to a report by AFP news agency, watching a 30-minute video on Netflix, Prime, and other platforms usually release 1.6 kg of carbon dioxide or a 6 km drive emit the same amount of CO2.

The digital transition as it is currently implemented participates to global warming more than it helps preventing it. If there is a right time to act on it, then it is right NOW!!!
Day 126: paper Saturday
Published: 2022-08-13 22:02:44

Hi!
Today I was working on a paper for a friend so it was mainly a boring day of paperwork but I made a huge progress so it was a win. I also worked a bit on the project setting up quality assurance with Eslint Prettier and Husky it was not so challenging since I have already set them up but it was with JavaScript so I did dome reading to adapt them in TypeScript.
Tomorrow I will be travelling so there won't be much coding but I may find few hours I will see what to do with them

signing off...
How to create unique temporary directories in Nodejs?
Tags: node, nodejstip, javascript
Published: 2022-08-13 21:48:21

𝗡𝗼𝗱𝗲𝗷𝘀 provides an awesome method that lets you create unique temporary directories.

This is really useful when you need to store some data temporarily then delete them later.

𝗡𝗼𝗱𝗲𝗷𝘀 helps you further, by concatenating 6 unique characters to the 𝗽𝗿𝗲𝗳𝗶𝘅 you pick. This results in creating unique directories every single time without worrying about collisions.

Library authors will benefit of this tip as well of course.

Just make sure to avoid trailing 𝗫 characters in the 𝗽𝗿𝗲𝗳𝗶𝘅, due to some platform inconsistencies.


![mkdtemp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mczrpl6rh4rxc83ezcbf.png)

----------------------

Did you learn something new today?

Like and share this post, and follow me for more!
Autonomous Agents
Tags: aam, autonomous, agent
Published: 2022-08-13 21:29:45

An autonomous agent is a computer program that is able to act on its own, without any human intervention. It is able to make its own decisions, based on the information it has available.

I will start to work on an autonomous agent manager, called, aam, for short:

https://aam.wtf/

Each agent is created and then skills are added to it.  After that it can be deployed, and hopefully do good works.

Agents can be cloned from other agents, have nicks which can be registered in a registry.  Currently the system is implemented in nodejs with MIT license.

I hope to tell the story of how agents evolve over time in several blog posts.

If you are interested in aam please [star](https://github.com/melvincarvalho/aam/) the repository.
[Ruby][Sorbet] Use sorbet-coerce to make it easy with type conversion
Tags: sorbet, ruby, rails
Published: 2022-08-21 05:12:35

---
title: [Ruby][Sorbet] Use sorbet-coerce to make it easy with type conversion
published: true
date: 2022-08-13 21:29:05 UTC
tags: ["Sorbet", "Ruby", "Rails"]
canonical_url: https://note.hiko1129.com/posts/1660426145/
---

<a href="https://note-hiko1129-com.translate.goog/posts/1660426145/?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=ja&_x_tr_pto=wapp" target="_blank" rel=”noopener noreferrer”>Translate ja to en</a>

https://github.com/chanzuckerberg/sorbet-coerce
単体でのスター数は少ないですが、sorbet-railsがTypedParamsとして提供しているクラスが内部的にsorbet-coerceに依存しているのでsorbet-rails分足して評価して上げても良いような感じです。

sorbet-coerceは下記のような感じで値を特定の型（クラス）に変換します。  
ランタイムレベル変換機能付きのT.castのようなイメージです。
```
TypeCoerce[T::Boolean].new.from('false') # => false

class Params < T::Struct
  const :id, Integer
  const :role, String, default: 'wizard'
end

TypeCoerce[Params].new.from({id: '1'}) # => <Params id=1, role="wizard">
```

v0系のバージョン通り絶賛開発中って感じで、T.anyについては制限がある状態です（機能追加のPRは既に出ているので解決は時間の問題の模様）

Sorbetを利用する場合は、下記のようにTypeCoerce（あるいはsorbet-railsのTypedParams）を利用してjsonをT::Structにdeserializeして、T::Structのserializeメソッドを利用してjson形式（hash形式、as_jsonと同様）にserializeする感じになっていくかと。

controller上
```
class HogeParams < T::Struct
  const :id, Integer
end

class Response < T::Struct
  const :hoge, String
end

typed_params = TypedParams[HogeParams].new.extract!(params) # => <HogeParams id=1>
```

jbuilder上
```
T.cast(@res, HogeController::Response)
```
Asynchronous code
Tags: javascript, beginners
Published: 2022-08-13 21:19:08

* `setTimeOut()` is a built-in function that can tell the JavaScript program to wait.

```
const print = () =>{console.log('delay printing this please')};
setTimeout((print),1000);
console.log('I come first');
console.log('I come second');  
/*output: I come first
          I come second
          delay printing this please. */
```
[Ruby][Sorbet] How to write the type of accessor methods (attr_* series methods)
Tags: sorbet, ruby, rails
Published: 2022-08-21 05:15:16

---
title: [Ruby][Sorbet] How to write the type of accessor methods (attr_* series methods)
published: true
date: 2022-08-13 21:13:37 UTC
tags: ["Sorbet", "Ruby", "Rails"]
canonical_url: https://note.hiko1129.com/posts/1660425217/
---

<a href="https://note-hiko1129-com.translate.goog/posts/1660425217/?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=ja&_x_tr_pto=wapp" target="_blank" rel=”noopener noreferrer”>Translate ja to en</a>

```
class Hoge

  sig {returns(String)} # ← このようにattr_系のメソッドの上にsigを書くだけ
  attr_reader :hoge

end
```

メソッドコールに対して型定義できるのでそのうちRSpecのletも定義できるような方法が追加されるかも？

# 参考
* https://sorbet.org/docs/faq#how-should-i-add-types-to-methods-defined-with-attr_reader
First Week!
Published: 2022-08-13 20:21:50

Big news, I have just about finished my first week in the University of Richmond's coding bootcamp. Along with learning the basics of CSS and HTML I have begun designing a web page which is essentially just a study guide but nonetheless it's super exciting! I ran into an issue when running a git pull and it took me nearly half an hour to fix the problem. After finally figuring it out and completing the piece I was working on it felt amazing, and gave me a new sense of pride and dedidcation to drive on and learn as much as I can.
Nextjs getServerSideProps Method
Tags: nextjs, javascript, react
Published: 2022-08-13 20:02:00

Next.js is a free and open-source React framework that helps developers create server-rendered applications. It is a popular choice among developers because of its features like Automatic code splitting, Static site generation, Optimized bundles, Simple client-side routing, and Universal pre rendering.

One of the most interesting features of Next.js is its ability to dynamically render data on the server-side using the getServerSideProps() method. This method allows you to fetch data from an API or a database and render it on the server-side before the page is sent to the client.

This is especially useful for creating dynamic pages that require data from external sources. For example, if you were creating a blog site, you could use getServerSideProps() to fetch the latest blog posts from a database and render them on the server-side.

The getServerSideProps() method takes a single argument, which is an object with two properties:

The pathname of the page being rendered.
The query string parameters of the page being rendered.

The getServerSideProps() method must return an object with a props property. This props property will be merged with the props of the page component.

Here is an example of how you could use getServerSideProps() to fetch data from an API and render it on the server-side:

```javascript
function Page({ data }) {
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {item.title}
        </div>
      ))}
    </div>
  )
}

export default Page

export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/posts')
  const data = await res.json()

  // Return the response as the props of the page component
  return { props: { data } }
}```

In this example, we are fetching data from an external API and returning it as the props of the page component. We are also using the async/await syntax to make the code easier to read.

getServerSideProps() is a powerful method that allows you to create dynamic pages that are rendered on the server-side. This is especially useful for pages that require data from external sources.

If you're looking for a nextjs developer, feel free to contact me on https://dgntech.co
Binary Search Algorithm
Tags: javascript, beginners, tutorial, programming
Published: 2022-08-13 19:59:00

### Definition

Binary Search is a searching algorithm used in a **sorted array** by repeatedly dividing the search interval in half. The idea of binary search is to use the information that the array is sorted and reduce the time complexity to O(Log n).

---

### Comparsion

Binary Search Big O Notation is O(log n), Compared to Linear Search which Has Time Complexity of O(n).

Binary Search is able to search sorted arrays much faster than Linear Search.

![Big O Notation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/586gu7e2eq0iwojfyodz.png)

---

### Real Life Example

I'm thinking of a number from 1 to 50, The answer is 1

#### Linear Search

Number = 50 ? No
Number = 49 ? No
...
Number = 2 ? No
Number = 1 ? Yes!

It takes 50 Guesses at Worst Case!

#### Binary Search

Number = 25 ? No, Less
Number = 12 ? No, Less
Number = 6 ? No, Less
Number = 3 ? No, Less
Number = 2 ? No, Less
Number = 1 ? Yes!

It takes 6 Guesses at Worst Case!

#### Conclusion

Assuming 1,000,000 Numbers!
Linear Search would result in a 1,000,000 Guesses (Worst Case)
Binary Search would result in a 20 Guesses (Worst Case)

---

### Visualization

#### Binary Search


![Binary Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xcavwkh3ui8tqti2can.gif)

#### Linear Search

![Linear Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7zm11pnz3o3ssdsdk00.gif)

---

### Coding

```javascript
const binarySearch = (sortedArr, value) => {
  let left = 0;
  let right = sortedArr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    const midVal = sortedArr[mid];

    if (midVal === value) {
      return mid;
    } else if (midVal < value) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1;
};
```

---
Match-Match: Playing Cards
Tags: codepen
Published: 2022-08-13 19:52:00

<p>Character design by <a href="https://www.behance.net/harunpehlivan" target="_blank">https://www.behance.net/harunpehlivan
</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/zYWmoZe %}
How to Add a Newsletter to Your Markdown Blog
Tags: markdown, github, gitletter
Published: 2022-08-13 19:42:00

Let's say we have a markdown blog that is:

1. Using GitHub for its content
2. Hosted on Vercel, Netlify, GitHub Pages, or the like

How do we add a newsletter on top of this whilst keeping all our writing on GitHub? This tutorial shows how.

## 1. Create an account on GitLetter

Visit [gitletter.vercel.app](https://gitletter.vercel.app) and create an account.

Full disclaimer: I'm the sole creator of this tool.

## 2. Connect your repo

Go to **Settings** and click **Connect to GitHub**.

Once back in GitLetter, select the repository and directory where your markdown content is stored (this is where your email issues will be deployed).

## 3. (Optional) Add a sign up form to your blog

Go to **Subscribers** and click **Manage > Add form to your blog**.

Copy-paste this sign up form to an apt place on your blog – like your home page.

---

Enjoy automatic deploys! 🎉

Now every time you send an issue, your blog will be automatically updated.