Forem: Alen Varazdinac

My first launch on Product Hunt

Alen Varazdinac — Thu, 06 Jun 2024 07:37:16 +0000

Hello Dev.to

After losing my job as a frontend developer on 1st of April I decided it is a perfect moment to start creating something on my own. Firstly I decided to offer coaching to other developers and after that web development services to businesses. Neither of those didnt go well, because I didn't really wanted to spend my time getting leads and then going on calls with those leads. What I wanted to do is to create applications that will be used by other people. But I was always intimitated to release on Product Hunt and to share my application everywhere because I am aware that a lot of other applications created are much better than mine. Until I stumbled upon videos of a SaaS maker Marc Lou, which motivated me to launch an application on Product Hunt no matter what. That was the perfect timing with my current unemployeed situation. And I got the app idea from Marc Lou, he is the one who shared the idea publicly on his Twitter/X account.

So here we go, I am more than happy to announce that my application Bento Highlights is currently launched on Product Hunt and it is waiting for your votes and feedback. (6.6.2024.)
Product Hunt Launch

Bento Highlights lets you showcase your milestones with style. Create beautiful visuals that reflect your brand's progress and engage your audience. Perfect for startups, businesses, and influencers aiming to fascinate their followers.

Application has a free plan so feel free to test it out.
Bento Highlights

If you are willing to spare some of your time to go and vote for my Product Hunt launch, thank you a lot, it means a world to me in my current situation.
If not, no harm, thank you for reading this.

Thank you,
Alen

Finally got Courage to Publish My First SaaS app (Feedback is Welcome)

Alen Varazdinac — Sat, 20 Jan 2024 18:30:28 +0000

I had a desire to create a SaaS application even before I started programming, that is one of the reasons why I ventured into the world of web development.

Through a whole journey, over these four years in the IT industry I thought I don't know enough to be able to build a SaaS application, especially not by myself. Which is true to some extent.

And as AI is becoming more popular from day to day, I took a chance and decided to create an app which would include some type of AI.

Being a frontend developer for the last 4 years meant I had to learn a lot of additional stuff if I wanted to make this app work.
I had to learn: backend stuff, Database, Docker, DNS, CI/CD on GCP, GCP Storage, Stripe API and webhooks. Also, a bunch of SEO and Marketing stuff which I am still figuring out.

To make things even harder on myself, VueJS is the frontend framework which I am using in daily work so it would make the most sense to choose VueJS for this job. So I did the right thing and chose NextJS with TypeScript.
NextJS because it is recommended on official ReactJs documentation for some reason idk. And TypeScript because I've wanted to learn it for quite some time.

The lesson I've learned after building this application is that this is the fastest way to learn new technologies, and probably the most fun way. I would for example never learn how to set up CI/CD on GCP if I just stayed on my frontend developer role in 9-5.

After all, I don't expect millions of dollars in revenue from this app but rather I see it as an app in which I learnt a bunch of new things and there's still things to figure out.

So finally, I present to you my first SaaS app for improving the quality of your photos using AI technology - ClearPixel.
It is a simple and straightforward process. You upload a photo, AI improves its quality and returns a new improved photo to you, which you are then able to download.

I am planning to expand the app with other AI models related to photos. But first I would like to see if I am able to bring at least 100 customers to the app as it is at the moment.

ClearPixel needs some improvements in design but I was too hyped and couldn't keep this any longer, I just wanted to share it with all of you. And I wanted to ship it fast and get some feedback on it.

Other than that, I am open to and would love to hear any type of feedback on this app, or if you find a bug or something. Please share it, I would love to hear it.

It would also mean the world to me if you could share this app to your friends or someone you know will need this app.

ClearPixel link - https://www.clearpixel.io/
Instagram link - alenvarazdinac

Thank you.

P.s. writing blog posts is also one thing I need to get better at :D

Should you go through frontend questions before job interview?

Alen Varazdinac — Sun, 16 Jul 2023 18:39:58 +0000

As you gear up for a frontend job interview, the importance of preparation cannot be overstated. One key element that can significantly elevate your chances of success is dedicating time to familiarize yourself with frontend interview questions. In this post, we'll explore how this simple yet effective practice can empower you, instill confidence, and position you as the top choice among candidates.

When you've prepared with frontend interview questions, you'll enter the interview room with a newfound sense of confidence. As you face technical challenges and coding exercises, your familiarity with common topics and concepts will allow you to respond with clarity and precision. Demonstrating your expertise and problem-solving skills will come naturally, impressing interviewers and cementing your position as a strong contender.
In today's competitive job market, standing out is crucial. Employers value candidates who show dedication and passion for their field. By investing time in preparation and going through frontend questions, you demonstrate your commitment to excellence in frontend development. Your proactive approach sets you apart from other applicants, making you a highly desirable prospect for potential employers.
Every company has its unique expectations for frontend developers. Preparing with frontend questions not only equips you with technical know-how but also provides insights into the specific technologies and frameworks the company utilizes. Armed with this knowledge, you can tailor your responses to align perfectly with the company's needs, highlighting your genuine interest in the role and organization.
It's natural to experience nervousness before a job interview, but preparation can significantly ease those nerves. By practicing with frontend questions, you'll feel more at ease and focused during the interview. With reduced stress, you can dedicate your energy to presenting your experiences, achievements, and potential with clarity and composure. Additionally, preparation prepares you to handle behavioral questions, allowing you to effectively showcase your soft skills, adaptability, and teamwork abilities.

In the competitive landscape of frontend job interviews, preparation is the key to unlocking your full potential. By dedicating time to familiarize yourself with frontend interview questions, you'll bolster your confidence, demonstrate your expertise, and gain a competitive edge over other candidates. Understanding the company's expectations and showcasing your genuine interest further strengthen your candidacy. As you walk into the interview room, prepared and empowered, you'll be well on your way to securing your dream frontend job. Embrace the power of preparation, and elevate your success in frontend job interviews to new heights.

If you are a frontend developer looking to apply for a dream job, make sure you download my FREE PDF of frontend common interview questions.
Link - https://15-questions-freebie.alenv.com/
Instagram profile - AlenVarazdinac

Wishing you confidence, success, and fulfilling frontend interviews!

Stand out in interviews: Tips for answering common questions

Alen Varazdinac — Mon, 30 Jan 2023 19:44:45 +0000

One common pain point for developers in interviews is feeling uncertain about how to answer common questions.
It's natural to feel nervous, but being unprepared can hold you back from landing your dream job.

To help you feel more confident and prepared, it's important to familiarize yourself with common interview questions and think about how you would answer them.
This can help you feel more at ease during the interview and show off your skills and experience.

It can also be helpful to practice answering these questions out loud, either on your own or with a friend or mentor.
This can help you get more comfortable with the process and identify any areas where you may need to improve.

Remember, the more prepared you are, the more confident and at ease you'll feel during your interview.
Don't let the fear of common questions hold you back - take the time to prepare and showcase your skills and experience to the best of your ability.

1. Tell a story
When answering questions about your skills and experiences, try to use stories and examples to illustrate your points. This will make you stand out and help the interviewer remember you.

2. Be specific
Provide specific examples of your achievements and experiences, rather than just making general statements.

3. Show your passion
Make sure that your passion for the industry and the job comes across in your answers. This will help you stand out as a candidate who truly cares about their work.

4. Ask thoughtful questions
Use the interview as an opportunity to ask thoughtful questions about the company and the role. This will show that you are interested and engaged in the process.

5. Be confident
Confidence is key in an interview. Speak clearly and make eye contact with the interviewer. Confidence will help you stand out and show that you are the right candidate for the job.

6. Research the company
Before the interview, research the company and the role to be better prepared. This will help you answer questions with more detail and show that you are genuinely interested in the job.

7. Be positive
Maintain a positive attitude and approach throughout the interview. This will show that you are a positive and enthusiastic candidate who is eager to join the team.

I have a FREE PDF with the common interview questions for frontend developers, which you can download here.

If you need further guidance feel free to DM me on Instagram at @alenvarazdinac.

Good luck!

Choose your next VS Code theme

Alen Varazdinac — Thu, 05 Aug 2021 12:31:02 +0000

Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment.

To install the new theme, press CTRL+SHIFT+X. Sidebar with extensions tab selected will open. You can type "theme" or specified theme name in the text input, select the one you like and install it. The theme will be applied automatically once installed.

To change installed themes, press CTRL+K and then CTRL+T. Popup window with your installed themes will be shown. If you iterate through results with Arrow up and Arrow down, you'll see themes apply automatically. If you're happy with what you are seeing press enter and theme will be applied.

Top 5 VS Code themes:

SynthWave '84
Material theme
One dark pro
One monokai
Shades of purple

Let me know down in the comments below, which VS Code theme is your favourite?

Also, if you would like to improve your VS Code skills, please follow this link.

Follow me on instagram.

Basic Git Commands Guide And FREE Cheat Sheet

Alen Varazdinac — Sat, 23 May 2020 19:04:52 +0000

Here you will learn some basic Git commands and in the end, I am providing you with a free cheat sheet that you can download and use when necessary.

GIT WORKFLOW

Git is the most widely used open-source version control system that allows you to track changes made to files. Companies and programmers usually use Git to collaborate on developing software and applications.

A Git project consists of three major sections: the working directory, the staging area, and the git directory.

The working directory is where you add, delete, and edit the files. Then, the changes are staged (indexed) in the staging area. After you commit your changes, the snapshot of the changes will be saved into the git directory.

BASIC GIT COMMANDS

Here are some basic git commands you need to know.

CONFIGURATION

Config - Used to set user-specific configuration values like email, username, file format, etc.

git config --global user.name [name]
git config --global user.email [email]

Config List - To check all of your configuration settings.

git config --list

CREATE

Init - Creates a new local git repository in the current directory.

git init

You can also create a repository within a new directory by specifying the project name.

git init [project-name]

Clone - Used to copy a repository from a remote server.

git clone username@host:/path/to/repository

STAGING FILES

Add - Used to add files to the staging area. You can add all files at once with the command shown below.

git add .

Or you can specify exact file names to add in the staging area.

git add [file-name-1] [file-name-2]

To remove files from the repository use the command below.

git add rm --cached [file-name]

Reset - To reset the file to the last commit's state use the following command.

git reset

Status - Displays the list of changed files together with the files that are yet to be staged or committed.

git status

COMMIT FILES

Commit - Creates a snapshot of the changes and save it to the git directory.

git commit -m "Write commit message here."

Reset - This command will reset the index and the working directory to the last git commit's state.

git reset --hard HEAD

Commit amend - Convenient way to modify the most recent commit.

git commit --amend -m "Commit message"

PULL & PUSH

Push - Used to send local commits to the master branch of the remote repository. Replace [master] with the branch where you want to push your changes when you're not intending to push to the master branch.

git push origin [master]

Pull - Merges all the changes present in the remote repository to the local working directory.

git pull

Remote - Connect local repository to a remote server.

git remote add origin [remote-url]

To delete a connection with the remote repository use command below.

git remote rm [repository-name]

BRANCHING

Branch - List all the present branches in the repository.

git branch

Or you can delete a branch with the next command.

git branch -d [branch-name]

Checkout - Creates branches and helps you to navigate between them. For example, the following basic command creates a new branch and automatically switches you to it.

git checkout -b [branch-name]

To switch branches use the command below.

git checkout [branch-name]

Merge - Used to merge a branch into the active one.

git merge [branch-name]

DOWNLOAD FREE CHEAT SHEET

INSTAGRAM

HTTP STATUS CODES CHEAT SHEET

Complete HTTP Status Codes Guide And Cheat Sheet

Alen Varazdinac — Fri, 08 May 2020 18:55:06 +0000

What Are HTTP Status Codes?

HTTP status codes are like short notes from a server. They’re not part of the site’s content. Instead, they’re messages from the server letting you know how things went when it received the request to view a certain page. HTTP status codes are returned in sets of numbers that explain what is happening during the transfer process between the client (or the browser) and the server.

These kinds of messages are returned every time your browser interacts with a server, even if you don’t see them. If you’re a website owner or developer, understanding HTTP status codes is critical. When they do show up, HTTP status codes are an invaluable tool for diagnosing and fixing website configuration errors.

Five HTTP Status Codes Classes

There are a few different classes of HTTP response status codes. They all inform a user whether a specific HTTP request has been completed. The five status code classes are:

1xx status codes: Informational codes indicating that the request initiated by the browser is continuing.

2xx status codes: Success codes returned when browser request was received, understood, and processed by the server.

3xx status codes: Redirection codes returned when a new resource has been substituted for the requested resource.

4xx status codes: Client error codes indicating that there was a problem with the request.

5xx status codes: Server error codes indicating that the request was accepted, but that an error on the server prevented the fulfillment of the request.

Within each of these core status codes, a variety of server codes exist and may be returned by the server. Each individual code has a specific and unique meaning.

List Of Common HTTP Status Codes

1xx Status Codes: Information Request

1xx HTTP status codes indicate that a server is processing information and hasn’t fully completed the request yet. Most 1xx status codes are not directly relevant to SEO situations.

100 – Continue: The client request is good and processing

101 – Switching Protocol: The client requested to change the type of protocol, and the server agreed.

102 – Processing: Processing is taking a longer time than normal.

2xx Status Codes: Success

2xx HTTP status codes show that a request has been completed and the transfer happened as planned. These codes aren’t incredibly relevant to SEO other than showing that things are working as they should.

200 – OK: The exchange between the client and the server is complete. Everything is set up properly and nothing should negatively impact SEO.

201 – Created: The client created something (such a new page) successfully on the server.

202 – Accepted: The client requested to create something on the server. It was accepted, but it has not been completed.

203 – Non-Authoritative Information: Information was transmitted, but it was not taken from the primary source.

204 – No Content: The request was received, but there was no data sent to the client.

205 – Reset Content: Similar to 204, the request was received and there was no data sent to the client, but the response also includes a request to update the content.

206 – Partial Content: Only a portion of the header content was sent to the client.

207 – Multi-Status: The server passed the results of several independent operations at once, which are placed in the body of the message as an XML document.

3xx Status Codes: Redirection

3xx HTTP status codes indicate that the client has requested information that is no longer at the provided address. These are often referred to as redirect codes and they are very relevant to marketers because they impact visitor experience and SEO performance.

300 – Multiple Choices: This shows that a resource has been moved and provides a list of available alternatives.

301 – Moved Permanently: The request for a resource (or URL) is permanently directed to another resource. You can set up a 301 redirect for a page that is no longer available.

302 – Found: This is similar to 301, but it is a temporary redirect rather than a permanent redirect.

303 – See Other: The requested resource is available on a URL that is different from the one requested.

304 – Not Modified: The client only requests the resource if it hasn’t been changed since the last document cache.

305 – Use Proxy: Access is only possible through the proxy specified in the response.

307 – Temporary Redirect: A 307 is more specific than a 302 redirect. The server doesn’t see the request and instead, the browser implements the redirect on its own.

4xx Status Codes: Client Error

4xx HTTP status codes indicate that a problem has occurred on the client-side. These errors show that there is a problem with the browser receiving information from the server.

400 – Bad Request: A syntax error is preventing the request from going through.

401 – Unauthorized: Authorization is required to access the requested resource.

403 – Forbidden: The user is trying to access a resource they can’t have access to.

404 – Not Found: The resource or URL no longer exists, and the server cannot return any information.

408 – Request Timeout: The transmission timeout by the relay server from the client has expired.

410 – Gone: A resource was previously located on the URL, but it is now gone or unavailable.

429 – Too Many Requests: The client is trying to send too many requests in a short amount of time.

5xx Status Codes: Server Error

5xx HTTP status codes indicate that something is wrong on the server-side of things. The client made a good request, but the server is unable to complete the transfer. When a server produces 5xx errors, it can harm SEO (as it may tell search engines to deindex a page), so it’s important to resolve these issues quickly.

500 – Internal Server Error: There was an error on the server and the request could not be completed.

501 – Not Implemented: The server doesn’t understand or cannot support the request.

502 – Bad Gateway: The server received an invalid message from the upstream server.

503 – Service Unavailable: There is a temporary technical issue preventing the server from processing the request.

Summary

While they may seem confusing or intimidating on the surface, HTTP status codes are actually very informative. By learning some of the common ones, you can troubleshoot problems on your site more quickly. Above are defined HTTP status codes that you may encounter. From milder 100 and 200 level codes to the trickier 400 and 500 level errors, making sense of these messages is crucial for maintaining your website and making sure it’s accessible to users.

Download FREE Cheat Sheet

Web Development Learning Path

Alen Varazdinac — Tue, 28 Apr 2020 20:12:31 +0000

There has never been a better time to learn to code or make a career change. The demand for web developers is at an all-time high, and it's only increasing. This article details the needed skills and the corresponding tutorials to learn them effectively.

Start with basics

HTML & CSS

HTML stands for Hypertext Markup Language. It's one of the main ingredients of any website and one of the so-called frontend languages. CSS stands for Cascading Style Sheets, without CSS, HTML web page would look boring. HTML and CSS are typically learned together. HTML is the skeleton of the page that gives it structure, and CSS is the language that gives it style.

JavaScript

Javascript is the essential building block for adding dynamic features to your website, which makes them alive by adding interactiveness. The basics of the Javascript language are easy to learn. However, as the ECMAScript specification evolves, more and more advanced features are added to the language.

Advanced CSS & JS

CSS Responsive Design

Responsive design means that the elements of the website adjust according to the screen size. This means that your website will look good whether the visitor is on a laptop or mobile device.

There are a bunch of CSS frameworks that can help you achieve a responsive design. Most known are Bootstrap, Foundation, Tailwind, Bulma.

JavaScript Frameworks

JS Frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks. Frameworks make developing common functionality easier and faster.

The most popular frameworks Vue, React, Angular, Svelte.

Backend

Backend Language

The backend or "server-side" is the portion of the website you don't see. It is responsible for storing, organizing data, and ensuring everything on the client-side works. The backend communicates with the front-end, sending and receiving information to be displayed as a web page.

Some common backend languages are PHP, Ruby, Python, .Net and Java.

Database

The database is an organized collection of data, generally stored and accessed electronically from a computer system.

The most frequently used way to store data is through a SQL database. SQL stands for Structured Query Language, and in essence, that means your data gets stored in a structured manner but is still accessible in its raw form. Think of these tables as data types, consider Users and Purchases as two separate tables, and the relationship between them being how many Users purchased a certain item. The most popular SQL database is MySQL.

A bit newer to the scene, but rapidly gaining popularity are NoSQL databases. NoSQL databases appear very similar to JSON file structures. One big tree or list of data, without any real relationship between two data points or entities. Take for example a request for User data, with a SQL database it will need to request and receive each relationship of the User entity before being able to respond with the data, whereas with a NoSQL database it can simply grab the data points in the list and respond with them. What NoSQL gains in speed, it makes the tradeoff in building data relationship. The most popular NoSQL database is MongoDB.

Tools

Version Control

A version control system allows users to keep track of the changes in development projects, and enable them to collaborate on those projects. Using it, the developers can work together on code and separate their tasks through branches. There can be several branches in a version control system, according to the number of collaborators. The branches maintain individuality as the code changes remain in a specified branch(s). Developers can combine the code changes when required. Further, they can view the history of changes, go back to the previous version(s), and use/manage code in the desired fashion.

Best version control systems are GitHub, GitLab and BitBucket.

Module bundler

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. It reduces the number of HTTP requests that are required to load a page.

Some of the modern module bundlers are Webpack, Parcel and Gulp.

Download FREE learning resources on my website.