Mahdia Aliyya

Sign in

As a developer, there are times when we build code and it works absolutely fine on our computer. But then you send it to the tester or other developers. and the code wouldn’t work on their system. This may happen due to the differences in computer environments. And this is where Docker comes in handy. But what is Docker exactly?

What is Docker?

Docker is a tool that is used to automate the deployment applications in a lightweight container so the application can work efficiently in different environments. It’s important to note that the container is actually a software package that consists of…


Previously, we have learned and created our style guide here. Now, I wanna share how I create components for our project using ReactJs styled-components.

In this article, I assumed that you have initiated your React.js project and also installed styled-components. If you haven’t, then you can refer to Creating React JS APP 101 and Styling React with Styled-components that my teammates wrote. Here, I will explore more on how to use styled-components to create components with various design states.

Defining Color Variables in index.css

Our website may have a lot of colors that are used. So that we don’t have to go back and forth…


Steps on how we create our web design style guide and how you can make one too

A style guide is a reference source where you collect and present all of the design decisions for your website. This includes its color scheme, typography, spacing, icons, imagery, and all the visual language used on your site.

Even though creating a style guide requires you to take extra time, but it comes with numerous beneficial factors:

  • Consistency in design, and easier to maintain
  • Project members can easily refer to the guide for the exact style use
  • Faster build time for new sections and pages

Okay. Now here’s how we create our style guide, following this article with some modifications.

Step 1: Study the brand


In this article, we will look into the architecture used in SekolahKu, Django-React. Hopefully, this will give you a brief idea of how a Django-React project architecture will look like.

Application architecture used in SekolahKu (source)

Django

Django use the Model-View-Template (MVT) software design pattern. It is a collection of three essential parts that its name explained itself: Models, Views, and Templates. This architecture intends to allows flexibility, since responsibilities are clearly separated.


An illustration of team dynamics (source)

Team Dynamics, explained by Kurt Lewin — a social psychologist and change management expert, is a concept of understanding the individuals that make up a team, a method of exploring behavior, and the reasons for that behavior. Team dynamics are the unconscious, psychological forces that influence the direction of a team’s behavior and performance.

A team with a good dynamic tends to have team members who trust each other, have mutual understanding, constructive, and demonstrate self-corrective behavior. A good team dynamic will improve overall team performance and get the best out of individual team members. …


Having a good User Interface (UI) Design is an essential part of a project. But what exactly is a good UI? And how do we make one? This article will cover about the princips and the steps to creating a good User Interface Design.

According to Interaction Design Foundation, User Interface Design is “the process designers use to build interfaces in software or computerized devices, focusing on looks or style.”

A good UI design aims to create interface which users find easy to use and pleasurable. …


Test-Driven Development, or known as TDD. There has been many discussions about its benefits and importance. It is too something that a lot of us Software Engineers are complaining about. Because, well, it maybe not that easy and it can be a real pain for some.

Be honest, some of us only write tests just cause we’re required to do so, and end up using DDT — Development Driven Test, which means deploying the code first than later write the tests accordingly (I’m not the only one who do this, right? :”D). This may get the code coverage up, but…


Have you ever find yourself forgetting what you just code? Wondering “what is this line of code for?” Uh oh.. it might be a sign that your code is not clean. The idea of Clean Code is to write a clear, concise, effective code so that everyone in the team— not only you, can understand it easily.

Worry not! These are some guides on how to have a ✨ Clean Code ✨

So How do You Make Your Code “Clean”?

Usually, every coding language has its own preferable coding convention. This includes naming rules, whitespace, programming principles, etc. Try to Google it then always refer to them. For…


As software developers, we often find problems when it comes to working in a team and finishing a project. We may be faced changes in requirements, features unmet, and working ineffectively. In this article, I will give you a walkthrough of one of the most popular Agile product development frameworks, Scrum.

Agile is a methodology based on iterative development that encourages adaptation to the team. It follows this mindset called Agile Manifesto:

  • Ability to create and respond to change over following a plan
  • Individual and team interactions over processes and tools
  • Working software over comprehensive documentation
  • Customer collaboration over contract…


“When i see a door with a push sign, i pull first to avoid conflicts!” —
Soundar Velliangiri

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

Git is a distributed version control system that tracks modifications to files in a folder or code changes. It is typically used by a group of programmers to work together on a project and organize their work so that it does not conflict with each other's work.

Git Manual 101

Here are some basic Git commands that are commonly used…

Mahdia Aliyya

i'll try my best to write something worthy here

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store