teleren/devto huggingface dataset:
Object Destructuring - JavaScript
Published: 2024-01-20 05:05:47

Setelah kemarin kita membahas array destructuring, kali ini kita akan membahas object destructuring. Sama seperti array destrucuring, object destructuring adalah suatu cara untuk mengambil beberapa properti dari sebuah object. Object destructuring tidak merubah struktur object asal. Contohnya sebagai berikut:

```javascript
const siswa = {
 nama: 'Boy sandra',
 alamat: 'Surabaya',
 hobi: ['lari','makan','baca komik'],
 phone: '123456',
 email: 'boi@email.com',
 makanan: {
  senin: 'rendang',
  selasa: 'pecel',
  rabu: 'sate',
 },
 sekolah: {
  senin: {
   masuk: 7,
   pulang: 15
  },
  selasa: {
   masuk: 8,
   pulang: 16
  }
 }
};

const {nama, sekolah} = siswa;
console.log(nama, sekolah);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i369r9tvxboiswccna3z.png)
Kita juga bisa mengganti properti name dari sebuah object seperti contoh berikut:

```javascript
const {nama: namaBaru, alamat: alamatBaru} = siswa;
console.log(alamatBaru, namaBaru);
console.log(siswa);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy2bxu2s07sere58z3yy.png)
Terlihat bahwa struktur object awal tidak berubah. Kita juga bisa menentukan default value dari sebuah properti.

```javascript
const {peliharaan = ['kucing']} = siswa;
console.log(peliharaan);
console.log(siswa);
```

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

Tapi perlu diingat sekali lagi bahwa dalam hal object destructuring, penambahan properti diluar object tidak akan merubah object awal. Untuk menambahkan properti di object bisa dengan cara sebagai berikut:

```javascript
siswa.peliharaan = 'anjing';
console.log(siswa);
```

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

Kita bisa mengganti nilai variabel yang diambilkan dari properti value dari sebuah object, syaratnya adalah nama variabelnya harus sama.

```javascript
let namaku = 'Suman Jaya';
let umurku = 35;
console.log(namaku, umurku); // output: Suman Jaya 35

const data = {namaku: 'Abdul Manap', umurku: 45};
({namaku, umurku} = data);
console.log(namaku, umurku); // output: Abdul Manap 45
```
Kita juga bisa mengambil properti value dari object bersarang (nested object) dan menyimpannya kedalam variabel baru.

```javascript
const {
 senin: {
  masuk: masukSekolah,
  pulang: pulangSekolah
 },
} = siswa.sekolah;
console.log(masukSekolah, pulangSekolah); // output: 7 15
```
Array Destructuring - JavaScript
Published: 2024-01-20 04:47:11

Array destructuring adalah sebuah metode untuk mengekstrak (unpack) nilai array dan menyimpannya kedalam variabel lain. Syarat dari array destructuring adalah jumlah variabel harus sama dengan ukuran array, jika tidak maka akan bernilai undefined. Array destructuring tidak mengubah array asal. Berikut contohnya:

```javascript
const array = [1,2,3,4,5];
const [x,y,z,a,b] = array;
console.log(a,b,x,y,z);
console.log(array);
```
Hasilnya sebagai berikut:

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cfgzztijojjoxtbopq4.png)

Pada baris kedua kita membuat variable berupa array untuk menampung nilai variabel array. Ketika kita console.log variabel secara acak hasilnya benar. Dan ketika console.log variabel array asal hasilnya tetap sama.
Skip value, jika ada nilai yang tidak ingin ditampilkan maka cukup dikosongi saja variabelnya.

```javascript
let [g,,h,i,j] = array;
console.log(g,h); // output: 1 3
```
Nilai angka 2 dilewati karena tidak ada variabel penampung sehingga g=1 dan h=3.

Kita juga bisa menukar nilai sebagai berikut:

```javascript
[g,h] = [j,i];
console.log(g,h) // output: 5 4
```
Kita menukar nilai g=1 dengan j=5 dan h=3 dengan i=4 sehingga hasil akhir variabel g dan h adalah 5 dan 4.

Array destructuring juga bisa digunakan pada array bersarang (nested array) sebagai berikut:

```javascript
let nested = [10,4,[5,7]];
let [c,,d] = nested;
console.log(c,d);
```
Hasilnya sebagai berikut:

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f78pq1ddrqr0htgqxp7i.png)
Pada contoh diatas kita juga mengaplikasikan skip value untuk nilai angka 4 sehingga yang muncul adalah variabel c dan d dengan variabel d merupakan penampung untuk array bersarang.

Kita juga bisa menggunakan default value pada variabel penampung sebagai berikut:

```javascript
const [p=1, t=2, r=3] = [8,9];
console.log(p,t,r); // output: 8 9 3

const [m=1, m=2, o=3] = [,,9];
console.log(m,n,o); // output: 1 2 9
```
Pada contoh pertama variable p dan t meskipun memiliki default value tapi nilainya akan digantikan oleh nilai pada array sebelah kanan. Karena array hanya memiliki 2 buah nilai maka variabel r membawa nilainya sendiri yaitu angka 3.

Pada contoh kedua variabel m dan n membawa nilainya masing-masing karena array sebelah kanan tidak memiliki nilai pada index ke 0 dan 1 (ingat index array dimulai dari 0).
Function Declaration vs Expression – JavaScript
Published: 2024-01-20 04:31:51

**Function Declaration**

Function Declaration adalah sebuah fungsi yang memiliki nama. Deklarasi fungsi ini bisa di awal atau akhir kode program, karena fungsi jenis ini bisa dipanggil meski belum dideklarasikan di awal baris program. Contohnya adalah sebagai berikut:

```javascript
const hitung = luasSegiEmpat(2, 3);
console.log('Luas segi empat 2 x 3: ', hitung);

function luasSegiEmpat(panjang, lebar) {
 return panjang*lebar;
}
```
Hasilnya sebagai berikut:

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

**Function Expression**

Function Expression adalah sebuah fungsi yang langsung di-assign kepada sebuah variabel, jadi fungsi ini tidak memiliki nama atau nama fungsi melekat pada variabel. Function expression harus dibuat di awal baris program sebelum dipanggil, kalau tidak akan menghasilkan error. Contohnya sebagai berikut:

```javascript
const luasSegiEmpat = function(panjang, lebar) {
 return panjang*lebar;
}

const hitung = luasSegiEmpat(3, 4);
console.log('Luas segi empat 3 x 4: ', hitung);
```
Hasilnya sebagai berikut:

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

Jika function expression dipanggil sebelum deklarasi:

```javascript
const hitung = luasSegiEmpat(3, 4);
const luasSegiEmpat = function(panjang, lebar) {
 return panjang*lebar;
}

console.log('Luas segi empat 3 x 4: ', hitung);
```
Hasilnya sebagai berikut:

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w7gvp6jjphr693kiqjg.png)
How To Create a Basic Text In html
Tags: howto, html
Published: 2024-01-20 04:14:07

##Creating an html text is very simple and consists of only 5 steps!

1. Open up your coding software

2. Make an html File

3. I'm lazy so just put this in the Code -

```
<html>
  <Body>
     <p>your text here</p> <!-- p = paragraph(small). h1 = heading1(large) -->
  </Body> 
</html>
```

##Some Lua I Know -

```
print("I'm lazy")
```
Different ways to center a div
Tags: codepen
Published: 2024-01-20 03:50:36

<p>Different ways to center a div demonstrates how we can center a div using different css properties. It discusses use of 'flex box', 'css grid' and a third way which is not very conventional, i.e by using 'position'.</p>

{% codepen https://codepen.io/zaid-hassan-the-looper/pen/OJqmzgE %}

## To center a div using **Flex**.
<p>Centering a div using flex box is really simple. Here is how.</p>
```html
<div class="flex-container">
    <div class="item"></div>
</div>
```
```css
.flex-container {
    display: flex;
    justify-content: center; //center item horizontally
    align-items: center; //center item vertically
    height: 100vh;
}
.item {
    height: 100px;
    width: 100px;
    background: black;
}
```

> _Note:_ You need to give the container a height to center the item vertically.

## To center a div using **Grid**.
<p>Centering a div using grid is even simpler. Here is how.</p>
```html
<div class="grid-container">
    <div class="item"></div>
</div>
```
```css
.grid-container {
    display: flex;
    place-items: center; // center's item horizontally and vertically
    height: 100vh;
}
.item {
    height: 100px;
    width: 100px;
    background: black;
}
```

## To center a div using **Position**.
<p>Centering a div using position is not something you will normally do. Here is how to center a div using `position: absolute;`.</p>
```html
<div class="container">
    <div class="item"></div>
</div>
```
```css
.container {
    position: relative;
    height: 100vh;
}
.item {
    position: absolute;
    height: 100px;
    width: 100px;
    background: black;
}
```
```js
const container = document.querySelector('.container');
const item = document.querySelector('.item');


// clientHeight/clientWidth gives us the height/width of the element in pixels

item.style.top = (container.clientHeight/2) - (item.clientHeight/2) + 'px';

item.style.left = (container.clientWidth/2) - (item.clientWidth/2) + 'px';
```

-----

> Follow me on X to join me in my tech journey. {% twitter 1748337857746383178 %}
I'm creating an online developer toolkit app, need help deciding which tools to implement
Tags: webdev, programming, javascript, beginners
Published: 2024-01-20 02:38:50

For now, the website has:

Javascript Minifier
JSON Minifier
JSON Formatter
Lorem Ipsum Generator
Placeholder Generator
Password Strength
Image to Base64
XML to JSON
JSON to XML
Link: [devtoolkitapp](https://www.devtoolkitapp.com/)

Which tools would be cool to implement?
Notas de Codigo limpio
Tags: cleancode, notes
Published: 2024-01-20 02:35:31

---
title: Notas de Codigo limpio 
published: true
description:Notas del famoso libro codigo limpio, no espero que alguien aprenda algo de esto! son solos mis notas 
tags: #cleancode  #notes
---

Link:

[libro](https://elhacker.info/manuales/Lenguajes%20de%20Programacion/Codigo%20limpio%20-%20Robert%20Cecil%20Martin.pdf)


Intro: Invita a esforzarse y hacer un trabajo duro, tomare tiempo para leer con calma y paciencia cada palabra de este libro. 

Sobre la imagen: interesante.

Codigo limpio: Ley de LeBlanc "Despues es igual anunca".
Empowering Web Development: A Journey into TypeScript, Vite, and Open Source Contribution
Published: 2024-01-20 02:26:22

Embarking on a quest to delve into the realms of modern web development, I recently undertook an in-depth investigation into TypeScript and Vite. The journey involved not only researching and studying these powerful tools but also contributing to an open-source project, adding a personal touch to the learning process. In this blog, I'll share my discoveries, experiences, and contributions, shedding light on the evolving landscape of web development.

## TypeScript Unveiled: A Dive into Static Typing

My exploration of TypeScript began with a fascination for its ability to bring static typing to JavaScript. The quest led me through a maze of powerful features, including interfaces, classes, and generics. Through diligent research, I unveiled the impact of TypeScript on code robustness and maintainability, especially in large-scale projects. Practical applications showcased how static typing streamlines collaboration and reduces bugs. 

## Vite: The Next-Gen Frontend Build Tool

Vite, touted as the next-generation frontend build tool, captured my interest with its unparalleled speed and efficiency. Researching its unique development server, plug-in system, and seamless integration of modern technologies like Vue.js and React revealed a tool that transforms the development experience.

## Open Source Contribution: Navigating the World of Chatcraft

Diving into the world of open source, I found myself contributing to Chatcraft, an exciting project with the potential to enhance the user experience. Starting with [issue #316](https://github.com/tarasglek/chatcraft.org/issues/316), I tackled the challenge of sorting models and refining the user interface. The journey involved creating small, manageable [pull requests](https://github.com/tarasglek/chatcraft.org/pull/344) and collaborating with the project owner. As the journey unfolded, I discovered the importance of efficient code management and responsiveness to feedback.

## Lessons Learned: Optimizing Run Time and Collaboration

In the process of addressing [issue #316](https://github.com/tarasglek/chatcraft.org/issues/316), I encountered the need for sorting lists in different contexts within the project. The challenge prompted a deeper understanding of code organization and the significance of sorting during initialization for optimal runtime performance. Valuable insights from my professor led to an improved approach, emphasizing the importance of efficiency in both code execution and collaboration within open-source projects.

## Conclusion: Empowered and Enriched

The journey into TypeScript, Vite, and open-source contribution proved to be both enjoyable and eye-opening. From unlocking the power of static typing to embracing the efficiency of Vite and navigating the collaborative world of open source, the experience has left me empowered and enriched. As the web development landscape continues to evolve, these tools and experiences serve as pillars of knowledge, propelling me forward on my journey in the dynamic field of web development.
Full vs Complete BiNARY TREEs
Tags: datastructures, javascript, programming
Published: 2024-01-20 02:12:25


To understand this concept about **Binary tree** we have to learn about _Binary tree representation in Array_.

When the _node is at index i_, then the _left child is at index 2*i _and _right child will be positioned at index i*2+1_ and _it's parent must be at i/2_

After the binary tree representation as an array we can say

=>
**Full Binary tree**: If the binary tree is full with all the max nodes it can take corresponding to the height and adding another node to the binary tree will increase the height then it's known as Full BT

How to check max nodes according to the height?
Ans = Using formula_** 2^(h+1) - 1**_, where h is the height of BT

=>
**Complete Binary tree:** When the binary tree is represented in the form of an Array, and up to the length of the array if all the elements are present then it's complete Binary tree else it's not

Some real life examples to use BT
=>
**Navigation Trees:**
In website development, hierarchical navigation menus are common. Each menu item can have zero or more sub-items, forming a tree structure. This structure is useful for organizing and displaying a website's navigation hierarchy.
Home
|-- About
| |-- Team
| |-- History
|-- Products
| |-- Product A
| |-- Product B
|-- Contact

=>
**Comment Threads:**
For comment systems on blogs or forums, replies to comments often form a tree structure. Each comment can have multiple replies, creating a threaded discussion.

Comment 1
|-- Reply 1.1
|-- Reply 1.2
| |-- Reply 1.2.1
Comment 2
|-- Reply 2.1


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11ob5olxlxsvxsge8qxr.png)
PHPUnit or Pest?
Published: 2024-01-26 20:33:33

---
title: PHPUnit or Pest?
published: true
date: 2024-01-20 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/01/20/phpunit-or-pest
---

A recent discussion has started about which testing framework should be the default one used in Laravel.

PHPUnit or Pest.

I've used both, and I like both.

I'm more familiar with classes, object-orientated code and PHPUnit, but for people who are more familiar with JavaScript and the Jest testing framework, Pest may be the better option.

Its expectation API, where you can chain multiple assertions on the same expectation, is helpful, although I don't mind some repetition in PHPUnit tests.

Pest tests can become abstract, especially with some of their one-line example tests.

Whether you pick PHPUnit, Pest or another framework like Behat or Codeception, the main thing is you're taking the time to write automated tests for your code, which is valuable whichever testing tool you use.

 P.S. Are you still using Drupal 7 and don’t know what’s involved to upgrade to Drupal 10? [Book a Drupal 7 upgrade consultation call](https://www.oliverdavies.uk/call) or [an upgrade roadmap](https://www.oliverdavies.uk/drupal-upgrade).
My Code Journey (Not the best)
Tags: beginners, programming, codenewbie, journey
Published: 2024-01-20 00:45:53

This is my personal experience of coding journey, and it has been a transformative experience, one that I believe can resonate with others facing a similar path.

## Discovering Programming
I started programming around 2016-2017, during my time at school I was supposed to be focused on preparing for university exams but my passion for IT took me in a different direction. I found a Python course on YouTube and I liked it so much that after completing the entire course, I started working on small projects, but at that time, I didn't know I could pursue a career in coding and I felt far from becoming a professional developer. Over time, my interest diminished and I ended up enrolling in an undergraduate course in a completely different area of IT.

## My Graduation
I opted for an Agribusiness graduation course, considering it a viable option for employment in my region. As I attended classes, I realized that this field wasn't the right fit for me. Despite this, I remained committed to completing the entire course because I don't like giving up (a significant mistake, in hindsight).

## Turning Point
One day, I stumbled upon more programming videos, this time focusing on web development. Following some tutorials, I learned the basics of web development with HTML, CSS, and JavaScript. As I continued learning and working on projects, I seized the opportunity to create websites for small businesses in my neighborhood. This turned out to be a pivotal moment for me. I discovered that I could really make a living from it, even though my income from those projects was very little, with more experience I could work on bigger projects, and this led me to study more and more.

## Commitment to Growth
After finding myself in web development and falling in love, I remained committed to my coding journey, deepened my studies at the base and learned new technologies, I committed to not limiting myself to stacks and experimenting with market trends.

## Looking for new opportunities
With a new focus on web development, I recently completed another university course, this time in IT for business. This additional qualification opened doors to interesting opportunities, allowing me to enter the professional world. I got an internship where I had the opportunity to collaborate with different companies and participate in different projects. Today, web development is not just a passion, but my chosen profession, offering a rewarding career that aligns with my skills and aspirations.

**Disclaimer**: It's important to note that discovering your ideal technology stack is a unique process for everyone, including exploration and personal preferences. The path to finding the right option requires patience, perseverance and a willingness to embrace the diverse opportunities that the area has to offer.
Emotsy - Where Next-gen Email & Marketing Meet
Published: 2024-01-20 00:41:33

Emotsy, your ally in email marketing, seamlessly combines automation and emotion to create heartfelt connections with every message. Elevate engagement, foster loyalty, and achieve impactful results with our easy-to-use platform. 

Revolutionize your email marketing campaigns like never before with Emotsy! Sign up now.

[https://www.emotsy.com](https://www.emotsy.com)
Understanding TypeScript's Type System
Tags: typescript, javascript, beginners, programming
Published: 2024-01-20 00:30:43

## Introduction

TypeScript is a popular programming language known for its strong type system, which sets it apart from other JavaScript frameworks. Understanding TypeScript's type system is essential for developers who want to utilize the full potential of this language. In this article, we will delve into the advantages, disadvantages, and features of TypeScript's type system.

## Advantages

- **Error Detection During Development:** One of the primary advantages of TypeScript's type system is that it enables developers to catch errors during development rather than at runtime. This leads to more robust and reliable code.
- **Improved Code Readability and Maintenance:** It also improves code readability and makes it easier to maintain. Furthermore, TypeScript's type system allows for better code organization and facilitates code refactoring.

## Disadvantages

- **Added Complexity:** The main disadvantage of TypeScript's type system is the added complexity it brings to the language. It requires developers to spend more time on type annotations, which can be tedious and time-consuming.
- **Restrictive Type Checking:** Additionally, TypeScript's strict type checking can also be restrictive for some developers, especially those coming from a dynamically-typed language like JavaScript.

## Features

- **Type Inference:** TypeScript's type system offers features such as type inference, where the compiler automatically assigns types to variables based on their values.
- **Custom Types and Union Types:** It also provides support for custom types and union types, which allow for greater flexibility in data structures.
- **Advanced Concepts:** Furthermore, TypeScript's type system has advanced concepts like generics and intersection types, making it suitable for complex projects.

### Example of Type Inference and Custom Types

```typescript
// Type inference example
let message = "Hello, TypeScript"; // message is inferred to be of type string

// Custom type example
type User = {
  name: string;
  age: number;
};

// Using the custom type
let user: User = {
  name: "John Doe",
  age: 30,
};
```

This example demonstrates TypeScript's type inference and the use of custom types to define a User type, showcasing the power and flexibility of TypeScript's type system.

## Conclusion

In conclusion, understanding TypeScript's type system is crucial for developers looking to write robust and scalable code. While it may have some limitations, its benefits far outweigh the drawbacks. With features like type inference, custom types, and strict type checking, TypeScript offers a powerful and reliable type system that can enhance the development process. By using TypeScript's type system effectively, developers can significantly improve the quality and maintainability of their code.
FIREBASE GOOGLE REACT
Published: 2024-01-20 00:28:31

Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js";
import { getAuth , GoogleAuthProvider , signInWithPopup} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  //YOUR FIREBASE PROJECT DETAILS 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
auth.languageCode = 'en'
const provider = new GoogleAuthProvider();

const googleLogin = document.getElementById("google-login");
googleLogin.addEventListener("click", function(){
    
    signInWithPopup(auth, provider)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const user = result.user;
    console.log(user);
    window.location.href = "../come/index.html";
    
    
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
   
  });

})