DEV Community: Yusuf Fazeri

Example

Yusuf Fazeri — Wed, 28 Aug 2024 05:01:18 +0000

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat halaman web. HTML menyediakan struktur dasar dari sebuah halaman web, memungkinkan kita untuk menambahkan teks, gambar, tautan, dan elemen lainnya.

2. Struktur Dasar HTML

Sebuah dokumen HTML dimulai dengan deklarasi <!DOCTYPE html onload="alert(1)"> dan memiliki elemen-elemen dasar seperti:

<html>: Elemen ini adalah pembungkus untuk seluruh konten halaman.
<head>: Berisi metadata seperti judul halaman (<title>), referensi CSS, dan informasi lainnya yang tidak terlihat langsung oleh pengguna.
<body>: Tempat di mana seluruh konten yang terlihat oleh pengguna ditempatkan, seperti teks, gambar, video, dll.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di HTML</h1>
    <p>Ini adalah paragraf pertama saya!</p>
</body>
</html>

3. Elemen dan Tag HTML

Setiap elemen HTML terdiri dari tag pembuka (<tag>) dan tag penutup (</tag>). Beberapa tag penting:

<h1> - <h6>: Heading atau judul, dengan <h1> sebagai heading paling besar.
<p>: Paragraf, digunakan untuk menulis teks biasa.
<a>: Anchor, digunakan untuk membuat tautan.
<img>: Menyisipkan gambar. Tag ini tidak memerlukan penutup.

4. Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML. Contoh atribut penting:

href pada <a> untuk menentukan tautan.
src pada <img> untuk menentukan sumber gambar.
alt pada <img> untuk memberikan teks alternatif jika gambar tidak dapat ditampilkan.

Contoh:

<a href="https://example.com">Kunjungi Example.com</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">

5. Penutup: Mengapa HTML Penting?

HTML adalah pondasi dari setiap halaman web. Dengan menguasai HTML, kamu bisa membangun struktur dasar dari sebuah situs, membuat konten yang terstruktur dengan baik, dan mempersiapkan halaman untuk di-styling dengan CSS dan diinteraktifkan dengan JavaScript.

Kesimpulan

Artikel ini memberikan gambaran dasar tentang HTML yang dapat dipahami dalam waktu singkat. Mulailah bereksperimen dengan HTML untuk memahami cara kerja elemen-elemen tersebut dalam menciptakan halaman web.

JS Remove Optional Input

Yusuf Fazeri — Wed, 20 Dec 2023 02:51:06 +0000

// Example data input
    const dataInput = {
      id: '11x',
      name: 'Fruits',
      items: [
        {
          name: 'Manggo',
          types: ['busuk', 'bagus'],
          country: { name: 'nigeria' },
          weight: 0,
          others: {
            name: 'other name',
            value: 0,
          },
        },
      ],
      genus: '',
      farmers: [],
      falsyValue: '',
    };

// Expected output
{
    id: "11x",
    name: "Fruits",
    items: [
        {
            name: "Manggo",
            country: { name: "nigeria" },
            others: { name: "other name" },
            types: ["busuk", "bagus"]
        }
    ]
}

Pertama, saya akan menggunakan package flat js untuk membuat outputnya jadi seperti ini.

// example flat output
{
  id: "11x",
  name: "Fruits",
  items.0.name: "Manggo",
  items.0.types.0: "busuk",
  items.0.types.1: "bagus",
  items.0.country.name: "nigeria",
  items.0.others.name: "other name"
  // disini key-value lainnya agar tidak terlalu panjang .....
}

Pertimbangannya object tadi saya flat adalah agar tidak perlu membuat logika perulangan yang kompleks.

Untuk fungsinya nanti saya ingin menggunakannya seperti ini:

const removeOptionalFlat = removeOptionalInput(dataInput, [
      'bejo',
      'items.*.weight',
      'items.*.country',
      'genus',
      'items.*.others.value',
      'falsyValue',
      'farmers',
    ]);

Untuk fungsi removeOptionalFlat nya seperti ini:

function removeOptionalInput(dataObject, propertiesToRemove) {
  const newDataObject = { ...dataObject };

  propertiesToRemove.forEach((property) => {
    const regexPattern = new RegExp(property.replace(/\*/g, '\\d+'), 'g');
    Object.keys(newDataObject).forEach((key) => {
      if (regexPattern.test(key)) {
        if (typeof newDataObject[key] === 'object' && !Object.keys(newDataObject[key]).length) {
          delete newDataObject[key];
        }

        if (!newDataObject[key]) {
          delete newDataObject[key];
        }
      }
    });
  });

  return newDataObject;
}

Lihat kode fungsi removeOptionalInput, saya menggunakan RegEx untuk membuat asosiasi string 'items.*.country' agar menghapus 'items.0.country', 'items.1.country', dan seterusnya.

Karena ini merupakan fungsi yang saya peruntukan untuk menghapus input form data yang sifatnya "opsional" maka saya perlu menghapus key-value object dari dataInput yang nilainya masuk dalam kategori falsy seperti string kosong, number 0, object/array kosong.

Fungsi yang tadi sudah dibuat hasilnya masih flat, kita perlu unflat dengan perintah unflatten(removeOptionalFlat). Untuk kode secara keseluruhannya kurang lebih seperti ini.

import { flatten, unflatten } from 'flat';

function removeOptionalInput(dataObject, propertiesToRemove) {
  const newDataObject = flatten({ ...dataObject });

  propertiesToRemove.forEach((property) => {
    const regexPattern = new RegExp(property.replace(/\*/g, '\\d+'), 'g');
    Object.keys(newDataObject).forEach((key) => {
      if (regexPattern.test(key)) {
        if (typeof newDataObject[key] === 'object' && !Object.keys(newDataObject[key]).length) {
          delete newDataObject[key];
        }

        if (!newDataObject[key]) {
          delete newDataObject[key];
        }
      }
    });
  });

  return unflatten(newDataObject);
}

const dataInput = {
      id: '11x',
      name: 'Fruits',
      items: [
        {
          name: 'Manggo',
          types: ['busuk', 'bagus'],
          country: { name: 'nigeria' },
          weight: 0,
          others: {
            name: 'other name',
            value: 0,
          },
        },
      ],
      genus: '',
      farmers: [],
      falsyValue: '',
    };

    const removeOptionalFlat = removeOptionalInput(dataInput, [
      'bejo',
      'items.*.weight',
      'items.*.country',
      'genus',
      'items.*.others.value',
      'falsyValue',
      'farmers',
    ]);

    console.log(removeOptionalFlat, 'remove optional flat');

Pengalaman Menjalani Psikotes Sebagai Programmer

Yusuf Fazeri — Tue, 08 Aug 2023 07:52:43 +0000

Disini saya akan bercerita pengalaman saya menjalani test psikotest sebagai programmer. Kalau ada yang bertanya:

"Emang semua perusahaan ada psikotest nya? Kok saya dulu enggak ya?"

Saya akan jawab, tidak semua perusahaan menerapakan prosedur psikotest di tahapan proses rekrutmen mereka. Semua perusahaan punya kebijakannya masing-masing. Tapi jika Anda sedang mencari pekerjaan, Anda harus tau psikotest adalah salah satu bagian dari proses rekrutmen di perusahaan.

Psikotes itu apa sih?

Kalau menurut wikipedia:

"Tes psikologi atau psikotes adalah bidang yang ditandai dengan penggunaan sampel perilaku untuk menilai konstruksi psikologis, seperti fungsi kognitif dan emosional, tentang individu tertentu. Istilah teknis untuk ilmu di balik tes psikologis adalah Psikometrik. Dengan sampel perilaku, berarti pengamatan dari tugas melakukan individu yang biasanya telah ditentukan sebelumnya, yang sering berarti nilai pada ujian. Respon ini sering dikompilasi ke dalam tabel statistik yang memungkinkan evaluator untuk membandingkan perilaku individu yang diuji terhadap tanggapan kelompok norma."

Nah itu kalau penjelasan dari wikipedia. Anda bisa fokus di kata atau kalimat yang saya tebalkan. Secara gambaran besarnya, psikotes adalah kegiatan untuk menilai psikologi seseorang dengan menggunakan beberapa metode seperti ujian ata wawancara.

Pentingnya apa sih psikotes bagi perusahaan?

Ya, kalau kita cari pasangan hidup kan harus tau sifatnya, karakternya, kalau bisa tau juga kekurangannya. Biasanya kan dari perkenalan yang panjang, kita sudah bisa tau sifat aslinya. Oh, si John Doe sukanya bohong, kalau janji gak pernah ditepati, kalau pinjem barang gak pernah dibalikin dan seterusnya. Proses psikotes dengan bantuan psikolog ini membantu perusahaan dengan cepat meinilai karakteristik individu yang hendak bekerja di suatu perusahaan.

Jenis tes apa saja yang ada di Psikotes?

Ada banyak, hampir semua jenis tes di wikipedia akan kita jumpai saat mengerjakan soal psikotes:

Tes Sinonim
Tes Antonim
Tes Acak Kata
Tes Gambar Orang
Tes Gambar Pohon
Tes Wawasan Kebangsaan
Tes Kraepelin
Tes Pauli
Tes Deret Angka
Tes Deret Gambar
Tes Penalaran Gambar
Tes Kepribadian
Tes skala minat

Dan masing-masing tes punya tujuannya sendiri kenapa dibuat untuk kandidat. Selain 13 tes tadi, ada juga psikolog yang membuat sesi wawancara di akhir tes. Pertanyaannya biasanya tidak lepas dari CV yang Anda berikan kepada perusahaan, personal, atau keluarga.

Tips menghadapi psikotes

Untuk menghadapi jenis psikotes 13 tadi, Anda bisa berlatih soal-soal psikotes di Google. Kalau saya sendiri saya berlatih lewat buku yang pernah saya beli sewaktu SMK (bukunya lupa, cari aja di Gramedia banyak). Tapi kalau baru pertama kali psikotes, ada juga dari yang menyelenggarakan akan memandu terkait soal dan cara menjawabnya.

Ketika Anda menghadapi tahapan wawancara di sesi psikotes, jawablah dengan sejujur-jujurnya semua pertanyaan-pertanyaan dari psikolog. Mereka ingin jawaban yang benar itu dari Anda. Jika tidak jujur, mereka akan terus memojokkan Anda (karena sebenarnya mereka sudah tau Anda dari hasil tes yang sudah Anda kerjakan sebelumnya).

Contoh:

"Kenapa Anda memberi penawaran gaji di bawah gaji Anda di perusahaan sebelumnya?"

Anda bisa jawab sejujur-jujurnya. Apa karena Anda memang butuh pekerjaan juga secepatnya? atau karena Anda yakin akan ada apresiasi lebih jika Anda melakukan pekerjaan dengan baik di perusahaan?. Jawab saja apa adanya. Dan jangan jadi orang yang menutup-nutupi.

Penutup

Itu tadi pengalaman saya dalam menjalani proses psikotes. Anda bisa mempersiapkannya dengan soal-soal yang ada di Internet atau buku. Jika Anda gagal dalam suatu proses rekrutmen atau di psikotes ini, jangan bersedih, tetap lah semangat. Anggaplah keberhasilan/kegagalan yang Anda lalui sebagai pengalaman yang dapat mengasah kepribadian dan kesiapan Anda. Dan tetaplah bersyukur untuk semua yang Anda lalui dan jalani saat ini.

Sukses selalu!

Referensi:
https://id.wikipedia.org/wiki/Tes_psikologi

The power of powertoys

Yusuf Fazeri — Tue, 13 Sep 2022 12:38:29 +0000

Ketika melihat beberapa orang menggunakan Macbook nya. Saya sangat iri dengan produktivitas yang dapat dilakukan dengan komputer itu. Hal yang membuat saya iri salah satunya adalah fitur "Spotlight" nya.

Fitur ini adalah bawaan dari Mac OS untuk penggunanya yang dapat mempermudah pencarian sesuatu seperti program, file, web dll. Namun bagaimana dengan pengguna Windows seperti saya? Tentunya Microsoft sudah menyediakan fitur pencarian bawaannya, tapi itu bukan fitur yang bisa di banggakan LOL :-)

Bagi Anda pengguna Windows saya pikir bisa menggunakan Powertoys. Anda dapat menginstallnya melalui beberapa cara, seperti:

Melalui Github
Melalui Microsoft Store (Rekomendasi)
Melalui Winget

Setelah melakukan penginstalan, Anda akan mendapatkan tampilan seperti ini.

Note: Pastikan pengaturan berjalan saat startup diaktifkan.

Fitur-fitur

Inilah beberapa fitur-fitur yang saya sangat suka di Powertoys. Adapun fitur-fitur pada versi v0.62.0 yang saat ini saya sering pakai adalah:

Powertoys Run

Memberikan pengalaman penggunaan "SpotLight" di komputer Windows Anda. Dapat melakukan pencarian file, folder, program, web, menjalankan shell dan masih banyak lagi. Anda dapat melihat lebih banyak lagi di sini https://docs.microsoft.com/en-us/windows/powertoys/run.

Mouse Utilities

Dengan menggerakkan berulang mouse Anda, Anda dapat melihat dimana posisi mouse Anda berada dengan cepat.

Fancy Zone

Dengan fitur ini mengatur layout di windows menjadi lebih mudah. Anda dapat mengatur layout secara custom dengan fitur layout editor.

Text Extractor

Ucapkan selamat tinggal pada plugin Copyfish karena di Powertoys telah memiliki fitur yang serupa dan berjalan native di windows.

Mengenal Istilah Concurrent & Parallel

Yusuf Fazeri — Sun, 11 Sep 2022 13:55:42 +0000

Di artikel ini saya akan membahas pembahasan yang menarik tentang apa itu istilah concurrent & parallel. Yang mungkin dari kawan-kawan sering mendengarnya atau membacanya.

Kedua istilah ini juga sering rancu pengartiannya satu sama lain. Sehingga saya harapkan saya dan juga kawan-kawan setelah membaca artikel ini menjadi makin paham.

Oh ya, saya juga menyertakan beberapa referensi yang saya gunakan ketika menulis ini. Jadi kawan-kawan bisa membacanya juga atau bahkan mengoreksi tulisan ini jika ada yang kurang.

Concurrent

Agar mudah dalam memahaminya, mari kita analogikan kedalam skenario sederhana. Katakanlah Anda diberikan waktu hanya 5 menit untuk melakukan 2 tugas. Tugas Ke-1, Anda harus menyelesaikan soal matematika. Tugas Ke-2, Anda harus berbalas chat dengan Ibu Anda.

Di konsep Concurrent, Anda tidak bisa melakukan kedua tugas itu dalam bersamaan atau serentak atau simultan. Anda dapat mengerjakan soal matematika dan ketika ada chat masuk, Anda baru membalasnya.

Anggaplah selama 5 menit tadi Anda sudah menyelesaikan 2 tugas. Namun karena keterbatasan kemampuan, proses yang dilakukan tidak satu per satu (sampai tugas ke-1 selesai dilanjutkan tugas ke-2 selesai). Namun secara bergantian (tidak lengkap selesai). Jadi ada selang waktu tertentu Anda harus beralih untuk berbalas chat.

Lalu apa yang bisa kita dapat dari skenario tadi?

Sebelumnya Anda perlu tahu pengertiannya dari beberapa sumber berikut.

Menurut Encyclopedia Britannica,

"Concurrent programming, computer programming in which, during a period of time, multiple processes are being executed. For example, two processes can be interleaved so that they are executed in turns" [1]

Menurut Madhavan,

"Concurrency means that an application is making progress on more than one task at the same time (concurrently). Well, if the computer only has one CPU the application may not make progress on more than one task at exactly the same time, but more than one task is being processed at a time inside the application. It does not completely finish one task before it begins the next."[2]

Dari beberapa literatur dan skenario tadi, menurut saya concurrent adalah suatu teknik mengerjakan 2 atau lebih tugas secara bersamaan (tidak serentak) dalam suatu periode waktu tertentu yang dikerjakan oleh pemroses. Pemroses disini bisa berarti core processor atau orang jika konteksnya manusia.

Parallel

Saya akan memberikan skenario tugas yang sama dari skenario sebelumnya. Namun, pada kasus ini sepertinya Anda sedang beruntung dibantu oleh kawan Anda dalam mengerjakan soal matematika. Sehingga Anda bisa memiliki fokus untuk tugas ke-2 Anda yaitu berbalas chat. Sehinga kedua tugas tadi dapat diproses secara serentak atau simultan.

Menurut Madhavan,

"Parallelism means that an application splits its tasks up into smaller subtasks which can be processed in parallel, for instance on multiple CPUs at the exact same time.
Parallelism does not require two tasks to exist. It literally physically run parts of tasks OR multiple tasks, at the same time using the multi-core infrastructure of CPU, by assigning one core to each task or sub-task."[2]

Menurut Educative.io,

"In parallel programming, parallel processing is achieved through hardware parallelism e.g. executing two processes on two separate CPU cores simultaneously."[3]

Dari beberapa literatur dan skenario tadi, menurut saya parallel adalah teknik mengerjakan 2 atau lebih tugas secara bersamaan (serentak) dalam suatu periode waktu tertentu yang dikerjakan oleh banyak pemroses (tiap pemroses menangani satu tugas). Pemroses disini bisa berarti core processor atau orang jika konteksnya manusia.

References:
[1] History, The. "Concurrent Programming | Definition & Facts." Encyclopedia Britannica, https://www.britannica.com/technology/concurrent-programming. Accessed 9 Aug. 2022.

[2] Nagarajan, Madhavan. "Concurrency vs. Parallelism: A Brief View." Medium, 16 Jan. 2020, https://medium.com/@itIsMadhavan/concurrency-vs-parallelism-a-brief-review-b337c8dac350.

[3] "What Is Concurrent Programming?" Educative, https://www.educative.io/answers/what-is-concurrent-programming. Accessed 9 Aug. 2022.