DEV Community: Joeylene

My 2020 in Review

Joeylene — Wed, 13 Jan 2021 07:07:10 +0000

Although a little late, I decided to write my 2020 review mostly for myself especially that writing down my thoughts and experience kinda helps in clearing my messy mind. I was planning on just leaving this on private in my DayOne, but here it is 😅 Anyway, I decided to be more vulnerable in this post than last year. Tho I still left out some personal stuff hehe 👀 Also am here trying my best not to make this a diary of some sort. Welp here goes...

Although 2020 was rough, it was still one of the best years of my life. Since I quite enjoy the freedom of working and learning online rather than going to school, and this year is where I discovered, experienced, and learned a lot of new things.

While my 2019 was focused on studying, building, writing, and learning, my 2020 was more on working, trying out new things and learning new techs.

You can read about my 2019 here:

My 2019 in Review

Joeylene ・ Dec 31 '19 ・ 8 min read

#webdev #career #yearinreview

January: Internship

This month went by kinda fast. There was news about the Taal volcano erupting, and the nCov virus. Meanwhile, I was still a student doing my internship as a Web Developer wondering what 2020 has in store.

Anyway, I was now able to adjust to my work. It was nice to know from my co-workers that I am doing an awesome job at work. If they didn't tell me that, I guess I would be stuck thinking about whether I was doing enough. Especially when I remember myself being anxious at night cause I can't wrap my head around AJAX (first time encountering it at work) and on stuff which was new to me, tho one day the ideas kinda click in which I was able to move on. Feedback helps cause sometimes I overdo myself thinking that I am falling behind which in reality I was kinda fast 😅

I also became the CEO's favorite, in which I didn't like. Cause I don't really like favoritism at work, didn't want to catch unwanted attention and I only get more work assigned to me which feels kinda like a punishment at that time.

So my January revolve around working and then learning ReactJS in my free time.

At this time, I also finished creating this dark mode mobile app design of freeCodeCamp. Check out the figma file here

February: New Opportunity, Seminar, and Hackathon

A friend whom I met on Twitter and haven’t met on real life, referred to me to a startup which I guess is a turning point of my career. He was amazed when he saw my ReactJS portfolio I built on Nov 2019 after a week of starting to learn it, he wanted me on board so he referred me to the new company that he is going to join this year.

Although I was offered a job in my internship, I didn't want to accept it cause I don't like being micromanaged. Most of my stress comes from that.

I was planning to change my stack from PHP to a MERN one. So when I learned that this companies uses NodeJS and ReactJS, I was excited to be on board. I got to talk with the CEO and the negotiation went well.

Anyways, I was then asked to be a speaker at a seminar at my school. I was quite happy to see 1st years who are interested in learning more about programming. Some have some knowledge in web development, while others have some knowledge in game development. Thinking about their future is quite exciting, since I only got serious in web development in my 4th year (2017). Hopefully, this is my last time speaking. I don't really like being on stage welp.

At work, I was getting along with my fellow interns. I even made my friend a design since he wanted to practice his web dev skills. Here's the figma file.

The three of us interns even decided to participate to a Hackathon. It was my first time joining one so I was quite excited. Me and my friends agreed to make an MVP, focusing on the essential. We manage to hack away one little Laravel app. It was nice cause my friend got to learn how to use Git, while me and my other friend gain more experience in using Git.

We manage to finish it early. Tho after that we realized that we don't know who was going to pitch. The three of us were developers focused on hacking the app. Since I was the most talkative one in the group, I got assigned to the task welp. So yah, with my nervous self I researched stuff on Google, created a PPT, and decided to practice my pitch.

Weirdly enough... we manage to get into the finals. The panelists were amaze at my pitch. He said that I was a pitcher that can capture emotions. Then during the Q&A, my friend who was quick-witted manage to come up with answers regarding the process of the app. It was reassuring to have him cause I'm not that knowledgable about business stuff and kinda lack common sense? hahaha. This is what I get for burying myself with books, manga and code.

In the finals, we got to see the other participants on stage. We then realized that bruh how did we get to the finals with our little app 😬 The others were proposing apps that does a lot of things. Even though they didn't finish the app, they would talk and talk about the plans they have for the app and the features they plan to implement. This made me realize the point of the Hackathon, it was kinda like thinking of an idea for a startup. Tho I may be wrong. In the end, I kinda flop the last presentation. We didn't have facts/stats/plans to convince them. Tho we were just there to have fun, I didn't even expect we would get that far 😅 Overall, 10/10 would not do it again. The lack of sleep just made me irritable and weird lol.

March: First Developer Job

This month, I had my graduation pictorial today. Make-up sure does changes a person's look 😳

Sadly, graduation was postponed due to nCov.

Anyways, back to programming, my internship was finally finished this month. Then I had a week to prepare myself for my new job before my first day. I must be crazy applying as a full stack developer in a tech stack that are full of JS while I only knew ReactJS. So in that week, I tried learning NextJS, Styletron, BaseWeb, Firebase, NodeJS, KoaJS, TypeORM, and a lot of techs I still haven't learned yet. Of course, I didn't learned all that in a week. I wasn't that much of a genius and I want to have a good night sleep.

So on the job, it was like a baptism by fire. I read the docs bit by bit everyday, while I work on my tasks. It was my first time seeing an API-based/micro-service architecture. Heck, I only learned what a monolith is today. I also got to learn about pre-seed, seeding, valuation, etc. It was fun. I get to learn all sorts of stuff I didn't know before and I even get to learn more about how to use Git with a team and do code reviews (yup first time doing code reviews and making a PR, guess me and my fellow interns in my previous job were doing something wrong by just pushing everything to master/main branch hahaha). Learning on the job is much more easier than by tutorials cause I get to see the production codebase and how code reviews and changes are implemented.

I was also grateful cause my friend who referred me helped me to cope with the job. We would ask questions to each others about the codebase. I realize that the job became less intimidating when you have someone that you can rely on. My first dev job was a remote one so it was kinda hard, tho with his help I manage to get my footing.

So with my new job, I was quite satisfied with how things are going. I get to code and learn new stuff on the job.

April and May: Side Projects

As time went on, I took on more bigger tasks in my job. First it was fixing a bug, then creating components, then creating pages, etc. I was enjoying my work and I now manage to get the work-life balance thingy work that I now have time to work on some side projects.

Made an app to practice the tech stack at my current company.

Drew some pokeballs. Checkout figma file here

Then published an article entitled "A Look into How I Manage My Personal Projects (My Git/GitHub Workflow)". Tho by now (2021), I use the commitizen commit convention and didn't do squash and merge anymore. So yah, a lot has change in my workflow ever since this article has been written.

A Look into How I Manage My Personal Projects (My Git/GitHub Workflow)

Joeylene ・ May 15 '20 ・ 14 min read

#productivity #github

Also finished the Design for Developers course on Frontend Masters by Sarah ❤️

June, July and August: Work and Buying Stuff

This month, my friend from my previous school referred to me to his current company. So I worked as a frontend developer/designer to test whether I can keep up with having a part-time job. I was glad that the client liked my wireframes and designs and I taught my fellow devs things like Git, ReactJS, etc.

Most of the months, I worked my ass off doing my full-time and part-time job. I was kinda doing stuff on a schedule since I didn't want my part time job to affect my full time job. I swore to myself that if ever my part time job gets in the way, I would cut it off.

So far, my output in both jobs were good so I didn't have to worry. With that, I manage to finally buy myself a MacBook Pro 2019. I been wanting to have one ever since I learned how to code. It was really hard to use my old laptop since I can't use VSCode with ReactJS. I have to use Sublime Text to save me some RAM.

I bought a Nintendo Switch, some games, a Wacom Tablet, etc. Well you get the idea. I was burning money at a faster rate hahaha. I'll hate myself later for this lol.

Anyways, I also started learning Ruby and Ruby on Rails since this is what we're going to use in our new feature at work. I tried The Odin Project for this.

The MVC architecture kinda reminds me of Laravel and CodeIgniter. So with that, I quickly became comfortable with Rails. Tho the syntax was new to me, it kinda grew on me after some weeks.

September: Hell

This month, I decided to resign from my part-time job. Thinking about it, I have to sacrifice my side project time and time with my family for this, so I guess I had enough. Moreover, this was a bad month for the company. Due to nCov, we had to finish the on-demand courses quickly to survive.

An employee just resigned so we were short by one man. I gave double the effort since I didn't want to see the company die. I was curious as to how far the company will go someday. It was kinda hard to be assigned to a big task, tho I do enjoy the freedom I have in building it. I was tasked to build it using Rails, so yeah my first Rails app, besides tutorial apps, is gonna be this one. Thankfully, with my previous knowledge of Laravel, the concepts about MVC, migration, etc. I was able to quickly adjust and finish my tasks. Designing the database and building the APIs was hella fun. Didn't expect that I will enjoy it more than the frontend I guess.

In the end, we manage to survive yey. And I get to take some day-offs to recharge my batteries.

October and November: Side Projects and Games

At this time, I’ve learned some AlpineJS. I’ve also started to make a component UI library called Cionru. Although it is kinda unfinished now, I have plans for it in the future (will be related to Sutle, my current side project, and Stitches). Moreover, it was my first time contributing to open source. I manage to create a PR about translating the React docs to Tagalog.

I also tried streaming, tho I realized that it wasn't for me after two streams. Then I played some games with my friends in my free time.

I also continued my studies with Rails and ReactJS. By the end of Nov, I bought Wes Bos' ES6 and ReactJS and GraphQL course. I was kinda excited cause this is my first time buying a course. Since I didn't have the money before, I was relying on free resources like freeCodeCamp for which I am truly grateful.

Overall, I spent my days studying and playing games with my friends.

December: ES6 and Sutle

This month, I learned TypeGraphQL to build Sutle. I manage to finish the auth part of it (sign in, register, forgot password, etc).

I learned a lot of things from this side project like testing using Jest, using Circle CI, etc.

By the end of Dec, I manage to finish the ES6 course that I bought. I took one module a day to brush up on my ES6 skills.

Also, I'm officially a BSIT graduate 🥳.

Joeylene Rivera

@jorenrui

Yey am officially a college graduate! 🥳😁

Joeylene Rivera
Bachelor of Science in Information Technology
I like to make/build stuff.

#Classof2020

05:36 AM - 12 Dec 2020

Reflection...

This year was kinda wild since it took my work to a whole new level. From only knowing Laravel, PHP, Bootstrap and jQuery, I went on to become a Full Stack developer that has NextJS, ReactJS, NodeJS and Rails under my tool belt.

Tho unlike 2019, I was not that active on Twitter anymore. Tho tbh, I don't like being on social media cause I kinda feel that I'm not good enough. Also I like being in my own little world. Tho I can't deny that Twitter has helped me get my first developer job. I used it to make myself known. By creating CodePens and writing blogs then sharing it on Twitter. It also helped me to connect with amazing people.

Anyways here's a short version of my dev journey:

Learn web dev at freeCodeCamp > share blog posts/projects on Twitter > finish my Thesis > build a portfolio > Use thesis and portfolio to get internship > get first dev job thru referrals > graduate

Although I kinda wrote this on a happy note, there were days when I cried, been frustrated, been angry, etc. I just didn't want to write it cause it's kinda personal.

Sadly, this 2021, I decided to resign from my full-time job. I have a list of reasons to stay to help me make decisions, so when my deal breaker regarding the tech stack got ticked off, I decided it's time to go. Tho I also got a lot of things on my mind when making that decision. It was fun and I learned a lot. It was also kinda of a bittersweet cause I can't deny that I enjoyed the time I had there and the code that I've built was one of the things that I want to treasure and keep on improving. If things were different, I really want to stay and work on it until it's all grown up. Anyway, I'll be unemployed by the end of January. It's sad and scary but I guess I still need to move forward. Although I am sad, in the end, it was my decision so I gotta trust my guts.

With that, I was planning to continue my side project for the next two months then try to apply as a Full Stack Dev. I was also curious as to how employable I am, since there's a pandemic, I'll be able to see whether I'll be able to find a job that I like or not. Tho I am only able to do this cause I don't have much responsibility yet and I live with my parents. So after a couple of years, I need to be financially responsible to be able to do this again if ever I needed one. For now, I'm gonna be a free loader in the upcoming months 😅

With that thank you for reading this long post of mine 😁

A Look into How I Manage My Personal Projects (My Git/GitHub Workflow)

Joeylene — Fri, 15 May 2020 10:59:12 +0000

I'll discuss how I create and manage my projects using Git/GitHub. Also, I'll be tackling how I use GitHub's project boards, issues, and pull requests.

Note: This is NOT a comprehensive tutorial about Git/GitHub so I won't dive deep into those topics.

Photo by Yancy Min

Like anyone who first started using Git, when I start working on a project, I just create a GitHub repository then commit directly to the master branch. I don't branch out from master whenever I'm working on a feature or a bug fix.

Tho as I started growing, meeting new devs, and gain experience in working as a developer, I started to rethink my way of creating projects. Since most of my commits are "Fix typo", "Refactor code", and commits like "Welp" lol, my git logs ended up kinda messy. So with that, I decided to re-work my workflow 😉

PS: Although this is my GitHub workflow, you can also do it on GitLab or other git hosting providers.

Project Overview
Setting up
Project Boards
Issues and Milestones
- Milestones
- Issues
  - Task Issue
  - Epic Issue
  - Bug Report
GitHub Templates
- Branching out
- Templates
  - Task Issue Template
  - Epic Issue Template
  - Bug Report Template
  - Pull Request Template
  - Commiting
Pull Request
Merging Branches

1. Project Overview

For this post, I'm gonna create the frontend of a book database app wherein I can store books that I've read and books I'm planning to read.

Why create a specific app?

I just prefer explaining my workflow using an existing app, rather than an app called "my-awesome-project" as I did in the past. Tho I'm not gonna finish it hahaha or will I? I'll just use it for explanations. I'll also be using VS Code.

2. Setting Up

a. To get started, let's create a folder for the repository and set up the initial files.

In this case, I named the folder hondana-app and worked on a NextJS-Styletron-Baseweb initial setup.

b. Then initialize the project as a git repository using either the "Initialize Repository" button found in VS Code or by running git init in a terminal.

c. Afterward, let's do an Initial Commit like so:

d. After that, it's time to use GitHub 😁 Btw I just google translate "bookshelf" to Japanese, in case you're curious about the name, hondana app.

e. Then let's push the initial commit. But first gotta add the remote origin:



git remote add origin https://github.com/jorenrui/hondana-app.git
git push -u origin master

f. Now we are all done setting up!

3. Project Boards

In GitHub, you can create project boards to manage your repository. With this, you can put all your notes and tasks (issues and pull requests) in a single place.

To create a project board, go to your repository. After that, go to the Projects Tab then click Create a project like how it is shown above.

For now, I'm going to name it as Hondana App. This project board is gonna be a roadmap for the app. Tho you can create multiple project boards for a single repository. For example, you may create a project board for your app's documentation, frontend, backend, etc.

GitHub also has a project template in which you can use. A Kanban Board has a Todo, In Progress, and Done column. As for me, I prefer using an automated kanban with reviews. With this, when issues and pull requests are automatically moved from To Do, In progress, Reviews and Done. Tho if you're the only one on a project then I suggest the automated kanban since there will be no code reviews.

This board has five columns: Todo, in progress, review in progress, reviewer approved, and done. When you create a pull request, it will be added into the In progress column. When a code review is being done, it will move to Review in progress, if the reviewer has accepted your Pull Request, it will then be moved to Reviewer approved. Lastly, when you merge the pull request into the "master" branch it will be then be moved to Done.

Since this board is an automated one, we don't necessarily need to touch it. We just need to links our issues and pull requests to this board. I'll show you how to do it in the next part.

4. Issues and Milestones

Since the project board is all set up, let's now move on to creating some issues. Issues can either be tasks that you need to do or bugs that your application has.

Milestones

Tho before creating issues, first we need to create Milestones. These can be the goals you have for your app. It can also be the versions of your app. As for me, I use milestones in versioning my app.

For example, for the initial version of the hondana app, I plan to finish the following features:

User Authentication
View a list of books that I plan to read, currently reading, and have read
Add books wherein I can put status like to read, reading, and done
Delete the books in the app

For the second version of the app, I plan to finish the following features:

Add notes to books I have read
Add reviews and give a 5-star rating to the books that I have read
Add search functionalities

With this, all the issues and pull requests related to that version can be organized into a single milestone.

a. To start, go to the Issues Tab of the repository, then click Milestones.

b. After that, click Create a Milestone to create one.

c. Then input the title of your milestone. Here, I put v1 as the milestone's title. You can also add a deadline in you want.

d. With this, you can now view your created milestones under Issues tab > Milestones.

e. By clicking the milestone, you can easily see all the issues that are linked to it.

Issues

In creating you can either create it by going to the Issues Tab of your repository, like the image shown below, or by going into a specific milestone.

In creating issues, a friend of mine taught me how I can categorize them:

Task Issue - a small task that can be part of an Epic Issue. This can be labeled as a "good first issue".
Epic Issue - a large task that is divided into small issues.
Bug Report - it contains information that is needed to fix a bug that the user has encountered.

To understand them a bit more, let's create our first issue.

Task Issue

In this part, I'll show you how to create GitHub templates, but first, let's create those issues.

Issue Title. As you can see, I named the issue title as Task: Add Github Templates since this is a task issue.
Description. There's a format I follow in creating issues wherein I write the following:
- Task Title
- Description
- Linked Epic Issue (optional)
- In this case, there's no linked epic issue yet. I'll show you the format in a bit.
Assignees. I assigned it to myself since I'm the only one working on this project.
Labels. GitHub has default labels in which you can use. Tho you may customize it and add some new ones if you want. Anyways, Tasks/Epics are commonly labeled as "enhancement" or "documentation". Tho in this case, I decided to add "enhancement" as its label since I think of templates as features.

Projects. By adding the project board that we've made earlier, we may now see the issues' progress. As you can see, linking the issue will automatically put it to the Todo column of the board. Since this is an automated project board, you don't need to move this card by yourself.

Milestones. After linking the issue to the v1 milestone of the app. You can now see the issue under it.

Since the task issue is done, we can now move on to the Epic Issue.

Epic Issue

Now, let's create an epic issue regarding the library page of the application.

Issue Title. As you can see, I named the issue title as "Feature: Library Page" since this is an epic issue.
Description. There's a format I follow in creating epic issues wherein I write the following:
- Epic Title
- Description
- List of Tasks
- In this case, the task issues aren't linked yet since those issues haven't been created yet.
Assignees. I assigned it to myself since I'm the only one working on this project.
Labels. I added the enhancement label. Since this is a feature request.
Projects. Adding it will automatically put the issue card into the To Do column of the project board:

Milestones. Linking it to the v1 milestone will make it appear under it. Also since the epic issue is composed of tasks, you'll see the progress of the issue based on the checklist like shown below:

Since the epic issue is created, let's now create those tasks.

In these tasks, we can now link its epic parent which is Feature: Library Page #2.

After creating all the tasks, we can now update the epic issue and link the tasks.

After that, you're all done.

Bug Report

Since the Hondana App has no bugs yet, let me show a sample bug in my create-project repo.

Issue Title. As you can see, I named the issue title as "Bug: Fix broken links in npm" since this is a bug report.
Description. There's a format I follow in creating bugs wherein I write the following:
- Title
- Description
- Steps to reproduce the bug (optional)
- Expected result (optional)
- Actual result (optional)
Assignees. I assigned it to myself since I'm the only one working on this project.
Labels. I added the bug label. Since this is a bug report.
Projects. Adding it will automatically put the issue card into the To Do column of the project board.

5. GitHub Templates

Now it's time to show you how to create GitHub templates! So in this part we'll be working on this issue: Task: Add GitHub Templates #1.

Branching Out

Whenever I'm working on a feature request or bug fix. I first create a branch from the master branch (sometimes it can be the develop branch).

For naming the branch I follow this format:

Bug Fix: hotfix-issue-name
Feature Request: feature-issue-name

So in this example, I'll create feature-github-templates from the master branch:



# Create a branch named `feature-github-templates` from the current branch
git checkout -b feature-github-templates

Then you'll automatically be switch to your newly created branch. After that let's create the template files.

Templates

To create some GitHub templates, create a folder named .github in the root directory of your app name. That's where your templates will reside.



# Create a directory/folder named `.github`
mkdir .github

Then create a folder named ISSUE_TEMPLATE. This is where the templates for the task, epic, and bug issue will reside.



# Create a directory/folder named 'ISSUE_TEMPLATE' under `.github`
mkdir .github/ISSUE_TEMPLATE

Then create the files for the issue templates and the pull request template.



# Create the markdown files
touch .github/ISSUE_TEMPLATE/bug_report.md
touch .github/ISSUE_TEMPLATE/epic_issue.md
touch .github/ISSUE_TEMPLATE/small_issue.md
touch .github/PULL_REQUEST_TEMPLATE.md

The created files will be like this:

Task Issue Template

The small_issue.md will contain the following:



---
name: Task
about: A small task that is, most likely, part of an Epic. It will usually be labeled as `good first issue`.
---

<!-- Issue title should mirror the Task Title. -->

# Task Title

Task: Awesome Task Title

## Task Description

This Task will...

## Epic Parent

<!-- The link below should link to its Epic Parent. -->

[Feature: Awesome Feature Title](https://github.com/username/repository-name/issues/1)

Epic Issue Template

The epic_issue.md will contain the following:



---
name: Epic
about: A task large enough that it needs to be divided into smaller tasks. It will usually be labeled as `enhancement`.
---

<!-- Issue title should mirror the Epic Title. -->

# Epic Title

Feature: Awesome Feature Title

## Epic Description

This Feature will...

## List of Tasks (Complete in order)

1. [ ] [Task 1: Awesome Task Title](https://github.com/username/repository-name/issues/1)
2. [ ] [Task 2: Awesome Task Title](https://github.com/username/repository-name/issues/2)

Bug Report Template

The bug_report.md will contain the following:



---
name: Bug report
about: Create a report to help us improve
---

<!-- Please search existing issues to avoid creating duplicates. -->

# Bug Report

Bug: Not so Awesome Bug Title

## Description

Info about the bug goes here.

### Steps to Reproduce

1. Step 1
2. Step 2

### Expected Result

The expected result was...

You may write the expected result or add a screenshot.

### Actual Results

The actual result was...

Would be awesome to link screenshots here and/or error messages received.

Pull Request Template

Lastly, the PULL_REQUEST_TEMPLATE.md will contain the following:



# Story Title

[This is the Issue Title](https://github.com/username/repository-name/issues/1)

## Changes made

- made this
- did that

## How does the solution address the problem

This PR will...

## Linked issues

Resolves #1

Commiting

After making the files, we make now commit the changes made and push our newly made branch along with our commits to origin.



git add .
git commit -m 'Add GitHub Templates'
git push --set-upstream origin feature-github-templates

When feature-github-templates has been merged with master. You'll now see the templates whenever you create an issue or create a pull request:

6. Pull Request

Now that we're all done with creating GitHub Templates, we may now create a Pull Request.

When you check out your repository, your recently pushed branches are shown. You may click the Compare & pull request button to create a PR.

Or you may go to the feature-github-templates branch and click pull request like what is shown below:

Then let's now create a Pull Request, we'll be comparing it to the master branch.

If you have reviewers, then you're code will be subject to approval.

The format of the Pull Request is:

PR Title. The title of the PR is based on the issue that it is going to resolve.
- Task Issue: Task: Issue Name
- Epic Issue: Feature: Issue Name
- Bug Report: Hotfix: Issue Name or can be a custom name regarding the fix.
Story Title. This is the issue name.
Changes Made. This is your commit summary. You may add jargon here and additional technical details regarding the change. For example:
- Add Redux as a state container
- Add Theme Provider
How does the solution address the problem. It will contain an explanation for normal people. For example: This PR will add the ability to login and logout of the application.
Linked Issues. Adding resolves #IssueNo will automatically close the linked issue when the pull request has been merged. See GitHub's Linking a pull request to an issue for more information.

7. Merging Branches

When I merge branch I prefer Squash and merge. This action squashes the branch into one commit before merging. I'll explain in a bit as to why I prefer this.

EDIT: I don't use squash and merge anymore since it greatly affects the history. Now, I prefer a normal git merge with commit.

After picking Squash and merge, you'll be able to add the commit message. Like shown on the image below:

For the commit message:

Title. The title is based on the PR title and the name of the issue that it resolves.
- Epic Issue: [Finishes #IssueNo] Feature: PR Title #PRNo
- Task Issue: [Finishes #IssueNo] Task: PR Title #PRNo
- Bug Report: [Hotfix #IssueNo] PR Title #PRNo
Description. The description is copied from the PR's description.

After merging it, it will now create the merge commit and the PR in the project board will automatically be moved to Done. Then you may now delete the branch.

Then delete the branch from my local repository:



# Switch to master branch
git checkout master

# Delete `feature-github-templates` branch
git branch -d feature-github-templates

The commit will now be like this:

This is useful when you're creating a changelog and when you're working on a legacy project that has tons of features. You will easily see the changes and the info regarding each commit. This is why I prefer squash and merge. Also, I tend to create commits like "Refactor code" and "Fix typo", so seeing a clean log of commits is refreshing.

Wrapping Up

In managing your repositories, you can create project boards to organize your issues and pull request. Then add milestones in versioning your app. You may also organize your issues into three categories: task, epic, and bug report. Lastly, merge your pull request.

That's just one way of managing your project. You can make it your own by customizing it like adding some tests or GitHub actions. It's all up to you. Experiment and see what works best for you 😉.

Thanks for reading and happy coding 👩‍💻

My 2019 in Review

Joeylene — Tue, 31 Dec 2019 11:50:48 +0000

This is the first time I'm doing a Year-end Review. Luckily, I made a 2019 accomplishment list so it was easy to think back what happened. In this post, I'm going to share what I've been doing organizing them by months. Time to look back and wrapped up my year! 😁

January: A new beginning

freeCodeCamp Survey Form

Although I finished the old front end development curriculum of freeCodeCamp, I wanted to try out the projects in the new curriculum. So I decided to build the freeCodeCamp survey form. Remembering that time, I was also trying out some functionalities like tabindex. Demo.

Check out the Repository on the development process.

Created an Instagram account

I've known Instagram for years but only used it this January. I just dump mostly my web dev journey or whatever I'm doing there.

Wireframes. My first Instagram Post

Been learning Laravel

Although I already know Code Igniter, I decided to go with Laravel for my capstone project. While we were on the system analysis and design phase, I decided to study Laravel. Also, I decided to make a prototype of our capstone project with it to practice what I learned. Traversy Media's Laravel From Scratch Series and reading the Laravel Docs helped.

February: Writing

Publishing my first blog post on DEV.to

Most of February was filled with school classes, researching, and learning some Laravel. In the last week of February, I decided to write a blog post entitled My Web Development Process Part I: Design. Of course, my motivation in writing it was the deadline. Lol it was a school requirement haha. We were tasked to create three blog posts. I decided to go with the topic that I am most fond of, web development. Also, I decided to publish it on DEV.to cause why not?

My Web Development Process Part 1: Design

Joeylene ・ Feb 25 '19 ・ 8 min read

#webdev #design

March: SAD and Blog Posts

Designed a Login Page

I was picked as a speaker for a seminar, a project requirement in school. I decided with a topic I am most confident with, web development. Mostly turning design into code. Though it didn't go that well cause I just realized that I got too many slides haha. Guess, lesson learned. Anyways, I started becoming more interested in web design.

Published two articles

This month I've been mostly focusing on the two blog posts. I published My Web Development Process Part II: Code on March 04. Then I published 6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free on March 20 which I didn't expect would receive a lot of likes.

My Web Development Process Part 2: Code

Joeylene ・ Mar 4 '19 ・ 6 min read

#webdev

6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free

Joeylene ・ Mar 20 '19 ・ 21 min read

#webdev #deployment #netlify #heroku

Passed the System Analysis and Design (SAD) Defense

After working on the blog posts, I then focused on the upcoming defense. Fortunately, my team and I were able to pass the SAD defense hehe.

April - May: Teaching...

Google Map Mobile App in Dark Mode

I started my summer break with designing a Google Map Mobile App in Dark Mode. Although this isn't the first time I created a mobile app design. The first one was when I entered a contest last two years (?). I decided to do some wireframes and prototyping using Adobe XD Beta.

First time teaching

So here's the story, I was invited to go swimming by my hs friends. I impulsively said yes but I realized I got no money. Yah hahaha sometimes I forget to think. So I decided to work as a Computer Instructor teaching computer fundamentals for a week. Although it was not my thing, I did enjoy traveling to different barangays and meeting some new people. Teaching a variety of people, some of which are much older than me and some were younger, I learned to adjust my teaching methods based on who I'm teaching. Being polite and patient with the mothers, and getting along with the teens. After a week, I got some money to go swimming and some pocket money hehe. Yey party time! Also, April is my birth month.

June - July: A month filled with designs and vector art

Created some more designs

In June, I decided to create some more designs. I've designed a Profile UI Card in Dark and White Mode. Moreover, I updated my logo. The design for it was inspired by JavaScript.

Created some vector arts

July is a month of vector arts for me. To summarize:

07 Finished the designs for the school website
17 Finished a vector art of my bf
20 Created a new Instagram Account to dump my vector arts and web designs
21 Finished Skull Hayman Vector Art
22 Finished Tsinelas Vector Art
23 Finished King Hayman Vector Art
23 Finished Pencil Vector Art
30 Finished Laptop and Mouse Vector Art

King Hay men. Bow down to the King of Hay men.

GitHub Mobile App Design

One of the designs I've made unexpectedly got a lot of likes on Twitter. At the time of this design, there wasn't any official GitHub mobile app yet. Though by the end of the year, GitHub for mobile was announced. There's now an iOS beta of GitHub. You can also join the Android Beta wishlist.

Joeylene Rivera

@jorenrui

Don't wanna code today 😅 So I decided to change the design of GitHub's mobile app ✨

dribbble.com/shots/6849495-…

08:18 AM - 27 Jul 2019

Instagram.

August: Capstone and Vector Arts

Made some progress with the capstone project

After finishing the website last July, I started working on the school website. Then we had our Capstone Defense.

More vector arts

I was still on the momentum of creating vector arts despite working on my capstone project. I was able to put out four vector arts:

06 Finished Fire and Water Slime Vector Art
22 Finished Avatar Vector Art
16 Finished Fire Slime Vector Art
12 Finished Coffee Mug Vector Art

September: Capstone and more coffee

Focused on my capstone project

This month, I decided to focus more on my capstone project. It was a lot of work but I can see my Laravel skills improving.

Joeylene Rivera

@jorenrui

I'm back 😆 Been busy due to this 👇 After finishing the school website, I then proceeded to the eGrades System. Tho still have a lot to do like locking of grades, file upload, print, etc.

Techs I've used: select2, particle.js, quilljs, argon dashboard, spatie/laravel-permission

18:50 PM - 18 Sep 2019

Finished "JavaScript Grammar" by Greg Sidelkinov

Although I was working with PHP, I still wanted to sharpen my JavaScript skills. Mostly because I also wanted to learn ReactJS in the future. By this time, the author decided to give away some free pdf version of the book for a limited time. I was able to get a copy of it. You can buy the book here.

Btw I've been also reading other books, it's just it isn't programming related.

October: Thesis and ReactJS

Thesis Defended

Though I did work on a Keyboard Vector Art at the start of the month, I mostly ended up focusing on my capstone project. After so much hard work on my capstone project, my team and I managed to defend our thesis. I feel so proud of what I've created. Tho I feel kinda sad cause I guess I'm gonna part ways with it after. I kinda grown attached to it. I kind of have a love-hate relationship with it.

SPCC Portal

An electronic grading web application, integrated with a school website, built using Laravel and Bootstrap.

Well, I don't really know how to summarize this...

You can create a curriculum with it, create an academic term, create a class, enroll students to that class, assign an instructor to that class, then it will automatically create a schedule for the instructor (faculty load) and the student (enlistment) for the current semester. After the instructor has encoded the grades of the students, the system will take care of generating the grade slip for the student and fill up their curriculum with grades/transcript of records. So all the registrar will have to do is print the grades, after the instructor has encoded it. For the transferees, course creditation is included.

For the school website side, you can create events that will show in the homepage then create some blog posts.

Though there a lot of room for improvement, but my time is up. And I'm happy I'm done with it.

You might want to check out the repository.

Started learning ReactJS

This month I started learning ReactJS. I first tried out ReactJS Course on Scrimba. Scrimba is such a great platform to learn. The interactive screencast made it easy to learn. Moreover, I am grateful of Bob Ziroll (the instructor) for creating this. I learned a lot!

November: Portfolio and Internship

React Portfolio

After finishing a Excalibur Vector Art, I decided to start working on my new portfolio. The first version wasn't mobile-friendly and I've been thinking of changing it for the past few months. Now that I have the time, I decided on working on it. I used ReactJS in building it as practice.

Joeylene Rivera

@jorenrui

My new portfolio website is now live!

Repository: github.com/jorenrui/portf…
Website: jorenrui.netlify.com

16:16 PM - 15 Nov 2019

Version 2 of my portfolio. The first version is this if you're curious. I made it last Nov-Dec 2017.

Internship

After finishing my new portfolio website, I started applying. I also decided to temporarily deploy my capstone project and made some design tweaks with my resume. With my new resume, portfolio, and my capstone project under my tool belt, I got the job as a Web Developer Intern. Also, I am so thankful for the Tech Twitter community. They've been so supportive 😊.

December: Internship and ReactJS

Internship

I'm really happy that I can decide at what time I can take my 2-hour break. So far, I learn about the Meedo framework and did some AJAX. Though I still have a lot of hours to complete. I needed to complete 500 hours of internship.

More ReactJS Frontend Masters

Using the GitHub Student Developer Pack, I decided to avail my free 6 months of Frontend Masters. So I've been studying more ReactJs on Frontend Masters. As of now, I've finished the Complete Intro to React v5 at Frontend Masters and Intermediate React v2 at Frontend Masters.

After finishing my internship, hopefully, I'll be graduating. So a lot can happen next year. Anyways, till next time 😊.

Lessons I've Learned this Year (2019)

Joeylene — Tue, 31 Dec 2019 11:50:32 +0000

Starting now, I've decided to do a Year-End Review. I was motivated to do this because of this blog post. Also, I was influenced to live with intention by books like "The Happiness Equation", "Essentialism" and "The Productivity Project," and by YouTubers like Matt D'Avella and Thomas Frank.

I wanted to design my life. To live a life that is true to myself. To live my life with intention. That is why I decided to review my life. To reflect on my past decisions, learn from my mistakes, and grow to be the person I wanted to be. I don't wanna let the year just pass me by. I needed to face myself and ask "Why?"

Why have I decided to go with this instead of that? Are my values and decisions still aligned? Where did I go astray and how can I refocus myself? Am I truly happy?

Hard questions like this make me rethink my decisions in life. It helps me reflect then decide on the next steps that I will make.

My year started with a rough start. Transferring schools twice made me doubt myself even more. Being a 4th-year college student, it's really hard to change schools when a new curriculum has been implemented (K-12 reference). Finally, I was able to transfer to a school in which I can take the courses with me as the sole student and that isn't hard on the budget.

My focus was to graduate fast and get that diploma. I wasn't really focused on the knowledge I'll receive at school cause, for the most part, I'm used to doing some self-study. An example of this is that I just took a Web Development class last semester. I already know almost all of the lessons so the instructor just gave me a project. So only completing my thesis and internship was the challenge for me.

Being in a new school makes me wonder about my life. "Will I ever graduate?" I ask myself. Sometimes I would get jealous of my peers that have already graduated. What if I've graduated like the rest of them, I wouldn't even be a disappointment to my parents. If only I pushed through in the past then I'll finally have that diploma. I know... I'm hard on myself. Nevertheless, I've accepted my decision in the past. I was burnout and unhappy. I needed space to recover. Little did I know that my decision will lead me to focus on self-improvement and experience the world of web development.

As the year ends, a lot has happened. The year that started off lonely and sad ended in a blessed and awesome way. So let's go through the lessons that I've learned this year:

1. Know your "why"

Whether making that change, building that habit or executing that idea, first ask yourself why? This will be your driving force, your motivation, to keep on going especially when things are going rough. The stronger your reason for doing that activity, the more you likely you'll stick to it. Finding your reason will also help you in deciding the next steps you need to make.

I tried a lot this year whether it's writing, making some arts or learning a new framework, there's always those that stuck and those that just faded away.

Writing is one of the things that I wanted to consistently do but failed to do so. When I started asking why I wanted to do it, I realized that I didn't know. Maybe I was just influenced or was jealous of some bloggers. I said it was for my future self, but was it true? As time goes by, I stopped writing. My reason wasn't that strong enough to stood the test of time. It has slowly been pushed back by my other commitments in life.

In contrast, learning ReactJS was different. Since I planned on being a frontend developer rather than a full-stack in the future, I was dedicated to learning it. Even though doubts came into my mind and want to just stick to making some Laravel web applications, the thought of doing the things that I enjoy became my motivation. I was always fond of the design side of web development. Even though I'll go back to becoming a beginner I'll gladly do so if it means getting out of my comfort zone. I was able to find the time to learn it as I worked on my capstone project/internship.

2. Keep moving forward

Life is hard. It may even lead you to question if it's even worth pushing through. Nevertheless, you'll never know the rest of your story if you don't move forward. There's nothing fun in being stuck in a bad chapter of your life.

Whenever I'm going through hard times, I always do my best to think that it will get better someday. Sometimes I wish those hardships never happen. Yet I know that I wouldn't grow if I only experience the good things in life. I wouldn't learn and mature if it weren't for those hard times. So even though it's tough, I try my best to accept the challenges in life. Those struggles are the ones that made me more grateful to things that I already have in life. It made me treasure what I have than take it for granted.

Rather than a lesson that I've learned, this is one of the things that I keep reminding myself of. If in the past, I didn't decide to try again and start a new after I stopped attending 4th year of college, I wouldn't get to experience a lot of what I experienced now like meeting new friends, falling in love, doing web development and finding the tech community. At that time, it was hard for me to even get out of my bed and eat. All I wanted to do was sleep and not think. Yet after many months of staying in my bed, I decided to redesign my life, to try again. Those little goals of getting out of bed then doing some freeCodeCamp lessons turned into me looking forward in life.

This lesson I kept into my heart even to this year. Doing the capstone project was hard and a lot has happened. There were those times that I just wanted to return to my comfort zone. Yet whenever I experienced fear, uncertainty or sadness, I close my eyes and tell myself that things will get better. Luckily, it did.

3. It's the little things that count

Know the saying, "it's the little things that count"? Those little things we say or do makes the most impact on our lives. Hundreds of those little things will turn into something great, a thousand will turn into something amazing. Whether we show someone we love them by making them a cup of coffee or saying they're beautiful, as they accumulate they make the relationship more rich and we grew closer. Even by reading just a few pages every day will reap great returns. By the time you realize it, you have read a handful of books. Whether making a habit or enriching things in your life, those little things are what makes the most of it.

The #100DaysOfCode or #100DaysOfX is a great example of this. Just by committing to at least 1 hour per day doing an activity will help you master your craft in the long run.

Reading books and learning web development for 2 years has made a great impact on my life. It turned into my current skill set that has helped me in doing my thesis and eased my search for a web developer internship role. With this, I'll continue my journey towards self-improvement.

In another perspective, doing the little things has made me closer to my friends and family. Listening to my parent's stories, helping a friend in moving out, sharing my day with my bf, those are things connect us more with each other. By also appreciating the little things, it makes us more grateful and happy in life. Seeing that those mundane little things are what makes life more enjoyable.

4. Bring space to your life

To be productive, it isn't always about doing more. At times, it means taking a step back and creating space. Space to let your mind wander. Space to let your mind get some time off. Space to sit back and relax. When you are in a constant sprint, always trying to meet the deadlines without rest, your creativity suffers. When reaching your goals means sacrificing your health, then you need to rethink your priorities.

I am guilty of this. I sometimes overwork myself, especially in the past years, knowing no boundaries and thinking that doing more means working more. I thought that I was being productive, when in fact I was sleep-deprived and unhappy. When fixing that one last bug turns into working overtime. When that one-time checking of emails on Saturday slowly becomes a routine. That's where you need to stop. Even machines overheat, what more so are ourselves. By working longer hours, we are sacrificing the quality of our work bit by bit. But by resting, we are recharging ourselves so that we can do better. We need space so that we can be more productive.

Fortunately, I've been practicing this lesson ever since I've burnout in the past. When it's time to work, I work. When it's time to relax, I relax. I also don't guilt-trip myself whenever I sleep in or take the rest of the day off. My body deserves some sleep and it's okay to enjoy the day especially when I've been working hard the past few days. With that, I've been able to produce more quality work. Delivering top-notch work means taking care of yourself.

5. Add a buffer to your estimates

As they say, or what I read in Essentialism, "expect the unexpected". Things don't often go the way we planned them. That 30 mins commute may turn into a 1 hour being stuck in traffic. There are times when a task would only take a few minutes or so, but ended up finishing it in 2 hours. In short, what we expected isn't always what we experienced. Sometimes things take longer. When we estimate the time for us to finish something, we often estimate based on the best scenario. But what about the unexpected? By anticipating and preparing for what may go wrong, we ended up with less stress and we are more likely to finish the task on time. That is why we add a buffer to our estimates. We add extra time to our estimates to be prepared for the unexpected.

I often do this, especially at work. Since I like planning things ahead of time, I always try to think of what may go wrong. With this, I was able to meet the deadlines. At school, I was able to manage my time well in doing my other projects while doing my thesis. By adding some buffer, other tasks weren't that affected when one took longer than I expected. I would often start my projects early so that when exams and the thesis defense came, it wouldn't get in the way.

6. Learn to say "No"

Saying no is hard especially when we associate our decisions to our relationships. It's hard to say no to our boss cause he might become disappointed with us. In the end, we just say yes. Whether it's due to our impulsiveness, desire to be reliable, desire to please people or cause we owe them one, we sometimes say yes to things we don't intend to. Then we regret our decisions later. So learn to say no especially when you find yourself having too many commitments.

I once ended up in this situation in the past where I would say yes to every project assigned to me. In the end, it was too much for me to handle and ended up failing a project. Then I realized, I thought that saying yes means helping them, but I was only hindering them from truly learning on their own. I was saying yes to them, but to my own goals, I was saying no. I just let other people's agendas take over mine. With that, I decided to stop impulsively saying yes. I started to think if it is worth the time or is aligned with my values.

7. Relationships matter

Whether it's with your family, friends or even to yourself, healthy relationships matter in our lives. Not only does it enrich our lives but it also helps get through life. As they say, humans are social beings. We need a sense of love and belonging. Life doesn't always need to revolve around your work. Sometimes a little chat with a long-time friend is what you need.

Moreover, relationships bring more meaning to life. When work you're doing involves helping those in need, you find yourself with a sense of purpose. Whether it's influencing or being influenced by different people, the connection may help us to realize that we've truly lived. That we were here.

Even though I value my time alone, I also enjoy spending a cup of coffee with a friend. I wouldn't be who I am without them. My friends and family helped me to become who I am. Whether it's only for a short time, there were a lot of people that contributed to molding me as the person I am now. I cried, we fought, we laughed, we played, we've lived life. I'll always be truly grateful to the people that became a part of my life. My teacher, that kid I used to play with, online friends, or even the kids I met at an orphanage. They made my life fuller.

Everyone had different experiences this year. Some were not that great, for others it was awesome. For me, it was a rough start. There were times where I was in the top of my game. There were times where I was a mess. But in the end, I did enjoy the ride 😄. With that, I'm looking forward to what the next year will be like. Hoping that whether good or bad, I'll never forget what I value in life.

6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free

Joeylene — Wed, 20 Mar 2019 05:30:48 +0000

In this post, I'll share my experiences, instructions rather, in deploying your website/web apps in different free web hosts. However, this post will not provide detailed information and thorough explanations.

Cover Image by Fabian Grohs on Unsplash

Whether for deploying your personal project, your school project or for testing out your web apps, there are several web hosts in which you can deploy them for free.

If you know how to use Git, a version control system, then nice 👍.

If not I recommend learning it, these resources might help you out. For websites, you can use Netlify in which you can upload your files. If you have a PHP+MySQL web app, you might want to try out 000webhost. You can host up to two web apps on it per account.

Although I said that, if you are planning to use 000webhost to host your web app for long term usage, I strongly recommend learning Git and use Heroku instead. 000webhost is good for deploying a web app fast and free of charge, but it also comes along with great security risks. That's why either use Heroku or paid web hosts such as Digital Ocean or AWS.

Before starting...

I'm assuming that you have a ready-to-deploy website or web app. For your project that doesn't need any database, you can use static web hosts. But if you want to deploy your PHP+MySQL web app, then you check out dynamic web hosts.

Also, I may refer to your app or the project's folder as a repository.

A repository is like a folder for your project. Your project's repository contains all of your project's files and stores each file's revision history. You can also discuss and manage your project's work within the repository.

-GitHub

Also...

make sure that you have an index.html. Think of it as the home page of the website. Rename your primary HTML file to index.html if you don't have one yet. If you are using a PHP framework like Laravel and CodeIgniter then you're good to go.

Static Web Hosts

GitHub Pages
GitLab Pages
Netlify (recommended for beginners)
Surge (recommended for CLI users)
Others such as Zeit and AWS Amplify

Dynamic Web Hosts (PHP+MySQL)

Heroku + Remote MySQL for Laravel Apps
000webhost (for those who don't know Git yet)

EDITS:

Web Hosts

You can also use Heroku and 000webhost as a static web host. In doing so, just ignore the database integration part. 😊

Another web host you might want to check out is Glitch.

// Detect dark theme var iframe = document.getElementById('tweet-1108867752134168577-703'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1108867752134168577&theme=dark" }

Heroku - Database Credentials

A suggestion by Bervianto Leo Pratama was updating the Database Credentials in the Config Vars in Heroku.

Changes were then made for the Heroku Database part, Setting the Database Config Variables, due to this awesome suggestion. 😊

For other web hosts, you can also update the .env file and manually upload it, so it would not be included in the source control.

Static Web Hosting

GitHub Pages

GitHub is one of the best places to host your code. It offers unlimited private and public repositories. It is well known as a place for open source software.

Host and review code, manage projects and build your best software alongside 31 million developers.

-GitHub

GitHub Pages is one of the services that GitHub offers.

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

-GitHub

Create a GitHub Account
Create a Repository
Upload your files
Deploy your website using GitHub Pages

1. Create a GitHub Account

If you don't have a GitHub account yet, you may create one here.

2. Create a Repository

In the navigation on the upper right corner, click the New Repository under the plus icon.

You only need to fill out the details, then click Create repository.

After that, you can now add some files to your repository.

3. Upload your files

There are two ways you can add files to your repository:

Using Git
Via file upload

As for the file upload, you can either click Upload files

Note: by default you are in the master branch of your repository.

or can drag and drop your files like so:

As for the commit message, you can type something that describes what you did. If you added some pictures, then you can type Add cute puppy images. 😆

4. Deploy your website using GitHub Pages

First, go to Settings

and scroll down to GitHub Pages. Then, click on the master branch.

With this, your site is now published at https://<your-username>.github.io/<repository-name>. Congrats ✨

If you want to use https://<your-username>.github.io rather than https://<your-username>.github.io/<repository-name>, you just need to name your repository <your-username>.github.io. This is suitable for portfolio websites.

For more information you can visit GitHub Pages.

Return to TOC

GitLab Pages

GitLab is one of the places where you can host your code and deploy it. It offers unlimited private and public repositories.

GitLab provides a single application for the entire software development and operations lifecycle. GitLab provides everything you need to Manage, Plan, Create, Verify, Package, Release, Configure, Monitor, and Secure your applications.

-GitLab

GitLab Pages is one of the services that GitLab offers.

Host your static websites on GitLab.com for free, or on your own GitLab instance.

-GitLab

Create a GitLab Account
Create a Repository
Upload your files
Deploy your website using GitLab Pages

1. Create a GitLab Account

If you don't have a GitLab account yet, you may create one here.

2. Create a Repository

In the navigation on the upper right corner, click the New Project under the plus icon. Or you can press the green New Project button on the right.

Then, fill out the details. After that, you may click Create Project.

3. Upload your files

There are two ways you can add files to your repository:

Using Git
Via file upload

As for the file upload, click the plus icon then pick Upload file

Note: by default you are in the master branch of your repository.

Then you can drag or upload your file.

As for the commit message, type something that describes what you did. For example, if you added an About Page then you can type Add About Page.

4. Deploy your website using GitLab Pages

To get started, click the Set up CI/CD.

This will then create a configuration file for your deployment. You can pick a template. For simple projects, just pick HTML.

Then press Commit changes.

This will create a .gitlab-ci.yml to your project's root folder that contains:



pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

The GitLab CI/CD will then build and deploy your website using GitLab Pages.

In the sidebar, go to Settings then Pages. You'll find your website's URL there which is https://<your-username>.gitlab.io/<repository-name>.

You may see a 404 Error for now. But don't worry, it just needs some time before your website is up and running. Try to check if again after a few minutes.

If you want to use https://<your-username>.gitlab.io rather than https://<your-username>.gitlab.io/<repository-name>, you just need to name your repository <your-username>.gitlab.io. This is suitable for portfolio websites.

With this, your website is now live. Congrats ✨

For more information, you can visit GitLab Pages.

Return to TOC

Netlify

Netlify offers an easy way to deploy your sites.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning.

-Netlify

Create a Netlify Account
Deployment using Netlify
- Upload your files and Deploy
- Connect your Git Repository and Deploy
Rename your Site

1. Create a Netlify Account

If you don't have a Netlify account yet, you may use your GitHub/GitLab/BitBucket Account or create one here.

2. Deployment using Netlify

2.1 Upload your files and Deploy

You can deploy your site by uploading your files or connecting it to your repository.

If you are uploading your files, you just need to drag and drop your project folder it like so:

Then, Netlify will now deploy your site.

In this case, you can see the website at https://naughty-babbage-f0df56.netlify.com. You may change the site's name here.

If you want to update your files. Go to Deploys.

Drag and drop your project folder, then Netlify will take care of the rest.

Under Overview then Production Deploys,

Wait till the badge near the Production changes from Uploading to Published. When it's published then you're site is now updated.

2.2 Connect your Git Repository and Deploy

Another way of deploying your site is by connecting your repository to Netlify. You may do so by clicking New site from Git.

It will lead you to three easy steps

1. Connecting to a Git provider which can either be GitHub, GitLab or BitBucket.

2. Picking a repository

3. Configuring your Build options

You can leave build command and publish directory blank if you're not using Hugo, Jekyll, Gulp and the like.

With that, the site is live at https://keen-lamarr-271c97.netlify.com.

3. Changing the Site's Name

To change the name, go to the Site settings

Then, scroll down to Site details

In this case, I'll be changing it to jorenrui.

After that you're all done.

Congrats 🎉Your site is now up and running.

For more information, you can visit Netlify's Docs.

Return to TOC

Surge

Surge is another static web host in which you can use to deploy your site. It uses the command line in deploying your application.

Pre requisites

Familiar with the Command Line
Latest version of Node.js

Installing Surge
Deploy using Surge
CNAME

1. Installing Surge



npm install --global surge

For Linux users:



sudo npm install --global surge

2. Deploy using Surge

First go to your project folder. In this example, the folder's name is jorenwebsite.



cd jorenwebsite

Then run surge:



surge

You can now login or create an account from the command line.

project: <your project folder's path>
domain: <your-project-name>.surge.sh

You may check your site at <your-project-name>.surge.sh

When updating your files, make sure you're in the project's folder. Then, you may re-deploy the site with this command:



surge --domain jorenwebsite.surge.sh

3. CNAME

Save your domain name by using CNAME. In your project folder, create a file named CNAME.

You may do so by using the CLI:



echo jorenwebsite.surge.sh > CNAME

Or create a file named CNAME, open your text editor, add your domain name, and then save it.



jorenwebsite.surge.sh

In this case, the domain name is jorenwebsite.surge.sh. Just replace it with yours.

Now when you update your files, you don't need to type out surge --domain jorenwebsite.surge.sh. You can re-deploy your app by just typing surge

Hurray ✨ You're all done!

For more information, you can visit Surge.

Return to TOC

Dynamic Web Hosting (PHP + MySQL)

Heroku + Remote MySQL for Laravel Apps

In this part, we're going to use Heroku + Remote MySQL combo to deploy our Laravel web app.

Heroku

Heroku is one of the great places to deploy your web apps. It makes use of Git to deploy your apps and has its own Heroku CLI in which you can run bash.

Pre requisites

Familiar with the Command Line and Git
Git installed
PHP installed
Composer installed
A working Git repository

To check if Git is installed:



git --version

To check if PHP is installed:



php -v

To check if Composer is installed:



composer -V

Setting up Heroku for Deployment

Create a Heroku Account
Installing Heroku CLI
Preparing the App
Creating a Procfile
Create an App on Heroku
Adding a PHP Build Pack
Setting the Heroku Config Variables
Pushing the Code to Heroku
Checking the App

Integrating MySQL

Create a Remote MySQL Account
Setting the Database Config Variables
Working with the Database
Checking the App

Issues you may encounter and how to solve them

Setting up Heroku for Deployment

1. Create a Heroku Account

If you don't have a Heroku account yet, you can create one here

2. Installing Heroku CLI

First, install Heroku CLI.

After that, you may now login to Heroku thru the CLI:



heroku login

3. Preparing the App

Assuming you have a functioning git repository, go to its directory. In this example, the project's folder is named jorenweb.



cd jorenweb

Make sure that your app has this:

composer.json - it indicates that it is a PHP application

4. Creating a Procfile

To create a Procfile from the CLI, run this command:



echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

Or manually create a file named Procfile that contains:



web: vendor/bin/heroku-php-apache2 public/

This will set the document root to public/.

Then commit the changes:



git add Procfile
git commit -m "Add Procfile for Heroku"

5. Create an App on Heroku

To create an app on Heroku, run this command:



heroku create jorenweb

Replace jorenweb with your chosen app name. The app's name will be the domain name which is https://<app name>.herokuapp.com/. Leaving the app's name blank will make Heroku generate a random one for you.

6. Adding a PHP Build Pack



heroku buildpacks:set heroku/php

7. Setting the Heroku Config Variables

Laravel encryption key

To check the encryption key, run php artisan:



php artisan key:generate --show

Then copy and set it on Heroku using the heroku config command:



heroku config:set APP_KEY=...

where the ... is the key you copied from the php artisan command.

App's URL

The App's URL is <app-name>.herokuapp.com. In this example, the app's name is jorenweb.



heroku config:set APP_URL=jorenweb.herokuapp.com

8. Pushing the Code to Heroku

Push your code with this command:



git push heroku master

If you have more than one app, run:



git push heroku master --app <app-name>

9. Checking the App

You can open your app with this command:



heroku open

Or go to https://<app name>.herokuapp.com/.

Note: There may be some error if your app needs a database on startup.

Integrating MySQL

There are several websites that offer free MySQL that comes with PhpMyAdmin such as Free SQL Database and db4free. Note that you should only use this for testing purposes and not for production.

In this post, we're going to use Remote MySQL. You can have up to 3 databases using the same email.

The limitations of using it are:

1. Create a Remote MySQL Account

Create a Remote MySQL Account here. After that, take note of the username, password, database name and port.

2. Setting the Database Config Variables

There are three ways in which you can approach this:

Heroku CLI
Heroku Web
Updating the Database file

Using these different approaches, we'll update the host, database, username, password of the mysql connection.

a. Heroku CLI

Using the Heroku CLI, first make sure that you are logged in.



heroku login

Then, you can now update the following:

connection = mysql



heroku config:set DB_CONNECTION=mysql

host = remotemysql.com



heroku config:set DB_HOST=remotemysql.com

database = WP0BqJ4QBT (change this to the Database Name you received in earlier on remotemysql)



heroku config:set DB_DATABASE=WP0BqJ4QBT

username = WP0BqJ4QBT (change this to the Username you received in earlier on remotemysql)



heroku config:set DB_USERNAME=WP0BqJ4QBT

password = fHduIl02Bk (change this to the Password you received in earlier on remotemysql)



heroku config:set DB_PASSWORD=fHduIl02Bk

b. Heroku Web

On Heroku, login and go to your app.

In the navigation, go to Settings.

Then scroll down to Config Vars and click the Reveal Config Vars button.

Then update the following variables:

connection
host
database
username
password

You may see the APP and APP_KEY in which you set earlier in the process of creating the Heroku app.

c. Updating the Database File

In config/database.php, update host, database, username, password in the mysql connection.



    ...

    'mysql' => [
            'driver' => 'mysql',
-           'host' => env('DB_HOST', '127.0.0.1'),
+           'host' => env('DB_HOST', 'remotemysql.com'),
            'port' => env('DB_PORT', '3306'),
-           'database' => env('DB_DATABASE', 'forge'),
-           'username' => env('DB_USERNAME', 'forge'),
-           'password' => env('DB_PASSWORD', ''),
+           'database' => env('DB_DATABASE', 'WP0BqJ4QBT'),
+           'username' => env('DB_USERNAME', 'WP0BqJ4QBT'),
+           'password' => env('DB_PASSWORD', 'fHduIl02Bk'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'options' => [PDO::ATTR_EMULATE_PREPARES => true],
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
        ],
    ...

Then push your changes:



git add config/database.php
git commit -m "Update MySQL DB Configuration"
git push heroku master

3. Working with the Database

There are two ways in which you can access the database:

thru PhpMyAdmin
thru Heroku Bash

PhpMyAdmin

To access the database using PhpMyAdmin, login to Remote MySQL. Then, enter the username and password you've received during sign up. After that, just import your SQL dump.

Heroku Bash

The other way is using Heroku Bash.

First login to Heroku if you haven't done that:



heroku login

Open the Heroku bash by running the command:



heroku run bash

Then, you may now migrate your database:



php artisan migrate

and seed it:



php artisan db:seed

4. Checking the App

You can open your app with this command:



heroku open

Or go to https://<app name>.herokuapp.com/.

Congrats! ✨ 😆 You're all done!

Issues you may encounter and how to solve them

a. Serving Assets thru HTTPS

When in development mode, you mostly use HTTP. But now that the it is in production, the assets may not load properly. Take this link tag for example:



<link href="{{ asset('css/app.css') }}" rel="stylesheet">

asset() uses HTTP while secured_asset() uses HTTPS.

But if you don't want to force HTTPS on environments, there is another solution.

To solve this, go to app\Providers\AppServiceProvider.php and add the following codes:



  namespace App\Providers;

  use Illuminate\Support\ServiceProvider;
+ use Illuminate\Support\Facades\Schema;

  ...



  ...

  public function boot()
  {
+    if(config('app.env') === 'production') {
+    \URL::forceScheme('https');
+    }
  }

  ...

This will change the URL from HTTP to HTTPS when in production.

Then you may commit this changes, then push to Heroku.

b. Specified key was too long error during migration

In app\Providers\AppServiceProvider.php, update the boot function:



  use Illuminate\Support\Facades\Schema;

  public function boot()
  {
+    Schema::defaultStringLength(191);
  }

Then you may commit this changes, then push to Heroku.

c. Error in using `fzaninotto/faker` during Database Migration on Heroku (Class `Faker\Factory` not found)

In composer.json, move fzaninotto/faker from require-dev to require.



    ...
-       "laravel/tinker": "^1.0"
+       "laravel/tinker": "^1.0",
+       "fzaninotto/faker": "^1.8"
    },
    "require-dev": {
        "beyondcode/laravel-dump-server": "^1.0",
        "filp/whoops": "^2.0",
-       "fzaninotto/faker": "^1.8",
    ...

If you're currently in Heroku bash, exit from it:



exit

Then commit your changes and push it to Heroku:



git add composer.json
git commit -m "Update composer.json"
git push heroku master

Then run Heroku bash again:



heroku run bash

Install the dependencies:



composer install

Then migrate and seed your database again:



php artisan migrate:refresh --seed --force

For more information, you can visit Heroku's Documentation regarding Laravel.

Return to TOC

000webhost

000webhost is a free web host that support PHP and MySQL apps. It also comes with a control panel which has PhpMyAdmin and a web-based file manager.

Although 000webhost enables deploying your web app via file upload and is free of charge, it also comes with great security risks. That is why I do not recommend it for long-term usage. Learn Git and use Heroku instead. Or better yet, use a paid web host, it will be worth it in the long run.

WARNING!
Be careful in using 000webhost cause it has been pwned.
-Mohammed Foysal

Create a 000webhost Account
Create your Website
Upload your Files
Moving Files
Configuring your Database
Setting up your Web Address (optional)
Check your Web App

1. Create a 000webhost Account

If you don't have a 000webhost account yet, you can create one here. Then you'll receive an email to verify your account.

2 Create your Website

After verification, create your first website either by clicking Create your first website or Build Website.

After that it will ask you questions like your Website Name and Password.

Your web address will be <website-name>.000webhostapp.com . In the case above, the web address is jorenweb.000webhostapp.com .

3. Upload your Files

In the navigation, go to Website Manager then click File Manager.

This will take you to the File Manager page. Scroll down and click on Upload your files button. Then you'll be directed to the 000webhost File Manager in which you can now upload your files.

Make sure that you're in the public_html directory. For uploading your files, you can either drag and drop your files or click the upload icon.

I suggest archiving your project's folder as a zip file, upload it, and then extract it.

In extracting it, let the directory be . in which you'll be referring to the current directory that you're in. In this case, extracting it to the public_html directory.

Make sure that it is a zip file and not a rar file. Failing to do so will result in an error like so:

After that, you're done uploading your files. You may now delete the zip file.

4. Moving Files

Go to the extracted folder. In this case, it is jorenwebsite. Select the files you're going to move and click the move icon.

Then change the destination to /public_html.

Lastly, delete the folder in which the files where extracted. In this case it is jorenweb folder.

With this your site is now live at <website-name>.000webhostapp.com .

5. Configuring your Database

In the navigation, go to Website Manager, then click Database Manager.

Create a New Database.

Then enter your Database Name, Database Username, and Password.

You can now update your database configuration.

In the example above, the database config are:

Database Name: id8995764_jorenweb
Database User: id8995764_admin
DB Host: localhost
Password: <the password you entered earlier>

Then you can manage your database using PhpMyAdmin.

In the navigation, go to Import. In here, upload your SQL dump.

6. Setting up your Web Address (optional)

By default, your app's web address is: <website name>.000webhostapp.com

To add a free custom domain name, go to Freenom. The extensions that are free are

.TK / .ML / .GA / .CF / .GQ

Check the domain’s availability and click Checkout.

After getting your domain, set up the Name Servers. Click Use DNS then fill up the fields:

Nameserver: ns01.000webhost.com
Nameserver: ns02.000webhost.com

Or go to My Domains > Management Tools > Nameservers to set it up.

Also, pick the period in which you'll use the domain name then you may continue.

In checkout, you'll receive an email in which it will redirect you to a registration page to finish the order.

Return back to 000webhost.

In the navigation, go to Website Manager then click Set Web Address.

Scroll down and click Add Domain.

Pick Park Domain then enter the domain name you registered in Freenom.

Then wait for the domain name to be linked. Changes may take up to 24 hours.

7. Check your Web App

See your website at https://<website name>.000webhostapp.com/

or if you have a park domain, www.example.tk

After that, you're done. Congrats! 🎉

If you want some SSL certification for your website, you can use Cloudflare for free.

For more information, you can visit the 000webhost forum.

Return to TOC

Wrapping Up

For websites that doesn't need a database you can use static web hosts like GitHub Pages, GitLab Pages, Netlify, and Surge. You can also explore and find other web hosts like Zeit and AWS Amplify.

As for PHP+MySQL web apps, you can check out 000webhost if you're a beginner that doesn't use any frameworks. But be warned, it has great security risks and I do not recommend it for long-term usage. But if you want to deploy a Laravel App that uses MySQL you can check out Heroku + Remote MySQL. On the other hand, Heroku doesn't only offers PHP web app hosting. It can also host NodeJS, Ruby, Java, Python and Go web apps.

These are the web hosts that I've found as I searched for ways of deploying my web apps. From uploading files to using Git thru the CLI, my deployment process became easier. I mostly enjoyed my shift from 000webhost to Heroku as I became comfortable with the CLI. Also, if you can, use a paid web host like Digital Ocean or AWS. It's so worth while in the long run. I hoped that sharing this managed to help you in some way.

Thanks for reading and happy coding! 😄 ☕

My Web Development Process Part 2: Code

Joeylene — Mon, 04 Mar 2019 01:52:32 +0000

I'll be discussing how I develop web-based apps. I'll include how I do things, what software I use, and resources that helped me. I'm still a college student. So I expect that my web development process will greatly evolve once I enter the workplace and gain more experience.

In this post, I'll be discussing the code part of my process. If you missed the first one, feel free to read the Design Part of my process. 😊

My Web Development Process Part 1: Design

Joeylene ・ Feb 25 '19 ・ 8 min read

#webdev #design

For now, I'm following these steps:

Research and Ideation
Design
- User Experience (UX) Design
  - Rough Sketches
  - Wireframe
- User Interface (UI) Design
- Database Design
Coding
- Front End Development
- Back End Development
Test and Deployment

Coding

Now that the designs are finalized, we can now start coding. My process consists of two parts:

Front End Development - where I translate design to code.
Back End Development - where I add some logic and database.

I do front end first, then the back end after.

I put breaks in between whenever I'm coding. This lets me ponder on the task I'm working on. I also realized that when I ran into a bug, breaks help. I'll set a time frame to work on that bug. When the time is up, I took a break whether I like it or not.

I let my mind wander while I do other stuff that isn't coding. This makes me think of the solution from a different perspective. Not only machines overheat when overused, so does your brain. If you want to deliver your best, then you should practice self-care.

Front End Development

Before I code, I gather the assets that I need such as:

Fonts and Icons
Pictures
Others

I also think of these questions

Am I gonna use templates or should I go with a custom one?
Am I building this app with scale in mind?

These questions are often considered in the design and planning phase. So you may know the answers by now.

If you're using a template, then you can skip this part and go straight to Back End Development.

Else if you're going to create a custom one then go ahead.

The Grid

I first start with analyzing the layout of the design. I identify the squares in each screen.

Let's take this as an example:

Tribute Page I built for CSS Grid practice. Check the repo here.

Those elements are all contained within a box. Highlighting them, the result would be:

I took a top-down approach. Starting from the bigger components then down to the smaller ones.

This way I'll get a clear grasp on its grid layout. In here, the design has two major columns. The left is for the image with its caption, and the right is for the quote and some info. If the image on the left covered the whole left column, then I'll know that it's a background of a div. But since it isn't, I can tell that it is an img tag inside a div. Though, it depends. One can have many solutions for an answer. You just have to pick the most suitable for that situation.

Knowing how the layout is organized helps in knowing what kind of grid you're going to make. Then, I code the grid (CSS Grid, Bootstrap, etc.). I temporarily add background colors to visualize it.

You can see the CSS Grid using Developer Tools:

Though, you can also use it to see the grids you made using frameworks. Just use Developer Tools to your own advantage.

Iterate throughout the pages of the website

Then, I'll repeat these steps:

Make a Grid (HTML & CSS)
Add elements (HTML) - preferably use semantic tags
Add styles (CSS)
Add behavior (JS)
Make it look good on different browsers (support IE, I dare lol. Just think of graceful degradation)
Polish its responsiveness for mobiles, tablets, etc. (Media Queries)

When I code, I go through each section per page. Then each page per website.

Don't forget to polish your site for SEO and Accessibility.

When the front end is done, I test deploy the app. Then, ask a teammate to test and review it. After that, I work on the revisions or bug fixes.

Though, your process may evolve as you decide to use frameworks, libraries, preprocessors, task runners and such. What I've shown is the simple way (for me, I think haha) in doing the front end.

Back End Development

I've only done back end twice: during my OJT and now in my current school project. So, I got nothing much to say in this.

Anyways, my process kinda looks like this:

Code the Database (Tables, views, and etc.)
Populate the Database
Work on Authentication (Login, Register, and etc.)
Work on each module (Do them based on priority)
- Add CRUD Operations
- Add Tricky Operations
Polish the Access Control
Polish the Security/Validations

I prefer having mock data to work with that is why I start with the Database.

Code Editor (in case you're curious)

For my code editor, I use:

Visual Studio Code (powerful editor that has built-in git and terminal)
Sublime Text (simple editor that is quick and easy to use) then pairing it with Hyper (a beautiful interface)

I often switch around these two editors depending on my mood. Anyways, there are also other editors you can try out:

Atoms
Brackets
Vim
Others

I've installed both Firefox and Chrome. While Microsoft Edge is already installed. I mainly use Firefox for development then check the app using the other browsers.

Test and Deployment

Now that the coding/development phase is done, we can now start testing. By the way, you can do Test Driven Development in the previous phase. It is where you write tests first, then work on creating functional code that passes these tests.

After doing some front end, I test out my code if it works on all browsers. Then, I test out the functionalities one by one after adding some back end. When everything is all set, I test deploy the app and ask someone else to review and test it. Often times, they'll discover an issue.

In the beginning, I used these for deployment:

000webhost - it can host PHP+MySQL apps for free. (Yes, I use PHP for now... hehe)
GitHub Pages - for static websites

I was intimidated with the Command Line Interface (CLI) at first. I even upload files to GitHub instead of using Git lol.

Now, I have seen the awesomeness and the glory of using the CLI. So I now use these for deployment:

For Static Websites:
For Web Apps:
- Heroku
- and remotemysql - for testing only

You might want to check out this article regarding Deployment 👇

6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free

Joeylene ・ Mar 20 '19 ・ 21 min read

#webdev #deployment #netlify #heroku

Wrapping Up

Seeing how requirements turn into designs which in turn be translated into code is awesome. You don't need to dive in deeper in other phases. Gaining some insights is enough. Understanding the fundamentals of other areas besides coding can help you grow as a developer.

For the coding part, all I can is that tests are important. Do it before or after you code the functionalities. Just don't forget about it. Also, getting feedback from your teammates is valuable. They may see something you might have overlooked.

Hope that sharing my web development process helped you in any way. Now I'm curious how you guys do yours. 😆

Thanks for reading and happy coding! ✨

My Web Development Process Part 1: Design

Joeylene — Mon, 25 Feb 2019 03:32:50 +0000

I'll be discussing how I develop web-based apps. I'll include how I do things, what software I use, and resources that helped me. I'm still a college student. So I expect that my web development process will greatly evolve once I enter the workplace and gain more experience.

In building several web-based applications over a year, my process went through several changes. In the past, I went straight to code. I often find myself staring at the screen for a few minutes thinking about how I'll proceed. I'll also try some ideas only to scrape it at the end.

Development without any direction can get pretty messy. It may result in an ill-conceived or a not well thought-out app. So, I redesigned my workflow. As I gain more knowledge in web development, I realized that it isn't just about coding. It's about problem-solving.

For now, I'm following these steps:

Research and Ideation
Design
- User Experience (UX) Design
  - Rough Sketches
  - Wireframe
- User Interface (UI) Design
- Database Design
Coding
- Front End Development
- Back End Development
Test and Deployment

Looking at it closely, it is similar to the Software Development Life Cycle (SDLC). It is a process in which a project team follows to develop software. It consists of six steps - planning, analysis, design, implementation, test, and maintenance.

Research and Ideation

To start, I'll strive to understand the project, its purpose, the client, and the audience. That can either be done by researching or asking the client. By doing this, I'll have a clear idea regarding what content should the app include.

I'll also look at the apps built by others. It helps in giving me ideas on the similarities and differences of that kind of app. For example, e-commerce web apps usually have a shopping cart.

I ask myself these questions:

Who is the client?
What is important to him/her?
Who is the audience?
What is important to them?

I got this idea when I was watching how Travis Neilson in DevTips builds his Personal Website. Watching multiple designers work got me interested in UX Design.

Anyways, as the designer, it is your job to decide where the content will be placed that will satisfy both the client and the audience. Identifying what's important to both of them can guide you in making decisions. Without this step, you might build the project in the wrong direction.

Knowing what contents that need to be prioritized, I've made lists. Ordered them based on priority. Then, I'll think about how they're connected to each other. With this, I can establish the hierarchy of the content. Like the login page first then the admin dashboard page.

Lastly, I'll think about what technology stack I'm going to use. I'll decide on the framework or the library for that project. Maybe, I may want to try plain HTML & CSS, and vanilla JS for fun or practice hehe.

Design

User Experience (UX) Design

User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users.
-Interaction Design Foundation

Now that I have a clear idea of what the project should contain, I'll proceed to design. I consider the following in making the design:

Layout
The flow of the app when a user uses it (User Flow I guess)

Rough Sketches

Wireframe via pen and paper

In this step, I'll think about how the content is going to be organized and presented. I'll start with rough sketches. Following the list of content I've written, I'll create at least three designs per item.

I'll sketch out my ideas using pen and paper to lessen the distractions. I'll just let all my ideas flow. Not minding whether the lines are straight or not. Not being concerned if it looks great, just focusing on the layout. Just letting my mind go wild in shaping the form of the ideas I had in mind. I'm deciding what form the content should take.

After I ran out of ideas, that's where I'll stop. I'll eliminate the designs that I'm not okay with. Then, pick the most suitable design out of them all.

Next, I'll resketch it again in a neater way. I organize the screens and connect them, showing the flow of the app. There may be times when the design will vary due to constant re-evaluation and enhancement.

Wireframe

Wireframe and Prototyping using Adobe XD

Now, I'm ready for now some wireframing using Adobe XD. There are applications made for design. These are:

Adobe Experience Design - Mac and Windows (Currently using this)
Sketch - only for Mac users
Figma - Web-based, Mac, Windows, Linux
There are others like inVision Studio and UX Pin

I'll transfer my sketches from paper to the software. I only use different shades of black when doing the wireframes. This forces me to focus on the layout rather than the looks or style. I'll make it interactive through the use of wires between the screens. Like when I click the login button, it'll transfer me to the dashboard screen.

With this, I can get early feedback from my team or my client. With other people's input, I can see what designs problems I've overlooked. This helps in refining the design. So that it'll focus on solving the problems encountered by the end users. It also prevents me from building the app in the wrong direction. After finishing the wireframe, I'm off to user interface design.

User Interface (UI) Design

User interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style.
-Interaction Design Foundation

Designing the Website using Photoshop

I'll skip this step when I've decided to use a template. Otherwise, I'll create my own design.

I look at other's work for inspiration at least once a week. This keeps my creative mind going. It helps me to think of fresh ideas whenever I've hit a roadblock.

For the color scheme, I use the logo's colors as a basis. I also consider the theme when picking colors. For nature, I'll pick green. For fast foods, I'll go with red and yellow to incite hunger. If it is for fun, I'll experiment with the color palette that I see in the environment.

I limit myself when using fonts. Two or three are enough for me. I use fonts that complement each other. I also show the contrast between them. Like pairing the big, bold, sans serif headline with a regular, serif paragraph.

While I have all those in mind, I prioritize readability. I choose colors that are pleasing to the eyes. I'll pick fonts that don't get away with reading the content. And I prefer short paragraphs as opposed to lengthy ones (if it isn't an article).

For images, I'll pick high-resolution ones. Never stretching it, which distorts the image, just to fit the screen.

Lastly, for the animation and transitions, I'm still learning it hehe.

Software that I use in making the designs are:

There are also others in which you can use like:

Adobe Illustrator
GIMP
Software that I've mentioned earlier like Figma and Sketch.

Resources that helped me are:

Dribble - contains numerous works by awesome designer and creatives. I use it for inspiration.
Color Space - for creating color palettes or gradients.
Paletton - for creating color palettes.
Font Awesome - icon kit you can use.
Google Fonts - various fonts you can use.
Unsplash - awesome photos you can use for free.
unDraw - open source illustrations.
Lorem Ipsum Generator - placeholder text generator.

Database Design

This is for apps that need a database. I mostly do front end stuff. So, I rarely tackle this unless I have no choice. I often use RDBMS. I haven't tried noSQL yet.

In database design, I start with analyzing the manual forms or documents I've gathered. These documents can be receipts or registration forms. Then, I normalize the data. This helps in preventing data anomalies.

Database normalization is the process of structuring a relational database in accordance with a series of so-called normal forms in order to reduce data redundancy and improve data integrity
-Wikipedia

Data Normalization via pen and paper

Then I create an Entity Relationship Diagram to help me visualize their relationships. The diagram becomes my guide whenever I'm programming and maintaining the database.

Entity Relationship Diagram via pen and paper

As you can see, I prefer to sketch out my ideas first before converting it to digital.

Wrapping up

Taking the time to research, plan, and design can greatly affect the quality of the app. Jumping straight into code, like what I do in the past, can make web development messy.

Researching and planning can lead you to develop apps with purpose and intention. It helps you to identify what is important, and the problems that need to be addressed. Designing can make your app usable and understandable. It also makes you think about the user experience.

I'm constantly learning web development. So, I expect some changes to my process as I gain more experience. It's so awesome to know that each step has a special role to play in web development. Since it isn't only about coding, it is about solving problems. That's why I'm eager to learn more about other fields besides coding.

And that's Part 1 of My Web Development Process. Part 2 is gonna be about coding.

My Web Development Process Part 2: Code

Joeylene ・ Mar 4 '19

#webdev

I hope you've enjoyed reading this. Thanks for your time and happy coding! 😊

DEV Community: Joeylene

My 2020 in Review

My 2019 in Review

Joeylene ・ Dec 31 '19 ・ 8 min read

January: Internship

February: New Opportunity, Seminar, and Hackathon

March: First Developer Job

April and May: Side Projects

A Look into How I Manage My Personal Projects (My Git/GitHub Workflow)

Joeylene ・ May 15 '20 ・ 14 min read

June, July and August: Work and Buying Stuff

September: Hell

October and November: Side Projects and Games

December: ES6 and Sutle

Reflection...

A Look into How I Manage My Personal Projects (My Git/GitHub Workflow)

Table of Contents

1. Project Overview

2. Setting Up

3. Project Boards

4. Issues and Milestones

Milestones

Issues

Task Issue

Epic Issue

Bug Report

5. GitHub Templates

Branching Out

Templates

Task Issue Template

Epic Issue Template

Bug Report Template

Pull Request Template

Commiting

6. Pull Request

7. Merging Branches

Wrapping Up

My 2019 in Review

January: A new beginning

freeCodeCamp Survey Form

Created an Instagram account

Been learning Laravel

February: Writing

Publishing my first blog post on DEV.to

My Web Development Process Part 1: Design

Joeylene ・ Feb 25 '19 ・ 8 min read

March: SAD and Blog Posts

Designed a Login Page

Published two articles

My Web Development Process Part 2: Code

Joeylene ・ Mar 4 '19 ・ 6 min read

6 Ways to Deploy your Personal Websites / PHP+ MySQL Web Apps for Free

Joeylene ・ Mar 20 '19 ・ 21 min read

Passed the System Analysis and Design (SAD) Defense

April - May: Teaching...

Google Map Mobile App in Dark Mode

First time teaching

June - July: A month filled with designs and vector art

Created some more designs

Created some vector arts

GitHub Mobile App Design

August: Capstone and Vector Arts

Made some progress with the capstone project

More vector arts

September: Capstone and more coffee

Focused on my capstone project

Finished "JavaScript Grammar" by Greg Sidelkinov

October: Thesis and ReactJS

Thesis Defended

SPCC Portal

Started learning ReactJS

November: Portfolio and Internship

React Portfolio

Internship

December: Internship and ReactJS

Internship

More ReactJS Frontend Masters

Lessons I've Learned this Year (2019)

1. Know your "why"

2. Keep moving forward

c. Error in using `fzaninotto/faker` during Database Migration on Heroku (Class `Faker\Factory` not found)