DEV Community: songthamtung

ProductHunt First Launch!

songthamtung — Tue, 28 Apr 2020 07:03:52 +0000

Disclaimer: There are no ads, no sign-ups, no pop-ups, no watermarks, no installs, no email newsletter, and everything is open-sourced and hosted on my GitHub.

Hi Everyone,

I just launched my first product on ProductHunt today and I'm really excited to share this news with the Dev community!

In a nutshell -- Prioritize is a tool that helps you create, visualize, and arrange tasks on a drag and drop interface with different priority boards.

https://www.producthunt.com/posts/prioritize

I'd love to hear your feedback!

Cheers,
Songtham

5 Copy and Pasting Tips that Every Developer Should Know

songthamtung — Mon, 07 Oct 2019 13:52:26 +0000

Work Smarter, Not Harder.

If I knew about these coding tricks earlier in my career, it would have saved me sooo much time. Here are 5 advanced copy and pasting tips that you can use to work smarter and more efficiently.

You can follow along with the sample dataset below, or better yet, try it with your own data. FYI— I’m using Mac and Visual Studio Code, but feel free to use other OS and text editors.

Sample dataset

1. Vertical selection

My objective is to add the <li> tag in front of every row. Instead of doing it the old fashion way of copy and pasting multiple times, I do it once with the help of vertical selection.

Vertical Selection Example

hold shift + option + cmd + arrow direction

2. Adding value to the start of every row

Another way to add value to the start of every row is by using regex (.*). This is built into most text editors and can be found in the find feature.

Regex or regular expression is a sequence of characters that define a search pattern.

Use regex to add value at the beginning of each row

1. Open Find and Replace
2. Enable regex .*
3. Enter ^ in Find
4. Enter value in replace
5. Execute

3. Adding value to the end of every row

What if I want to add the closing tag at the end of every row? To do so, I would also use regex, but with a different search pattern.

Use regex to add value at the end of each row

1. Open Find and Replace
2. Enable regex .*
3. Enter $ in Find
4. Enter value in replace
5. Execute

4. Shifting rows without highlighting and dragging

What happens if I want to quickly rearrange my data? Again, I can use the traditional cut and paste or highlighting and dragging with the mouse... but there is a faster way.

Quickly rearrange your rows

hold option + arrow direction

5. Copy and pasting without copy and pasting

This last tip is one of my favorites. Instead of copy and pasting and entering new lines in between, I can quickly duplicate the values with a simple shortcut key.

Quickly duplicate your lines

hold shift + option + arrow direction

Wrapping up

Copy and pasting stuff is great. Regex and advanced keyboard shortcuts takes it to another level. Have another tip for coders to increase productivity? Leave a comment below.

Remember folks: work smarter, not harder.

Thanks for reading! Originally posted on The Startup.

Why Technical Debt is not Bad Debt

songthamtung — Thu, 03 Oct 2019 03:16:06 +0000

Release early, release often - just don't forget to refactor ;)

Deliver Now

As software engineers, our main objective is to deliver. Once our code works as expected, we commit it and then run it in the CI/CD pipeline.

While seemingly straightforward, it’s not as simple as it may seem. There exists a constant tension in the programming world that stems from shipping fast or slow at the cost of software maintainability aka technical debt.

Technical debt is opting for the easy solution now instead of using a better approach that would take longer. More often than not, many agile teams choose the former than the later.

Deliver now and fix it later is a very popular approach because teams are able to reduce the time it takes to get product-to-market. It’s also great because software engineers don’t have to spend too much time developing something that might be used. For many companies, it’s a fair trade off. Nevertheless, in order to make this approach work, continuous refactoring must be done — else technical debt will accumulate.

The bigger the technical debt, the harder it is to add features.

Fix it Later

“Fixing it later” is synonymous with code refactoring.

Code refactoring is the process of clarifying and simplifying the design of existing code, without changing its behavior.

From the business and end user perspective, this doesn’t affect them because the product doesn’t change. However, from the developers’ perspective, refactoring reduces technical debt and increases software stability.

This makes a huge difference in larger projects.

Code is Read More Often than it is Written

There are a variety of scenarios when one should refactor.

The following is a general list of things to look for when identifying code that could use some refactoring:

Copy & paste (duplicate) code
Ambiguous variable names
Unused variables / methods / classes
Suboptimal performance
Your method’s code is longer than your screen
Violation of DRY, KISS, YAGNI, SOLID and other software engineering principles

Feel free to suggest any other scenarios in the comments.

Example of Refactoring

In this section, I will show a simple example of javascript code pre and post refactoring.

Pre Refactoring

Post Refactoring

Code Review

Results: both example produces the same outcome, which is to unset the users rank.
Visually: Pre-refactoring has a lot more code than post-refactoring.
Performance: Pre-refactoring makes up to 10000 roundtrips to the database, while post-refactoring makes 1 roundtrip to the database.

Imagine if more developers joined this project and stumbled upon this code. Do you think it would be easier for them to understand and contribute to pre or post refactoring?

Conclusion

Just as the author would improve their writing to make it easier for the readers to understand, developers should also improve their code to make it easier for other developers to understand.

My advice to those in a team where you’re constantly cranking out new features, consider setting aside a sprint or two for stability. Write some unit tests to increase your code coverage and refactor some code to make your apps more robust. I know it might seem like it’ll slow down development time, but it’ll actually increase your team’s efficiency and output in the long run.

Thanks for reading! Originally posted on Santora Nakama.

Stop Console.Logging! This is How to Use Chrome to Debug JavaScript

songthamtung — Thu, 03 Oct 2019 03:15:56 +0000

If you console.log() when you debug, you’re doing it wrong. There’s an easier way and it’s right in the palm of your browser.

Sound familiar?

Javascript is the most popular programming language according to StackOverflow’s 2019 survey. If you develop with Javascript, you’ve most likely came across a situation where you had to fix a bug or two.

“No problem!” you say to your rubber ducky, let’s reproduce the bug and fix it with console.log(). Now, what if I told you that this is not the best practice?

At the end of this article, I included a TL;DR summary.

Console logging works, but there’s a better way.

Instead of console.logging and restarting every time you want to debug, you can instead use Chrome DevTools (right click + inspect).

Perhaps you’re already using it to view and modify HTML/CSS elements, monitor console logs, and measure network performance. But did you know that Chrome has a powerful built in debugging feature where you can:

view source code
set breakpoints
step into, step over, and step out

The rest of the article is a step by step guide on how to use Chrome’s debugging feature with Angular — but feel free to follow along with your existing projects on any javascript frontend framework.

Setting up your environment.

NOTE: If you already have an existing project, skip to the next section.

In this section, we will quickly set up an Angular app using their official guide.

Prerequisites
Node.js version 10.9.0 or later.

Step 1. Install Angular CLI
npm install -g @angular/cli

Step 2: Create a workspace and initial application
ng new my-app

Step 3: Run the application
cd my-app ng serve --open

This will open your browser to the url localhost:4200
Angular v8.2

Create the bug 🐛

For the purposes of this demonstration, let’s create a bug and then debug it ;).

Open your favorite text editor and navigate to src/app/app.component.ts
Replace the lines with the following and save.

Look at the browser again and you should see a bug!

[object Object] is simply the default return value when converting a POJO (plain old javascript object) to a string. This is not a desired outcome — so let’s fix it!

Debug Mode 🔴

1. Inspect the sources

Using Chrome, right click > inspect > sources > cmd + p > search file

If done correctly, this will take you to the source code, where the bug lurks.

2. Set breakpoints
Setting breakpoints is vital to debugging effectively. A breakpoint is an intentional pause in a program, which allows the developer to inspect the internal state of the application at that moment. You can use it to view variables and perform other debugging functions.

A breakpoint is an intentional pause in a program, which allows the developer to inspect the internal state of the application at that moment.

To set a breakpoint, click the line number where you want the program to pause. In the example below, we set it at line 9.

Refresh the browser and you should see “Paused in debugger”.

Hover your mouse over the variable author— it should be undefined. The reason that it’s undefined is because the program hasn’t reached this line yet. It finished executing line 8 and is about to reach line 9.

Press ▶️ to continue execution.

3. Step into, step over, and step out.
These basic 3 steps is the bread and butter for debugging.

Step into is when the debugger steps into or inside a function
Step over is when the debugger steps to the next line
Step out is when the debugger steps outside the current function

Step in, step over, and step across in action

Refresh the browser again and once the debugger pauses at your breakpoint, step into the function using the panel on the right hand side. This will take you to the function getAuthor(). Hover your mouse over obj and you will see undefined since we haven’t actually executed it yet. Step over to execute the line and hover your mouse over obj again. This time, you should see a POJO. Step out to return to the caller and now this time author is no longer undefined.

Great — so we now know that author object has value. How do we fix it?

4. Fix the bug
Replace line 10 with the following and save.
title =my-app by ${this.author.name};

5. Deactivate breakpoints

Click Deactivate breakpoints. It changes blue to indicate that it’s active. While this is set, DevTools ignores any breakpoints you’ve set.
Refresh the page.

Fixed!

Closing

Congratulations! You now know how to use Chrome DevTools to debug efficiently. While console.log() does have a place in programming, it’s limited to modifying the source code, restarting the program, and nonstop execution. Chrome’s built in debugging tool addresses these disadvantages and offers you the ability to stop, inspect, and investigate what’s happening in the program at the specific point in time.

TL;DR

Open inspector, click the Sources tab, and CMD + P to view your source code and set breakpoints.

For more information, check out Google’s blog on this topic.

Thanks for reading! Originally published on Faun.

WTF is an API?

songthamtung — Thu, 03 Oct 2019 03:15:46 +0000

If you’re a working professional, you’ve probably heard your coworkers talk about APIs, Web Services, endpoints, and other weird words like 200 and 401. What the heck does it mean and what’s the difference between them?

What‘s an API?

An API, or application program interface, is something that enables different apps to communicate with each other. A Web Service is a type of API that communicates over the internet.

Generally, when apps communicate with each other, there is an exchange of request and response.

Request is asking for something
Response is the answer to a request

App A sends request to App B. App B sends response back to App A.

Similar to requesting for something in real life, you may not get the response that you would like or expect. Sometimes you’re successful, and sometimes you’re not.

An example of this would be Googling something. When you type something in the search engine and press enter, it performs an API request. Most of the time, Google returns a response back with millions of results, but sometimes it’s not able to find anything.

As we will see in the following section, there are specific phrases that modern day techies use when they talk about APIs. Now you too, can be in the know!

Requests

“Make / Fire an API call”: make a request.
“Make a GET request”: make a request to get data.
“Make a POST request”: make a request to create data.
“Make a PUT request”: make a request to update data.
“Endpoint”: the url e.g. (https://twitter.com/songthamtung).
“Hit the endpoint”: perform a request at the specified url.

Response

“200”: The HTTP response code for Success.
“301”: The HTTP response code for Redirect.
“400”: The HTTP response code for Bad Request.
“401”: The HTTP response code for Unauthorized.
“403": The HTTP response code for Forbidden.
“404”: The HTTP response code for Not Found.
“500”: The HTTP response code for Internal Server Error.
“504”: The HTTP response code for Timeout.

Authentication

“OAUTH”: a way for apps to grant permission with the use of tokens.
“Token”: a form of authentication, similar to username/password.
“Refresh the token”: tokens can and do expire. If you’re getting a 401, consider refreshing your API token.

General

“Do they have an API?”: does their app have a way for our app to communicate with?
“Open API”: available for public use.
“Closed API”: not available for public use.
“API limit”: some APIs have a limit on how many requests you can make within a certain period e.g. (1000 requests per day).
“CRUD”: Create, Read, Update, and Delete.
“Test it with Postman”: Postman is an awesome API development tool.
“Header”: explains the type of data being sent.
“Body”: the data being sent.
“GUID”: Globally Unique Identifier that is used for distinctive records e.g. (e20f5d52–5490–4523–87c5-af46dadfe7c1).
“JSON”: a type of data format characterized by {"key":"value"}
“XML”: a type of data format characterized by value
“REST(ful) API”: a type of API that uses REpresentational State Transfer constraints.
“SOAP API”: a type of API that uses Simple Object Access Protocol and is XML-based.
“GraphQL”: a query language for APIs.
“Check their documentation”: most APIs have a reference page about getting started, authentication, and methods that it supports.

Conclusion

Tech people love using technical words. This is not done to confuse or exclude outsiders, but rather, to quickly and effectively communicate ideas, problems, and solutions.

As with any languages, you can combine words to form meaningful sentences:

“Yes! The API response returned a 200!”
“Try creating a new user. Hit the user endpoint and make a POST request”

Hopefully you are now able to understand the two sentences above. The vernacular of those in the tech field can seem daunting at first, but with time and practice, it will start to become second nature.

If you have another way of communicating about APIs or you have any questions with examples above, just drop a comment below to let me know.

Thanks for reading! Originally published on A Cloud Guru.

How to Use AWS Textract with S3

songthamtung — Wed, 02 Oct 2019 15:33:52 +0000

This article demonstrates how to use AWS Textract to extract text from scanned documents in an S3 bucket.

This goes beyond Amazon’s documentation — where they only use examples involving one image. Included in this blog is a sample code snippet using AWS Python SDK Boto3 to help you quickly get started.

Definitions

Textract is a service that automatically extracts text and data from scanned documents.
Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

Code

Closing

Textract is an amazing OCR (optical character recognition) tool. It can save your team countless man hours by automating the tedious and error-prone task of manual data entry.

Thanks for reading! Originally posted on Hacker Noon.

How to Web Scrape with Python Using 9 Lines of Code

songthamtung — Wed, 02 Oct 2019 15:10:14 +0000

Scraping is extracting data from websites. In this article, I will show you how to scrape links from a test e-commerce site with Python 3.

Prerequisites

If you haven't done so already, install beautifulsoup4 and requests.

pip install beautifulsoup4 pip install requests

Start Scraping!

Here is the full snippet that you can copy and paste directly to your terminal, favorite text editor, or jupyter notebook.

To check if you did it correctly, the output for data should be something similar to:

{'MSI GL62VR 7RFX': '/test-sites/e-commerce/allinone/product/326', 'Dell Vostro 15…': '/test-sites/e-commerce/allinone/product/283', 'Dell Inspiron 17…': '/test-sites/e-commerce/allinone/product/296'}

That's it

Web scraping is great and can save you plenty of time when you want to quickly extract data from websites. The examples above are used for you to quickly get started. Of course there's more to it than what I showed above e.g. (crawling, pagination, viewing the DOM, authentication, cookies, etc). This is only the tip of the iceberg 😉.

Thanks for reading! Originally published on The Startup.