DEV Community: Sofwan Rafiee

Javascript

Sofwan Rafiee — Mon, 20 Feb 2023 02:22:43 +0000

Nowadays, having a basic understanding of JavaScript is becoming increasingly important. If you're looking to dive into any of the popular JS frameworks out there, such as ReactJS, you'll need a solid foundation in the language first. That said, JavaScript is a powerful tool, and before you can master it, you'll need to have a handle on HTML and CSS, as they're the building blocks that JS is used to manipulate.

When you really know JS, you'll be able to write code that does exactly what you want it to do, rather than relying on copy-pasting and feeling like a bit of a fraud. It's also really cool that you can use JSON data from the backend of your website (be it Laravel, NextJS, Django, JSP, or something else) and stay in the JS environment. These days, it's just not relevant to embed HTML in PHP/ASP/JSP or PHP/Blade - there's a clear separation between front-end and back-end.

Let's take a simple example: in the past, you might have used PHP to generate HTML, right? Now, you're better off using JavaScript to generate the HTML and PHP to supply the data in JSON form. This might mean learning how to change PHP into an API server and working with headers and curl or Postman. But don't worry, over time it will become much easier once you get the hang of the ecosystem.

If you're feeling confident in your JS skills, why not try using it to become a server (instead of PHP)? Check out the NextJS tutorial and see where it takes you!

On a different note, my favorite simulator game is SDK in Python because I'm really into telemetry data, so I had to go back to Python. But that's just me - it's important to find the tools and technologies that work best for you.

As for me, I started learning JS during the jQuery era. It was easy to manipulate the DOM and the code was very expressive. After a few years of using jQuery, I decided to try ReactJS, and now I'm using 100% JS for front-end development.

If you're thinking of taking on a project that involves using Laravel with ReactJS, I recommend separating your folders so you're not using the built-in version. Just install Sanctum and connect to ReactJS using tokens from there. I'm also working on a project that uses Python Flask and ReactJS, and I'm currently chatting with ChatGPT about the architecture.

A few tips to keep in mind: NGinx web server has a special plugin that can really boost loading times (just enable gzip and find the right settings), and personally, I'm still loyal to MySQL when it comes to databases.

All in all, I believe that mastering JavaScript is a lot like learning English as a second language - it takes time and effort, but it's well worth it in the end. Happy coding!

(credit - Azri Nazli Alias)

Building a career as a Web Developer in Malaysia

Sofwan Rafiee — Fri, 10 Feb 2023 04:01:46 +0000

First of all, the company hires you because of the skills you list. HR/Agent job seekers will use the keywords you list.
For example you list HTML, CSS and Javascript. On the part of the company they assume you have at least a year in the experience.
Able to write HTML code for the form, understand CSS and be able to write custom CSS code as desired and most importantly able to write Javascript code to manipulate the form, extract data from JSON or send data using JSON.

But the fact is that many people use the help of editors like DreamWeaver, use ready-made Themes from ThemeForest and claim to be good at HTML, CSS and Javascript. And when employees like this are brought in, and know the real work environment that requires the necessary skills, they become panicked and stressed. The company has made a project timeline and in the end the whole team has to slow down because programmers need time to relearn HTML, CSS and Javascript.Not yet asking for PHP, .NET or Python skills.

In university or college, you are certainly taught the SDLC cycle and problem solving skills. These 2 things are the most important to get into the world of work. Chances are you will be taught the basics of C or JAVA. The programming language you learn does not have to be relevant to the language used at work. If you are able to master the basics of JAVA, of course you can go to C#, PHP, Python, GO and dozens of other languages, because the basics remain the same.

But problem solving skills are the most important, for example you are assigned to investigate why the e commerce system using WP + Woo Commerce fails to work after 100 people come at once. You have to find the cause and also the solution. Whose work scope is this? SA coat. Imagine you are applying for a job as an SA but have never done programming and system design, isn't it supposed to be?
Choosing to become a developer, you must have an interest in developing and have a sense of curiosity.

For example you find the code $user->save($request), suddenly when execute, all the data is saved in the database. You try to sleep, but your brain is like a storm of thoughts, so you suddenly wake up at 3AM, looking for an answer to the question. Ohh apparently the code is an abstraction layer to the SQL code that you have used before. That's why before becoming a Laravel developer, you have to go through the basic ways to build an application, then you will understand that Laravel only makes it easier to work in groups.

So you choose to become a web-based application developer, you have to know how data flows using the http protocol. How to press submit on the html form to allow the data to fly to the receiving server and if using ssl, what kind of encryption is used.
Attitude is also important when becoming a developer, when I was a junior in Singapore, the lead dev said PHP sucks big ass and JAVA is everything. So you have to learn JSP outside of work hours, fortunately you are still using the SQL statement you are used to and still bound to the HTTP request GET and POST protocol. It's been almost 2 years since I made an application for a bank in Thailand.

So how do we market ourselves so that we are comfortable working with confidence and the employer is happy?

Stay updates with the recent technologies

If you want to make a frontend, you don't just design in Photoshop and cut HTML and claim to be Front-End.
Nowadays, the basic expectation of FE is

HTML5
CSS3
Javascript Then create a sample app without using the framework to create a demo
HTML forms
custom CSS
Javascript validation & error display After that only extend to
CSS framework (BS5)
JS framework (JQuery, ReactJS)
REST-API
JSON

So you say I use JSON to communicate with Backend developers. This is where the interviewer will be impressed.
The backend doesn't matter if you want to use a PHP, JAVA, Ruby, GO or Python stack, promise data in JSON and use REST-API
If you practice everything from the basics, it's easy to troubleshoot and easy to solve problems.

Say you are comfortable with JQuery, maintain with JQuery as long as you can. From the beginning you may Copy Paste other people's code. After a long time, you may want to standardize your libraries, and will start writing your own code while versioning on github. After years of using JQuery to manipulate data, you might want to use Angular or ReactJS. Once you check on LinkedIn, there are many demand ReactJS developers, so from there you will learn to use React.jS as well. That's called career progression, becoming a champion in one language from learning all languages. I mean, become a specialist instead of being a jack of all trades.

My technique if I make a system?

separate FE and BE
FE and BE talk using REST - API
When using REST APi, BE can be in the form of stacks from various types of programming languages (so you can upgrade BE and maintain FE)
try to microservice every app, it will be modular. For example standalone service for web scaper, video encoding, pdfToHtml, reporting, authentication

So, the scope of being a web developer in Malaysia will usually use the following stacks

PHP / MySQL
Laravel / MySQL
Any PHL Framework / MySQL

Follow my experience, usually the company will get a job to continue the maintenance of the prev developer system and usually it is in the form of legacy. Often the original programmer is a one man show and does not use a framework. Documentation is usually for users, but system flow is usually rarely available.
The skills you need to have is to reverse engineer the legacy system, usually we will look at the database design, and from there you can understand.

If the prev developer uses the framework it is already a bonus.
If it's a department website, it will usually use Joomla / WordPress which uses plugins to achieve requirements.
This means that if the department's website needs a certain form, the developer will buy a ready-made plugin instead of building it himself from scratch. Over time a system like this will become difficult to maintain due to dependency on 3rd party plugins.

Developers who are hired do not have career growth because their duties are as follows:

install WordPress
install Theme
install Plugins

Let's say he spends 2 years with the above, it's hard to move to the next job, because he depends on other people to develop the plugins he wants.
So, it's best that every web developer (frontend) should have basic HTML, CSS and Javascript skills first, especially the skills to write Javascript to manipulate HTML data and adapt it to UI/UX requirements.

I once took over a project built by a developer from Indonesia. He uses the Laravel + JQuery stack. I like to see his JQuery code broken up into small task tasks, instead of 1 long code. The code will be encrypted using Mix.JS that comes with Laravel.
The HTML he wrote uses DOM id which is easy to understand and custom CSS classes separated from the original CSS theme.

So for me to understand his code is quite easy and can continue his work. I respect the JQuery part, because it is easy to read, even though no comments are included, but the code is quite expressive.

The Laravel coding used also follows the standards set by Laravel, complete with README.md for install & configure guides on the production server.

Come on, I'll give you a task and put it on your Github.

Build a login system where the backend is at http://backend.local and the frontend is at http://frontend.local. Use NGINX web server with different subdomain.
Build a CRUD in the backend to manage users and encrypted passwords
The backend will receive a POST request in the form of JSON to authenticate, for example $username and $password
If authenticated, the backend will generate a token with an expiry date to be sent to the frontend
Build a frontend to authenticate the user, there is an email and password field
Use javascript to validate the email format, if there is an error, display the error
Use javascript to send a POST request to the backend in JSON form
If authenticated by backend, redirect user to dashboard (protected page)
The question is, how do you make sure that only authenticated users can browse the protected page with javascript and tokens provided by the backend? Will you send the token value every time a page request is made?
Put your code in github

credit: Azri Nazli Alias (my mentor)

My experience on custom code WordPress

Sofwan Rafiee — Wed, 25 Jan 2023 07:17:25 +0000

WordPress is a powerful and flexible content management system that has been around for over a decade. As a WordPress expert with over a year of experience developing and designing with this platform, I can confidently say that it is an excellent choice for creating websites of all types.

One of the major advantages of using WordPress is its ease of use. The platform's intuitive interface and user-friendly design makes it easy for users of all skill levels to create, edit and manage their websites. With a vast library of pre-designed templates and themes, it's easy to create a professional-looking website without any prior design experience.

Another great thing about WordPress is its scalability. It can be used to create small blogs and personal websites, as well as large e-commerce sites and enterprise-level applications. The platform's wide range of plugins and extensions allow users to add new functionality to their sites with ease.

WordPress is also open source, which means that it is free to use and customize. This also makes it a great choice for developers, as they have access to the core code and can make customizations and add features as needed. The platform is also well-documented, making it easy for developers to find the information they need to get started.

In addition to its ease of use, scalability and open source nature, WordPress is also known for its security. The platform is regularly updated to address any known vulnerabilities, and the community is quick to respond to any security issues that arise. With regular updates and security plugins, users can rest assured that their website is safe and secure.

In conclusion, WordPress is a powerful, flexible and user-friendly content management system that is suitable for websites of all types. The platform's ease of use, scalability, open source nature, and security make it an excellent choice for both developers and users alike. With over a year of experience developing and designing with WordPress, I can say with confidence that it is one of the best choices for creating a website.