5 Non-Engineering Things to be Prepared in New Working Journey

5 Hal Non-Teknis yang Bisa Dipersiapkan dalam Perkerjaan Baru

Building a Home Media Server with Docker and Samba

Membangun Server Media Rumah dengan Docker dan Samba

Expanding Horizons: Learning and Growing Beyond The Comfort Zone

Memperluas Cakrawala: Belajar dan Berkembang di Luar Zona Nyaman

Unemployed day X

Pengangguran hari ke X

I Resigned from Flip.id

Saya mengundurkan diri dari Flip.id

Setup a private NPM package in Gitlab

Membuat Package NPM Pribadi di GitLab

Web accessibility 101

Aksesibilitas web 101

Create a simple blog with Next.Js and Sanity.io

Membuat blog sederhana dengan Next.Js dan Sanity.io

The importance of programming language learning path

Pentingnya path dalam belajar bahasa pemrograman

Create a Sign in process with React and the State Machine

Membuat proses Sign in dengan React dan State Machine

Use React.memo to optimize re-rendering

Menggunakan React.memo untuk mengoptimalkan re-render

Understanding render process in React

Memahami proses render pada React

Hello, it's almost a week of shiny day, or at least the rainfall not too much. Because the sun shine well, our must be blooming with joy and gratitude. If there is any problem in front of you, don't forget to take a break, get a me time or just hang out with friends. Finally, lets begin journal number 18!

## This week's web link:

[When to use useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)

[Swiper for every framework](https://swiperjs.com/demos)

[Library for application tour](https://shepherdjs.dev/)

[Tao of React](https://alexkondov.com/tao-of-react/)

## The thing that got me interested this week:


<img src="https://emot-s3.vercel.app/image/journal/18/mousepad.jpeg" alt="mousepad" width="600px">


My huge mouse pad is coming home. Im so excited of its color and softness. You can get onefollowing this [link](https://www.tokopedia.com/pressplay/retrograde-gaming-mousepad-xl-30x80cm-by-press-play-mouse-pad-seafoam?whid=0).

My kid's age is now more than a month. He grow so fast, at birth day he only 3.8 kilos, and now more than 4.5 kilos. His sleep behavior vary everyday. Sometimes he sleep early, then late, then in the middle of both. My kid is a new mistery for me and my wife, very exciting and train our patience hehe.

## This week I learned:

- Prime number is a number that divisible by exactly 2 natural number. 1 and itself. So, 1 is not a prime number since it only divisible by 1 number.
- It will improve tidiness of code by just import 3rd party module or components first in a place, and then export it again, so all components that need the module can just import it from one source.

## Some of the coolest things on the internet:

[Be grateful of your job](https://www.quora.com/What-are-were-the-worst-jobs-in-history)

[How trillion frame per seconds look likes](https://www.ted.com/talks/ramesh_raskar_imaging_at_a_trillion_frames_per_second?referrer=playlist-tech_breakthrough#t-138252)

## Challenge:

I was failed for the last challenge to solve 10 Leetcode problems in a week, or almost a month actually, because of this and that.

Thats all for this journal, hope you can find a gem inside, c ya!

Halo, sudah hampir seminggu ini matahari bersinar cerah, atau paling tidak curah hujan tidak terlalu tinggi. Karena banyak sinar matahari, hati kita seharusnya juga ikut mekar. Jika ada masalah didepanmu, jangan lupa untuk beristirahat, ambil waktu untuk diri sendiri atau berjalan-jalan dengan teman. Baik, ayo mulai jurnal nomor 18!

## Link web minggu ini:

[Kapan memakai useMemo dan useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)

[Swiper untuk berbagai framework](https://swiperjs.com/demos)

[Library untuk application tour](https://shepherdjs.dev/)

[Tao of React](https://alexkondov.com/tao-of-react/)

## Hal yang membuatku tertarik minggu ini:


<img src="https://emot-s3.vercel.app/image/journal/18/mousepad.jpeg" alt="mousepad" width="600px">


Mousepad super besar ku sudah datang. Aku sangat tertarik karena warna dan kelembutanya. Kamu juga bisa mendapatkan satu di [sini](https://www.tokopedia.com/pressplay/retrograde-gaming-mousepad-xl-30x80cm-by-press-play-mouse-pad-seafoam?whid=0).

Anakku sudah berumur lebih dari sebulan. Dia tumbuh dengan cepat, saat hari lahir, beratnya 3.8 kilogram, dan sekarang sudah lebih dari 4.5 kilogram. Kebiasaan tidurnya berbeda-beda tiap hari. Kadang tidur awal, malam, kadang juga nggak malam atau awal banget. Anakku menjadi misteri baru bagiku dan istriku, sangat menarik dan melatih kesabaran kami, hehe.

## Yang kupelajari minggu ini:

- Bilangan prima adalah bilangan yang dapat dibagi oleh 2 bilangan asli, 1 dan dirinya sendiri. Jadi, 1 bukan bilangan prima, karena ia hanya bisa dibagi dengan 1 angka.
- Dengan mengimport dahulu 3rd party module pada suatu directory tertentu, lalu mengeksportnya lagi, dan mengimport dari satu tempat untuk semua modul, akan menambah kerapihan kode.

## Beberapa hal keren di internet:

[Bersyukurlah dengan pekerjaanmu](https://www.quora.com/What-are-were-the-worst-jobs-in-history)

[Bagaimana triliunan frame per detik terlihat](https://www.ted.com/talks/ramesh_raskar_imaging_at_a_trillion_frames_per_second?referrer=playlist-tech_breakthrough#t-138252)

## Challenge:

Aku belum berhasil untuk menyelesaikan challenge sebelumnya untuk menyelesaikan 10 masalah di Leetcode dalam seminggu, sebulan sebetulnya, karena ini dan itu. 

Itu dia untuk jurnal kali ini, semoga kamu bisa menemukan sesuatu didalamnya, sampa jumpa!

👾 "It has become appallingly obvious that our technology has exceeded our humanity." - Albert Einstein

Hello, how are you? Hopefully all is well and happy. A few weeks ago I haven't had the chance to write anything, prepare for the birth and after the birth of my first child.

There are many new things that I have to adjust to my daily routine after my first child was born. Stealing time to read new things in between work that has accumulated as a result of being left on maternity leave, plus having to do a few more things because my wife has just been hit by Covid. But better late than nothing, here comes journal number 17!

## This week's web link:

[React query](https://react-query.tanstack.com/)

[Make database faster](https://floqast.com/engineering-blog/post/mongodb-performance-fundamentals-indexing-indexes/)

[Mapbox alternatives map](https://www.mapbox.com/)

[Circular reference in Javascript](https://www.akinjide.me/2018/circular-reference-in-javascript/)

[Sparse and Dense array](https://javascript.plainenglish.io/sparse-and-dense-arrays-in-javascript-4ba874fc243c)

[React Error Boundary](https://www.npmjs.com/package/react-error-boundary)

## The thing that got me interested this week:

My first child has been born, his name is Muhammad Musa Amiruddin. In the future, hopefully he can make the prophet Muhammad SAW as his role model, memorize the Koran and make it his guide, and become an Imam, a prayerful emir for Muslims, Aamiin. And hopefully his parents can also educate him well, Aamiin.

Once I get used to the new conditions, and can manage my time again, I will start regularly writing this journal once a week.

## This weeks I learned:

- I found another treasure. Okay, actually I've heard of it before, it's just that at that time I wasn't interested in learning it. React-Query, a library that helps with fetching, caching, invalidating, and many other things that make accessing your API easier, more efficient, and tidy.
- Recently I was developing a side project, which requires the feature of selecting a point in the map. At first, I tried to use google maps API, the installation is easy, but in order to use it we have to register our credit card first. Since I don't have a credit card, I finally looked for another alternative, namely [Mapbox](https://www.mapbox.com/). Maps from Mapbox are quite challenging to install in React, the bundle size is bigger (which forces me to learn code-splitting later), but I don't need a credit card and more free tier than Goole.
- I found new terms in the Javascript array, namely **Sparse** and **Dense** Array. Sparse arrays are simply incomplete arrays, for example `[1,2 ,,,, 4]` , this is a valid array, it has `length: 6` but the index 2,3,4 doesn't exist, try logging the array on the console. While dense arrays are common arrays, which are dense, which are not **elided**.

## Some of the coolest things on the internet:

[8D sound, using stereo headset](https://www.youtube.com/watch?v=CepeycyGhwE&ab_channel=8DTUNES)

[Same energy](https://same.energy/)

## Challenge:

I'm not progressing too much with the previous challenge of solving code problems in leetcode. Here is my [gist](https://gist.github.com/muhsalaa/5344270af4671118426259794082bf6d) of answer, and I officially resign from this challenge. The next challenge I will think about the model first, considering my new busyness now.

That's all for journals that appear after a long sinking hehe. I hope next week I can write again. Bye ~


Halo, apa kabar? Semoga semua baik-baik saja dan berbahagia. Beberapa minggu kemarin aku belum sempat menulis apa-apa, mempersiapkan kelahiran dan setelah kelahiran anakku yang pertama.

Banyak hal baru yang harus kusesuaikan dengan rutinitas keseharian setelah anak pertamaku lahir. Mencuri-curi waktu untuk membaca hal baru di sela kerja yang menumpuk akibat ditinggal cuti melahirkan, plus harus melakukan beberapa hal lebih karena istriku baru saja terkena covid. But better late than nothing, ini dia jurnal nomor 17!

## Link web minggu ini

[React query](https://react-query.tanstack.com/)

[Mempercepat database](https://floqast.com/engineering-blog/post/mongodb-performance-fundamentals-indexing-indexes/)

[Mapbox alternatives map](https://www.mapbox.com/)

[Circular reference pada Javascript](https://www.akinjide.me/2018/circular-reference-in-javascript/)

[Sparse dan Dense array](https://javascript.plainenglish.io/sparse-and-dense-arrays-in-javascript-4ba874fc243c)

[React Error Boundary](https://www.npmjs.com/package/react-error-boundary)

## Hal yang membuatku tertarik minggu ini

Anak pertamaku telah lahir, namanya Muhammad Musa Amiruddin. Kelak semoga dia bisa menjadikan nabi Muhammad SAW sebagai teladanya, menghafalkan Al-Qur'an dan menjadikanya sebagai tuntunanya, dan menjadi seorang, imam, amir yang sholih bagi umat islam, Aamiin. Dan semoga orang tuanya juga dapat mendidiknya dengan baik, Aamiin.

Setelah terbiasa dengan kondisi yang baru, dan dapat mengatur waktuku kembali, aku akan mulai rutin menulis jurnal ini seminggu sekali.

## Yang kupelajari minggu ini

- Aku menemukan harta karun lagi. Oke, sebenarnya dulu aku pernah mendengarnya, hanya saja waktu itu belum tertarik untuk mempelajari. React-Query, sebuah library yang membantu melakukan fetching, caching, invalidating, dan banyak hal lain yang membuat akses ke API mu lebih mudah, efisien dan rapih.
- Belakangan aku sedang mengembangkan sebuah side project, yang membutuhkan fitur pemilihan suatu titik dalam peta. Awalnya aku mencoba menggunakan Google maps api, memang instalasinya mudah, namun agar bisa digunakan kita harus mendaftarkan kartu kredit kita dulu. Karena nggak punya kartu kredit, akhirnya aku cari alternatif lain yaitu [Mapbox](https://www.mapbox.com/). Map dari mapbox cukup lebih menantang untuk diinstalasi di React, bundle size nya pun lebih besar (yang memaksa aku harus belajar code splitting nantinya), tapi nggak perlu kartu kredit dan free tier nya lebih banyak dari Goole.
- Aku menemukan istilah baru dalam per-array-an Javascript, yaitu **Sparse** dan **Dense Array.** Sparse array gampangnya adalah array yang bolong-bolong, misal `[1,2,,,,4]`, ini adalah array yang valid, dia memiliki `length: 6` tapi index 2,3,4 tidak ada, coba log array tersebut di console. Sedang dense array adalah array yang utuh, yang padat, yang tidak **\*elided**.\*

## Beberapa hal keren di internet

[Suara 8D, pakai headset stereo](https://www.youtube.com/watch?v=CepeycyGhwE&ab_channel=8DTUNES)

[Same energy](https://same.energy/)

## Challenge:

Aku nggak terlalu banyak progress dengan tantangan sebelumnya tentang menyelesaikan code problem di leetcode. Ini [gist](https://gist.github.com/muhsalaa/5344270af4671118426259794082bf6d) jawaban ku, dan secara resmi undur diri dari tantangan ini. Tantangan selanjutnya akan kupikirkan dulu bentuknya, mempertimbangkan juga kesibukan baruku sekarang.

Itu saja untuk jurnal yang muncul setelah sekian lama tenggelam hehe. Kuharap minggu depan aku bisa menulis lagi. Bye~


👆 "The greatest glory in living lives not in never falling, but in rising every time we fall." - Nelson Mandela

Hello, see you again in this weekly journal. It doesn't feel like January is almost over, I hope February will be a good month for all. Welcome to journal number 16!

## This week's web link:

[React portal](https://blog.bitsrc.io/understanding-react-portals-ab79827732c7)

[Component structure alternative, compound component](https://epicreact.dev/soul-crushing-components/)

[Attribute type=module on script tag](https://usefulangle.com/post/252/script-type-module)

[Event delegation](https://dmitripavlutin.com/javascript-event-delegation/)

## The thing that got me interested this week:

I got these badges from code academy, finishing [module](https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/introduction-to-semantic-html) about semantic HTML :D


<img src="https://emot-s3.vercel.app/image/journal/16/badges.png" alt="badges" width="600px">


This week I'm also taking the [epicreactdev](https://epicreact.dev) course for the React application testing section using the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) (RTL). Previously, to do unit tests, I still used [Enzyme](https://enzymejs.github.io/enzyme/), which although quite easy to use, I had some difficulties when dealing with testing hooks, native user input, and so on. RTL answers this problem with an easier API, better support for hooks, and many RTL-compatible support libraries that make testing easier.

## This week I learned:

- I found a treasure, `ReactDom.createPortal`. Previously I had a problem creating a fixed element that had fixed children too. When this happens, the child element will make its parent the viewport reference. So if the parent has the style `width: 300px` then the child will have a full width of 300 pixels too. To avoid this, and to have the child element follow the normal viewport screen, use `ReactDom.createPortal`, which will "teleport" the fixed element to the higher DOM position. Read the article on this week's web link for more details.
- A `script` tag that has a `type=module` attribute will be considered a Javascript module and will allow it to import other Javascript modules within it.
- [Event Delegation](https://dmitripavlutin.com/javascript-event-delegation/) is a technique where we use a parent element to get the event that happens on the child. Suppose we have a container element that contains 1000 buttons. Rather than assigning an event handler to each button, it's easier to assign one event handler in the container. This can happen because when an event is running, an Event Propagation occurs, from the top element to the element where the event occurs, then bubbling up again where the event can be processed.

## Some of the coolest things on the internet:

[Power of blend mode CSS](https://bennettfeely.com/gradients/)

[New LetsEncrypt server specification](https://letsencrypt.org/2021/01/21/next-gen-database-servers.html)

## Challenge:

Last week was quite busy, I haven't managed to complete the weekly challenge to work on 10 problems in leetcode, only 2 that I managed to solve. It's been a long time since I dealt with logic challenge code problems, I need to sharpen my brain more. This week I will try to complete the remaining 8. This is [gist](https://gist.github.com/muhsalaa/5344270af4671118426259794082bf6d) the challenge code that I solved.

That's all for this journal, stay healthy and follow health protocols if you leave the house.

Halo, jumpa lagi di jurnal mingguan ini. Tak terasa Januari sudah hampir berakhir, semoga Februari menjadi bulan yang baik bagi semua. Welcome to jurnal nomor 16!

## Link web minggu ini

[React portal](https://blog.bitsrc.io/understanding-react-portals-ab79827732c7)

[Alternatif struktur komponen, compound component](https://epicreact.dev/soul-crushing-components/)

[Atribut type=module pada tag script](https://usefulangle.com/post/252/script-type-module)

[Event delegation](https://dmitripavlutin.com/javascript-event-delegation/)

## Hal yang membuatku tertarik minggu ini

I got these badges from code academy, finishing [module](https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/introduction-to-semantic-html) about semantic HTML :D


<img src="https://emot-s3.vercel.app/image/journal/16/badges.png" alt="badges" width="600px">


Minggu ini aku juga mengikuti course [epicreactdev](https://epicreact.dev) untuk bagian testing aplikasi React menggunakan [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) (RTL). Sebelumnya, untuk melakukan unit test, aku masih menggunakan [Enzyme](https://enzymejs.github.io/enzyme/), yang walaupun cukup mudah digunakan, aku mengalami beberapa kesulitan ketika berhadapan dengan testing hooks, native user input, dan lainya. RTL menjawab masalah tersebut dengan API yang lebih mudah digunakan, support yang lebih baik untuk hooks, serta banyak library penunjang yang kompatibel dengan RTL yang dapat lebih mempermudah testing.

## Yang kupelajari minggu ini

- Aku menemukan sebuah harta karun, `ReactDom.createPortal`. Sebelumnya aku mendapat masalah ketika membuat elemen _fixed_ yang memiliki child _fixed_ juga. Ketika hal ini terjadi, elemen _child_ akan menjadikan parent-nya acuan viewport. Jadi kalau parent-nya memiliki style `width: 300px` maka si child akan memiliki lebar penuh 300 pixel juga. Untuk menghindari hal ini, dan membuat _child element_ mengikuti viewport screen seperti biasanya, bisa menggunakan `ReactDom.createPortal`, yang akan men-"teleportasi" elemen _fixed_ tersebut ke "posisi DOM yang lebih tinggi". Baca artikel di link web minggu ini untuk lebih jelas.
- Tag `script` yang memiliki atribut `type=module` akan dianggap sebagai modul Javascript, dan memungkinkanya untuk meng-_import_ modul Javascript lainya didalamnya.
- [Event Delegation](https://dmitripavlutin.com/javascript-event-delegation/) adalah teknik dimana kita menggunakan suatu _parent element_ untuk mendapatkan _event_ yang terjadi pada *child-*nya. Misalkan kita memiliki sebuah elemen kontainer yang berisi 1000 tombol. Daripada memberi _event handler_ untuk tiap tombol, lebih mudah memberi satu _event handler_ di kontainernya. Hal ini dapat terjadi karena pada saat suatu _event_ berjalan terjadi _Event_ _Propagation_, yaitu merambatnya _event_ dari elemen teratas, menuju ke elemen tempat _event_ terjadi, lalu kembali keatas lagi dimana _event_ bisa diolah.

## Beberapa hal keren di internet

[Power of blend mode CSS](https://bennettfeely.com/gradients/)

[Spesifikasi server LetsEncrypt](https://letsencrypt.org/2021/01/21/next-gen-database-servers.html)

## Challenge:

Minggu kemarin cukup padat, aku belum berhasil menyelesaikan tantangan mingguan untuk mengerjakan 10 masalah di leetcode, hanya 2 yang berhasil kuselesaikan. Lama tidak bersinggungan dengan masalah kode penuh logika, aku perlu mengasah otakku lagi. Minggu ini aku akan coba merampungkan 8 sisanya. Ini [gist](https://gist.github.com/muhsalaa/5344270af4671118426259794082bf6d) kode tantangan yang sudah kuselesaikan.

Itu saja untuk jurnal kali ini, tetap jaga kesehatan dan lakukan protokol kesehatan jika keluar rumah.

🌞 "If you’re brave enough to say goodbye, life will reward you with a new hello." - Paulo Coelho

Hello, see you again in journal number 15, the 3rd journal this year. Alhamdulillah, until now I still routinely write a journal once a week. Good start, hopefully, it can continue like this until the end of the year, hehe. This is it!

## This week's web link

[Color in web](https://css-tricks.com/nerds-guide-color-web/)

[HTML tag reference](https://htmlreference.io/)

[Color wheel](https://hihayk.github.io/wheel/)

[Advanced CSS effect](https://blog.logrocket.com/advanced-effects-with-css-background-blend-modes-4b750198522a/)

## The thing that got me interested this week

Lately, I have been enjoying playing chess, Online, at [Chess.com](https://chess.com). I also started to learn about chess theory, which turned out to be more than just playing. There are opening, middle game, and end game sections. For each part, there is a separate theory for getting an advantageous pawn position in the game. If interested, invite me to play, my username is' mikhaiktal`, inspired by Mikhail Tal, I'm just a typo, haha.

In about two weeks or less, my child will be born. Nervousness, anxiety, joy, all feelings together. Wish all of us the best 🙂

## Some of the coolest things on the internet

[50 life lesson](https://medium.com/darius-foroux/got-5-minutes-i-want-to-share-50-life-changing-lessons-with-you-dec4f903a639)

[Assemble 8 million Gaming PC](https://www.youtube.com/watch?v=F0gWG9Qcz20&ab_channel=JagatReview)

## Challenge:

Below are three codepen links for the previous week's challenge, creating animations with CSS. This week the challenge is to solve 10 code problems on the site [leetcode](https://leetcode.com/).

[Pepsi hover](https://codepen.io/muhsalaa/pen/vYXbgqy)

[Simple infinite loading](https://codepen.io/muhsalaa/pen/MWjLRgz)

[Drag and Drops](https://codepen.io/muhsalaa/pen/JjRVRbg)

## Tips or Tricks:

Every article I write on this blog is made in markdown format, not rich text. So, to put an image, I need the image link put in the `<img>` tag. That's why I need image hosting.

Previously, I put my pictures on [imgbb](https://imgbb.com/). The reason is that it is easy to use, free and unlimited. But, I think I'm a little worried, whether the pictures will continue to last there. There was also a time when the imgbb server went down, so all the images on my blog were lost.

Finally, I decided to make my own image hosting, which of course is also free and easy to use. I made it using Nextjs and Vercel to do it.

First create a Nextjs project in your computer

```bash
npx create-next-app my-app

# or

yarn create next-app my-app
```

Once done, you will have a Nextjs project with a structure like this


<img src="https://emot-s3.vercel.app/image/journal/15/dir-structure.png" alt="directory-structure" width="400px">


Then, all you have to do is enter all the assets you want to keep in the public folder. You can save not only images, but also videos, pdf or other files.


<img src="https://emot-s3.vercel.app/image/journal/15/public-content.png" alt="public-content" width="400px">


Next, you just have to deploy the project to Vercel, and you can access the images or other assets that you stored there with the URL, for example, `https://an-s3.vercel.app/image/codepen/pepsican.png`. So, hopefully, this is useful 🙂

Okay, that's enough for this journal, always keep your health, the pandemic is getting worse. See you next week!

Halo, bertemu lagi di jurnal nomor 15, jurnal ke 3 tahun ini. Alhamdulillah Sampai sekarang aku masih rutin menulis jurnal seminggu sekali. Awal yang baik, semoga bisa terus seperti ini sampai akhir tahun, hehe. This is it!

## Link web minggu ini

[Warna pada web](https://css-tricks.com/nerds-guide-color-web/)

[Refrensi tag HTML](https://htmlreference.io/)

[Roda warna](https://hihayk.github.io/wheel/)

[Efek CSS lanjut](https://blog.logrocket.com/advanced-effects-with-css-background-blend-modes-4b750198522a/)

## Hal yang membuatku tertarik minggu ini

Belakangan aku sedang senang bermain catur, Online, di [Chess.com](https://chess.com). Aku juga mulai mempelajari tentang teori catur, yang ternyata tidak hanya asal main. Ada bagian pembukaan, tengah permainan, dan akhir permainan. Untuk setiap bagianya ada teori tersendiri untuk mendapatkan posisi bidak yang menguntungkan dalam permainan. Kalau tertarik, ajak aku bermain, username ku `mikhaiktal`, terinspirasi dari Mikhail Tal, cuman gue typo, haha.

Sekitar dua minggu lagi, atau kurang, anakku akan dilahirkan. Gugup, cemas, senang, semua perasaan jadi satu. Doakan semoga kami semua mendapatkan yang terbaik 🙂

## Beberapa hal keren di internet

[50 pelajaran hidup sederhana](https://medium.com/darius-foroux/got-5-minutes-i-want-to-share-50-life-changing-lessons-with-you-dec4f903a639)

[Rakit PC Gaming 8 jutaan](https://www.youtube.com/watch?v=F0gWG9Qcz20&ab_channel=JagatReview)

## Challenge:

Dibawah adalah tiga link codepen untuk tantangan minggu sebelumnya, membuat animasi dengan CSS. Minggu ini tantanganya adalah menyelesaikan 10 masalah kode di situs [leetcode](https://leetcode.com/).

[Pepsi hover](https://codepen.io/muhsalaa/pen/vYXbgqy)

[Infinite loading sederhana](https://codepen.io/muhsalaa/pen/MWjLRgz)

[Drag and Drops](https://codepen.io/muhsalaa/pen/JjRVRbg)

## Tips or Tricks:

Setiap artikel yang kutulis di blog ini dibuat dengan format markdown, bukan rich text. Jadi, untuk menaruh gambar, aku membutuhkan link gambar tersebut ditaruh dalam tag `<img>`. Karena itu aku membutuhkan image hosting.

Sebelumnya, aku menaruh gambar-gambarku di [imgbb](https://imgbb.com/). Alasanya karena mudah penggunaanya, gratis dan unlimited. Tapi, rasanya aku sedikit khawatir, apakah gambar-gambarnya akan terus awet disana. Pernah juga suatu waktu server imgbb mati, jadi semua gambar di blog ku hilang.

Akhirnya aku memutuskan membuat image hosting sendiri, yang tentunya juga gratis dan mudah digunakan. Aku membuatnya dengan memanfaatkan Nextjs dan Vercel untuk melakukanya.

Pertama buat sebuah projek Nextjs di komputermu

```bash
npx create-next-app my-app

# or

yarn create next-app my-app
```

Setelah selesai, kamu akan mendapatkan projek Nextjs dengan struktur seperti ini


<img src="https://emot-s3.vercel.app/image/journal/15/dir-structure.png" alt="directory-structure" width="400px">


Lalu, kamu tinggal memasukkan semua aset yang kamu ingin simpan di folder public. Kamu tidak hanya bisa menyimpan gambar, tapi juga video, pdf atau file lainya.


<img src="https://emot-s3.vercel.app/image/journal/15/public-content.png" alt="public-content" width="400px">


Selanjutnya, kamu tinggal deploy projek tersebut ke vercel, dan kamu sudah bisa mengakses gambar atau aset lain yang kamu simpan disitu dengan url, misal, `https://sebuah-s3.vercel.app/image/codepen/pepsican.png`. Sekian, semoga bermanfaat 🙂

Baik, cukup untuk jurnal kali ini, jaga kesehatan selalu, pandemi semakin parah. Sampai jumpa minggu depan!

🐳 "The primary cause of unhappiness is never the situation but your thoughts about it." - Eckhart Tole

In the first two weeks of 2021, God has given many tests to the Indonesian people. Disasters, the chaotic condition of the country implies that people should step aside, visit silence, reflect on past practices.

Step aside does not mean running, but replenishes the energy to fight back. Seek wisdom and spread awareness. This is the second journal of the year, number 14.

## This week's web link

[AnimeXYZ](https://animxyz.com/docs/)

[Create environment friendly website](https://www.wholegraindigital.com/blog/website-energy-efficiency/)

[Create CLI application with typescript](https://dev.to/raphaelmansuy/boost-your-productivity-by-creating-your-own-cli-command-with-typescript-part-1-5g37)

[Epicreactdev](https://epicreact.dev/)

[Esbuild](https://github.com/evanw/esbuild)

## The thing that got me interested this week

Finally, the application that I worked on for 5 months was released, please visit [https://skuuy.id](https://skuuy.id). Skuuy is an application to make various kinds of online invitations, such as marriage invitations, aqiqah, events, and so on, which God willing, will continue to be developed along with the public interest. If you are interested in making an invitation, use the `PUAS` voucher code to get a 20% discount.

This photo of 3 supernovas make a funny face LOL


<img src="https://emot-s3.vercel.app/image/journal/14/supernova.png" alt="bonus-meme" width="600px">


## This week I learned

- Typescript is a superset of Javascript that provides the ability to give type to values. Typescript works similarly to babel, it's a compiler. Later, the code that we write with Typescript will be converted into regular Javascript.
- It turns out that we can create CLI commands with Typescript/Javascript. You do this by making it executable (given `!#` to determine the executor, and changing its access permissions to be executable. I think I will try to write an article about this) then put our code in the `bin` folder so that it can be executed globally.

## Some of the coolest things on the internet

[Interactive gravity](https://codepen.io/akm2/full/rHIsa)

[Astonishing underwater life](https://www.ted.com/talks/david_gallo_underwater_astonishments?referrer=playlist-the_most_jaw_dropping_ted_talk)

## Challenge:

Last week's challenge was to learn a programming language and create a program with it. I learned Typescript, although not holistic, I've managed to create a personal assistant with it. My assistant named Eira, she can only do two things now, telling me the daily Covid-19 development figures and trending topics on Twitter. I will continue to develop it, adding features that help with daily activities.


<img src="https://emot-s3.vercel.app/image/journal/14/eira-covid.png" alt="bonus-meme" width="600px">



<img src="https://emot-s3.vercel.app/image/journal/14/eira-trending.png" alt="bonus-meme" width="600px">


I don't have any ideas yet for this week's challenge, so I'll make it the same as the end of last year challenge, creating 3 codepen containing CSS animation 🙂

This is the 13th edition of the Journal, I hope the next journal will appear in a week, hehe.

Dua minggu pertama tahun 2021 ini banyak sekali ujian yang diberikan oleh Tuhan kepada rakyat Indonesia. Kejadian demi kejadian, kondisi negeri yang gaduh, menyiratkan agar manusia menepi, menziarahi keheningan, merenungi laku yang telah lalu.

Menepi tak berarti lari, tapi mengisi energi untuk berjuang kembali. Mencari hikmah dan menebar kesadaran. Inilah jurnal kedua tahun ini, nomor 14.

## Link web minggu ini

[AnimeXYZ](https://animxyz.com/docs/)

[Buat website yang ramah lingkungan](https://www.wholegraindigital.com/blog/website-energy-efficiency/)

[Membuat aplikasi CLI dengan typescript](https://dev.to/raphaelmansuy/boost-your-productivity-by-creating-your-own-cli-command-with-typescript-part-1-5g37)

[Epicreactdev](https://epicreact.dev/)

[Esbuild](https://github.com/evanw/esbuild)

## Hal yang membuatku tertarik minggu ini

Akhirnya aplikasi yang kukerjakan selama 5 bulan rilis juga, silahkan kunjungi [https://skuuy.id](https://skuuy.id). Skuuy adalah aplikasi untuk membuat berbagai macam undangan online, seperti undangan menikah, aqiqah, event, dan sebagainya yang insyaAllah terus dikembangkan seiring dengan animo masyarakat. Kalau kamu tertarik untuk membuat undangan, gunakan kode voucher `PUAS` untuk mendapatkan diskon 20%.

This photo of 3 supernovas make a funny face LOL


<img src="https://emot-s3.vercel.app/image/journal/14/supernova.png" alt="bonus-meme" width="600px">


## Yang kupelajari minggu ini

- Typescript adalah _superset_ dari Javscript yang memberikan kemampuan untuk memberikan type pada value. Cara kerja Typescript mirip dengan babel, ia adalah compiler. Nantinya kode yang kita tulis dengan Typescript akan dirubah menjadi Javascript biasa.
- Ternyata kita bisa membuat command CLI dengan Typescript/Javascript. Caranya dengan membuatnya dapat dieksekusi (diberi `!#` untuk menetukan eksekutornya, dan merubah _access permission_-nya menjadi _executable_. Sepertinya aku akan coba menulis artikel tentang ini) lalu taruh kode kita di folder `bin` agar dapat dieksekusi secara global.

## Beberapa hal keren di internet

[Gravitasi interaktif](https://codepen.io/akm2/full/rHIsa)

[Kehidupan bawah air yang mengagumkan](https://www.ted.com/talks/david_gallo_underwater_astonishments?referrer=playlist-the_most_jaw_dropping_ted_talk)

## Challenge:

Challenge minggu kemarin adalah mempelajari satu bahasa pemrograman, dan membuat suatu program denganya. Aku mempelajari Typescript, walau nggak holistik, tapi aku berhasil membuat asisten pribadi denganya. Asistenku kuberi nama Eira, dia baru bisa melakukan dua hal sekarang, memberitahuku angka perkembangan covid-19 harian dan trending topic di Twitter. Aku akan mengembangkanya terus, menambahkan fitur-gitur yang membantu aktifitas sehari-hari.


<img src="https://emot-s3.vercel.app/image/journal/14/eira-covid.png" alt="bonus-meme" width="600px">



<img src="https://emot-s3.vercel.app/image/journal/14/eira-trending.png" alt="bonus-meme" width="600px">


Aku belum memiliki ide untuk tantangan minggu ini, jadi akan kusamakan dengan akhir tahun kemarin, membuat 3 codepen berisi animasi CSS 🙂

Sekian Jurnal edisi 13 ini, semoga jurnal selanjutnya muncul seminggu lagi, hehe.

🕶 "Waste no more time arguing what a good man should be. Be One." – Marcus Aurelius

Jurnal 13, the first journal for the first week of 2021. Unlike the previous editions which are released every Sunday, because this year starts from Friday, the current journal will be released every Friday too, accompanying Eichiro Oda releases One Piece, haha. Let's go!

## This week's web link

[Some interesting custom hooks](https://usehooks.com/)

[Intersection observer](https://medium.com/swlh/intersection-observer-in-javascript-efcf13c154ce)

[Clean code in Javascript](https://devinduct.com/blogpost/22/javascript-clean-code-best-practices?ref=hackernoon.com)

[Interview with YDKJS writer](https://levelup.gitconnected.com/kyle-simpson-ive-forgotten-more-javascript-than-most-people-ever-learn-3bddc6c13e93)

[About object in Javascript](https://blog.bitsrc.io/the-chronicles-of-javascript-objects-2d6b9205cd66#:~:text=Almost%20everything%20in%20JavaScript%20is,primitive%20values%20or%20primitive%20types.)

[Call, Bind, dan Apply](https://dev.to/thesanjeevsharma/call-apply-and-bind-in-javascript-2nno)

## The thing that got me interested this week

Last Thursday we had the opportunity to share about creating a blog with [Next.Js](http://nextjs.org) and [Sanity.io](http://sanity.io) for developer friends in Flip. The blog demo can be seen [here](https://sebuah-blog.vercel.app). Sharing went well, my delivery was fast enough, there are still many things that need to be improved, but Alhamdulillah I can. See [my latest article](https://muhsalaa.com/20210106/create-a-simple-blog-with-next-js-and-sanity-io) which contains a summary of yesterday's sharing session if you are interested in creating a blog too.

This week, initiating the 2021 resolutions will not be an easy thing to do. Starting a lot of new habits at once will tire you out at the start and quickly lower your spirits. See, only 3 out of 9 targets succeeded in routine without holes this week. So in the future, I should start with the easiest I have done.


<img src="https://emot-s3.vercel.app/image/journal/13/list-activity.png" alt="list-activity" width="600px">


## This week I learned

- There is a lot of storage that can be used in the browser. Before knowing it, I encountered a problem when I had to save a large size of offline data. Initially, I put it in `localStorage` in base64 format. However, localStorage turns out to have a small storage capacity, around 5-6 MB only. After googling, it turns out that there are other storages such as `WebSQL` or `IndexedDB`. Finally, I use IndexedDB which can accommodate more data, can be hundreds of MB or more. WebSQL is also the same, only it can't be used in some browsers like Firefox.
- I wonder how a website, if we have scrolled to a certain part, the image or its elements fade in, showing itself to the user. Apparently, the answer is to use Javascript's `IntersectionObserver`. This API will execute the callback which we provide when the element we observe on the page appears. For complete documentation of this API, see [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
- Objects are the foundation of Javascript, almost everything in Javascript is objects, except for 6 things, `null, undefined, string, number, boolean, symbol`, which are often called primitive types or values. Objects have a hidden property named `__proto__` which contains `null` or a reference to another object, which is called **prototype**. When making an object a prototype for another object, it is called **[Prototypal Inheritance] (https://javascript.info/prototype-inheritance)**.

## Some of the coolest things on the internet

[How does Bitcoin works?](https://www.youtube.com/watch?v=bBC-nXj3Ng4)

[Glassmorphism](https://glassmorphism.com/)

[Neumorphism](https://neumorphism.io/#ece1ef)

## Challenge:

Okay, this week's challenge is to learn a new language. Within a week try to pick any programming language, and make small things out of it. I myself will learn TypeScript and will share what I make in codepen or codesandbox. Go!

## Tips or Tricks:

This is a new part of this journal that I made if there were any tips or tricks related to programming or everyday life, so maybe not every edition of the journal will have this section.

This time I will share a trick to be able to use `setState` similar (90%) to its use in class-based React components, in functional components, using` useReducer` hooks. Check the following code:

```jsx
import React, { useReducer } from "react";

function Bio() {
 const [state, setState] = useReducer(
 (state, data) => ({ ...state, ...data }),
 { name: "", address: "", phone: "" }
 );

 // ...

 setState({ name: "Kasparov", address: "St. Petersburg" });
}
```

With the reducer structure as above, we can fill in one or many states directly by sending data in the form of objects. You can read more details about `useReducer` in the [documentation](https://reactjs.org/docs/hooks-reference.html#usereducer) official.

## Bonus:

Meski bagian **mem** sudah tidak ada, aku menemukan satu yang lucu dan sangat ingin menaruhnya disini 😄


<img src="https://emot-s3.vercel.app/image/journal/13/mem-bonus.jpeg" alt="bonus-meme" width="600px">


This 13th edition of the Journal, I hope the next journal will appear in a week.

Jurnal 13, jurnal pertama untuk minggu pertama di tahun 2021. Berbeda dengan edisi-edisi sebelumnya yang rilis tiap minggu, karena tahun ini diawali dari hari jumat, maka jurnal sekarang akan rilis tiap Jumat juga, _mbarengi_ Eichiro Oda rilis One Piece, haha. Let's go!

## Link web minggu ini

[kumpulan custom hooks yang menarik](https://usehooks.com/)

[Intersection observer](https://medium.com/swlh/intersection-observer-in-javascript-efcf13c154ce)

[Clean code dalam Javascript](https://devinduct.com/blogpost/22/javascript-clean-code-best-practices?ref=hackernoon.com)

[Wawancara dengan penulis YDKJS](https://levelup.gitconnected.com/kyle-simpson-ive-forgotten-more-javascript-than-most-people-ever-learn-3bddc6c13e93)

[Tentang objek pada Javascript](https://blog.bitsrc.io/the-chronicles-of-javascript-objects-2d6b9205cd66#:~:text=Almost%20everything%20in%20JavaScript%20is,primitive%20values%20or%20primitive%20types.)

[Call, Bind, dan Apply](https://dev.to/thesanjeevsharma/call-apply-and-bind-in-javascript-2nno)

## Hal yang membuatku tertarik minggu ini

Kamis kemarin mendapat kesempatan untuk sharing mengenai pembuatan blog dengan [Next.Js](http://nextjs.org) dan [Sanity.io](http://sanity.io) untuk teman-teman dev di Flip. Demo blog yang dibuat dapat dilihat [disini](https://sebuah-blog.vercel.app). Sharing berjalan lancar, penyampaianku cukup cepat, masih banyak yang perlu diperbaiki, tapi Alhamdulillah aku bisa. Lihat [artikel terbaruku](https://muhsalaa.com/20210106/create-a-simple-blog-with-next-js-and-sanity-io) yang berisi rangkuman sharing session kemarin kalau tertarik membuat blog juga.

Minggu ini, memulai resolusi tahun 2021 bukan hal yang mudah dilakukan. Mengawali banyak kebiasaan baru sekaligus akan membuat capek diawal dan menurunkan semangat dengan cepat. Lihat, hanya 3 dari 9 target yang berhasil rutin tanpa bolong seminggu ini. Jadi kedepan sebaiknya kumulai dari yang paling mudah kujalankan.


<img src="https://emot-s3.vercel.app/image/journal/13/list-activity.png" alt="list-activity" width="600px">


## Yang kupelajari minggu ini

- Ada banyak storage yang bisa digunakan di browser. Sebelum mengetahuinya aku menemukan masalah saat harus menyimpan data offline dengan ukuran yang cukup besar. Awalnya aku menaruhnya di `localStorage` dengan format base64. Namun localStorage ternyata memiliki kapasitas penyimpanan yang kecil, sekitar 5-6 MB saja. Setelah googling, ternyata ada storage lain seperti `WebSQL` atau `IndexedDB`. Akhirnya aku menggunakan IndexedDB yang dapat menampung data lebih banyak, bisa ratusan MB atau lebih. WebSQL jg sama, cuma belum bisa dipakai di beberapa browser seperti Firefox.
- Belakangan aku sempat mikir bagaimana caranya ya, ada sebuah web, yang kalau kita sudah scroll sampai bagian tertentu, gambarnya atau elemenya itu fade in, menampakkan diri ke user. Ternyata jawabanya adalah menggunakan `IntersectionObserver` nya Javascript. API ini akan mengeksekusi _callback_ yang kita berikan saat element yang kita _observe_ nampak di halaman. Untuk dokumentasi lengkap API ini bisa lihat [disini](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
- Objek adalah fondasi dari Javascript, hampir semua hal yang ada di Javascript adalah objek, kecuali 6 hal, `null, undefined, string, number, boolean, symbol`, yang sering disebut juga primitive types atau value. Objek memiliki properti tersembunyi bernama `__proto__` yang isinya `null` atau referensi ke objek lain, yang disebut **prototype**. Ketika menjadikan suatu objek sebagai prototype objek lain, hal ini disebut **[Prototypal Inheritance](https://javascript.info/prototype-inheritance)**.

## Beberapa hal keren di internet

[Bagaimanakah sebenarnya bitcoin bekerja?](https://www.youtube.com/watch?v=bBC-nXj3Ng4)

[Glassmorphism](https://glassmorphism.com/)

[Neumorphism](https://neumorphism.io/#ece1ef)

## Challenge:

Oke, Challenge minggu ini adalah mempelajari bahasa baru. Dalam seminggu cobalah pilih satu bahasa pemrograman apapun, dan buat hal kecil denganya. Aku sendiri akan mempelajari TypeScript dan akan share apa yang kubuat di codepen atau codesandbox. Go!

## Tips or Tricks:

Ini bagian baru dari jurnal ini yang kubuat jika ada sesuatu tips atau trik terkait pemrograman atau keseharian, jadi mungkin nggak akan setiap edisi jurnal ada bagian ini.

Kali ini aku akan berbagi sebuah trik untuk dapat menggunakan `setState` mirip (90%) dengan penggunaanya pada _class based component_ React, di _functional components_, menggunakan `useReducer` hooks. Cek kode berikut:

```jsx
import React, { useReducer } from "react";

function Bio() {
 const [state, setState] = useReducer(
 (state, data) => ({ ...state, ...data }),
 { name: "", address: "", phone: "" }
 );

 // ...

 setState({ name: "Kasparov", address: "St. Petersburg" });
}
```

Dengan struktur _reducer_ seperti diatas, kita dapat mengisi satu atau langsung banyak state dengan mngirim data berupa objek. Kamu bisa baca lebih detail tentang `useReducer` di [dokumentasi](https://reactjs.org/docs/hooks-reference.html#usereducer) ofisialnya.

## Bonus:

Meski bagian **mem** sudah tidak ada, aku menemukan satu yang lucu dan sangat ingin menaruhnya disini 😄


<img src="https://emot-s3.vercel.app/image/journal/13/mem-bonus.jpeg" alt="bonus-meme" width="600px">


Sekian Jurnal edisi 13 ini, semoga jurnal selanjutnya muncul seminggu lagi, hehe.

🤯  "To live is to suffer, to survive is to find some meaning in the suffering." - Friedrich Nietzsche

Journal number 12, the last edition for 2020 which is full of wisdom. The pandemic that continues to worsen and the condition of the country in a rowdy state is a tough test for the Indonesian people. However, in the midst of darkness is not a reason to despair and lament, but to strive to cultivate hope.

Hope can be started by imagining something, then initiated through planning and taking the first steps so that it come true. It all starts with the first step.

For example, being a reliable programmer is hope, which can be achieved by anyone. Planning can start by choosing which path to take, what kind of programming we want to do. Then we have to know the path to get there, like the one in [this Roadmap](https://roadmap.sh/roadmaps). After that, it remains a matter of our consistency to study a lot of material according to the existing road directions.

## This week's web link

[4 Hours Python course](https://www.youtube.com/watch?v=rfscVS0vtbw)

[SVG Background pattern](https://www.heropatterns.com/)

[Type of storage in browser](https://web.dev/storage-for-the-web/)

[Tools for resizing image](https://squoosh.app/)

## The thing that got me interested this week:

The end of the A.D. has never been anything special to me, it's just labeling to point at one particular time. However, there is one benefit, for me, regarding this time calculation, which is making plans and targets for next year, 2021. I have many things to achieve in the next year, including continuing to study at the master's level, memorizing several chapters of the Qur'an, reading 40 books, and so on. And you, what are your plans for 2021?

Apart from making plans and targets for 2021, I humbly announce that **Skuuy** will be released in the early next year. For almost half a year, my friends and I have been working on a platform to make online invitations, such as marriage invitations, aqiqah, seminars, and various other types of invitations (but for release later there will be marriage invitations first, hehe). Currently **Skuuy** is still in the final testing, bug fixing, and finishing stages. Hopefully, it will be released on time next year 😄

## This week I learned:

- Patience has no limits, we set limits on it. There is a faint point between patiently holding back and letting go of the emotion. Because it is vague, we often ignore it, or we actually feel it but don't care. This point can be the beginning to become more patient, feel, and start to be more sensitive to it, then control the emotional dam that will explode.
- Learning a programming language, it would be better if you also learn the use of that language in a certain area. Studying Python to become a data scientist, for example. This will help when looking for your programming career later. Read in [this article](https://muhsalaa.com/20201225/the-importance-of-programming-language-learning-path) for a more detailed review.

## Some of the cool things on the internet:

[Houdini.how](https://houdini.how/)

[FLAC, MP3 and other audio format, whats the different?](https://www.whathifi.com/advice/mp3-aac-wav-flac-all-the-audio-file-formats-explained)

## Challenge:

These are the last 3 codepen for CSS challenge in the end of 2020. Next challenge will be in next year release 😉

[2020 Strava report animation](https://codepen.io/muhsalaa/pen/XWjaGwN)

[Display image with transition](https://codepen.io/muhsalaa/pen/KKgvWGq)

[Opening envelope animation](https://codepen.io/muhsalaa/pen/LYRLGZM)

That's the end of this journal. I have written 12 editions since a few months ago when I started this journal, I hope it will be better in the future. See you next year!


Jurnal nomor 12, edisi terakhir untuk tahun 2020 yang sarat hikmah ini. Pandemi yang masih terus memburuk serta kondisi negara yang gaduh menjadi ujian berat bagi rakyat Indonesia. Namun, ditengah kegelapan bukan alasan untuk berputus asa meratap, tapi berjuang gigih memupuk harap.

Harapan dapat diawali dengan berimajinasi tentang suatu hal, lalu diinisiasi lewat penyusunan rencana dan pemngambilan langkah pertama agar ia dapat terwujud. Semua diawali dengan langkah pertama.

Misal, menjadi seorang programmer andal adalah harapan, yang bisa dicapai oleh siapapun. Penyusunan rencana dapat dimulai dengan memilih jalan mana yang akan ditempuh, kita ingin melakukan pemrograman jenis apa. Lalu kita harus tahu jalur untuk menuju kesana, seperti yang ada di [_Roadmap_ ini](https://roadmap.sh/roadmaps). Setelahnya tinggal masalah konsistensi kita untuk mempelajari banyak materi sesuai petunjuk jalan yang ada.

## Link web minggu ini

[Course python 4 jam](https://www.youtube.com/watch?v=rfscVS0vtbw)

[Background pola SVG](https://www.heropatterns.com/)

[Macam storage pada website](https://web.dev/storage-for-the-web/)

[Tools resize gambar](https://squoosh.app/)

## Hal yang membuatku tertarik minggu ini

Akhir tahun masehi tak pernah menjadi sesuatu yang spesial untukku, itu hanya pelabelan untuk menunjuk satu waktu tertentu. Namun, ada satu manfaat, bagiku, terkait hitungan waktu ini, yaitu membuat planning dan target untuk tahun depan, 2021. Banyak hal yang ingin kucapai di tahun depan, diantaranya melanjutkan kuliah di jenjang master, hafal beberapa juz Al-Qur'an, membaca 40 buku, dan sebagainya. Kalau kamu, apa rencanamu untuk tahun 2021?

Selain mebuat planning dan target untuk 2021, aku dengan segala kerendahan hati mengumumkan bahwa **Skuuy** akan segera rilis di awal-awal tahun depan. Hampir setengah tahun ini aku dan temanku mengerjakan sebuah platform untuk membuat undangan online, seperti undangan nikah, aqiqah, seminar dan berbagai macam jenis undangan lain (tapi untuk rilis nanti baru akan ada undangan nikah, hehe). Saat ini **Skuuy** masih tahap final testing, bug fixing, dan finishing. Semoga bisa rilis tepat waktu tahun depan 😄

## Yang kupelajari minggu ini

- Kesabaran tak memiliki batas, kitalah yang memberikan batasan padanya. Ada satu titik samar antara sabar menahan dan melampiasakan suatu emosi. Karena samar, kita sering mengabaikanya, atau sebenarnya kita merasakanya namun tidak memerdulikan. Titik ini bisa menjadi awal untuk menjadi lebih sabar, rasakan dan mulai lebih peka atasnya, lalu kendalikan bendungan emosi yang akan meledak.
- Mempelajari sebuah bahasa pemrograman, akan lebih baik jika mempelajari pula penggunaan bahasa tersebut pada sebuah ranah tertentu. Mempelajari Python untuk menjadi seorang data scientist misalnya. Hal ini akan membantu saat mencari karir pemrogramanmu nanti. Baca di artikel [ini](https://muhsalaa.com/20201225/the-importance-of-programming-language-learning-path) untuk ulasan lebih detail.

## Beberapa hal keren di internet

[Houdini.how](https://houdini.how/)

[FLAC, MP3 dan audio format lain, apa bedanya?](https://www.whathifi.com/advice/mp3-aac-wav-flac-all-the-audio-file-formats-explained)

## Challenge:

Ini adalah 3 codepen terakhir untuk tantangan CSS akhir tahun 2020. Tantangan selanjutnya akan ada di rilis tahun depan 😉

[2020 Strava report animation](https://codepen.io/muhsalaa/pen/XWjaGwN)

[Display gambar dengan transisi](https://codepen.io/muhsalaa/pen/KKgvWGq)

[Animasi buka amplop](https://codepen.io/muhsalaa/pen/LYRLGZM)

Itu dia akhir dari jurnal kali ini. 12 edisi berhasil kutulis semenjak beberapa bulan lalu saat memulai jurnal ini, semoga kedepan akan lebih baik. Sampai jumpa tahun depan!


🎋 "One moment of patience may ward off a great disaster. One moment of impatience may ruin a whole life." - Chinese Proverb

Assalamualaikum, we meet again after weeks, finally, I can write this weekly journal again. I will not excuse, in the past 3 weeks I have been unable to write this journal because I was stuck. Stuck by a pile of novels, assignments, deadlines, and laziness (yucks). I still hope to write regularly, both this journal and blog articles (I haven't written it for 2 months). Everything needs a process, and I'm struggling to get up. This is the weekly journal issue 11!

## This week's web link

[Javascript Generator](https://javascript.info/generators)

[how :nth-child() works](https://css-tricks.com/how-nth-child-works/)

[React Spring](https://www.react-spring.io/)

[10 CSS modern layout](http://1linelayouts.glitch.me/)

[event handler vs event listener](https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34)

[prerender react application](https://github.com/stereobooster/react-snap)

## The thing that got me interested this week:

Today is 17 days before the end of the year, meaning this is a crucial time to evaluate this year and make plans for the next year. I'll write down my plans, targets, and so on in notions, in a format that I still working on, and will probably share some of them here. Come on, make your plans for the next year too.

Almost 3 weeks since I last wrote this journal, I read the novel series Earth by Tere Liye. Tells about three friends who have superpowers and they go on an adventure in a parallel world. There are 9 books that have been published (and are still continuing), I have read 5 of them: **Earth, Moon, Sun, Bintang, Ceros, and Batozar**. I want to buy the next book right away (when I have funds, lol). As a fan of science fantasy novels, I am pleased with the presence of series by Indonesian writers. It is rare for this genre to exist in the literary repertoire in Indonesia.

## This week I learned:

- Bitwise operator! I used to really carelessly use this operator to do comparisons, and it turns out that after reading yesterday, the way this operator works is very, very different from the usual comparison operator. The bitwise operator works by comparing the binaries of the values being compared. the small example compares `3 & 1`, the result is 1, because, in binary, 3 is `011`, 1 is `001`
- Closure is when a function use something outside of its scope. it created when we create a function
- `toString()` and `parseInt()` have radix parameter to specify the number base you want.

## Some of the cool things on the internet:

[Ted talk on how to be more focus](https://www.youtube.com/watch?v=Hu4Yvq-g7_Y)

[Dopamine detox](https://www.youtube.com/watch?v=9QiE-M1LrZk)

## Challenge:

Just like last week, here are three animation codepen that I made, and will continue until the end of 2020 (17 days to go).

[Timepicker](https://codepen.io/muhsalaa/pen/PoGoPqo)

[Text animation](https://codepen.io/muhsalaa/pen/VwjoGxr)

[Road animation](https://codepen.io/muhsalaa/pen/YzGPgPj)

Okay, just short for this journal, hopefully after getting better and better from illness (delays, laziness and lack of focus), in the future I can share better and more content.


Assalamualaikum, jumpa lagi setelah berminggu-minggu berselang, akhirnya aku bisa menulis jurnal mingguan ini lagi. Aku tidak akan berlasan, 3 minggu kebelakang aku memang tak mampu menulis jurnal ini karena tertahan. Tertahan oleh setumpuk novel, tugas, tenggat, dan kemalasan (yucks). Aku masih berharap dapat menulis dengan rutin, baik jurnal ini maupun artikel blog (sudah 2 bulan tidak menulisnya). Semua butuh proses, dan aku sedang berjuang untuk bangkit. Inilah jurnal mingguan edisi 11!

## Link web minggu ini

[Generator Javascript](https://javascript.info/generators)

[cara kerja :nth-child()](https://css-tricks.com/how-nth-child-works/)

[React Spring](https://www.react-spring.io/)

[10 layout modern CSS](http://1linelayouts.glitch.me/)

[event handler vs event listener](https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34)

[prerender aplikasi react](https://github.com/stereobooster/react-snap)

## Hal yang membuatku tertarik minggu ini

Hari ini sudah 17 hari sebelum akhir tahun, artinya ini adalah waktu-waktu krusial untuk mengevaluasi tahun ini dan membuat perencanaan untuk setahun kedepan. Aku akan menuliskan planning-ku, target dan lainya di notion, dengan format yang masih aku fikirkan, dan mungkin akan berbagi beberapa diantaranya disini. Ayo buat juga perencanaanmu setahun kedepan.

Hampir 3 minggu semenjak aku terakhir kali menulis jurnal ini, aku membaca novel serial Bumi karangan Tere Liye. Mengisahkan tiga orang sahabat yang memiliki kekuatan super dan mereka berpetualang didunia paralel. Ada 9 buku yang sudah terbit (dan masih terus berlanjut), aku sudah membaca 5 diantaranya: **Bumi, Bulan, Matahari, Bintang, Ceros dan Batozar**. Aku ingin segera membeli buku selanjutnya (saat sudah ada dana, lol). Sebagai penggemar novel genere fantasi sains, aku senang dengan kehadiran serial karya penulis Indonesia. Jarang ada genre ini dalam khazanah sastra di Indonesia.

## Yang kupelajari minggu ini

- Bitwise operator! dulu aku pernah dengan sangat ceroboh menggunakan operator ini untuk melakukan perbandingan, dan ternyata setelah kemarin baca-baca, cara kerja operator ini sangat amat berbeda dengan comparison operator yang biasa. Bitwise operator bekerja dengan membandingkan binary dari value yang dibandingkan. contoh kecil membandingkan `3 & 1`, maka hasilnya adalah 1, karena, dalam biner, 3 adalah `011`, 1 adalah `001`
- Closure adalah ketika sebuah fungsi menggunakan suatu value diluar _scope_ nya. Closure muncul ketika membuat sebuah fungsi
- `toString()` dan `parseInt()` memiliki parameter radix untuk menentukan basis bilangan yang diinginkan.

## Beberapa hal keren di internet

[Ted tentang bagaimana untuk bisa lebih fokus](https://www.youtube.com/watch?v=Hu4Yvq-g7_Y)

[Dopamine detox](https://www.youtube.com/watch?v=9QiE-M1LrZk)

## Challenge:

Sama seperti minggu kemarin, inilah tiga codepen animasi yang sudah kubuat, dan akan terus berlanjut sampai akhir tahun 2020 (17 hari lagi).

[Timepicker](https://codepen.io/muhsalaa/pen/PoGoPqo)

[Animasi teks](https://codepen.io/muhsalaa/pen/VwjoGxr)

[Animasi Jalan](https://codepen.io/muhsalaa/pen/YzGPgPj)

Baik, singkat saja untuk jurnal kali ini, semoga setelah makin pulih dari sakit (penundaan, kemalasan dan ketidak fokusan), kedepan aku bisa berbagi konten-konten yang lebih baik dan banyak.


👳🏻‍♂️ "Your task is not to seek for love, but merely to seek and find all the barriers within yourself that you have built against it." - Jalaluddin Rumi

#18	👾 "It has become appallingly obvious that our technology has exceeded our humanity." - Albert Einstein	03/14/2021
#17	👆 "The greatest glory in living lives not in never falling, but in rising every time we fall." - Nelson Mandela	03/07/2021
#16	🌞 "If you’re brave enough to say goodbye, life will reward you with a new hello." - Paulo Coelho	01/28/2021
#15	🐳 "The primary cause of unhappiness is never the situation but your thoughts about it." - Eckhart Tole	01/22/2021
#14	🕶 "Waste no more time arguing what a good man should be. Be One." – Marcus Aurelius	01/15/2021
#13	🤯 "To live is to suffer, to survive is to find some meaning in the suffering." - Friedrich Nietzsche	01/07/2021
#12	🎋 "One moment of patience may ward off a great disaster. One moment of impatience may ruin a whole life." - Chinese Proverb	12/31/2020
#11	👳🏻‍♂️ "Your task is not to seek for love, but merely to seek and find all the barriers within yourself that you have built against it." - Jalaluddin Rumi	12/12/2020

MUHAMMAD SALMA ABDUL AZIZ

Karir

Alat kerja

Quotes

Apa yang baru?

5 Hal Non-Teknis yang Bisa Dipersiapkan dalam Perkerjaan Baru

Membangun Server Media Rumah dengan Docker dan Samba

Memperluas Cakrawala: Belajar dan Berkembang di Luar Zona Nyaman

Pengangguran hari ke X

Jurnal Mingguan

Mau baca apa?

KATEGORI

TAHUN

©2020 by Muhammad Salma Abdul Aziz

ID