I’ve recently felt like I needed to add more testing to my coding in order to make my life easier down the line. Often debugging complicated applications is made a lot easier by using different kinds of testing. It’s also very useful for forcing you to think clearly about what you want your application to do. I wanted to take some time to go over some general concepts with testing and then try to use it myself.

In this blog post I want to just go over some general concepts with testing and then in the next part I want to use Mocha (a general Javascript testing framework) to make some unit tests for a simple function. I think in the third part of this I want to expand this to testing in React and use Jest (Facebook’s testing framework for React). …

In this part of making our daily scheduler we’ll add the Javascript and jQuery along with a little bit more CSS/HTML so that we can add reservations to our grid.

I’ve never really used jQuery before (it seems a bit outdated since vanilla Javascript can now do a lot of the things jQuery does) so this was all a learning experience. The first thing we need to do is include the jQuery library into our HTML, and include the js file in which we’ll be writing this.

Image for post
Image for post
We need to also create an index.js file in our directory

The first thing we need to do in our index.js file is to make it launch on page load. We can do this by putting our code inside of this function $(function() {}). This is shorthand for $( document ).ready(function() …

I had to make a simple daily scheduler for a coding challenge and they required me to use jQuery. I don’t normally use jQuery but took this opportunity to learn a bit about this little Javascript library. For this part I’ll just show how I wrote out the CSS grid for the skeleton of the scheduler.

The scheduler is a daily scheduler for customers to reserve pilot lessons for certain hours of the day. So we’ll have a grid using CSS grid where the x-axis will be the different planes available for the day and the y-axis will be the hours of the day. …

So last time we touched on the basics of the display property but there a lot of more esoteric values for the display property that I’ve come across that I’d like to explore.

The first value that I’d like to look at is the run-in value. This isn’t widely supported at all at the moment. It’s essentially only supported in IE. The run-in value makes the element it’s styling inline and aligns it with the following block elements so that it looks like a header to a block element. You can see examples of this here and here. …

One of the first important things I learned in CSS was the display property. The display property is a vital tool to make the layout of your website look the way you want it to. I’ll look at some of the most basic values for the display property.

I’ll be looking at the three big values for the display property: block, inline, and inline-block. Every element in HTML has a default display value. You can see what some of them are here. Some common tags that you might use, like <h1>, <p>, <div>, <header>, <article>, or <ul>, use the block value as their default display value. You may notice that all of those elements take up the full width of the container they’re in and start on a new line. Even if you change the width of any of these elements they’ll still take up the entire line. …

Last time we set up our little tic-tac-toe site to register clicks and have it play out the game. Now we’ll use two bitfields to keep track of all the Xs and Os and declare a winner whenever we get three in a row.

Before we start on the bitfields themselves I wanted to tweak the eventListener function since it didn’t account for a user accidentally clicking on a square that already had an X or an O.

Image for post
Image for post
Revised eventListener function

Now let’s make it so that every click alters the bitfield for the bit that corresponds to that box. We can do this using the boxNum that we get from the id of the box div. …

So I’m continuing my look at bitwise operators by making a simple tic-tac-toe game. You can check out parts I (where I look at how they work) and II (where I look at some simple applications of them) for some background information. I’ll split this into two small posts. In this one I’ll quickly go through how I’m setting up the game and then in the next part we’ll work out the logic for the bitfield itself.

I’ll make this simple game into a webpage app with Javascript. I’ll just put everything into one HTML file using script and style tags for simplicity’s sake. First we have to layout how our HTML will look. …

I talked about what a bitwise operator was in the first part of this series, but now I want to get into some very niche ways you can use them in your Javascript code. As I said before, bitwise operators are really fast but they came at the cost of code readability.

One use of bitwise operators is in integer conversion and as a replacement for Math.floor() (which rounds down to the nearest whole number or integer).

> "5" | 0
> 5
> 5.8 | 0
> 5
> "5.3" …

I was on Hacker Rank when I came across a problem that mentioned XOR and bitwise operators and got interested in what they were exactly. If you come from a more traditional computer science background you might be more familiar with bitwise operators but they were kind of novel to me. I’ll discuss what they are and some of the niche situations where you might use them.

Bitwise operators work on binary numbers. If you’re not familiar with binary there are tons of resources out there to learn so I won’t really go into that. With ES6, you can now represent binary numbers by using the binary literal0b followed by the binary number (e.g., 0b100 is the binary 100, which is the number 4 in base 10). Previously you would have to use parseInt(“100”, 2) to achieve the same thing. To change from base 10 to binary you can use the toString() method. For example (4).toString(2) will return “100”. When you use toString() on a number literal you either have to use the parentheses around the number like I did, use two dots like with 4..toString(2), use a space before the dot like with 4 .toString(2), or use a float like with 4.0.toString(2). You have to do this in order to distinguish the dot for accessing a property with a method and the dot in a decimal number. Obviously if you just assign the number to a variable you don’t have to worry about that. When you use bitwise operators you can also just leave the numbers in base 10 and Javascript will automatically change them into binary numbers in order to run the operator on them. …

In one of my interviews I was asked if I knew Agile, and I had to honestly say that I’d only known it as a buzzword but not really what it stands for. After the interview I decided to look a little bit more into what were the principles behind Agile software development.

So at first I thought Agile software development was a kind of methodology that was used to define how software should be developed in an organization, but I quickly realized that common methodologies such as SCRUM or Kanban were not actually Agile themselves but used the principles of Agile to create methodologies that could be Agile. I say “could be” because using methodologies that are based on Agile principles doesn’t necessarily mean that your development process will be Agile. Agile software development is very flexible and the principles themselves are somewhat vague so there is no cookie cutter way to achieve them. Just because you use an Agile methodology or framework doesn’t mean that methodology will translate to Agile software development for your specific organization/project. The principles should be tailored to the problems you face, and they will often evolve and adapt as you use them. Now what exactly are those principles? …

Aleks Roslyakov

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