DEV Community: Emilie

Creating an accessible UI for 5-star rating system

Emilie — Fri, 02 Apr 2021 01:45:28 +0000

If you ever used online shopping malls and got a request to leave a review for an item you bought, you would often run into the 5-star rating system. It's intuitive and easy to understand, we can easily presume what each score would mean without any clarification.
I currently have been working on creating a shopping mall using PHP, HTML, CSS and some JavaScript and I decided to challenge myself to build an accessible UI for this one.

For this instance, I will use plain HTML, JavaScript and Bootstrap for CSS.
If you are not familiar with the bootstrap, check out this documentation!

If you have a good grasp of CSS, you would know what class would be the right choice for your work and it actually reduces a good amount of time as you would use the pre-configured CSS classes.

OK, Shall we start?

First off, I usually start with creating a HTML document.

You can see the example format down below with its finished work.

Easy peasy lemon squeezy!

As I chose Bootstrap for CSS, I added all the classes according to their uses simultaneously as well. Since we aim to create an accessible user interface, I have included the WAI-ARIA attributes such as role, aria-label and aria-checked to provide improved semantics for the HTML document.
I mulled over for quite a while and I decided role="radiogroup" for the wrapper div which contains all the icons and anchors. Since all the anchors actually work like radio buttons which should tell a user whether each of them has been checked or unchecked, I have come to the conclusion that this would be the best solution for this case.

I left the aria-label value for the same div just empty as that would be dynamically added by JavaScript followed by a user's choice. And I defined role="radio" to each anchor. This would be helpful for users with disabilities as assistive devices would let them know what they are and users can presume what they need to do with them. Moreover, they become more semantic with those attributes as each anchor contains aria-label and its value accordingly. I have already tested with VoiceOver on Mac, each time I move around the anchors, it read out the value of aria-label and role. Great!!!

Finally we're moving onto JavaScript.

(function (win, doc){
    const rating = {
        init : function () {
            this.rating();
        },
        rating: function() {
            const stars = doc.querySelectorAll('.rating');
            const starArray = Array.from(stars);
            const role = doc.querySelector('div[role]');
            let totalRate = 0;

            stars.forEach((el, i) => {
                el.addEventListener('keypress', (e) => {
                    const { key, target } = e;
                    if (key === 'Enter') interaction(i);
                });

                el.addEventListener('click', (e) => {
                    e.preventDefault();
                    interaction(i);
                });
            });

        function interaction(i) {
            starArray.forEach((el, j) => {
                const star = el.firstElementChild;

                if (i === j) {
                    if (star.classList.contains('bi-star')){
                        star.classList.remove('bi-star');
                        star.classList.add('bi-star-fill');
                        star.parentElement.setAttribute('aria-checked', true);
                        totalRate++;
                    } else {
                        star.classList.remove('bi-star-fill');
                        star.classList.add('bi-star');
                        star.parentElement.setAttribute('aria-checked', false);
                        totalRate--;
                    }
                } else if (i > j){
                    if (star.classList.contains('bi-star')){
                        star.classList.remove('bi-star');
                        star.classList.add('bi-star-fill');
                        star.parentElement.setAttribute('aria-checked', true);
                        totalRate++;
                    }
                } else if (i < j){
                    if (star.classList.contains('bi-star-fill')) {
                        star.classList.remove('bi-star-fill');
                        star.classList.add('bi-star');
                        star.parentElement.setAttribute('aria-checked', false);
                        totalRate--;
                    }
                }
            });

            role.setAttribute('aria-label', `Your rating is ${totalRate}`);
        }
    }
}
    rating.init();
})(window, document);

If you are using a module bundler, you do not need to use the encapsulation and IIFE like my example. As I didn't use a module bundler, these techniques were implemented in order to avoid any global variable pollutions with other JavaScript snippets.

As you can see, there are two types of event listeners, the click event is for users who use a mouse/trackpad and the keypress event is for users who mainly use a keyboard.

I created all the variables on the top of the code block so, I can easily refer to them whenever I need them. We all know that what HTML elements need to be manipulated according to users' interaction. First, all the anchors would work like radio buttons here.

const stars = doc.querySelectorAll('.rating');
const starArray = Array.from(stars);

As the variable stars is a nodelist(not an array), I also converted it into an Array using the method Array.from(). If you are not sure why you need to do this, let me quickly summarise it for you.

document.querySelectorAll() is not a part of JavaScript API. It is a part of Browser(document) API which let us access to DOM elements. The thing is even if it contains list in its name, it is not an array, but, a collection of nodes. How confusing! If you want to manipulate DOM elements using Array methods, you should convert the nodelist into an array beforehand. One more thing! As you can see from my code snippet, the nodelist stars is iterated by forEach. Do not confound the NodeList.forEach() with the Array.forEach() method here! Actually, these are not JavaScript APIs, you can see them from other languages in order to interact with documents. I hope this clarifies your confusion.

The whole code snippet is basically to add an event listener for each anchor element and it runs the rest of the codes inside of the correct event type according to a user' input device. To reduce the repetition of the codes, I have wrapped the codes in the forEach method. If I didn't do it this way, I have to create the same event listener for each anchor element, that is to say, 5 times in total per event type! This way we can provide more readable codes for a team and we can work more efficiently.

To maximise the code reuse, I created a function called interaction.
Whether it is a mouse or keyboard interaction, fundamentally how they work is identical. I used the forEach method in order to iterate the same work over all the elements and the rest of the code is just to interchange the classes between bi-star and bi-star-fill based on the condition I wrote.

As I used ForEach twice, there are two index type, i and j.

i index indicates the index of the anchor element which is clicked by a user amongst 5 of them and as j index is for the nested loop, the array indicated by j index will iterate every time a user clicks an anchor element. For example, the if( i === j ) statement is to enable the repeated interaction in case that a user clicks or keypresses multiple times on the same element, that is to say, aria-checked value can also switch between true and false interchangeably. Finally, each time a user interacts with the 5-star rating, the aria-label value will also change accordingly.

Based on the Google lighthouse report, there was no error detected and everything works smoothly without any error. However, if you noticed any improvable point of my work, please, do not hesitate to leave a reply and let's discuss! ;-) I hope you find this tutorial helpful for your work and if you enjoyed this, please leave a comment and like my post as well!

Cover Photo by Bonneval Sebastien on Unsplash

WordPress VS PHP Scripting

Emilie — Sat, 20 Mar 2021 20:23:04 +0000

This is my comparison and contrast between WordPress(E-reader's digest) and PHP Scripting(Furniture shop) to build websites. If you are interested in learning one or the other, this may give you an enlightenment to make your mind up to decide which one you would start with first.

Navigation

Both websites have responsive navigation which automatically fits the users' screen size from a single URL. As can be seen below, they are very similar navigations in terms of how they work and are viewed by users. However, there are a few distinctions to achieve the same functionality between the two websites.

The WordPress theme provides a responsive layout as default. Therefore, it doesn’t require any hand-coding unless a user wants to make any customisations for cosmetic purposes. It can be simply created by adding up the menu categories from the admin page.

On the other hand, Furniture Shop requires web programming skill to implement responsive navigation such as comprehending what a responsive design and media query are and how to create grid/flex layouts. For the Furniture shop, CSS bootstrap framework is used to reduce the initial set-up time for CSS. As such, HTML formatting, pictured below, was the prime task and all CSS classes are preconfigured from bootstrap; they have been added to class attributes accordingly in order to create the user interface. Since the navigation is present throughout all pages on the website, it is modularised into navigation.php in the components folder, so that it can be embedded throughout all the pages by using <?php includes 'components/navigation.php' ?>.

Database

With E-reader’s digest, the data tables are preconfigured and the data is populated automatically when categories, posts and other data is created by users. The easy-to-use interface is intuitive and allows for the creation of a website even without knowing about the database. At the same time, the provision of preconfigured options in WordPress could be seen to somewhat limit creativity; WordPress might be seen more like a paint-by-numbers picture compared to the blank canvas offered by PHP Scripting.

The database for Furniture Shop was created with phpMyAdmin which supports MySQL with its intuitive web interface. Creating, dropping and modifying tables, columns and data isn’t challenging and it actually can be comparable with the former method thanks to its web interface. But, the difference with WordPress is that the connection and closure of database and query statements should be hardcoded in a PHP file to communicate with the database. Once specific data from products table is called, the relevant data based on columns’ name would be displayed according to a unique product_id. Unlike the former method, the configuration and displaying of columns is up to the developer so that the customisation pertains to the programming logic.

Thumbnails

The thumbnail of E-reader’s digest was created by a plugin called Advanced Excerpt. It automatically generates thumbnails of all the posts based on the user’s setting, as can be seen in the image below. While it might be desirable to allow users to have full control of the thumbnail customisation, ‘Advanced Excerpt’ is arguably very helpful for non-technical users.

With regards to Furniture Shop, the thumbnails, which were created by hand-coded PHP, HTML and CSS, can be seen below. The benefit of this method is having full control of the thumbnail component such as styling, layout and content. Owing to the bootstrap framework, the fluid layout was easily achieved by adding a few CSS classes.

Detail page

The detail page of WordPress was generated by creating a post using its WYSIWYG editor. This is the power of WordPress’ Content Management System (CMS) which provides several component blocks such as Heading, Paragraph, Table, Columns, etc and reusable blocks can be created by grouping them.

This is arguably the best way to create a blog post as bloggers can be creative online without web programming skills and present their work in a way they want to.

While this is the case, when considering an e-commerce website with a thousand products that need to be uploaded, this kind of repetitive creation for each product page could be seen to be cumbersome and inefficient.

On the other hand, the detail page of Furniture Shop avoids the aforementioned potential disadvantage of the WordPress website. Each thumbnail of a product item is wrapped by <a> tag and the hyperlink contains a query parameter “product_id” with a unique ID for the product. As soon as a user clicks the hyperlink, PHP scripting starts communicating with the database to request the product data which has the same ID from the products table.

Once it successfully retrieves the data, the rest of the codebase runs and the display of the detail page is completed. If not retrieved, it will show an error message. By doing so, it eliminates the onerous amount of work to create each detail page per item.

Conclusions

WordPress enables the buildings of a website without initial engineering overhead. However, the more a user wants to customise a theme and plugins, the more time would be needed to learn how to do so and then optimise it. This would be a time-consuming process to take more control over those plugins and the theme. At the same time, the loading time appears to be somewhat cumbersome and slow in terms of performance. Perhaps it may be a downside of the server-side rendering which is implemented by WordPress using PHP and MySQL under the hood. Moreover, the more new code blocks such as CSS and JavaScript are embedded for the modification of plugins and themes, considering the performance is more important as they would affect both the First Content Paint and the First Meaningful Paint.

PHP Scripting requires more time for the initial configuration and codebases should be hard coded to communicate with the database. Besides, the logic which tells a browser what to do and how to do the tasks needs to be explicit. At the same time, PHP scripting generally allows have full control over a website in areas such as layout, styling, performance optimisation, website architecture and Search Engine Optimisation, etc.

It would be fair to say that both WordPress and PHP Scripting have their advantages and disadvantages. Programming is about problem-solving and trade-offs. The best decision would be the most viable and achievable one within the given time, resources and knowledge as a developer.

Hope you find this was helpful for you and why don't you crack on it?

WordPress Local

JavaScript: demystifying numbers

Emilie — Tue, 12 Jan 2021 17:43:01 +0000

This story contains the anecdote behind how I came across the quirkiness of JS number during the development of a personal finance app.

As the application would grow and populate more numeric data, I came to wonder how commercial finance applications deal with fraction points of currencies. This question was derived from the multiple fraction point numbers after all the money values tallied up by JavaScript. When building a commercial application, this would be a prime discussion among developers, accountants and other stakeholders. As result of my lack of time and expertise in finance, I wasn’t sure how to approach to this issue and couldn’t conduct significant research. Considering this is a premature version of a personal finance app which doesn’t set out any rules in terms of any complex financial covenants, I just decided to keep it simple for now. Furthermore, the current implementation wouldn’t have a great effect on the actual monetisation of the users’ financial flow in a direct manner.

Putting aside how to define the fraction numbers, the reason why the aggregated result from JavaScript returns the unexpected fraction numbers was investigated.

This would be an example of the quirkiness of JavaScript numbers. Wouldn't you expect the result would be 58.87 if you have learn the basic arithmetic from school unless you are a CS student or a well-versed developer?

As I understand it, all computational processes run with binary code and representational data such as images, audio, characters and numbers which are stored as binary and are encoded in different formats to deliver their means. Specifically, JavaScript encodes all the numeric values with double precision floating point numbers(64 bit) following IEEE Standard. Even though we may expect the aggregate result from the example above to simply be 58.87, it returns all the fraction points by the nature of how JavaScript processes numeric value with double-precision floating point number. As such I decided to delve into this further to provide rationale and to advocate my decision regarding rounding up/down fraction numbers.

Photo by Alexander Sinn on Unsplash

IEEE754 Double-Precision binary floating-point format : Binary64

[¹] Significand precision is implicitly 53 bits. However, 1 bit is not stored since it goes through the normalisation and it always leads with value “1”. It’s called implicit bit, hidden bit and so on.

JavaScript has adapted Double-Precision floating point format as its standard for numbers. As we can conjecture from its naming, this format provides a wider range of numbers and higher accuracy compared to single-precision or half-precision floating-point format.

Specifically speaking, JavaScripts can process numbers in the range between Number.MAX_SAFE_INTEGER(253 - 1) and Number.MIN_SAFE_INTEGER(-(253 - 1)) based on the binary 64 format. However, ECMAScript 2020 which was published in June 2020 updated their specification and it includes a new built-in object BigInt which provides a larger number representation for JavaScript.

Naturally this format takes up more memory and requires a better processor to perform this computation. During this research, I also learned how to convert binary to denary and vice versa. This was a very constructive learning in order to understand the quirkiness of JavaScript Number. As such I’d like to articulate how the denary number is converted to 64bit binary number under the hood.

Denary 19.25

First, Convert the whole number 19 to binary : divide the number until the remainder is 0/1.

The Converted binary is 10011.

Read the remainders from bottom to top for the whole number.

Secondly, Convert the fraction number 0.25 to binary : multiply the fraction numbers by 2 until the value returns to 0.

The Converted binary is 0.01.

Read the decimal points from top to bottom at this time

Thirdly, Combine the two parts of the number and Normalise for significand and unbiased exponent (move the binary point to after leftmost 1 or to the right where the first “1” value exists) : Once the binary numbers are normalised, the number of times we moved the decimal point to the leftmost 1[²]will be the exponent in the base 2 notation.

10011.01 = 1.001101 × 2⁴

[²] If whole number conversion to binary starts with a decimal point, for example, 0.00110011, you need to move the decimal point to the right where the first “1” value is located. In this case, the result will be 1.10011 × 2⁻³

Fourthly, Get the biased exponent based on precision.

4 + 1023 = 1027₁₀ = 10000000011 ₂

Read the remainders from bottom to top just like the first step we did.

Fifthly, Determine the significand removing leading 1 from step 3.

1.001101

Finally, we have successfully converted Decimal number 19.25 to Binary64 format.

Now, I will convert a 64bit binary to the denary value which is a simplified demonstration to show you how the computer processes this under the hood.

64bit binary

For an easier explanation, refer to this table.

e = 2¹⁰ + 2⁰ = 1024 + 1 = 1025₁₀

p = e - 1023 = 2

p indicates precision.

The first column indicates the implicit significand value 1 which is called implicit bit[¹] and the value we get from the biased exponent subtracting the unbiased exponent denotes where the bit index starts from. If the exponent values are positive, move towards the right-hand side and if negative, move towards the left-hand side from the implicit bit as you can see on the table. Now, we have the denary value, 5.

n = 2² + 2⁰ = 4 + 1 = 5

If the number value is just an integer like in the example above, the calculation is straightforward. However, decimal is more complicated and it sometimes requires rounding up/down depending on the last value of significand.

64bit binary

e = 2⁹ + 2⁸ + 2⁷ + 2⁶ + 2⁵ + 2⁴ + 2³ + 2² + 2⁰

= 512 + 256 + 128 + 64 + 32 + 16 + 8 + 4 + 1

= 1021₁₀

p = e - 1021 = -2

p indicates precision.

This time exponent value is negative. So, we need to move to the left hand side two times.

purple cells denotes its repetitions of the pattern.

n = 2⁻² + 2⁻⁵ + 2⁻⁶ + 2⁻⁹ + 2⁻¹⁰ + 2⁻¹³ + 2⁻¹⁴ + 2⁻¹⁷ + 2⁻¹⁸ + 2⁻²¹ 2⁻²² + 2⁻²⁵ + 2⁻²⁶ + 2⁻²⁹ + 2⁻³⁰ + 2⁻³³ + 2⁻³⁴ + 2⁻³⁷ + 2⁻³⁸ + 2⁻⁴¹ + 2⁻⁴² + 2⁻⁴⁵ + 2⁻⁴⁶ + 2⁻⁴⁹ + 2⁻⁵⁰ + 2⁻⁵³ + 2⁻⁵⁴
= - 0.3

By the nature of binary and the larger bit binary deals with a wider range of fraction values for higher accuracy and precision, tallying-up the value of fraction point numbers by JavaScript returns quirky(?) values unlike we would expect.

My Hustle-bustle with the full-stack development

Emilie — Fri, 18 Dec 2020 20:50:40 +0000

Hello Devs!

I am going to write about my first ever full-stack app development story today. There are lots of things going on with me right now and I want to be honest about my experience so far. Anyone can glorify or gloss over their failure, however, I believe knowing my weakness and making mistakes is the best way to learn as a code newbie.

What can you learn from reading this?
You may gain general ideas about the development and a better insight before you start building an application or if you were considering developing a mobile application using Expo and Auth0, this would be a straightforward answer for your decision. My bottom line is that I am carrying lots of technical debts as a result of my lack of experience and expertise throughout the mobile application development.

Moreover, I am not a Java, Kotlin nor Swift developer. You may have noticed that if you have ever read my blogs before. I am a JavaScript developer who started learning JS with my enthusiasm for web development and naturally learned React Native. To develop a fully functional native application on your own, I think you are either a seasoned native developer or a 10x ninja full stack developer(or a walking tech company). But, I'm proud of my failure and happy to see myself improving. :-)

I have encountered the most nail-biting and tiring issue with the authorisation in conjunction with using the framework “Expo” and Auth0 since I started coding.

The main reason I chose Expo is the same reason why many developers chose frameworks over native languages; It provides many benefits such as an easy configuration, ample dependencies which can substitute the native functionalities without actually using the native language, Java/Kotlin(for Android) and the developer community which can be useful when I face any issues during the development. Since Expo has a fairly big community for React Native developers, I thought it would be the right choice.

My goal was to implement the authorisation code flow with PKCE(Proof Key for Code Exchange; called Pixy) which is the standard authentication method for the modern native applications and SPA(single page application)s. I initially wanted to add the minimum security layer on the backend for the databases which would be storing users' financial data. I underestimated the implication of the Pixy due to lack of my understanding. Even though this is not a commercial application, I wanted to simulate a real personal finance application-like feeling. I naively presumed that this wouldn't be much different from Role-based access control management. However, I have encountered two considerable impediments during the implementation of authorisation.

Discordance of the two tech stacks, Expo and Auth0

I spent loads of time and effort trying to make the two tech stacks work, this was the most devious and dubious path I have gone through as a developer. As I only have a limited experience with Auth0 and I have seen a React Native example from its website, I made a hasty decision without knowing the implication in the practicality of the implementation.

For any newbie developers who are still reading this far, let me explain to you about the Pixy first. An OAuth authorisation request should be performed through an external user-agent(such as the web browser) for the best practice in native applications and it also enables single sign-on for a better user experience.

I am not a security expert, but, simply put, would an embedded user-agent be used, the app would retain valuable data, such as users’ credentials and OAuth authorisation grant. Those can be obtained by hackers or an imitated fraudulent application and it will be detrimental for all the users of the application. The best practice for calling APIs from a native application is to implement the Pixy.

Unfortunately, with much self-doubt as a limited-experienced developer, I was convinced that I was doing something incorrectly, but was not sure what was missing.

The managed flow with Expo which was initially chosen by me, hoping for a manageable development experience, provides its proxy server exp://auth.expo.io/@user_name/app_name which mitigates carrying a heavy load such as, the creation of a proxy server to deal with the redirect URI in order to receive the authorisation code from Auth0’s Authorisation server.

To receive the authorisation code from the server, the client app should send code_challenge, code_verifier and state to the server. I created all of them using Expo libraries such as expo-crypto, expo-random and some JavaScript codes. Expo offers the ‘AuthSession’ API to deal with authentication and authorisation. All I needed was to retrieve the authorisation code from the authorisation server.

I tried most methods, class and examples which were provided by Expo and what other online blogger suggested. But, it was just all in vain. For some reasons, I couldn’t get the code as the Auth0 and Expo documentation state. This was the loophole of my authorisation experience as a developer.

During that time, I discovered that my codes worked on a web browser(on the condition that I assigned the localhost on the login callback URL in Auth0 configuration and the browser returned the authorisation code successfully). This puzzled me and I started blaming Expo as it didn’t return the code only on the emulators. I also found other developers, from online forums, who alleged that AuthSession API seemed to be broken after a few updates and those claims convinced me that AuthSession was the issue.

I eventually have even spoken to the Expo developers after I tagged @expo on my twit. The developer I spoke to advised me kindly even though it was a Saturday evening. As I spoke to him, I kept trying what he suggested. Unfortunately, it didn’t work again. I was so frustrated, it was beyond any description. But, it led me to the final clue why it didn’t work on the emulators.

Auth0 requires the extra Login URI to be specified on its configuration page only for some native applications. This wasn’t clear throughout my development. There weren't enough resources about it. Moreover, because the Auth0 Login URI scheme must start with https://, it convinced me that Auth0 and Expo cannot be compatible since the Expo proxy server scheme is expo://. This is not all, though.

Auth0 doesn’t support JavaScript for the native application

The long story, in short, Auth0 doesn’t fully support JavaScript for the native applications. I should've known this. Until I found an Auth0’s engineer’s reply from its repository after a lot of research, I wasted too much time figuring out what was causing the issue without knowing it. This apparently becomes a technical debt for my assessment.

If it is a commercial project, I would advise you to contact the authentication platform you have chosen to discuss the practicality and trade-offs before you make a firm decision or if you are in a team, you may already have an authentication expert.

My first challenge to develop a native application on my own has not been a great success. However, you cannot achieve true success without failures.

The most basic and essential GIT commands walkthrough

Emilie — Fri, 23 Oct 2020 23:42:50 +0000

Hello Dev community Developers!
I am coming back with GIT command lines.
When you are working on a project whether on your own or with a team, GIT is a must you should acquire as a developer.
If you just started learning web development or software development, I hope my blog will help you to get to good grips with it.

GIT is a version control system which allows us work in more versatile and flexible ways when it comes to development.
This may sound like an abstract analogy, but, personally I think GIT is a good comparison to train terminals, particularly British ones.

Personally I don't like the train terminals and platforms. They are so confusing. Do not jump to the conclusion that you are on the right train. Ask attendants before you hop on if you are a lone traveller without much experience taking trains in a foreign country. haha

When I got on a train from Liverpool to get back to London a long, long time ago (it was my second time to get on a train in the UK), I actually got on the wrong one, obviously from the wrong platform. When I realised that, I was panicking so much til I got a new ticket to London from the next stop. It was the most nerve-racking time in the middle of nowhere half way around world as a traveller. You may wonder how come she is talking about her train trip in the UK while we were meant to talk about GIT.

My point is that you may easily get lost with GIT like my train trip with a dozen platforms lined up. But, I think it is absolutely fine. Especially, if you work in a big team, when you see so many branches, it is quite overwhelming. No worries, working with GIT is even easier and quicker than getting a new train ticket to London and find the right train again.

One of the benefits of VCS is that it enables us to see what's going as a whole and even on each branch and to roll back in case of an error or if an emergency occurs. Each branch can have a completely different setup and by virtue of it, modern microservices in one repository is also possible. So, all developers keep themselves up-to-date with the whole work flow without checking multiple repositories.

Let's say you just created a project react-app directory locally and also remotely. Once you create a local one, in the react-app directory, create a .gitignore file and includes node-modules, env and .DS_Store as default. Open the terminal and then move to the react-app directory using unix command cd(change directory).
Finally it's time to use actual GIT command lines.

git init

// to create an git repository
git init

Good job! you've just created a local repository.

git add

// to add all the files(with full stop `.`) to the index
git add .

Now all the files in the react-app directory are ready to commit. Until you actually commit it, you can make multiple changes in the directory and repeat the process over and over again without any record during this stage. The full stop . is like a short-cut key that enable us to add all the files which have been changed.

You have made a little change on a README.md file in the directory or you have been working on multiple files and before you commit, you want to see what status you are in now.

git status

// to see working tree status
 git status

You see the modified: README.md line with the red text on the terminal.
OK, now time to add it again.
Once you add the new README.md, let's commit the whole directory.

git commit

// to record changes to the repository 
git commit -m "write your commit messages"

Voila!
It's a crucial part to leave a comment regarding the work you have done when you are part of a team. So, other members would be able to see what exactly you have worked on and explain others why you decided to write codes in a certain way, etc.

Now let's push the local change to the remote github repository.
As we haven't set the tracked repository, we should tell git which repository we want to track.

git remote

git remote add origin <your remote git repository HTTP/SSH>

I always create a remote repository with the same name as the local one. So, I have used origin. Type git remote and then you will see that the terminal returns origin as the name of the remote repository.

git push

git push -u origin master

Oh my god!

We made it! the remote branch master is now up-to-date with our local branch. These are the very basic steps of working with GIT.

Shall we move onto creating a new branch?
I think this is the most common way you would start when you take on a task. Make sure your local repository is always up-to-date with the remote one. You can easily do that with the git command line git fetch.

git branch & checkout

git branch <new branch name>
git checkout <new branch name>

Ok, now you've just created a new branch in order to work on a new task you're given and you also have checked out from master branch to the new testing branch.
This is a very crucial part when you work with multiple people at the same time.

Oh wait!
Have you forgotten to create a branch and you've been coding away on a wrong branch? No worries, I have done that many times. haha

git stash

git stash
git checkout <a branch you need to work on>
git stash apply

Ta-Da!

Magic just happened. All the changes you made in a wrong branch is stashed, the master branch is in the clean state and you applied the change to the right branch.

--set-upstream

Now you have added the branch to the index, committed with a new message and finally push it to the remote repository.
As the remote repository doesn't have the same branch yet,

git push --set-upstrem origin <current new branch name>

git merge or rebase

Brilliant!

Now you've decided to merge the branch to the master

as you've done an excellent job!

// you are still in the working branch directory
git merge master <the branch name you've completed>
git push

The command line is equivalent to

git checkout master
git merge <the branch name you've completed>
git push

Wait a sec!

It's not done yet. There is another option rebase.
When you use merge, you will still have kept all the commit history from the branch you merged into the master. Depending on the situation, all of these unnecessary commit histories on the master branch could be seen to be cumbersome for all the other developers who have never worked on the task. In this kind of case, it would be better to use rebase.

git checkout master
git rebase <the branch name you've completed>

rebase creates a new commit point.
As irrelevant and trivial commit histories are no longer in the master history, the whole team can easily track down the commit history.

But, this is just an example I am referring to. What is best for you and your team is up to you.

There are numerous git command lines such as revert, reset and cherry-pick and so on. However, once you get used to all of these basic git command lines, you will be able to wrap your head around why you would need to use others in certain cases. If you are not 100% comfortable with git, I would recommend you use GIT GUI together. Thank you for reading again and please like my blog if you enjoyed this!
See you next time!

Photo by Tim Bechervaise on Unsplash
Photo by Daniel Mingook Kim on Unsplash

Follow me on Twitter

Demystifying DB-API

Emilie — Tue, 20 Oct 2020 10:55:05 +0000

DB-API is an acronym of DataBase Application Programming Interface and a library which lets python connect to the database server. Depending on which relational DB library you use, they have their own DB-API modules.
Similar to the Web APIs we mostly deal with as developers, it is a computing interface specifically for databases between server-side and database and it enables us to communicate with a database using certain protocols such as TCP/IP.

When we work on a client-side web application, we often pull the data from web APIs to display them to end-users and if end-users modify/upload existing/new data, we need to make sure the CRUD operation is invoked accordingly. This client-server model is applied to many modern-day systems to interact with servers. Simply put, databases are the same, interacted with using client-server interaction over a network. When an end-user makes a request, a browser will do the same to the web server and at that point, the web server becomes a client which makes a request to the database which acts as a server to fulfil the request.

When we talk about the data and transferring data over the network, the two main protocols, TCP and IP are involved. They use IP address and Ports number. Since they are connection-based protocols, we always have to establish a connection from DB-API to database server over TCP/IP. In other words, we need to explicitly start a session for the connection and end the connection for a session.

# DB-API for PostgreSQL 
import psycopg2 

connection = psycopg2.connect('dbname=test')
......
connection.close()

In each database session, there are many transactions that can occur. The session enables us to control each transaction like git. Just imagine you made your code change for your task on a new branch and add the branch before committing and pushing it to the stage. But, if a senior developer found a bug, you may end up reverting it so to speak.

transaction.add('CREATE TABLE coffee (
    id INTEGER PRIMARY KEY,
    item STRING NOT NULL') ;
)
transaction.add('''
    INSERT INTO coffee (id, item) VALUES (%(id)s, %(item)s);',
    { 'id': 1, 'item': 'Cafe Latte' }
''')

transaction.commit()
transaction.rollback()

If you are familiar with git command lines, as I explained above, this may help you reach enlightenment for the database transaction. It's intuitive and as the database sometimes can fail, we can roll back to a previous point before the change was made.

Each transaction is an atomic unit of work to access the database and it lets us read and write data. There are 4 characteristics to make the database more maintainable and reliable: Atomicity, Consistency, Isolation and Durability. Just like git, each transaction of database operation should meet these properties in order to prevent any errors from concurrent executions, power failure and so on.

I hope my explanation for DB-API helps you to understand not only the DB-API but also, the general idea of databases and APIs as well. Thank you for reading and I hope you enjoy learning web development!

Photo by Markus Spiske on Unsplash