DEV Community: ibrahim ali

My journey through a Javascript immersion coding Boot Camp.

ibrahim ali — Thu, 20 May 2021 21:25:20 +0000

As I approach the final day of my time at Operation Spark, the immersive javascript coding boot camp that I have been attending for the last 9 months, I have decided to write about my experience in doing the most difficult and rewarding thing I’ve ever done. Here I’ll write about how I came to the decision to join Operation Spark, my journey through the program, and how I am feeling as it reaches its conclusion. My purpose for doing so is to reflect on how I have changed and grown (imposter syndrome is very real) but also provide perspective to anyone that is in the same position I was 9 months ago. This is for those who are contemplating making the life-changing and difficult decision to join this program or something similar, and are dreading the daunting task ahead and the sacrifices they will have to make in order to learn a very valuable skill and change their lives.

My life before Operation Spark

In the years leading up to my enrollment at OS, I was a college dropout with a criminal record and no real prospects other than toiling away in the service industry hoping to maybe one day get a salaried position as a manager or something. I had heard about op spark and personally knew some graduates who escaped the service industry by going through the program. I always had the idea to enroll in the back of my mind, but I didn’t know how I felt about coding (i had no prior experience) and I just couldn’t see myself being able to go through the program and still be able to afford basic living expenses. Then everything changed in March of 2020 when Covid-19 ravaged the world and shut everything down. Most vulnerable to this pandemic was the restaurant industry, and suddenly I and everyone I knew was out of a job.

Now I won’t lie, I spent the first 6 months of the pandemic doing jack all. I did not have the foresight to see the real impact the pandemic was going to have on the world and fully expected it to be a 2 - 3 week ordeal. I would be back to work in no time. But the weeks turned into months with no end in sight. At this point, I realized that if I were ever to escape the service industry, this was going to be my best chance. So in August of 2020, I made the decision and enrolled.

Prep

Operation Spark is broken down into five distinct phases: prep, boot camp, precourse, immersion junior, and immersion senior. I will give an account of each phase and what I went through during it. The first, prep, a free 2-week trial class, that is offered with the purpose of dipping your toes into the world of coding to see if this is the right step for you. Even though I enrolled in August I dropped out of my first prep due to personal reasons and joined the next prep class starting on September 14th. Prep was structured to be a 3-hour daily class from Monday to Thursday Prep introduced us to the very basic core concepts of coding, Data types, variables, objects, arrays, loops, and functions. I imagine if we were learning to be mechanics (an analogy I will be using throughout this post) instead of programmers, this was the phase we were taught about the nuts, the bolts, the socket set, or the torque wrench. The very basic tools we’d be using to build incredibly complex machines in the future. I finished prep by the beginning of October and was told the next phase boot camp would start one month later on November 2.

Bootcamp

Next up we have boot camp. This was the first real phase of the program. Structured to be a 6-week course that retained the same days and hours as prep to introduce us to the actual ins and outs of coding. Our focus during this phase was mostly on functions, and how Javascript is a functional programming language. We learned about loops, complex data types, and what-not in prep, but now we were going to learn how to use these to create increasingly complex functions that would familiarize us with the problem-solving logic that we would need later on in the course and for the entirety of our careers. This phase involved lectures into concepts such as recursion, scope, closures, copy by reference and copy by value, etc. This would be akin to learning about the more intricate parts of a car. The wiring, the different fluids, pedals and levers, building a better picture of how to build but not building quite yet. It was here that I realized that not only did I enjoy coding but I was pretty adept at learning it. Solving difficult functional problems was a thrill and I seemed to move through the coursework a bit smoother than some of my peers. Not having been the best of students in the past, boot camp is where I really settled into my role as a student as well.

Precourse

After you prove your mettle in boot camp, precourse is where the immersion phase of the program begins. Meant as a bridge into the intensity of full immersion, precourse, which was set to be 3 weeks, ramped up the hours of class to 9 am - 6 pm, Monday through Friday. This is where the real test began. During boot camp you are able to maintain some modicum of free time. In precourse though, the hours dedicated are more than a full-time job, and here is where I faced my biggest challenge, living expenses. This is what I (and many other people) was most afraid of. With the time required to put into the immersive part of the program, it would become impossible to earn a living and you were solely at the mercy of either a supporter or any money you had saved up. This uncertainty accompanied me for the rest of the program and still persists as the hunt for a job can be very grueling. It’s a race against time, but with proper preparation, along with help navigating funding resources from the op spark administration, it’s not impossible. It’s not like life before wasn’t rife with financial anxiety already, and the trade-off for enduring this instability is a life of financial stability after.

After boot camp, I had a solid understanding of coding logic and how functions worked. But if you were to ask me to build a website or application I would not be able to. During precourse, we took our understanding of the tools we had learned and began to apply them to frameworks and other technologies to actually build something. Starting with the basics like HTML, CSS, and frameworks such as JQuery, precourse introduced us to using existing technologies to build something quantifiable.

Immersion Junior

Then in the first week of February of 2021, I began the junior phase of immersion. We were warned about junior from the beginning of boot camp. Junior was the toughest part of the entire program. Along with the hours of the class being extended from 6 pm to 8pm, Saturday was also included in our school week. For the next daunting 3 months, Sunday would be our only respite, or so we thought. Quite often the extra work, such as the toy problems or blog would eat up our Sunday as well. Junior kicked off with us re-doing two of the assignments from precourse, but with less time and more difficulty. And then we got into the two-day sprints. The sprints were by far the toughest aspect of the program. You would be assigned a partner and the two of you would be thrown into an intense two-day project, with little prior knowledge of what you were doing. These sprints are also when we were formally introduced to the tech stack.

The tech stack is the full set of frameworks and technologies that goes into creating a complete application. Circling back to the mechanic analogy, the metaphorical tech stack would comprise the radiator, the suspension, the alternator, fuel pump, etc. These technologies are pre-built parts of the whole, each with its own task and complexities and each with different manufacturers to choose from as well. For the next 5 weeks, we were given the task to understand each piece in very little time and attempt to understand its place in the whole by attempting to connect it. From a refresher on jQuery, into angular, react, then handling HTTP requests into the back end. The server, the database, APIs, APIs APIs, one after the other we were made to tackle the next technology without ever fully understanding the last one we worked with. This was the most disheartening phase for me and most of my classmates, I felt like I was moving on and going through the motions but I didn’t understand anything.

But that was the point of junior, to go through the motions. Like Mr. Miyagi’s wax-on wax-off from Karate Kid, the purpose of junior’s sprints was to develop the mental “muscle memory” to be able to navigate the stack. This became clear to me in the last week of junior with our MVP (minimum viable project). This was the first time we had the freedom to build as we wished, but it came with no direction. It was time to swim, or better yet, build a go-kart. And in the process of researching what tech to use for my idea, the familiarity gained through the sprints proved invaluable when navigating through the tech’s documentation. I had become a full-stack developer.

Senior

And thus we finally arrive at the senior phase, which I am now on the last two days of. Senior does not have the structure of junior. You have learned how to build your metaphorical vehicle, but even better you have learned how to teach yourself what you don’t know. It was time to polish our skills and build something that would be our sword going into the industry with no work experience. Senior was broken down into three big projects. Greenfield, where your assigned team would create a basic app/web app of your choosing. During the time for greenfield, we were free of our commitment to being in class and we would present our work on the first actual day of class. Then the second project, which we had the first week of class for, was legacy. For legacy, we had reassigned teams and were given an existing codebase to improve upon. This was important because we will rarely be creating entirely new code on the job. We worked in our team to add new features to an already existing product.

Then finally there was the thesis. This would be our piece de resistance, the work that we would be presenting to our family, friends, and potential employers upon graduation. We had 4 entire weeks for the thesis. The first week was for planning. Very little to no coding was involved for this part. The team conceptualized the application, ironed out the details, planned wireframes, and chose the technologies that we wished to use. The second week is where the actual work began, we built out the bare bones of the app and slowly began bringing it to life by adding the basic features. The third week was for additional, more advanced features, with the fourth and final week dedicated to polishing and refining the app.

During these five weeks, in conjunction with our projects, we were responsible for a weekly blog and presentation (this is my last blog) and suffered an onslaught of unforgiving toy problems (coding challenges to prepare what prospective employers may ask us to do in order to assess our technical skills). The thesis came with a lot of challenges. Working in a team, learning technologies, having to drop features and technologies due to learning curve or time constraint amongst other challenges. Finally, on the Monday of the sixth week (3 days ago), we presented our finished thesis projects to our teachers, classmates, and current juniors.

Post senior and Job hunt

This brings us to the present, it has been 278 days since I signed up for the August 2020 prep course. The last week of senior is dedicated to preparing for the job hunt. Creating a resume, cover letter, technical and personal narratives, curating your online presence are all parts of the rest of senior and the job hunt that succeeds it. And while there is plenty of work to be done before I receive my first paycheck from my first employer in the software engineering field, I have completed the process of becoming a software engineer. I have attained a crucial skill that can help me lead the kind of life I want to live. Something that can never be taken away from me. I have also learned a lot about myself and for this, I will be forever grateful. So to anyone out there that is contemplating taking the step, I would say do it. It’s not gonna be easy, and very often it’s not gonna be fun, but if you have what it takes you will come out better. I have one more full day of class to go, during which I plan on finishing the last few assignments required to fully graduate, and after tomorrow I will be stepping into the first day of the rest of my life.

A history of Data Encryption

ibrahim ali — Thu, 13 May 2021 19:55:32 +0000

Have you ever wondered how your data and information are kept secret on the world wide web or how things like bitcoin and passwords are prevented from being lifted by anyone who can intercept some information? Look no further than encryption. Encryption is the age-old practice of taking human-readable information and scrambling it so any old joe schmoe can't read your message by robbing your messenger. Now, this robbing can range from actual robbing an on-foot messenger centuries ago, to intercepting data over the connections but if your data is encrypted, then unless the thief has a key they can't access your information.

Encryption uses a cipher to change this data. The cipher is the set of instructions or algorithm that is used to scramble the data into its unreadable format. This data then requires a key to be able to be decrypted back into its readable format. Before modern computer encryption, secret codes have long been a thing. The scytale, a leather strap with characters and a wooden rod, used by the Spartans. The leather strap would wrap around the wooden rod and the code could only be read if you were in possession of a stick with the correct size. Then there was Caeser's cipher, where Julius Caesar, shifted the positioning of each letter three spaces ahead.

In 1553, Giovan Bellaso created the first cipher with a decryption key. His system slid the lower half of an alphabet a random amount of places in relation to the upper half. In the 20th century, Edward Hugh Hebern invented the Hebern Rotor Machine. This was created by hooking up a mechanical typewriter to an electric typewriter with a metal rotor in between. Each letter on the typewriter you type with goes through the rotor which enters a corresponding letter on the scrambled message. It also slightly changes its rotation with each letter typed. To decode it, you flip the rotor over and type in the encrypted messages and the decrypted message will show up on the other end.

Bellaso's rotor machine paved the way for the Enigma machine. This was the rotor machine but with multiple rotors making it much more secure than a single rotor. The Germans were able to use this to securely communicate orders via radio, allowing for the planning of their signature blitzkrieg attacks. Then in 1932 polish mathematician and cryptoanalyst, Marian Rejewski was able to crack the enigma engine. This information was then passed on to the allies and their cryptographers such as Alan Turing allowed in the invention of the Bombe machine which was made to decrypt the enigma's code, making it crucial to the eventual allied victory in WW2.

Then in 1945 Claude E. Shannon, known as the "father of information theory", wrote "A mathematical theory of cryptography" which many consider being the starting point of modern cryptography.

In the 1970s, IBM's "crypt group" designed a block cipher to protect its customers' data, creating the Data Encryption Standard. DES is the process of using block ciphers - or algorithms that takes plaintext data in bits and transforms it into another piece of data the same length in bits. This use of bits to encrypt data makes it incredibly difficult if not impossible to brute force attack encrypted data. A brute force attack is the attempt to crack a code by trying every possible combination. In 1997, the EFF (electronic frontier foundation), in order to prove that the DES key size was not secure enough, created a machine called "deep crack" which cracked DES's 2 56-bit keys.

The Diffle-Hellman key exchange was the protocol that then set the new standard for key exchange. With symmetric-key exchange in the past, the two parties would have to exchange keys with each other in a manner that was outside of the online data exchange. The advanced encryption standard in the year 2000, increased the key size of the DES.

Finally, the Elliptic-curve cryptography, which came into wide usage in 2004-2005, is an advanced public-key scheme that allows for short keys and uses techniques such as point multiplication to satisfy the requirements of decryption. This allows for shorter keys, less processing power, and shorter physical keys are more difficult to break. This is the preferred method of encryption for crypto currency, bitcoins.

Unity Game Engine

ibrahim ali — Sat, 08 May 2021 19:49:16 +0000

At some point in every young gamer's life, they have aspired to someday create video games. Then as usual life happens and those aspirations give way to other facets of life and are forgotten. As was the case with me until recently. Now having a well-developed understanding of programming and getting "videogame designer" as a 94% career match on my Job1 grant assessment, I've decided to at least explore videogame creation and look into what it takes to make a game. This search eventually led me to the Unity game engine. Highly regarded by my developer friends and the internet alike, let's dive into what makes Unity one of the front runners in game development engines.

What is Unity?

Unity is a game development engine created exclusively for Mac OS X in 2005 by Unity technologies. It is a cross-platform engine that allows for creating simulations in 2D/3D and even AR and VR. One of Unity's biggest pros is its ease of access, not just to be available to low-level devs free of charge but also in its learning curve, allowing even the most novice to dive and start creating. "Create! Create! Create!". That seems to be the mantra whenever looking up tips and tricks for novice game designers, and Unity's tools and interfaces make that much easier. Drag and drop functionality, a component-based hierarchal system of organizing game elements, and the ability to import tons of assets and purchase many more from its extensive app store, no wonder Unity is incredibly popular with indie and mobile developers. As of 2021, 53% of the 1,000 top-selling mobile games run on Unity. Unity is also supported on 25 different platforms, allowing incredibly portability for any games developed on the engine.

Unity versions and features

Let's have a quick run-through of Unity's different versions and the features that came with it. We already know about the original Unity 1.0 that was launched for Mac OS X in 2005. Two years later, Unity 2.0 arrived, and with a plethora of new features optimized 3D terrain rendering, real-time dynamic lighting and video playback, in addition, a Networking Layer that operated over UDP was implemented allowing developers to collaborate more easily and also implement multiplayer on games.

In 2008 support was released for iOS with the release of the iPhone. Here began Unity's domination of the mobile game market because of how quickly they were able to implement iOS support. In 2010, Unity finally released support for Android, desktops, and videogame consoles. Improving its repertoire with features such as Illuminate Labs beast lightmap tool, deferred rendering, UV mapping, a built-in editing tree, native font rendering, and audio filters.

Unity 4.0 that came in 2012 brought with it DirectX 11 and adobe flash support, mecanim animation tools, and Linux preview. Unity 5.0 introduced WebGL support, global illumination, lightmapping, Unity Cloud, NVidia physics engine, 4k 360 videos for VR. And then in 2017, it was decided that the program would no longer be numbered instead the Unity would be followed by the year of said version's release. Unity 2017 came with real-time graphics rendering, color grading, and world-building, live performance analytics, and introduced Timeline, which allowed for drag and drops and a camera system known as Cinemachine. Unity 2018 came with a scriptable render pipeline for high-end graphics. A high-end version for desktops and consoles and a low-end version for mobile and VR. In 2020 Unity introduced Mixed and Augmented Reality Studio (MARS).

Why choose Unity?

There is a lot of reason you should choose Unity as the game engine for your next and/or first project. The aforementioned low learning curve of course, but there are plenty of other reasons. Its unique subscription model is free of cost with the caveat that you have earned less than $100,000 in revenue in the fiscal year. Next up is the business license which comes in at $40/month and after hitting the $200,000/year mark it increases to the pro version at $150/month. Now if you've generated that much revenue with your game a measly $1800/year is but a drop in the bucket. Unity also comes with an extensive asset store with over 56,000 unique assets to choose from, removing the need for asset creation and freeing up more time to implement mechanics. While Unity has plenty of tools for a game dev to use if any of their premade tools just don't cut it, you can also easily create your own tools. And finally, with support for 25 different platforms, deployment is a breeze.

Binary Data

ibrahim ali — Thu, 29 Apr 2021 22:50:22 +0000

As a budding software developer, I have always been curious as to what actually goes on behind the scenes of the numbers, letters, and symbols that make up the code that I write. Even more so how are the pictures rendered, and videos played, and the sound synthesized? From watching movies, we know that computer data is often represented as 1s and 0s on screen. I've learned that this is how the computer can read and interpret the code, but how exactly does it really work?

Bit
First, let's get the physical aspect of this out of the way before we delve into the logic. How exactly does the computer even tell what is 1 and what is 0? This is where a bit comes in. A bit is the smallest unit of data that a computer can hold. Hardware-wise this comes down to a single wire and whether or not it has electricity flowing through it and this state of being electrically charged or not can be effectively interpreted as some binary values; On/Off, True/False, Yes/No, and finally 1 and 0. Now one wire obviously doesn't do much for all the logic necessary to run complex computer programs, so you add more. Each new wire adding another realm of possible combinations. The Byte is the next step up and consists of an 8-bit cluster that can hold 256 different values, and these can go on exponentially to a 32-bit system having the ability to store over 4 billion values.

Positional Notation
Now that we know that we can have an incredible amount of 1 and 0 combinations with multiple bits and bytes, how do these combinations translate into data? This is achieved by translating the binary, into numbers that we can understand via positional notation. We are used to the worldwide standard of a base-ten or decimal numeric positional notation, where we have 10 unique numerical characters, 0-9, and when we've exhausted those 10 we add another character to the left and start over and this new character becomes a multiple of 10 for each additional character. The concept with binary notation is very similar except that the base-two notation goes up in 2s instead of 10s. Each additional digit indicates twice the amount of the last value. So 0 is 0, 1 is 1, but then what is 1 0? That is going to come out to 2 because the first value of zero is one and the second value is 2 and since (here the concept of off and on comes back) the 2 places has a value of 1 and the 1 place has a value of 0. You have 2 as the final value. I'm sure this sounds confusing so I'm going to include some diagrams that hopefully explain this much better.

Binary to Characters
Alright now that we can get numbers from binary, everything else is covered in numbers to other data and is not so much about binary anymore, but to get a better of exactly how many different 1s and 0s can go into creating the things that we see, we'll explore some of the possibilities. The first is going to be characters. ASCII (American Standard Code for Information Exchange) is the foundation of translating binary into characters and symbols. Generally, each character or symbol is represented by a 7 or 8-bit binary, which translates into the number corresponding to the character. Now the 128 characters that the 7-bit allows for encompasses most, if not all, of the basic characters we are used to using, but there are plenty of other possibilities, symbols, and languages that can require character codes that go into the thousands. This is where UTF(Unicode transformation format) becomes the new standard. UTF-8, the most commonly used UTF, uses Bytes to allow for additional character values.

Binary to Image
Next up we have binary to Image. This is where the possibilities with binary and then numbers get really wild. We are all aware of the primary colors(red, green, and blue) which make up all other colors perceivable by human eyes, and hopefully pixels as well, which make up the entirety of images we see electronically rendered. Computers take these numbers and perform a few calculations which let them render this. Each color has its own color code, which in turn creates all manner of combinations of RGB to render the colors we see. This combined with the numbers dictating how many pixels are present, their saturation, and how many colors in each pixel finally will render the image we see on one screen. All just wire with electrical current, screens with many tiny light bulbs, and a bunch of logic in between.

Binary to Sound
Lastly, we'll discuss how binary translates to sound. This I found to be the most interesting. We know that sound is vibrations, and vibrations can be visually represented as waves. The computer can pick up these vibrations via a microphone and record them at regular time intervals and place them numerically on a graph. When you connect these points to represent a wave. Now, this wave may not look perfect, but if you start taking measurements of the wave at more frequent intervals, the more points there are the more accurate the representation of the sound wave becomes and the clearer the synthesized sound with play from its capable speaker.

sources
Khan Academy and Code.org | Binary and Data
Binary Numbers and Base Systems As Fast As Possible
https://techterms.com/definition/ascii
https://techterms.com/definition/utf
https://www.bbc.co.uk/bitesize/guides/zpfdwmn/revision/2

A deeper look into websockets

ibrahim ali — Sat, 24 Apr 2021 17:59:03 +0000

Web sockets are a constant, bidirectional communication line that communicates via HTTP and a single socket. The basic structure of communication between the server and the client is a request-response-based formula. The client makes a request, the server takes the request, interprets it, and responds accordingly. While this works great for most communications between server and client, sometimes you need to communicate in real-time. The req-res based structure of HTTP becomes impractical for this purpose, but an early workaround for this is something called HTTP-long polling.

HTTP-long polling works with the client sending a request to the server with a long timeout. The server uses this time to respond to the client but pushing any data it has available to the server. Upon completion of said request, the client immediately resends a request to "keep the connection open". While this works it has quite a few drawbacks. The first and foremost being that this practice will tie up server resources even when there is no data available to be returned. Other issues pertain to problems as usage increases and re-establishing a connection upon disconnect. This is where WebSockets come in to remedy the situation.

Websockets are established upon the connection of a simple HTTP request. After the first connection is established and required conditions are met, the WebSocket will attempt to keep the original TCP/IP connection established by the HTTP handshake open as a WebSocket. If this is successful the WebSocket becomes a way for the server and client to send UDP-based message data back and forth. They essentially upgrade a request-response pair into a WebSocket.

The HTTP request sent to the server from the client will need to contain a few headers to indicate its intention of being upgraded into a WebSocket connection. The connection header is set to the value of the upgrade. This header indicates that the connection wished to stay open and alive after the transaction that began is resolved. The upgrade header set to WebSocket goes on further to establish the now existing connection as a WebSocket, it also needs a sec-websocket-key which is a randomly generated 16-byte encoded value to identify that specific connection.

The reply from the server must also satisfy a few criteria. It needs to return an HTTP 101 switching protocol to confirm that it is changing to a WebSocket connection. its header must include information such as a confirmation response to the connection and upgrade headers and a sec-websocket-accept header which takes the client's request's sec-websocket-key and rehashes it into another value that indicates that the connection has been properly established and encoded.

Framed protocol

Websockets are a framed protocol meaning that they're divided into chunks of data each with its own properties encoded inside of its frame. The fin bit dictates that this frame is the last frame in this chain of chunks that makes up the protocol. The op-code is set to indicate how each frame's payload data should be interepted.

Masking changes all of the payload data into another value to prevent something known as cache poisoning. The client uses a random key with the data to achieve it. This is done so that the WebSocket doesn't cache the data. If a server is faulty, the communication between protocols once they've left their origin can't be controlled and if the data were to become cached then future connections ran the risk of returning incorrect responses. The masking key generated by the client is responsible for interpreting the data when it's reached its destination. The payload len property is used to encode the total length of the payload. If the payload is larger than 126 bytes then additional protocols are used to encode any additional data.

breaking a connection

A closing frame sent by the server will initiate the closing sequence of a WebSocket connection. The frame would generally contain the reason for connection closing and both parties must receive and accept the frame to end the connection. The TCP connection ends.

Typescript

ibrahim ali — Tue, 16 Mar 2021 05:06:33 +0000

For this and all other upcoming blogposts, I wanted to cover topics that were most relevant to tech professionals right now. So I posted a question in my friend's dev-based discord for suggestions on topics and I got few different responses but the one consensus among them of a relevant topic was Typescript.

The first thing to know about typescript is that it IS javascript, or rather it's a superset of javascript, meaning that it is a language built on top of javascript and any javascript is a valid typescript. It was designed by Anders Hejlsberg at Microsoft and is maintained by Microsoft. its first version 0.8 was released in October 2012. In the following years a few more major updates were released leading all the way up to Typescript 4.0 which was released Aug 20th, 2020.

FEATURES

Compiling
Typescript doesn't actually run anywhere. To execute typescript it needs to be compiled. The tsc command runs the typescript compiler. After installing typescript globally with the npm i -g command, you can create a .ts file which is where you can write your typescript code. Then you can write whatever typescript code you want in the file and when you want to compile you can run the tsc command on your index.ts file and the transpiler will compile it into javascript for you in a .js file of the same name. You can also create a config file and set up a few options there to automate some of the things the transpiler can do for you.

Typing

Typescript's biggest feature is that it is object-oriented and strongly-typed. Javascript is a loosely-typed, an interpreted language, which while providing much flexibility, can allow many bugs to go unnoticed until they wreak havoc at production time.

const sum = (num1, num2) => {
  return num1 + num2
}; /*javascript will allow any datatype to be passed as a parameter here*/

sum(3, 4); // returns 7
sum('A', 4); // will return 'A4'

With Typescript on the other hand you can declare the type a variable needs to be to narrow-down possible bugs that may arise from passing the wrong data-type into the arguments of a function.

There are two types of typing in typescript. Implicit typing and explicit typing. Implicit typing happens when you declare a variable and assign a datatype to it such as a string. Typescript will automatically note it as that specific data type so if it reassigned to another data type such as a number it will throw an error right there.

let greeting = 'Hello world'

greeting = 27; //it will prevent you from reassigning greeting to //a number

You can also explicitly type variables and parameters with the colon. Right after the declaration of the variable, you can type the colon and then its data type as defined by javascript.

const sum = (num1: number, num2: number) {
  return num1 + num2
};

sum(3, 4); //returns 7
sum('A', 4); //is highlighted an disallowed because num1 can only //be a number

To preserve javascript's flexibility if you choose to opt-out of the typing, you can use the tag, or you can declare the variable by itself.

let example;

let example2 : any = 14;

example = 'example';
example = true;   //these should all work.
example2 = 'example2';

Additionally, you can also create your own types.

type Fourteen = 'fourteen' | 14;

let fourPlus10: Fourteen = 14;
let digitFourPlus10: Fourteen = 'fourteen';

Obviously, that is a very basic and redundant example of custom typing. With interface you can type an object, almost like a constructor. You can define an object and what its keys and value datatypes should be

interface Car {
    color: string;
    year: number;
    automatic: boolean;
}

const camry: Car = {
    color: 'silver', //this will work
    year: 2021,      //if i try to add another prop it won't
    automatic: true;
}

Though you can circumvent this, just like the "any" type.

interface Animal {
    name: string;
    species: string;
    age: number;
    [key: string]: any
}

const pet: Animal = {
    name: 'jecko',
    species: 'cat',
    age: 2,
    idiot: true
}

With functions, you can type both the arguments that they take and the result that they return. Just like the variables you can type the parameters and then after the parameters and before the bracket you can type what the function should return.


function greet (timeOfDay: string, name: string) : string {
    return `good ${timeOfDay} ${name}!`
}`

If you don't want to type the function replace whichever type with void.

 function laugh () : void {
  console.log('hahahahaha')
}

You can type arrays as well. This can be useful in a few different scenarios, such as if you want an array of just numbers or especially when dealing with an array of objects.

const numArray: number[] = [];

numArray.push(1); //works
numArray.push(2); //works
numArray.push('hello'); //throws error

You can also create touples, which are arrays with a fixed amount of indexes. Here you can declare an array that takes a specific amount of arguments each with its own specific type. But if you strongly type an array like this, when it's being declared it will demand that all the indices be present with their appropriate values. This can be circumvented with the "?" optional.

type sixSidedDie = [number, number, number, number, number, number];

const dice: sixSidedDie = [1,2,3,4,5,'six']; //won't work
const dice: sixSidedDie = [1,2,3,4,5];//won't work

type sixSidedDie = [number, number, number, number, number, number?];

const dice: sixSidedDie = [1,2,3,4,5]//will work

Third-party libraries
Typescript supports almost all javascript libraries. Typescript also supports nearly all javascript libraries.

The dreaded DDoS

ibrahim ali — Tue, 09 Mar 2021 07:40:53 +0000

Back when I used to play an MMORPG called Runescape back in the early 2010s one of the most dreaded things that could happen if someone got a hold of your IP address was the dreaded DDoS. You're walking through a dangerous area in the game and suddenly...

next thing you know, you log in and all the valuable pixels you spent hours accumulating are gone. Even though it's been years since I've had to fear losing my precious items to this, I've also noted similar attacks on websites ranging from large multimillion-dollar operations to small business websites. Now that we're finally going into the world of backend development and servers specifically, I thought I'd delve a little bit deeper into one of the most common forms of internet maliciousness.

A Denial of Service attack or a DoS is executed simply by overloading a server with fake requests and causing a severe slowdown or even complete crashing of response time. Though annoying a regular DoS is not a very big deal. Since it's originating from a single source it can be fairly easy to defend against by restricting access to that specific source. The DDoS, on the other hand, is carried by an army, which is what makes it so dangerous.

Before I go into the DDoS in more depth, I would like to talk about the Hug of Death, the DDoS's more docile but still just as a destructive cousin. Have you ever noticed that sometimes a website or application that is not very popular on a regular basis gets retweeted by a celebrity or ends up at the top Reddit. You'll click on the link and the site won't load or the app will crash. That is because usually this surge in users is not something said app or application is prepared for, resulting in the servers being overloaded and the site no longer able to function properly.

The DDoS is a malicious version of this. Although to emulate this large-scale attack, the attacker requires an army. This army can consist of servers, other people's computers, and even networks and is created by infecting said entities with malicious malware which allows the attacker to use these infected devices, to carry out their attack. This legion is known as a bot-net. Once in control of a bot-net, the attacker has to just coordinate which time they would like to execute the said attack, and if done with enough skill can bring down even the largest of websites.

There are 3 main types of DDoS attacks. They all work generally the same, which is by overloading the victim servers, but each has a few key differences.

Volumetric attacks

The volumetric attack is the most common type of DDoS attack. It overwhelms the network with fake data, slowing down the time in which the server can respond or killing it altogether.

“I’ll have one of everything, please call me back and repeat my whole order”.

It can be completed with very little effort and is generally a brute force attack. Two different targets of volumetric attacks are the UDP or the user data protocol which is the simplest form of data transfer. The other is the ICMP or internet control message protocol which network devices use to communicate with each other.

Protocol attacks

Protocol attacks target the part of the server that deals with identifying and verifying network connections. It can do things like sending slow or half-complete pings and can attack firewalls.

One specific type of protocol attack is called an SYN flood. This method abuses the "triple-handshake" method that some servers use to establish a connection with a client. The client sends an SYN or synchronization packet to the server, the server, in turn, sends an SYN-ACK or acknowledgment of this request, and then finally the client returns an ACK establishing a connection. In case of the attack, the attacking client sends loads of SYNs, which in turn are responded to with SYN ACKs from the server but no response is ever received from the client, hanging up resources.

Application attacks

Application attacks target the topmost layer of the OSI model, the application layer, that deals with most user interaction. These attacks target web traffic requests that use protocols such as HTTP, HTTPS, etc. This layer is where the webpage is generated and the attack can be hard to catch and differentiate because this attack comes from a lesser number of machines, which in turn can make it harder to tell it apart from regular traffic.

Defense from DDoS

Defending against DDoS attacks can be a tricky task. The biggest problem is differentiating normal traffic from malicious traffic and well-executed attacks can cost companies a lot of money and crash their site for hours and maybe even days. Also quite often you can't tell an attack is happening until it is already at your doorstep. With this in mind, the best way to defend against an attack like this is with preparation. Firewalls, VPNs, antispam filtering are server-side preparations that can be taken. Also having a clear protocol in place with a team dedicated to responding to attacks can be effective precautions.

You can also make sure your servers are spread out and have backup servers to route traffic in case of an attack. Hosting on the cloud is yet another way to mitigate the severity of an attack and often the cloud's massive bandwidth and dedicated team of professionals whose job it is to monitor traffic and spot minor changes in the way that traffic is flowing can also be very helpful.

sources:
DDoS Attack Explained by PowerCert Animated Videos
https://www.youtube.com/watch?v=ilhGh9CEIwM

What is a DDoS Attack? by IBM Cloud
https://www.youtube.com/watch?v=z503nLsfe5s

7 Tactics To Prevent DDoS Attacks & Keep Your Website Safe
https://phoenixnap.com/blog/prevent-ddos-attacks

What is a DDoS Attack?
https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/

Finally learning Regex

ibrahim ali — Mon, 01 Mar 2021 00:27:08 +0000

On the first day of the Bootcamp phase of operation phase, one of our first practice problems was to transform a given string into a dash case. While the solution was a simple .split.join chain, I went online and found the .replace method which led me to Regular Expression, shortened to regex. I ended up watching a 45-minute video on regex and at the time, having only the most basic knowledge of javascript, came out way more confused than I went in. Since then, anytime I've attempted to do research on a problem that may require complex string manipulation if the solution requires regex I've always opted out, instead preferring the previously stated .split.join. or using char chars or literally anything else but the dreaded regex. But now being 13 weeks into my Operation Spark journey, I've decided to finally tackle my regex anxieties and add another skill to my programming repertoire.

"A regular expression (shortened as regex or regexp; also referred to as rational expression) is a sequence of characters that specifies a search pattern. Usually, such patterns are used by string-searching algorithms for "find" or "find and replace" operations on strings, or for input validation." -Wikipedia.

Regex originates from the 1950s when mathematician Stephen Cole Kleene came up with regular language which is a formal language that a subset of rules can define. This allowed computer science theorists to incorporate it into code, and use it for early text editors and compilers. Many decades later these rules still apply and are incorporated into most programming languages and run behind the scenes of search engines, document editors, and many other such applications.

In this post, I'll give a rundown of basic regex syntax and special characters. Here is a nifty website that can help practice regex expressions in real-time.

https://regexr.com/

The most basic syntax for regex is the forward slashes. All of the code to-be executed goes inside of them. Anything typed in between these forward slashes is what the regex is going to be searching for when it is executed.

/regex/ //regex

Well that is except for the expression flags that go right after the second forward slash.

//the global flag
/the/g

The global flag, represented by g, applies the regex to everything inside of the specified string, else it would only apply to the first character.

The lowercase i denotes case sensitivity.

The lowercase m is for multiline and the lowercase s is for single line

/the/gi //will account for case sensitivity

/the/gs //gm //will account for multiline string]

There are couple of other flags but these are the most basic and frequently used ones.

Then there are special characters. These are really the bread and butter of regex. Each one does a separate unique thing that when chained together can become really powerful tools in string manipulation.

The plus operator, +, is used to check for more than one character in a row. For instance, if I wanted to search for any word that may have two e's in a row such as "street" adding the plus operator in front of the "e" will check for that.

The optional, ?, represented by the question mark, will optionally look for the character that is placed before it. Here the optional is placed right before the "w" so it will look for the "o" and optionally look for the "w" if it's there.

The star operator, , will match any amount of similar characters in a row. Here the "re" is going to search for any amount of "e"s that go after "r".

The period character, ., will match anything that it's placed for, either before or after depending on where you place it. Here the period after "o" will match with any two letters that start off with "o".

The \w is to match word characters. Anything written as word will be searching here. Conversely, the \s will match all whitespace. Also doing the capital version of both letters switches around what the expressions do and will highlight spaces and words, instead respectively.

Inside of the curly braces, you can indicate how many characters you would like your search to range over. Here we have the capital \S which is searching for words and spaces and the 2 and 3 inside of the curly braces is denoting any words between 2 and 3 characters.

The square brackets take any characters you wanna match with whatever next to them. I want to check for anything that has an "o" with either a "g" or "p" after it. This line accomplishes that.

I can also use the dash, -, to check for a range of characters. So here I can check for anything that has the letter "o" followed by any other letter between "f" and "r".

The capture, represented by the parenthesis will capture groups of characters to implement the regex search on. For example, if I wanted to look for an "o" followed by either an "s" or a "t". I will wrap the "s" and the "t" with the capture and then place a column line to denote "or" in between.

So while all of these can be chained together to allow for many dynamic uses. These are the most basic regex special characters that will allow you to do most of what you want to accomplish with regex.

sources:
https://en.wikipedia.org/wiki/Regular_expression

https://www.youtube.com/watch?v=rhzKDrUiJVk&t=896s

This tendency to get lost. (function bindings)

ibrahim ali — Mon, 22 Feb 2021 05:05:40 +0000

As a beginner in javascript, the "this" key word, has been a source of much confusion and frustration. in class when we first touched on the keyword, we were told about it's 5 different distinct uses and at that time, i felt like the information hurt more than it helped. Feeling almost contrary to what we had learned at the time about how different variables and functions act, the biggest rule about "this" was that: "the value of "this" is determined at function call time". As time went on and we began delving a bit deeper into things like Constructor and decorator functions, the context began to become clearer and I realized that rather than trying to digest "this" and its many applications all at once, it is much more effective to do a deep dive into each of its uses, and understand those better to get a better picture of the keyword.

In this post, I will specifically be talking about how this is used in function bindings, and even more specifically, object methods.

Let's say that I had an object that was a point on the XY grid map and it came with a method called "teleport" that will randomly place it at some point on the grid.

const point1 = {
  name: 'point1',
  x : 0,
  y : 0,
  teleport() {
    this.x += Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    this.y += Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    return `${this.name} is at (${this.x}, ${this.y})`
  }
}

Now if I were to call the "teleport" method for point1, it should return its new location after changing its x and y values.

point1.teleport() // =>  point1 is at (???, ???)

I'm also going to quickly create another variable "point2", but since I'm feeling lazy, this time I'm only going to give it the name, x and y properties.

const point2 = {
  name:'point2',
  x : 0,
  y : 0
}

I know that I can always just assign point1's teleport function to point2 and because of the way I have it written they should work essentially the same.

point2.teleport = point1.teleport;

 point2.teleport(3, 1) // => point2 is at (???, ???)

This is all good and well, usually, but as we all know "this" is very finicky in its preference of what to attach to.
Now let's say that I'm in the beginning stages of a test program where I specify a specific area of the map and I'll have the two points race each other to a specified area on the map.

let targetArea = {
  x1: 0,
  x2: 0,
  y1: 0,
  y2: 0
}

const randomArea = function(){

  targetArea.x1 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.x2 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.y1 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.y2 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  console.log (`The target area is between (x:${targetArea.x1},y:${targetArea.x2}) and (x:${targetArea.y1},y:${randomNum})`)
}

randomArea(); // => The target area is between (x:2,y:52) and (x:1,y:39);

Now that we have the groundwork set we can start racing the two different points. I'm going to create a function that takes the two points and calls their teleport functions at random time intervals until one of them ends up in the specified target area, but I also want to give point2 a headstart. I'm going to acheive this using the setTimeout function.

That side-bar filled with gibberish that would pop up occasionally while browsing the web.

ibrahim ali — Wed, 20 Jan 2021 20:41:53 +0000

While browsing the web on the internet's favorite browser, Google Chrome, everyone at some point has accidently pressed ctrl + shift + I (⌘ + option + J for mac users) and encountered the Chrome DevTools panel. To anyone who isn't learned in the ways of software programming or at least familiar with its basics, this daunting wall of texts, tabs, buttons and icons may as well be like looking at a wall of ancient Egyptian hieroglyphics. The ancient cryptic language of the extraterrestrial beings that blessed us with the internet. But after a few months of learning how to read and write basic JavaScript, HTML and CSS and a tutorial or two about the different features that the DevTools panel offers, not only does the panel become a bit demystified and easier to read, but it also shines as one the best tools available to modern day web developers.

So, while the understanding of many of its more advanced features still eludes me, I'm going to attempt to write a brief basic overview of the ones that I do understand and have been of vital use to me as I start my career in web development. Mainly the Elements, Console, and Sources Tabs.

Elements Tab

The first thing to usually pop up when viewing the DevTools console is the elements page. This is the page I was referring to when I said "a wall of Egyptian hieroglyphs". At a closer look and with little bit of understanding, you can see that all that text is actually the pages HTML elements, neatly divided into it's different categories able to be toggled on and off to make for an easier read.

Scrolling over the different elements highlights the portion of the page that it pertains to and you can right click on any portion on the page and it will highlight its corresponding tag in the console.

In the styles tab to the right of the HTML, you can see and even play around with the different CSS elements that each tag has.

You can go to any webpage you like, right click something on the page that you want to interact with, and use the styles tab to temporarily (all the changes go away after a page refresh) change it's properties such as color, or text font or even what the text it self says. The possibilities are only limited by your knowledge of CSS. This is extremely useful when styling your own page, so you can quickly try new things to see what works for you without having to commit to permanent changes in your CSS file.

Console Tab

Next up we have the console tab. My first encounters with the console tab happened while watching online tutorials on basic JavaScript concepts in the earlier phases of the boot camp. While we were still using resources like repl.it to write our code, all the instructors would be using the console in the DevTools in their examples. Now the console tab works mostly like the console of any other JavaScript IDE.

You can write your code and view it's results in real time. What I really like is that it will display the output of anything thing you type under your code as you type it. This allows you to quickly and dynamically test out different things without having to manually console.log each and every bit of your code to see what's going on.

One problem I ran into with online IDE's like repl.it was that while it's great for playing around with basic code, when it came down to more practical and advanced uses of a console, such as working on functions that depended on a JSON or working with JavaScript libraries such as underscore and jQuery, it becomes impossible to use those within the online IDE's, but since the chrome page it self has a more complete picture of JavaScript functionality, its console is much more useful.

Sources Tab

The sources tab is the home base for debugging. Its contents are broken down into three main divisions, the source file navigator, the code editor and the debugger. The file navigator allows you to view all the files and their relative locations for the respective webpage. When selected, each of these files can be opened up in the code editor to view and to edit.

The real star here though is the debugging panel. The debugging panel has quiet a few features, but I'll talk about the two I am most familiar with. Breakpoints and Watch Expressions.

Breakpoints are the bread and butter of debugging. They allow you to select certain points in your code and then run your program up to that point. After setting a breakpoint you can execute and visualize your code up to that point step-by-step.

In addition to manually setting your breakpoint, the event listener breakpoints feature will let you select a particular event type such as mouse click or a key press to set a break point at.

When a breakpoint is set and the code is initialized up to that breakpoint, all variables that have been defined so far become available to be checked and evaluated within the console. These can also be viewed inside the scope pane. Lastly, the watch expressions panel allows you to enter any JavaScript expression and monitor its result in real time.

Conclusion

In conclusion, while I have only begun to scratch the surface of the DevTools' capabilities, its addition to my repertoire has greatly improved the level at which I'm able to interact with and understand the complexities that go behind web development. As I become more proficient with the tools I know how to use, I only become increasingly excited to learn about the rest as I continue on my journey into deciphering what goes on behind the scenes of all the programs and applications that I have been using for so long.

sources:

https://www.udemy.com/devtools-2017-the-basics-of-chrome-developer-tools/

https://developers.google.com/web/tools/chrome-devtools/javascript