DEV Community: Surya Wiguna

Now I'm blogging on my on website!

Surya Wiguna — Wed, 01 Feb 2023 05:15:20 +0000

Hi everyone that read this post, previously I said that I move to Wordpress for share more topics other than programming stuff. But now, I decided to build my blog on my own website. So, you can read all my writings here. Thank you!

I'm moving to wordpress, here's why

Surya Wiguna — Fri, 04 Jun 2021 08:20:37 +0000

For a while, I've write posts here. I share my work and programming stuff with you. But sometimes I feel wanna share other topics that not suitable to share here in dev.to. So I decided to move my blog to wordpress. Read more abot this movement on my post : http://blog.suryawiguna.com/2021/05/26/why-i-move-my-blog-from-dev-to-to-wordpress/

What it is like to work as a software quality assurance?

Surya Wiguna — Fri, 23 Apr 2021 12:58:32 +0000

I've been working as a software quality assurance in igloocompany, a smart lock company, for more than 1 year now. I was not really familiar of the title before but I interested in the ecosystem of the smart locks.

What is software quality assurance?

A software quality assurance or QA mostly make sure all the softwares that developed by the developers are working fine and the costumers as the end users not facing any bug. In igloocompany, they've build many software such as igloohome mobile app, iglooworks mobile app and dashboard, etc (coming soon project).

What is software QA doing?

My flow when working as a software QA is if there's a new feature -> the developers will build it until it ready to test -> the QAs test it -> if found a bug, report it -> until there's no bugs left -> the features release. In short like that, but the interesting part is, when I'm testing the app for example, I also got my hand to test the various type of smart locks from a padlock until locks that installed on the door (mortise, deadbolt, etc). So, I can learn how it works, what the technology that they used to make anything posibble to happen, what's next in the future to improve everything (user experience, battery consumption, seamless integrity, etc).

The skills that needed as a software QA are attention to detail, understand about tech, time management, curiosity. We learn how to manage task, how to find a hidden bugs that may missed by the developers when they build the app because their focus is to make the feature, our focus as QA is to find bugs until we find none and test a new feature before it release.

In almost 5 years I involve in the tech industry from when I was in college until now, I think the Quality Assurance position is a new one. The fast growing of the tech world maybe become one of the reason that position was born. Are you working as a software QA too? If so, lets tell your experience here.

My learning experience with ExpressJS and Mongoose

Surya Wiguna — Wed, 24 Mar 2021 05:02:21 +0000

The Opportunity

Last year, I got an offer to join my friend in a company as backend developer. This position actually interesting yet challenging for me because they combine Laravel and JavaScript as the backend logic (ExpressJS and Mongoose). As I never develop production service using JavaScript, I challenge myself to accept the offer and commit to learn the framework.

Learning Process

Best learning method in programming is by doing. By building app or website or service that actually used by real user, so we can learn what the real challenge is. While I learn JS framework for building service that used by web app and mobile app, it demand fast learning and commitment to stay updated with the latest best practice code to prevent the server from loading too slow.

I learned ExpressJS and Mongoose from read the legacy code while trying to understand the logic, check the official documentation, and if I struggle to find what I need, go to Stack overflow of course. One thing I realized after using two different language in my career until now (PHP & JavaScript), is that the logics are fundamentally the same (loop, if else, try catch, etc) but indeed JS offer something like Promise() that make writing code is more fun.

Mongoose vs SQL

I know mongoose because of this, and it's mind blowing to handle data. The simplicity of its query make it more fun to query the data. For example if you want to find data in the collection, you simply call :

User.findOne({ email: "my@email.com" })

From that code you can save it to a variable or attach a .then() like this:

User.findOne({ email: "my@email.com" })
.then((user) => {
  console.log(user)
})

That's basically it to find user with email my@email.com. I think I love mongodb and mongoose.

Okay that's my experience learning new language and framework as a backend developer in a new company. Thanks for reading and how do you think of learning by doing in work? Let me know

HTTP Request Simply Explained

Surya Wiguna — Thu, 18 Feb 2021 08:19:45 +0000

Everybody using internet almost everyday for every purpose for getting, sending, updating, or deleting information. All of that actions used in HTTP, and here they are:

GET

GET method is used for getting information, such as your friend number, all products that ready stock, the shoes that are in black color, etc. This method usually known as Read/Retrieve in CRUD.

POST

POST method is usually used for sending information. For example saving your new account information, posting image to instagram, tweeting, etc. POST is represent Create in CRUD.

PUT/PATCH

PUT and PATCH are for Updating the informations that are already stored before. For example when you change your username, you photo, editing your caption, etc. The difference between them is, PUT updates the entire resource while PATCH applies a partial update to the resource.

DELETE

You guest it, DELETE just like its name is for delete the information, apart from what technique was use for deleting a resource whether its hard delete or soft delete.

That's all, hope you will understand more about how internet protocols worked. Thanks for reading!

My way to handle money format input in Laravel

Surya Wiguna — Sun, 15 Nov 2020 09:01:06 +0000

Common usage of website is to handle data about finance, which is the most data is money and it has a format. In Indonesia for example the format is like Rp1.500.000,00. The problem is with default HTML input, it can't show format like that by default. So how to handle it? At least here's my may to do that in Laravel based website.

Database side

It has to handle in three side, the first in inside the database where you want to store the data. On sql there is decimal type that you can use to store number with commas. So in the migration you can simply use

$table->decimal('amount', 8, 2);

8 is the total digits and 2 is decimal digits. Refer to the official documentation.

HTML side

So after we set database column to proper type, next we need to set the html input to prevent unwanted data that user accidentally input. In html there is

<input type="number">

to handle number input. You can use attribute step to define decimal digit right on the input. There're other additional attributes that you can use to, find more here

Laravel Blade side

Lastly, when you want to show the data to the user. Data format from database usually will look like this 1500000.00 and you want to show it like this 1.500.000,00. To do this you can use php number_format() function inside the blade.

number_format($data, 2, ',', '.');

The first parameter is your number, next is how many decimal digit you want to show, the third is decimal separator, and the last is thousand separator. Read more in PHP manual

Those are my way to handle money data, thanks for reading this and if you want to say something leave it in discussion.

You can do these on Figma to work faster

Surya Wiguna — Sun, 20 Sep 2020 13:11:36 +0000

Figma became popular these days to design a web/mobile user interface. That's because Figma gives you more modern and reliable approach when come to performance, cloud storage, and collaboration. Now I wanna share with you how you can improve your designing process to work faster with Figma.

Create a component

Let say you need to make 50 buttons that has special style (color, border, corner, etc) on your design, and you make it all manually. That will slow your designing process just to make a bunch of similar looking button! What if you can make one button, style it, save it with its style, and you can reuse that? That's called component. In figma, you can easily make a component by right click one the object:

and then you can find your components in the Assets on the left sidebar. To use your component you can simply drag and drop from the sidebar to your canvas. One thing that useful about component is if you want to change all the buttons you just need to change the master component.

Adjust objects using smart selection

Smart selection is a thing. It helps you to adjust spacing and arrangement objects faster. Especially when you using a grid view on your design. Select all objects, and you can see pink mark, next you can just drag one object to another to rearrange them and click and slide on the space between objects to adjust their spacing. For more info you can refer to their blog post here

Save your colors

Choosing color is another challenge when designing an user interface. Usually on design we'll need to define colors for primary color, secondary color, color for headline text, etc. On figma you can save your color styles, here's how:

Click your object first
On the right sidebar at Fill section, change the color as your desire
Click the four dots
Click plus sign
It will bring up "Create new color style" modal and you can name your style
Click create style

Your new color style is saved, you can use it by choosing Local Colors on below the color picker.

There are some things you can do to work faster with Figma. If you know other tips just drop it on comments, thank you for reading :)

DataTables tips using Laravel

Surya Wiguna — Sun, 06 Sep 2020 05:13:44 +0000

Datatable is a useful plugin for displaying data to table in more advance way. It provide search, filter, pagination, and sorting from the beginning you use it. But you usually don't need all of the feature, or want to display button in the table, etc. Now I wanna share some tips in using datatable with Laravel.

Add button inside datatable

When displaying data in a row, usually in the last column we want to add button for user to take action with the data e.g. button edit, and delete. But datatable not natively render html tag, so we need to use addColumn() and rawColumns() like this in controller:

$data = DataTables::of($data)->addColumn('action', function($row) {
   return "<a href='/user/edit/1' class='btn btn-sm btn-success'>Edit</a><a href='/user/destroy/1' class='btn btn-sm btn-danger btn-delete'></i>Hapus</a>";
})->rawColumns(['action']);

Load table on click

This case is usually when you have multiple datatable in one page and you organize it in tab view, you want to load data only when related tab is click. You can reload the table by using reload() function to do that.

$('#clickable_id').click(function() {
  $('#table').DataTable().ajax.reload();
});

Disable Sorting and searching individual column

Datatable provide many feature to make a more useful table like searching, pagination, sorting, etc. But when you don't want particular column searchable or sortable, you can disable it.

columns: [
   { data: 'name', searchable: false, orderable: false },
]

That are some tips to use datatable with Laravel. Thank you for reading, if you have any more tips or question please drop it on discussion section.

CSS position fixed vs sticky

Surya Wiguna — Sat, 29 Aug 2020 12:46:56 +0000

CSS position: fixed helped me a lot when I want to make an element inside a web to stay when user scrolling the page. But in some cases, maybe I want that element still scroll along like others but can stay in place when I want it to stay. That's position: sticky will helpful.

What's the difference?

The position: fixed mean fixed to the viewport. We tell it where to position itself (top, bottom, right, or left) and it will stay there when user scrolling.

Meanwhile, when using position: sticky it won't affect until we define offset, like top: 10px. So the element will scroll like others until it reaches the offset and then stay on its position. And it stay within its parent, once the parent scroll off the page it leaves with it.

To see it in action, you can check on my codepen

Which should I use?

It depends, when you want that element simply doesnt move in your website then use fixed. But be careful with position: fixed, it can potentially cover other element.

When you want that element scrolling into view and then stop at certain point, use sticky. Keep in mind, when its parent scrolls off page, it gone with its parent.

Using Netlify to host a static website

Surya Wiguna — Sun, 09 Aug 2020 12:37:51 +0000

When you created a static website, whether it's a project with client or just for portfolio, you usually want to make it online. One of modern hosting especially for a static website is Netlify. Netlify is nice to hosting from a very simple web, or generated website using Gatsby or Gridsome, and it's free to get started. There are very simple steps to host your website to Netlify.

1. Sign Up

You can sign up with your GitHub, GitLab, or Bitbucket account to easily connect your repository later.

2. Select Git provider

After you sign up, you can start to deploy your website. First select the git provider where you put your website project. Select one and authorized Netlify to access your repository list. I personally use GitLab.

3. Select Repository

Now after you authorized Netlify to your git provider, all your repository will showed up. Select which repository that you want to deploy.

4. Setting the build option

You can choose which branch that will deployed to the hosting, so it's not always have to master branch.

If you deploying a generated site with such as Gridsome, you need to add gridsome build in Build Command, and dist in Publish directory to automatically start building the website right after you push to the branch that you choose to deploy before.

And that's it! Now your website is published and can access via internet with yourwebiste.netlify.app domain. You can use your custom domain by setting the DNS configuration. Read the official documentation to know more how to do that. From now, when ever you want to make a change to your website, just push your change to the branch that you choose and Netlify will build the change for you. Thank you for reading :)

My favorite Laravel's Blade Tricks

Surya Wiguna — Sun, 02 Aug 2020 06:04:09 +0000

Beside the ability to make inheritance template using @extends, @section, and @yield, Laravel also let us to write html with any condition that we desire according to our application. Here are some of my favorite Laravel's blade trick to make the development process faster and easier.

@if

This directive is useful when we're trying to display data in view on various condition. We can use as many as @elseif that we need in Laravel's view, but keep in mind of your website performance.

@if (count($data) === 1)
    <p>You only have one data</p>
@elseif (count($data) > 1)
    <p>You have more than one data</p>
@else
    <p>You don't have any data</p>
@endif

@auth and @guest

We can use @auth and @guest usually to check either the user is authenticated or not to display the appropriate button, for example to display button Login for unauthenticated user and button Logout for the authenticated user.

@auth
    <button>Logout</button>
@endauth

@guest
    <button>Login</button>
@endguest

@for

If we want to do a simple loop in Laravel's blade, we can use @for just like PHP's loop structures.

@for ($i = 0; $i <= 10; $i++)
    The current order is {{$i}}
@endfor

@ foreach

When we display a list of data in the view, we can use @ foreach to loop through the variable to get each value.

@foreach ($users as $user)
    <tr>
      <td>{{$user->name}}</td>
      <td>{{$user->email}}</td>
    </tr>
@endforeach

@forelse

This directive is use to handle if the variable that we pass is empty to let the user know that there is no data to show.

@forelse ($users as $user)
    <tr>
      <td>{{$user->name}}</td>
      <td>{{$user->email}}</td>
    </tr>
@empty
    <tr colspan="2">
      <td>There is no user</td>
    </tr>
@endforelse

$loop

When we do a loop, variable $loop will be available inside the loop. This variable provide many useful information, my favorite one is $loop->iteration to generate serial row number in table.

@foreach ($users as $user)
   <tr>
      <td>{{$loop->iteration}}</td>
      <td>{{$user->name}}</td>
   </tr>
@endforeach

For the list of available properties, you can check Laravel's documentation

@csrf

Anytime we use a form in Laravel, we need to include CSRF token field in the form for security purpose. We may use @csrf directive to generate it.

<form method="POST" action="/user">
    @csrf

    ...
</form>

@method

In Laravel we can use PUT, PATCH, or DELETE request. But html form not support that method, so we need to add hidden _method field. We can use @method to create that.

<form action="/user" method="POST">
    @method('PUT')

    ...
</form>

@ error

We need to provide error handling in every request that user make, especially when submitting a form. We can use @ error to make a place in our view to display error message to the user.

@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

That are some of the trick that I like to use when developing using Laravel. What's your favorite tricks? Let me know in the comment section, and I planned to make more article about Laravel like this. Thank you for reading!

Tools that I usually used as a Web Developer

Surya Wiguna — Tue, 14 Jul 2020 05:34:04 +0000

For almost 2 years I have doing web developing as a job from designing landing page until write API for laravel-based web application in windows machine. Now I like to share my everyday tools for web developing that I usually used.

Visual Studio Code

In my opinion, VS Code is the best text editor for developer. Before I use VS Code, I tried Sublime Text for long enough time, also Atom, and nothing bring experience like VS Code brought to me. It's free, easy to use and customize, has a lot of plugins, and not so heavy to run in middle-low specs machine.

Git

Git is a must in software development today. Git allows you to handle the changes of your code easily. This makes collaboration even easier and faster, different developer can develop each feature separately on their own local machine and then merge to master to make the feature live and ready to use by the end user.

Chrome

Chrome is most-used browser right now, and it's because Chrome is so good. Except from it's battery and memory draining. Debugging web application in Chrome is a joy and support from a lot of extension that available for developers make it the browser that I use everyday.

Laragon

As said in their website, Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Phyton, Java, Go, Ruby. I primarily develop a PHP web application and before I use Laragon, I use XAMPP for enough time. When I tried Laragon, it gives me more joy. I Like use Laragon because:

lightweight
pretty url (custom local domain, .test, .local, etc)
portable
easy to use
quick app (one click to make Wordpress CMS, etc)

Command Line

Every time I finish working on a feature, I pushed it to git via command line. I usually use Git Bash instead of native Windows Command Line.

That's all some development tools that I use as a web developer. Let me now what yours or other tools that you recommend, thank you.