When I was starting in the world of amateur digital photography, I learned about 2 software programs that everybody was using: Adobe Photoshop and Adobe Lightroom. In the Free and Open Source world, there are 2 amazing alternatives: GIMP and Darktable. GIMP is aimed at destructive (the image is changed when saved) photo editing. It can be used to change photos in many ways, including cutting things out of the picture or pasting things into the picture. Darktable is aimed at non-destructive photo editing. I like to compare it to developing a photo. The negative is kept, and the photo (the positive) is developed from the negative. For many people, getting started can be daunting. Therefore I like to present the absolute basics of photo editing with Darktable.

Tutorial

First open Darktable. When the program is opened, you need to load a photo collection. You can do this for many photos at once by clicking on ‘folder’ in the left sidebar in the ‘import’ section.

Select the folder in which you have stored the RAW files of your digital camera. Click on open.

Note: If you only take JPG pictures with your digital camera, Darktable is not for you! You should look into GIMP.

Now your photos will load in the Lighttable section of Darktable. In the top right of the program, you can see (highlighted) in which section of Darktable you are currently working. To start editing a photo, double click on the image.

Now you are automatically moved into the darkroom section of Darktable. Underneath the sections you see a Histogram (the colored chart) and below that a row of buttons. These buttons are the groups in which the functions of Darktable are grouped. Now click on the ‘basic group’ button. Then click on ‘white balance’.

The easiest way to get the white balance right is to find a white spot on your photo and select this. To be able to do this, you first need to go into the white balance presents and change this from ‘camera’ to ‘spot’.

Now you can zoom into the photo by using the mouse wheel (if you have one) or by using the navigation functions (located in the top of the left sidebar). Then select the part of the picture that represents pure white and Darktable will automatically determine the white balance. When I am not 100% happy with the result, I simply try again on another spot.

You can also use one of the presets that are available by default such as: camera, daylight, shade, cloudy or flash. Or you can manually drag the temperature left-right to select the white balance that you prefer.

After having selected the right white balance, it is time to get the light/dark area’s of your photo right. Go into the tone group. Now select levels.

What you want to do, is look at the histogram and see where it drops off. Most histograms look like a mountain range with an upward slope on the left, a middle part that’s like a mountain range and a downward slope on the right. If you don’t see a slope on the left, that means that your dark areas are fine. If you don’t see a slope on the right, that means that your light area’s are fine. What you want to do, is to drag the line on the left or on the right towards the middle, so that the slopes are shorter or even gone. Try to experiment with this!

The last group in this tutorial is the correction group. Select the lens correction.

Now you want to enable the lens correction with the ‘on’ button of the module. In most cases, the camera and lens are already selected correctly by Darktable. Otherwise adjust the camera model and lens to the ones that you have used.

The only thing remaining is to export the photo(s) into the JPG format. Click on lighttable, to change the Darktable mode. Then in the right sidebar go to the ‘export selected’ part and click on the folder icon to select the folder where you want the pictures to be saved. Now select all the images that you want to export (in the middle section) and then click on the export button.

Conclusion

Using Darktable is not as difficult as it might seem. You just need to know your way around. There are a lot more functions available. But the ones in this tutorial are enough in 95% of the time. In future blog posts, I will explore some of the more advanced features.

Published on: 15 October 2018

This weekend I am going to LinuxDay, the German-specking Free Software one-day event. It takes place in the higher technical school in Dornbirn, Austria.
Organized by Linux User Group Vorarlberg, it scheduled two timelines of presentations/talks and stands of the many Free Software projects including openSUSE, Debian, Devuan, etc. It looks a bit like a LinuxTag or FOSDEM. Here you can find photos from the last years.

This time it celebrates 20 years, so I think it is a good reason to visit this event now. And not just this. It is very beauty there in this time of the year. For sure I will take my family there and continue to enjoy the traveling on Sunday

As we known, openSUSE project doesn’t provide official packages for Linux Libre kernel. There is a simple reason for that: default openSUSE kernel doesn’t include some proprietary modules; it’s free. All proprietary parts of the kernel could be found in a separate package kernel-firmware. But anyway there are users who want to use exactly GNU version. So, why not? This short tutorial describes how to build and install Libre Linux on openSUSE Leap 15.1 (openSUSE TW needs the same instructions).

Right now in the Leap 15.1 repository the kernel version is 4.12.14.

> uname -r
4.12.14-lp151.16-default

Let’s check the latest available 4.x kernel on the FSF server. Right now the latest avaliable kernel there is version 4.18. Its size is less then 100 Mb. Download it:

> wget -c \
https://linux-libre.fsfla.org/pub/linux-libre/releases/LATEST-4.N/linux-libre-4.18-gnu.tar.xz

Before we continue, I will recommend to verify file integrity. The .sign files can be used to verify that the downloaded files were not corrupted or tampered with. The steps shown here are adapted from the Linux Kernel Archive, see the linked page for more details about the process.

wget -c \
https://linux-libre.fsfla.org/pub/linux-libre/releases/LATEST-4.N/linux-libre-4.18-gnu.tar.xz.sign

Having downloaded the keys, you can now verify the sources. You can use gpg2 to verify the .tar archives. Here is an example of a correct output:

> gpg2 --verify linux-libre-4.18-gnu.tar.xz.sign
gpg: assuming signed data in 'linux-libre-4.18-gnu.tar.xz'
gpg: Signature made Mon 13 Aug 2018 01:25:14 AM CEST
gpg:                using DSA key 474402C8C582DAFBE389C427BCB7CF877E7D47A7
gpg: Can't check signature: No public key

> gpg2  --keyserver hkp://keys.gnupg.net --recv-keys \
474402C8C582DAFBE389C427BCB7CF877E7D47A7
key BCB7CF877E7D47A7:
12 signatures not checked due to missing keys
gpg: key BCB7CF877E7D47A7: \
public key "linux-libre (Alexandre Oliva) " imported
gpg: no ultimately trusted keys found
gpg: Total number processed: 1
gpg:               imported: 1

> gpg2 --verify linux-libre-4.18-gnu.tar.xz.sign 
gpg: assuming signed data in 'linux-libre-4.18-gnu.tar.xz'
gpg: Signature made Mon 13 Aug 2018 01:25:14 AM CEST
gpg:                using DSA key 474402C8C582DAFBE389C427BCB7CF877E7D47A7
gpg: Good signature from "linux-libre (Alexandre Oliva) " [unknown]
gpg:                 aka "[jpeg image of size 5511]" [unknown]
gpg: WARNING: This key is not certified with a trusted signature!
gpg:          There is no indication that the signature belongs to the owner.
Primary key fingerprint: 4744 02C8 C582 DAFB E389  C427 BCB7 CF87 7E7D 47A7

The primary key fingerprint looks good.

If everything goes well, untar downloaded kernel:

> tar xfv linux-libre-4.18-gnu.tar.xz
> cd linux-4.18

Well… now comes the personal part of the installation process, i.e. you know better what’s you should to care about during creating the config file, what’s hardware do you have and your kernel should support, what kind of optimization do you want to have, etc. That’s the most important step of this entire tutorial. For example, good configured kernel could save few seconds of boot time, bad configured kernel will doesn’t boot at all
To prepare the configuration file, you will need a base kernel configuration, it’s a plain text file calling .config. The are many ways to create .config file. It’s the same like for official Linux Kernel.
Before we can configure our new kernel we will need to install all needed dependencies.

# zypper in gcc make ncurses-devel bison flex libelf-devel libopenssl-devel bc
# make menuconfig
# make -j4
# make modules_install
# make install

If you newer built a linux kernel before and it makes you scary, you can just make make menuconfig and just close it without to change anything. It will scan your hardware and generate a default config. This configuration will include much more then you will really need, but it guarantees that the new kernel will boot.

After installing we can still find the native openSUSE default-kernel in the GRUB menu. I think, this is the default behavior today in the most GNU/Linux systems. Thus, if something goes wrong and, for example, your new self-configured kernel will not boot, don’t worry.

> uname -r
4.18.0-gnu-lp151.16-default

I think, if it’s your first experience with the kernel compilation process and you will get new kernel that will boot and it will be smaller then default openSUSE kernel, you can be proud of yourself.
Whatever you will get, don’t forget to have a lot of fun
More info about Linux kernel for beginners could be found on the https://kernelnewbies.org/. More info about GNU Libre Linux could be found on the https://www.fsfla.org/ikiwiki/selibre/linux-libre/index.en.html. And, finally, if you interested in the openSUSE Linux kernel development process, you are always welcome to visit openSUSE wiki portal

August one of the best months of 2018 for me, because for the first time I was accepted as a speaker at the 2018 OpenSUSE Asia Summit held in Taiwan, precisely in Taipei, one of the countries that I have never visited.

Before departh

on this departure I departed with several groups from their openSUSE Indonesia: Pak Kukuh, Pak Yan Arief and Pak Didiet. we went to taiwan boarding a China Airlines plane at 14:10 and arrived in Taiwan at 20:40 Taiwan time, and this was my first experience using international aircraft.

this is when we take photos at Taiwan MRT

and after we arrived in Taiwan we bought the MRT card to use the MRT there, after that at around 11:00 p.m. we arrived at the First Hostel, here I was roomed with several people, including Gus Aftian, Pak Darian, Pak Joko, Pak Kukuh and Kakek Yan Arief.

Day 0

on Friday, we all plan to take part in the openSUSE meeting, which is in the Micro Focus SUSE office in Taiwan, and we went there after we prayed Friday at the Taiwan Grand mosque. because we waited for a very long bus, finally we all decided to walk to the SUSE office after Friday prayers, WOW!

After we arrived there, we were placed in a different room because the main room was full

here we are at the SUSE Taiwan office Me at SUSE Office Taiwan

and in the night, there was a party speaker invitation, there I met a lot of cool people whom I haven’t memorized until now

before party speaker, Libre Office Taiwan invited us for dinner

Dinner with Libre Office Asia

the great place for speaker party

21.00 we back to hostel for tomorrow

Day 1

and the Event began, this year the OpenSUSE Asia Summit event was joined by several other major events, namely GNOME Asia Summit, and COSCUP

in this day i join to class 304

after that, on the night I attended the BoF openSUSE session, where we determined some things for next year, the openSUSE Asia Summit 2019

Day 2

Today is the day that most excited me, because on the second day I will present my paper in class 304, and also because this is the first time for me. My class started at 11.30 and it turned out that there were quite a lot, and after I talked about it, Igawa, one of the openStack and openSUSE Japanese contributors, asked about the differences between Nextcloud and Owncloud, and I was really nervous this is me with Masayuki Igawa

after the summit, the Indonesian contingent travels to the ximending night market and buys some souvenirs

No items found.

Day 3 – one day tour

After that event, many speaker join to one day tour at Taiwan, some of the places we visited were the National Palace Museum and Taipei 101, we went there by bus from Taipei Main Station. yes, before going to the destination we all gathered at Taipei Main Station

This is us

after that Pak Darian and team went first to the airport because the plane would fly tonight. And those who have not gone home, we are invited to eat together, thanks to Frank and Eric who have invited us

and Tomorrow me, Pak Kukuh, Kakek Yan Arief and Pak Didiet return to Jakarta on the hour 08.45

Epilog

This year was a very pleasant year, contributing with many great people. I hope next year you can join the next summit.

Thanks to Max Huang for holding this cool event, thanks to openSUSE and all who have contributed. you are great !

Sumber Foto:

• https://www.flickr.com/groups/gnomeasia2018/
• https://www.flickr.com/groups/3094051@N21/
• https://www.flickr.com/photos/coscup/albums/

In the spring of 2014 I was a college student in an IT program applying to coop job postings and needed something to differentiate myself from the other applicants. I decided that I would start a blog where I document random things I found interesting. Sound really broad? That’s because I didn’t really have any particular focus in mind and wanted to experiment with different topics. I think in the long run this was a good decision as it let me see what I was comfortable with, what worked and what didn't. This is the kind of thing you can learn best from experience but I will go more into detail about this later. For now, lets get back to my life story.

blog --init 💥

The first post came in April of 2014 titled Programming Paradigms. And yes I used WordPress back then. The post was short — 25 words — with a link to a YouTube series by Dr. Jerry Cain. If a picture is a thousand words I guess this video is 31.05 million (17.25min * 30fps * 1000words)? Does it work like that? 😅

Projects

After a few months I started working on a C++/Qt project called TLE. I used my blog to post screenshots and mockups (helpfully drawn by a close friend) whenever I got something interesting working. I’m confident to say that no one read it, but it was still nice just being able to get my thoughts onto “paper”. It helped me think about what I was doing and how I would explain it to someone who had never worked on the project before.

Getting Traction

As this was all going on, I started participating in the openSUSE community. I would post on the forums, the mailing lists and even in the IRC channel. I began to notice there were common questions about new releases and the direction of the project. So what did I do? I wrote blog posts explaining it for people who didn't have the time to watch the conference videos.

At this point the frequency of my posts got slower, partly due to the posts getting longer and partly due to being busy with school. To keep my blog alive I started blogging about things I was doing in school. This is how I started blogging about technical content (how to’s, beginners guides, etc.). The very first post like this was about configuring a DNS server in CentOS 6.6:

When I started posting these I began to notice that the traffic to my blog was increasing significantly. This gave me the confidence to try and write some bigger guides.

Moving To Medium

I discovered the existence of Medium around July 2016. I was really intrigued by the website since it looked really nice compared to my blog and seemed to be very popular with writers. After a bit of debating I decided to switch to Medium. A major reason I switched was in hopes that I would get better exposure. I wrote a reflection about using Medium that you can read here.

The Comprehensive Guide To AppArmor

In July 2016 I also released a guide to AppArmor called The Comprehensive Guide To AppArmor. The desire to create the post came from wanting to understand how AppArmor worked but having difficulty finding documentation that explained everything. So I decided to work with the developers of AppArmor to write a guide which explains all the basics you need to know to use AppArmor. The guide can be found here. This is one of the most unique posts I have ever written as it went through several revisions and I had constant feedback from the actual developers of AppArmor — something I don't usually get from tools I write about.

Becoming A Dev

In 2016 I graduated from my college and felt that I would still like to learn more about computers. So I decided to sign up for a transfer program that lets college students transfer into year 3 at McMaster university. At the end of my first year (April 2017) at McMaster we were allowed to apply to internship jobs and thinking it was good to get some work experience I applied. I ended up getting a position as a Software Developer Intern at Ontario Teachers’ Pension Plan (OTPP).

During my time at OTPP I worked with both JavaScript and Java. At the same time I was working on personal projects in my free time. At the start I started trying to re-implement a project I had created in school — a podcast feed. For our school project we had implemented it using Qt but the code was a mess and we had no tests. I decided to build the app again but this time using JavaFX — because it would help me get better at Java for work — and to test it, something I learned the importance of at work. While developing this application I learned a lot about testing philosophies and how to test JavaFX. Noticing that there was almost no documentation for TestFX — a library used to test JavaFX applications — I wrote some (you can find here).

This post turned out to be quite popular as there seems to be demand for testing JavaFX but a lack of documentation.

Saka

Spring of 2018 and I ended up becoming the maintainer of a browser extension called Saka. As I took over for the previous maintainer I was forced to learn a lot of the tools used in JavaScript projects. Things like Webpack, Karma, Babel and so on. As I began to understand the project I realized that there were no tests to validate the behavior of the application. This caused me worry — I didn’t have confidence in myself to modify code without breaking other parts of the app. So I decided to learn how browser extensions were tested and realizing it was not documented well I wrote a blog post titled Unit Testing Browser Extension that you can read here.

Saka represents a pretty important milestone in my journey as a dev. For the first time I was maintaining a project I had full control of that other people actually used! It was very exciting but also a bit nerve wrecking — I didn’t want to break it and lose users as a result. Looking back, it was a great idea to take over Saka since I have learned so much about JavaScript while maintaining it and it has inspired a lot of content on this blog.

Reflection

As my life has changed so has my blog. In a way it is a reflection of where I am with my life, what my focuses are and what goals I have for the future. It has changed quite a bit from what it started out as but I think it has only gotten better. It took me a long time to become confident enough to write my own content but it has been important in helping me learn new things and helping others do the same.

If you liked this post be sure to follow this blog, follow me on twitter and my blog on dev.to.

P.S. Looking to contribute to an open source project? Come contribute to Saka, we could use the help! You can find the project here: https://github.com/lusakasa/saka

Some Thoughts On Blogging was originally published in Information & Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.

Trustr is my current project to create a simple certificate management app.
I decided that it is just about the right scope to demonstrate a few things about application development in Horde 5.

I have not made any research if the name is already occupied by some other software. Should any problems arise, please contact me and we will find a good solution. I just wanted to start without losing much time on unrelated issues.

My goals as of now:

– Keep everything neat, testable, fairly decoupled and reusable. The core logic should be exportable to a separate library without much change. There won’t be any class of static shortcut methods pulling stuff out of nowhere. Config and registry are only accessed at select points, never in the deeper layers.
– Provide a CLI using Horde_Cli and Horde_Cli_Application (modeled after the backup tool in horde base git)
– Store to relational database using Horde_Db and Horde_Rdo for abstraction
– Use php openssl extension for certificate actions, but design with future options in mind
– Rely on magic openssl defaults as little as possible
– Use conf.xml / conf.php for any global defaults
– Show how to use the inter-app API (reusable for xml-rpc and json-rpc)
– Showcase an approach to REST danabol ds in Horde (experimental)

The app is intended as a resource provider. The UI is NOT a top priority. However, I am currently toying around with a Flux-like design in some unrelated larger project and I may or may not try some ideas later on.

Initial Steps: Creating the working environment

I set up a new horde development container using the horde tumbleweed image from Open Build Service and a docker compose file from my colleague Florian Frank. Please mind both are WIP and improve-as-needed projects.


git clone https://github.com/FrankFlorian/hordeOnTumbelweed.git
cd hordeOnTumbelweed
docker-compose -f docker-compose.yml up

This yields a running horde instance on localhost and a database container.
I needed to perform a little manual setup in the web admin ui to get the DB to run and create all default horde schemas.

Next I entered the developer container with a shell
docker exec -it hordeOnTumbelWeed_php_1 bash

There are other ways to work with a container but that’s what I did.

Creating a  skeleton app

The container comes with a fairly complete horde git checkout in /srv/git/horde and a clone of the horde git tools in /srv/git/git-tools

A new skeleton app can be created using

horde-git-tools dev new --author "Ralf Lang <lastname@b1-systems.de>" --app-name trustr

The new app needs to be linked to the web directory using

horde-git-tools dev install


Also, a registry entry needs to be created by putting a little file into /srv/git/horde/base/config/registry.d

cat trustr-registry.d.php

<?php
// Copy this example snipped to horde/registry.d
$this->applications['trustr'] = array(
'name' => _('Certificates'),
'provides' => array('certificates')
);

This makes the new app show up in the admin menu. To actually use it and make it appear in topbar, you also need to go to /admin/config and create the config file for this app. Even though the settings don’t actually mean anything by now, the file must be present.

I hope to follow up soon with articles on the architecture and sub systems of the little app.

On Wednesday, I had a presentation about the latest features implemented for LibreOffice / Collabora Online in the past year at the annual LibreOffice Conference:

Please enjoy, there's a lot of screenshots there!

Bukan perjalanan pertama saya melalui rute ini, namun tak salah menuliskan catatan ini.

Pesawat saya berangkat Kamis pagi jam 8.15 dengan Catay Pacific CX-718. Saya sudah melakukan checkin online sebelumnya melalui website dan memilih nomor kursi. Catay Airways hanya mengijinkan melakukan checkin online mulai dari 48 jam sebelum keberangkatan. Kemudian saya memilih Muslim Food dari menu checkin Catay. Pilihan Muslim Food hanya tersedia di Penerbangan HK-TPE, sedangkan dari CGK-HK semua makanan adalah Halal. Untuk penerbangan pulang, pilihan Muslim Food hanya tersedia dalam penerbangan TPE-HK, sedangkan HK-CGK semua makanan dinyatakan halal, sehingga tidak perlu memilih lagi. Selalu bawa botol minum isi ulang.

Di bandara Terminal 2F, saya segera melakukan checkin dan drop bagasi. Meski berangkat bertiga, urusan ini mending diselesaikan sendiri tanpa harus tunggu-tungguan. Lanjut imigrasi karena bagian ini cukup memakan waktu. Sampai di loket imigrasi, tebakan saya benar, antrian mengular. Butuh 15 menit dari awal antri hingga pemerikasaan saya selesai. Huft. Sampai di bagian Gate baru mencari Pak Edwin dan Pak Haris yang ternyata sudah duduk ngopi dan sarapan di Old Town Coffee. Oh iya, dalam penerbangan internasional terdapat banyak catatan dalam barang bawaan yang biasanya rewel juga, diantaranya:

1. Aturan benda cair dalam botol, maksimal 100ml dan dimasukkan ke kantong zipper bening.
2. Sebelum x-ray terakhir, pastikan botol minum dikosongkan. Nanti bisa diisi kembali di water refil setelah x-ray tersebut.

Boarding 40 menit sebelum jam keberangkatan. Penerbangan ditempuh dalam kurun waktu 5 jam 10 menit. Terdapat perbedaan waktu antara Jakarta dan Hongkong, yaitu lebih cepat 1 jam. HK GMT+8. Saya langsung mengatur jam tangan dan jam di HP agar ikut berganti. Perjalanan saya habiskan dengan tidur, membaca novel dan mendengarkan musik. Terdapat layanan hiburan yang memadai di dalam kabin pesawat.

Oh iya, saya lupa penerbangan Catay menggunakan pesawat jenis berapa, namun di kedua pesawat itu terdapat colokan universal yang bisa digunakan untuk mencharge HP. Ada dua kemungkinan lokasi colokan itu berada. Pilihan pertama ada di lipatan meja makan. Yang kedua pilihannya di bawah kursi, di bagian pertemuan kursi. Silahkan diraba perlahan. Oh iya, ada indikasi lampu hijau yang hidup menandakan charger bisa digunakan karena jika lampu tidak hidup, berarti tidak ada arus yang berjalan. Lampu beberapa kali mati, biasanya ketika akan lepas landas, ada goncangan dan ketika akan mendarat.

Saya sedikit rewel jika berada dalam ruangan AC cukup lama. Apalagi jika di dalam pesawat. Ini menyebabkan hidung saya iritasi kemudian mimisan. Makanya saya selalu menggunakan masker dalam pesawat jika lama penerbangan lebih dari 2 jam. Tak lupa jaket tebal bertudung kepala.

Mendarat di HK pukul 14.20 waktu setempat. Setelah membawa bagasi kabin, kemudian menuju couter checkin transit. Nyari tempat isi ulang air minum, minum secukupnya. Lanjut menuju gate transit. Butuh naik 1 lantai dan kemudian dilakukan pemeriksaan ulang, x-ray bagasi kabin dan screening. Pastikan sebelum masuk pemeriksaan, kosongkan botol minum agar mempercepat proses scanning.

Koneksi internet di Bandara HK saya acungi jempol. Cukup aktifkan Wi-Fi kemudian pilih nama access point untuk bandara HK, setujui persyaratan dan peraturan. Setelah itu bisa berinternet ria tanpa pembatasan durasi berinternet. Untuk kecepatan tidak perlu dikomentari, cukup cepat.

Menuju Gate penerbangan selanjutnya. Tetapi butuh menemukan tempat sholat. Di terminal HK, tempat sholat dapat ditemukan di dekat Gate 42-43. Peralatan solat, mukena dan alquran tersedia rapi. Arah kiblat juga tersedia. Tempat wudhu tersedia di dalam ruangan. Perlu dicatat juga, mushola tersebut bukan merupakan tempat ibadah khusus muslim. Jadi kita kemungkinan akan berbagi ruang dalam sunyi dengan pemeluk agama lain.

Selesai sholat, kita mencari makan. Restoran Halal tersedia juga di foodcourt sekitaran Gate 40. Old Town Coffee. Makanan semenanjung malaya dan Indonesia.
Saya memilih kari ayam dengan harga 92 Dolar HK termasuk Es Teh Manis.

Selesai makan, kita bergeser ke Gate 62 dimana kita melanjutkan perjalanan selanjutnya ke TPE. Dalam pesawat kita dibagikan lembar pengisian informasi kedatangan. Saya sebelumnya sudah mengisi secara online, tapi nulis lagi gpp. Jadi selalu bawa ballpoint di tas kabin untuk memudahkan mengisi form pelaporan. Karena dengan mengisi ketika masih di pesawat, bisa mempercepat kita dalam antrian imigrasi.

Mendarat. Kemudian buru-buru antri imigrasi. Butuh sekitaz 20 menit antri hingga keluar imigrasi. Lanjut ke konter bagasi untuk mengambil koper. Sembari antri, saya mampir toilet dan mengaktifkan pake Mi Roaming Taiwan. Apa itu Mi roaming? Akan saya ceritakan di postingan selanjutnya.

Keluar bandara, sudah di jemput oleh Franklin Weng. dan cerita berlanjut ke tulisan ini

Salam
Estu

Yesterday I was watching a talk by Ben Ilegbodu at React Alicante called Help! My React App is Slowwwww! in which Ben discussed some optimizations developers can make to help improve performance of React applications. He goes over many of the potential bottlenecks that may arise such as unnecessary DOM updates, reconciliation and unnecessary object creation. It’s a really interesting talk and I encourage you to watch it (link below) but what I found most interesting was his first point about unnecessary DOM updates.

When trying to optimize performance of web apps, we can look for actions that are bottlenecks and try to minimize the amount of times the application performs these actions. It turns out updating the DOM is a very time consuming operation. It is in fact so time consuming that React has a process called reconciliation that exists to try and avoid unnecessary updates.

Unfortunately as Ben shows in his talk — and as I will show in this post — there are still situations where reconciliation will not be able to help us. However we don’t need to lose hope because there are some simple tweaks we can make to address the issue.

The 🔑 to Lists

This is a really handy trick you can use to optimize the rendering of list items in React. Suppose you have a page that displays a list of items and is defined as follows:

When the button is clicked, it will add an item to the list. This will then trigger an update to the DOM to display our new item along with all the old items. If we look at the DOM inspector while clicking the button we see the following (orange indicates the node is updating):

See how all the list items are updated? If we think about this for a moment this doesn’t actually seem like an ideal update. Why can’t we just insert the new node without having to update all the other nodes? The reason for this has to do with how we are using the map function in the List component.

See how we are setting the key for each list item as the index? The problem here is that React uses the key to determine if the item has actually changed. Unfortunately since the insertion we are doing happens at the start of the list, the indexes of all items in the list are increased by one. This causes React to think there has been a change to all the nodes and so it updates them all.

To work around this we need to modify the map function to use the unique id of each item instead of the index in the array:

And now when we click the button we see that the new nodes are being added without updating the old ones:

So what’s the lesson?

Always use a unique key when creating lists in React (and the index is not considered unique)!

The Exception ✋

There can be situations where you do not have a truly unique id in your arrays. The ideal solution is to find some unique key which may be derived by combining some values in the object together. However in certain cases — like an array of strings — this cannot be possible or guaranteed. In these cases you must rely on the index to be the key.

So there you have it, a simple trick to optimize list rendering in React! 🎉🏎

If you liked this post be sure to follow this blog, follow me on twitter and my blog on dev.to.

P.S. Looking to contribute to an open source project? Come contribute to Saka, we could use the help! You can find the project here: https://github.com/lusakasa/saka

A Simple List Render Optimization For React 🏎 was originally published in Information & Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.