How to Make a Web App Part 2 - User Stories

When I first started coding I liked just diving in and programming. There is still that urge to just jump in and start slapping functions together to make something that works but I want you to imagine for a moment if other professions worked that way. Let’s say a construction company was creating a high rise without any sort of blueprint. They have some sort of vision of how they want it to look and work but they never sat down to create a way forward. They just started slapping beams together as they went and then built walls, added doors and windows, electrical outlets, elevators, and whatever else goes into a skyscraper as they went. Would you want to work in that building?

There is a reason architects design the buildings beforehand and a lot of work goes into making the blueprints. They know everything will work as intended. If you have no intentions going in then nothing will really work as intended.

There are many different ways this can be done. We won’t really get too deep into the different software methodologies so I encourage you to look these up and learn more about them for yourself. The main software methodologies are Waterfall, Spiral, and Agile. Waterfall is a lot of documentation up front. You have your requirements documents, use cases, class diagrams, and a whole lot of other things planned up front. As you can imagine this process can take a long time before working software is delivered. Typically between 6 and 18 months. This would be like the architect who has everything planned up front before any construction takes place. A drawback of this approach is changes are usually quite expensive because now everything needs to be planned again.

Spiral is like waterfall where you still have a lot of documentation and planning but releases occur much more frequently. We are talking several months to a couple years. Changes are not as expensive because the system is not being completed in one big chunk but several smaller ones.

Agile prefers working code over documentation so there is little documentation. It wants more interaction with customers. It says to deliver working code early and often. This is what we are going to use while building our app. There are many different flavors of Agile I encourage you to study on your own and many of them work concurrently. A lot of times you’ll hear about Scrum and Kanban or XP. They all have different methodologies that work well together. Again I will not focus on any specific discipline but leave that up to you to discover. You should also choose which methodology, Waterfall, Spiral, or Agile, to use based on which is the best tool for the job.

So rather than write a lengthy requirements document we are going to start our first Sprint with some user stories. A Sprint comes from Scrum and it is just a period time to get some amount of work done. A sprint can be one week to a couple months so you would work on user stories for the entire sprint and nothing more. If you don’t finish you hand over what you have anyway and save it for the next sprint. Your team’s speed, or velocity, is measured in how many story points you complete per sprint. You really can’t compare your velocity with another teams’ because it is completely dependent on how many story points your team attributes to stories and should only be used as estimates for how many user stories can be completed per sprint. We are not going to worry about this with our app and our first and only sprint will be however long it takes us to finish.

After that long explanation of what we are doing, let’s get started! Whether you are working for yourself or a customer, you have some form of stakeholder. If you are working with the customer, you want to build what they want. If for yourself, you build what you want. Simple as that.

Since we are working for ourselves, let’s start coming up with some user stories for a web app idea. For our idea (well really my idea), we want to build a grocery list web app that we can add, remove, and modify grocery items and put a check mark next to them to show completion. We will obviously need to have some form of login and a way for users to save their grocery lists. It would also be nice if you could share lists with friends or allow spouses to use the same list. For this sprint, we really don’t care if the list is archived or not once it is completed but this is something you could easily do on your own for practice. You could create a list of lists, if you will, or just have them automatically deleted to let the user make a new list. For now we will just allow the user to remove checked items and be able to add new items all using the same list.

Now that we have what we are trying to do, let’s make the user stories we are going to work on for this sprint. The format of a user story is very simple as it is designed to be created by any stakeholder but it captures what is wanted without going into a lot of detail. The format I like best goes like this:

As a shopper
I want to add a grocery item to a list
So that I can remember it while I’m shopping

The first line shows who is taking the action. The second line shows what task needs to be done and the third line shows what will be achieved by the user completing the task. For this sprint we will work on these user stories:

As a shopper
I want to add a grocery item to a list
So that I can remember it while I’m shopping

As a shopper
I want to remove a grocery item from a list
So that I can get rid of an item I no longer need

As a shopper
I want to be able to place a check mark next to an item
So that I can see progress of what I’ve already got

As as shopper
I want to be able to login to the application
So that my list will be remembered

Even though we discussed a few more ideas, these should be a perfect starting point for our first release. Remember we release working code early and often so this will get our app functional and then in our next sprint, we will add some of the other features to make it better.

Previous: Introduction
Up next: UI/UX Design (coming soon)

How to Make a Web App Part 1 - Introduction

My goal with this series is to walk a beginner or novice through the process of creating a web application. This isn’t meant to increase your proficiency beyond that of a beginner with any language but to give a starting point that can be built upon. I will delve into HTML, CSS, and JavaScript to teach the basics but there are plenty of books written on these that will explain the concepts in much more detail than I will so I am relying on the reader to use other resources to increase their skills.

What I will do, however, is teach the necessary parts of the languages and in a different way than I learned. I learned HTML way back in the early 2000s and picked up CSS and JavaScript at a much more involved level much later when I got into Web apps. In each of the books I read, I learned how the language worked and what you could do with it. I then relied on years of practice, research, and college to learn best practices and processes. For example, when I learned JavaScript I did not learn how to write it to be testable. This was something I picked up later. I also didn’t have a process in place to go from nothing to a web app.

All that being said, I want to bring the reader through the process of building a web app with these things in mind. If you are new to JavaScript, I will teach the basics alongside testing. I will bring in user stories and sprints to help the reader not just learn JavaScript, but how to use it effectively to create an application. Again, this is something I scoured the internet and attended college classes to try and bring together. I want to teach everything I learned from the very beginning. I will not go very deep with any of these concepts but my hope is the reader will get a general idea of what it takes to make an app and then expand their knowledge using other resources to build anything they wish.

With that in mind, we will get started with the basics of building a web page and then expand upon it from there as we build a simple web app. Enjoy!

Up next: User Stories

Horizontal Sliding Menus with jQuery

So I needed to make a menu slide out to the left (while maintaining width) and I decided to try the jQuery animate() function to animate the menu's horizontal position. This requires me to not hide the element but not show the overflow either. As you can see from the pen below, it works pretty easily with overflow: hidden when the menu slides out to the right. When the menu needs to slide the to the left, however, this method doesn't work. The button on the top right demonstrates this.

Enter clip-path! Instead of using overflow: hidden I tell clip-path to clip off anything above, below, or to the right. On the flip side, I give a negate clipping which just so happens to be the width of the menu. This alone will get you most of the way but I ran into an issue where the "hidden" menu was causing a scrollbar to appear when it was collapsed. This was fixed by adding this:

body {
   overflow: hidden;
}

With that, it works great as you can see from the bottom right button.

See the Pen Horizontal Sliding Menus with jQuery by Galastun (@galastun) on CodePen.

Javascript If Statement Shortcuts

I'm not sure if this is really a shortcut but it will save you on some typing if you know this little trick.

When I first started out with Javascript I was very explicit while using my if statements. I would do things like:

if(x === true) {
   // do stuff
}

After doing some reading and I found this was completely unnecessary because the parentheses do the conversion for me. In other words, the if statement automatically converts the expression to a boolean. That makes something like this possible:

if(x) { // x is true
   // do stuff
}

There are a few gotchas to know about while doing this, however. For instance, both "true" and "false" evaluate to true. Why? Because they are non-empty strings. The empty string "" would evaluate to false.

Something I see sometimes is this:

if(x != null) {
   // do stuff
}

Again, null will evaluate to false. So in this instance, we are looking at NOT null so if x isn't null, then do stuff. This could be rewritten in this way:

if(x) {
   // do stuff
}

Much simpler, right? If you wanted to do something if it was null you could do this:

if(!x) {
   // do stuff
}

Hopefully this helps you cut down on some keystrokes!

See the Pen VmKgwq by Galastun (@galastun) on CodePen.

Using Flexbox to Perfectly Center a div Within Another div

I was playing around with Flexbox again and man do I love it! I used to have to use Javascript to find the parent height and child height and then do the math to make sure it was perfectly centered horizontally and vertically. Thanks to Flexbox, no Javascript is necessary. You just need to make an outer div as the flex container and then put your elements within child div. The result is a perfectly centered div.

Feel free to play around with the pen. Change the width and height to see how it maintains its position.

See the Pen Centering div with a div by Galastun (@galastun) on CodePen.

Using let vs. var

There is already a lot out there on the usage of let versus the usage of var with Javascript so I am not explaining anything new. This is just a quick demonstration for those who need a quick answer.

let is available in ES6 (ES2015) only. You can check support for it on this site. What let allows you to do is keep your variables in the scope they are defined in. At the bottom of my demonstration you see let y = "yes"; inside an if statement while let y = "no"; before the statement. Inside the statement it holds the value "yes", but outside it is "no." var does not work this way as you can see in the same example. n is defined as "yes" outside the statement and then redefined as "no" inside the statement. Displaying n outside the statement shows we were using the same variable the entire time.

See the Pen let vs. var by Galastun (@galastun) on CodePen.

Fun with Animations

jQuery has a lot of built-in animations people can use that work well, but in case you want to make your own, here is a demonstration showing some different animations. In the following pen, you will see four blocks and each one moves differently if you click on them. From top to bottom, they move like this: linear, ease-out, ease-in, ease-in-ease-out. It uses just plain old Javascript and math.

Enjoy!

See the Pen Fun with Animations by Galastun (@galastun) on CodePen.

Sliding Menu Items

Today I am going to show you a few different ways to create drop down menu items. My task was to create a drop down menu item based on a mockup. The mockup showed the menu sliding down without its height changing (this is important). I realize that makes it like the TARDIS or some sort of magic bag where you wonder how the main menu item could possibly hold such a large drop down menu inside (you'll see what I mean in the example).

The first menu item uses jQuery to create a sliding drop down menu. There is very minimal code (that you have to write anyway) and it works well. The only problem is it doesn't meet my requirement that it slide down without its height changing. It creates the effect by increasing the height of the object rather than truly sliding it down.

Update:

jQuery can do this but you need to use the animate() function and you might need to work with clip-path and overflows.

The second menu uses CSS transitions and some Javascript to handle the click and toggling of classes. This one works pretty well but you really need to know the height of the drop down menu beforehand so you can adequately hide it behind the main menu. You can probably get around this using some more Javascript if you are so inclined. You also have to keep it visible (but behind the main menu) because CSS doesn't like transitioning something after you change the display from none. If you do this, be sure you set the aria-hidden attribute so screen readers don't get confused.

The third menu is just pure Javascript. I make use of the hidden attribute and toggle that on/off for display and then set the top using style.top. Because I have the position set to relative, getBoundingClientRect() doesn't behave as I'd like and setting position: absolute adds some more styling headaches. That is why I just use style.top and replace 'px' with nothing and make sure it is an int to get where the top actually is.

Hope you enjoy!

See the Pen Sliding Menu Item by Galastun (@galastun) on CodePen.

Aligning a few lines of text with an image

I recently needed to align two lines of text with an image. To give you the basic idea, just imagine the person's name and title alongside their avatar.

For me, this is one of the messy areas using float and then just leaving the text aligned with the top of the image for simplicity's sake and hoping everything else looks good. This time, I was forced to ensure the middles lined up and I remember reading about the flexible box layout. I decided to see what I could do with it in these regards and I was very satisfied with the results.

So without further ado, here is my pen describing the process:

See the Pen Align Text with Image by Galastun (@galastun) on CodePen.

If you have easier ways or other ways you like, feel free to share. I'm always up for doing things better.