Step 1: The Code

Find a website you want to do, maybe it’s for a company you’re applying to or your favorite website you go on everyday. I’ve chosen Flatiron School’s website, which you can see here.

CSS

The CSS I got from w3 schools, which you can find here. Specifically the one with the header and footer but they have other styles as well. They also did there’s with an onclick but mine is with an onscroll. I had to split this up in two parts because the code is too large to fit in one screenshot.

HTML

The HTML is also from w3 schools, which is listed below. However I’ve changed the html context with a cat gif to display.

JavaScript

I have listed my Stackoverflow resources that I used to help create the JS code.

• Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript
• get percentage scrolled of an element with jquery

Step 2: Paste into Console

Go to the website you want to and access the console by cmd + option + j. Go to the Elements tab, right click and go to Edit as HTML. Copy + Paste the whole style sheet and HTML code in the body. *Make sure to click outside to ensure the code is in there.

Next: Go to the Console tab. You can see the style and modal div now has been added.

This is just the bottom of the code but you can see now it’s been added to the console.

Step 3: Test it out

Now of course you can style and change the context to whatever you like! Happy Coding!

As I’m currently in the process on seeking employment in the tech industry, I’m realizing the importance of self motivation and continuous learning. In this industry it’s important to continue learning as languages and technology are constantly changing. For a general overview I graduated from Flatiron’s coding bootcamp in New York in March. Since then I’ve been continuously learning in a variety of ways. I’m always open to other tips that other people have found helpful and I’ll post the resources I’ve been using.

MeetUps

First thing is meetups! This is a great place to network, learn and enjoy free food and drinks (sometimes pay). I’ve never really heard of meetups before or have gone to any but meetup (the app) has a wide range of them from dogs, movies and of course tech. Below I’ve listed a few that I’ve been too and others that I’ve heard great things on. There’s obviously more so always open for other suggestions!

Coding Tuesdays- Interview Practice

Women Who Code NYC

Content Strategy NYC

NYC Women in Machine Learning & Data Science

#BetaNYC, NYC’s open data, open gov, & civic tech community

Girl Develop It NYCOnline Tutorials

NY Tech Meetup

Operation Code: NYCTech Interview Resources

Online Resources

There are so many resources online that it can be overwhelming to cherry pick, which ones are good and helpful. Below are some resources I’ve found to be very helpful and I find myself on quite a bit.

Eloquent JavaScript

Udemy

StackOverflow

Free Code Camp

w3schools

Medium

*There are obviously many more and the ones listed above may seem very obvious but sometimes it’s nice to see them listed. And for a kicker here’s a link to 64 ways to learn code for free .

Networking

This one may sound the most daunting but is also the most necessary. My advice here is to really utilize LinkedIn. Whether that’s paying for a premium account, using their free month or have a regular membership. It’s a great resource to find a job, research companies and see where people work.

My number one advice that I’ve been told and agree with so want to pass on is SEND A MESSAGE. Whenever you’re connecting with someone even if you met them at a networking event or have a mutual connection, MESSAGE THEM. This can only help you. I’ve recently been receiving a lot of LinkedIn invitations from people who I have mutual connections with but have never met before and I usually don’t accept because it’s not clear what the intention is. It’s really important that you send a message because it 1. Makes you stand out 2. Shows your interest 3. That person knows what you want out of the connection.

*It’s also completely fine just to connect with someone but a personal message is always nice. Especially if you’ve never met the person before.

Hi ____, I came across your profile. I would love to connect with you!

^something simple that just shows what you want out of the connection.

Here is my blurb that I usually say:

Hi ____, My name is firstname and I came across your profile as I was applying to an open position at company name. I see you *reference a mutual interest (mutual connection, work, position). I would love to gain more insight into your experience either in person or over the phone. Let me know what works best for you, thank you!

*Now from experience, what I’ve written above is based on the character length if you don’t have premium so this message should fit but obviously tweak it depending on other factors.

Blog Posts / Technical Practice/ Github

These three are important things to maintain when getting a job.

Blogs

When writing a technical blog it helps you understand the concept better. It allows you to really research a topic and ask the questions you normally might not have. Also being able to explain a technical concept in your own words will help you retain the information and better explain it in interviews.

Technical Practice

Technical practice is key. Algorithms are an important part of the interview process. Below are some great resources.

LeetCode

Interview Cake

Pramp — Practice mock interviews with peers

Interview Bit

HackerRank

Github

When searching for jobs, it’s easy to stop coding. However, this is the most important thing to do. Maintaining your github account by showing your commits is important and something recruiters look at. I’ve found it helpful to create small projects on things you want to learn or create one large project that you want to do.

Happy Job Seeking!

Pronounced SEQUAL- What Is It?

SQL stands for Structured Query Language. Unlike other languages that are out there, SQL’s only purpose is for talking to databases. This language can also be referred to as a “domain specific” programming language. There are many database systems that SQL interacts with such as MySQL, PostgreSQL and SQLite. I’m going to be doing the demo in SQLite.

Set Up

1. In the terminal write: which sqlite3 => return should be /usr/bin/sqlite3

2. If not, go to SQLite Download Page here.

Continuing after downloaded…

3. Paste: sqlite3 test_sqlite.db

b. Paste: create table test_table(id); => we’re creating a database called “Test Table”

** ; ** is highly important to terminate the session, otherwise you will be trapped!! You can also do .quit

It happened to me doing this just now. The .quit will also take you back to the directory but just don’t forget the ;. You can add it on the next line also in case you did forget it the first time around!

Creating the table

We are create a dogs table because I love dogs and based on my previous post about my dog, Benny I thought I would continue the theme.

1. So to get back into the database you should see this. **pay no mind to my other projects but you can see it at the bottom! Now you can’t cd into it so instead run sqlite3 whatever_table_name.db in this case test_sqlite.db

2. Now that we’re in SQLite database let’s create a table for dogs. I’m giving the attributes name, age and breed. **Notice the error- it is because we need to specify some column names. You can see the specifics that I say integer for age and text for name, which is important.

3. To check what we have so far you can run the .tables and .schema command. See below on what we have so far!

Writing in a Text Editor!

1. I’ve put everything in a folder for convenience so you can start that by writing in your terminal mkdir folder_name. Then create a file by writing the command touch file_name.

2. It should look like so! You can see by this line “sqlite3 test_sqlite.db < 01_add_columns_to_dogs.sql” connects the two.

Adding Data!!

1. Finally we can start adding data. We can do this in our terminal and text editor. I will demonstrate both using INSERT INTO

As you can see now we have some doggies in our database!!! Now when using your text editor based on the example make sure you do separate INSERT INTO’s. Also because we had id as primary key it automatically assigns it for us, which is why you don’t need to add it yourself.

OKAY ONTO THE FUN STUFF!

I’ve quickly created an owners table so that we can see the joins and how they work! Below is a quick visual of the updated schema and the owners table with name and age.

THE JOINS

Below is an overview of the joins and it is what I’m going to be demonstrating with the tables we have created.

Inner Join

If our dog didn’t have an owner id assigned or had an id of an owner that didn’t exist in our owners table they would not show up in this inner join. INNER JOIN returns all the data where the statement is TRUE.

Left Join

Now, say that we had a pet that didn’t have an owner. In the INNER JOIN method the dog would be excluded but in the LEFT JOIN method it would return the dog regardless — it would just leave an empty space where the owners name would be

*RIGHT JOIN and FULL JOIN are not supported by SQLite but I have posted the boiler plate of what they would look like.

Right Join

Now if we created another owner that didn’t have a pet and we did RIGHT JOIN we would see the owner’s name but with no pet information.

Full Join

The FULL JOIN would include both the dog without the own and the owner without the dog. To sum it up ALL THE DATA.

Conclusion

This was super helpful for me and I hope it helps others! Again, the resources I used were from Flatiron Schools Learn.co.There’s a lot more to do with SQL and other databases, which I may do in my next blog post. Happy Coding!

Overview of Semantic

“ “Semantic HTML” refers to the idea that all your HTML markup should convey the underlying meaning of your content — not its appearance.”-internetingishard

Interneting is hard wrote a great article discussing semantic html with clear visuals, which I have used in my blog. As you can see below the <div> tag can be used in any aspect of a web page. However now with HTML5 there are elements specifically designed provide a clear distinction on the layout of the of the web page.

Benefits of Semantic

When using the alternative tags such as the ones above and many others, it allows for search engines, screen readers, browsers, etc. to properly load content creating a clear hierarchy. This helps people with disabilities better understand the content on the page.

Below is another visual that represents a template for using semantic html. Here you can clearly see where the elements go. It’s what users are used to seeing everyday even without knowing any html. You can clearly identify what’s the header, where the article goes and what the aside element is used for.

I tried to simply replicate the above using some of the tags. Based on the code and the photo above you can see the HTML elements that I’ve used.

Toggle Summary and Details

The details and summary elements is something I want to highlight. My TCF from Flatiron brought this up our slack group and it’s super convenient and definitely something I wanted to share.

The details and summary element provide a toggle feature. The summary element is the header/label/title for what you want to display and the <other tag> is the content. Below is an example of the toggle feature displaying another photo along with the code I’ve used.

As you can see above, once it title was clicked it displayed another image of Benny. Now it can include anything you want but I just wanted to show another photo. Also you can see the <aside> element is still there on the right.

This was just a fun side note and something I wish I had known earlier and wanted to share with everyone in case they needed to do an easy toggle action!

Semantic Elements and their description

Below is a table from w3 schools that provides the elements uses. They have the ones I’ve used but also others that I haven’t but recommend to try yourself!

HTML & CSS Code

In conclusion this was a fun little project to do and learn more about semantic html and do some custom css. Below I have provided my HTMl and CSS code along with the link to the repo here.

Resources:

Semantic HTML — Interneting is hard

HTML5 Semantic Elements — w3schools

Semantic HTML For Meaningful Webpages

General Overview

“A Developer Advocate is someone who truly advocates for developers, not just a platform. Developers should be the Developer Advocate’s top priority.”-Wassim Chegham

Wassim Chegham who was quoted above is a Developer Advocate who wrote about her experience. To start off Developer Advocates are engineers. It’s presumed that advocates would fall into the marketing or sales team but advocates are really part of the engineering team. The reason for the assumption is because Developer Advocates are the ones who are out there attending conferences, meetups, hackathons, writing online tutorials, etc. They’re the ones advocating for their companies products, representing software engineers and being the voice of the user.

What are the skills needed to be a Developer Advocate?

People Skills

One of the most common themes to be a Developer Advocate is people skills. Yes, you do need a technical background to be able to converse about the tech topics but people skills go a long way. Being an advocate you’re constantly engaging with the dev community and gaining feedback with the goals in mind that you’re producing the right product for its users. It’s a continuous learning cycle where you’re constantly learning and then educating others. This skill is important as you are interacting with a wide variety of people with different skills sets and background.

Public Speaking

Another skill that comes up a lot as a Developer Advocate is public speaking. You need to be comfortable speaking at conferences, running workshops or events. Now, this skill may deter some people from this position but hopefully not. And if it does, I don’t blame you either. Public speaking is hard and especially if you are talking to people in the tech industry about high level concepts that could be intimidating. But overtime and with practice this skill will hopefully be less intimidating.

Building Apps!

Now I’ve heard a mix review of people and my general conclusion is that it really depends on the company on how much you are coding. Some companies have Developer Advocates travel more and code less, others have them get right into building apps, fixing code, etc. But in order to be an advocate for products you should probably test it out yourself and build something! Whether that be in your free time or part of the job. To advocate for a developer and certain products experiencing the ins and outs firsthand can really help communicate to other developers and also see where they’re coming from.

Communication is KEY

Being able to effectively communicate is essential to this job. Pretty much all these skills go under the category of communicating. Not only being able to communicate tech concepts clearly to others but also communicating to your company, your team and other developers. Advocates want to share their knowledge and have it make an impact. Advocates write blogs, do online tutorials, research, chat with others, etc. They’re the people that care so much about the community that they want to dedicate their job to sharing their knowledge and meeting like mind people!

Does this seem right for you?

After this overview does this seem like an interesting position for you? It sure does combine ones love for tech and people. For more information I’ve provided the resources I found. I also linked Google Developers program, which is a program where people are recognized for having exemplary expertise in one or more of Google Developer products. In some of the references I’ve listed below there were some developer advocates that were apart of GDE. To learn more about their experience of GDE in general check out the links!

References:

What is Developer Advocacy?

What exactly do developer advocates do?

What the heck is a Developer Advocate?

Google Developer Experts

“APIs are standardized tools for software to communicate with other software, leading to faster development and innovation.” Julie Bai

So what is an API?

To start off API stands for Application Program Interface. So what does that even mean? To help with the explanation I found this great article by Calum McClelland, which I have linked to the bottom who gives a great analogy- ordering food. I am going to summarize it below with my twist of examples.

Ordering Food Analogy

To set the scene: you’re at home, lazy and hungry. You want to order some food and decide on Shake Shack. You’re looking at the menu and decide on a double shack burger with cheese fries and a chocolate shake. You submit you’re order and it’s passed along until it’s received to Shake Shack’s kitchen. There a series of steps that are happening that you’re not even aware of but you don’t care. The dish is now delivered to you and you can eat happily ever after.

But wait! You’re hungry and want dessert. Again you’re too lazy to go outside so you decide to order Baked By Melissa cupcakes. Now what would happen if you tried to order off the Shake Shack’s menu at Baked By Melissa. There would be some serious head turns and you definitely would not get the dish you ordered.

SO What is an API? It’s similar to a MENU.

Going back to programming. You’re the program and the restaurants are also programs that you want to interact with. In order to receive what you want you needed to make a request in a specific manner (menu). If you tried to request the food you wanted in a different way (ie. ordering from the wrong menu) you won’t get what you want.

APIs have specific commands set and when a program uses an API a bunch of stuff is happening from that program and then sends back what was requested. To tie it back in, the restaurant(a program) is in charge of the menu (API) and when it receives a request from another program (YOU) it does a bunch of stuff and then gives you what you ordered.

• Now this analogy has it’s flukes but it’s a way to better conceptualize what is happening and certainly helped me better understand what an API is.

** Going back to “What is an API?”

Another example Calum used was implementing a weather.com API. Many applications use it on their apps. By using the weather API you can request certain data and display it on your program for your users to see. This allows users to check the weather without having to go to weather.com or other sites to check it. A specification of what data you want from the weather.com API would be if you’re building an app that only pertains to NYC. You can specific and manipulate the data to only display NYC’s weather.

API vs Web Services

I found this great article by Anwar Samer, which I have linked to the bottom of the website. To quote below:

“ All Web services are APIs but all APIs are not Web services.” Anwar Samer

Let’s discuss APIs first. We know that an API is meant to interact between software programs. A web service can be tied in when data is being sent over a network. To go into the second part of the quote “APIs are not Web services” is because it doesn’t need to a network for operation.

“APIs can be exposed in a number of ways which include: COM objects, DLL and .H files in C/C++ programming language, JAR files or RMI in Java, XML over HTTP, JSON over HTTP, etc.”

Web Services only use: SOAP, REST, XML-RPC

Conclusion

My takeaway from learning what an API is, is that an API is a software intermediary that gives the ability for two programs to communicate with each other. There are a specific set of rules for an API and when they’re not followed you won’t get your expected result. Other examples of API’s are: YouTube API, Spotify API, Amazon Alexa API, Google Maps API, Yelp API, etc.

• What is an API? - A Simple, Non-Technical Explanation | IoT For All
• Developers Network
• Difference Between API and Web Service

Now I found some great articles on these that I will be referencing and linking as I go along and at the bottom of the article, so let’s begin!

Abstraction

I will be using Scott Pantall’s definitions for abstraction, encapsulation and inheritance. In his article he discusses OOP in Java but there are overlapping similarities. His article can be found here.

“Abstraction is the process of hiding all but the relevant information about a thing to make things less complex and more efficient for the user.”

In simpler terms, it allows one to focus on what the thing does instead of how it does it. The object is only exposing a certain aspect or operation that is relevant to the other objects.

An example would be a car. There are so many mechanisms that happen under the hood but all you really need to know is how to start it; put the key in the ignition and possibly press a pedal depending on the car (I don’t want to get too technical on this part). But the general idea is that you know what to do without knowing how a car is made.

Encapsulation

“Encapsulation is the idea that the attributes of an entity are enclosed in that entity.”

In simpler terms, it’s the idea to privatize data of an object so it is not directly exposed. The only way to have access is by calling public functions, methods. Below is an example of manipulating an object when it is not privatized. To fix this issue adding validation code such as having non numeric characters in the name and vice versa for age to ensure the name doesn’t contain a number and the age doesn’t contain a string.

Another key point to encapsulation is binding between the private state and public methods. As the example above doesn’t show this, the state of Person would have private variables; name and age and possibly a private method called greeting(). Other classes wouldn’t be allow access greeting(). However, they can access any public method that is made. For example; hunger, mood, sleep.

Polymorphism

Alexander Petkov, gives a great definition of polymorphism, which I have posted here.

“Simply put, polymorphism gives a way to use a class exactly like its parent so there’s no confusion with mixing types. But each child class keeps its own methods as they are.”

I also found this great stackoverflow post, which I’ve quoted here.

“It is the practice of designing objects to share behaviors and to be able to override shared behaviors with specific ones.”

To refer back to my car example and also referencing the stack overflow example. There would be a car type, which would be a base and that would have subclasses, providing their own behaviors but still inherit from car. The base car would have make, model and year. A tow truck could be a sub class, which would have that along with tow truck specific properties such as a weight limit. Let’s see it in code!

Now this example isn’t showing inheritance but it is overriding the behavior of getInfo() and you can see the shared behaviors.

Inheritance

“Inheritance is the idea that an entity can inherit attributes from another entity”

When writing code, objects share common logic and it could get repetitive to repeat; remember keep it DRY. Inheritance allows this by extracting unique logic. Now I won’t go too in depth here because I’m currently working on another blog post that discusses class and prototypal inheritance. When I’m done with that I can link it here. For now I have done an example that was based off of Scott Pantall’s blog. I’ve just changed a few things as his is done in Java and mine in JavaScript but you can see both the dog and bird class inherit the greeting() method.

Conclusion

After doing my research on these topics I believe I have a much better grasp of them. AEPI (not the fraternity) is easy to remember , there are more but I felt that these are the ones I’ve seen come up most and are important to know as an aspiring software developer. In conclusion OOP is a programming language model or programming paradigm. A concept in which objects contain data in the form of “fields” (attributes) and code is in the form of procedures (methods).

• An intro to object-oriented programming in JavaScript: objects, prototypes, and classes
• How to explain object-oriented programming concepts to a 6-year-old
• An introduction to Object-Oriented Programming in JavaScript

https://www.intertech.com/Blog/encapsulation-in-javascript/

https://stackoverflow.com/questions/27642239/what-is-polymorphism-in-javascript

Definition of Closures

A simple definition I found from Mike Cronin’s medium post about closures is: “A function inside another function that: 1) uses variables from its parent scope and 2) is exposed to the outside world.” I usually hear/see complex definitions but after seeing this one, it’s pretty straight forward and not as threatening to understand. So to break this down I’m going to start at the first point and switch over to Scopes.

Definition of Scopes

To break this down even further there are two types of scopes: local and global. A global scope is a variable that is declared outside all functions or curly braces{}. A local Scope are variables that can only be used in specific parts of your code. There are two kinds of local scopes; function and block. Function scope is when a variable is declared inside a function and you can’t access it once you’re outside of the function. Now my understanding is that block scope is similar to function scope but specifically {a block scope is inside the curly braces like this}. So my takeaway here is that function scope is just inside the function but block scope is specific to variables declared inside the curly braces {}. I have posted my own examples below to better visualize.

Nested Scopes (One-way glass)

I found this great article on css-tricks by Zell Liew who does a great job of explaining scopes and closures. I wanted to highlight this key analogy that he wrote about because he makes it so easy to visualize aside from the wonderful diagram he also provided.

To summarize the above when a function is defined inside another function the inner function has access to the outer functions variables but the outer function doesn’t have access to the inner functions variables. This is known as lexical scoping. You can see the outside but people from the outside cannot see you. My first thought was those fancy bathrooms with the fog glass (same same but not really). MOVING ON!

Going back to closures!

Now that we have an understanding of scopes, let’s dive into closures. Also if you want more information I have referenced my resources at the bottom of this post! So to bring forth the second part of the definition of a closure, which is “a function in another function that is exposed to the outside world”. The “inner” function is the closure and is usually returned so you can access the outer functions variables at a later time. Sounds more or less easy to understand. Below I have tested this out for myself based on other examples I found. Notice there are two ways to return the inner function!

Based on the code above you can see the use of closures. We have private variables that can be accessed at our disposal and we can control side effects along with the variables being protected by any global variables. Let’s do another example! The next example is from Mike Cronin showing us the power of closures and how values cannot be altered or accessed by other functions aside from the closure itself. *This is my take on his example in his blog post, where he uses x and y variables along with multiplication to show the function behavior.

Notice how a global variable values are unprotected and can alter the functions return behavior. However when protected by closures one does not need to worry about a variable values changing or the behavior of the function.

Conclusion

Scopes and closures go hand in hand and it can be a confusing concept to understand, certainly intimidating in an interview. A strong takeaway is knowing that a closure is a function inside another function. When you hear scopes think of a one-way glass. You can see outside but the outside can’t see you. Translation to programming: the inner function has access to the outside variables but the outside variables can’t access the inner function’s. I hope this is helpful to others as it was to me!

• A beginner’s guide to understanding JavaScript Closures
• Self-invoking functions in JavaScript (or Immediately Invoked Function Expressions)

https://css-tricks.com/javascript-scope-closures/

https://www.w3schools.com/js/js_function_closures.asp

Naming things in programming can be thought of as easy but is a challenging task for most. The idea of making sure you’re naming your classes ‘right’ or in a clear way so that other people who are reading your code can understand what is happening. I have fallen victim to poor naming and currently still do. I’m hoping with these tips I’ve learned from other sources and from my experience will help you when starting your project.

Ruby on Rails:

Below I am reiterating these rules that I got from Ian Green Leaf on github. Link here. Super helpful, I am just adding my own project to show as an example.

General Ruby conventions:

1. Class names are CamelCase
2. Methods and variables are snake_case
3. Methods with a ? suffix will return a boolean.
4. Methods with a ! suffix mean one of two things: either the method operates destructively in some fashion, or it will raise and exception instead of failing (such as Rails models' #save! vs. #save).
5. In documentation, ::method_name denotes a class method, while #method_name denotes a instance method.

Database:

1. Database tables use snake_case. Table names are plural.
2. Column names in the database use snake_case, but are generally singular.

Model:

1. Class names use CamelCase. These are singular, and will map automatically to the plural database table name.
2. Model attributes and methods use snake_case and match the column names in the database. The UserFavorite knows to use the user_id field in the database based on the belongs_to relationship. From the User model you can find all the favorites that pertain to that user based on the has_many, through: relationship.

Controllers:

1. Controller class names use CamelCase and have Controller as a suffix. The Controller suffix is always singular. The name of the resource is usually plural.
2. Controller actions use snake_case and usually match the standard route names Rails defines (index, show, new, create, edit, update, delete).

Routes:

1. Route names are snake_case, and usually match the controller. Most of the time routes are plural and use the plural resources.
2. Singular routes are a special case. These use the singular resource and a singular resource name. However, they still map to a plural controller by default! — This is very important and got me stuck the first day I was working on my project. I was able to fix it so I don’t have what it looked like when I messed up so I will summarize the importance. I originally called it “user_fave”, which when turned singular is “user_fafe”- rails kept throwing an error because of this so just be mindful when naming.

React:

In react I am mainly going to focus in the src folder and everything else will remain the same. Below is a look at what my src contains. The focus is mainly on components and containers and helpers is another folder which I am going to put redux (currently working on so not going to talk about it yet).

Presentational vs Container:

1. Presentational is concerned with how things look vs Container are concerned with how things work
2. Presentational example: Page, Sidebar, Story, UserInfo, List.
3. Container examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList.
4. It’s not as clear as in ruby throughout a projects lifetime of moving files between one or the other. So when starting just be clear on naming your files on what you think the purpose is going to be. In my container folder for some of my files I distinctly say “container” at the end.

Naming Components:

1. Be clear and unique to avoid any confusion
2. Naming a component is handy when debugging- in React Dev Tools the error comes with the component name- hence the importance of clear names to easily pinpoint the error
3. Components should be named according to it’s relative path example; src/container/TopicContainer.js; src/components/Topic.js
4. If a component is in a folder with the same name, don’t repeat the name, example: src/components/User/List/List.js would be named UserList NOT UserListList.

Conclusion:

There are general rules to follow but also can name things essentially whatever you want. Just make sure that any file/folder/component/table/etc you name someone else reading your code can understand it without having to look in the file. It should be clear to others.

Resources:

• Structuring projects and naming components in React
• Presentational and Container Components

What is A/B Testing?

To get right into it A/B testing is a way to test two or more different versions of a webpage against each other and see which one performs better and causes more traffic. This can also be referred to as split testing or bucket testing. When performing this type of test you want to ensure you are splitting the traffic evenly amongst the pages you want tested- control group vs the variation pages.

Pros

The pros of A/B testing is that because the pages are so different from one another you can more easily define the successful webpage. For example: The photo below clearly shows two different layouts of a webpage with a check over the one on the left vs the right where we can assume that the left one was more successful. It looks more user friendly with a clear header, nice carousel below and cards displaying sometime of image with content below.

Cons

After doing some research there seem to be quite a bit of downfalls to A/B testing despite it’s popularity. Below I’ve listed only a few with links to their sources if you want to take a deeper dive into them.

• Takes a long time to see results- especially if you’re a smaller site. It can be hard to test the variation page(s) if a small website gets little traffic. Link here.
• Could take lots of time and resources: setting up the tests, everyone agreeing on the changes then implementing them with the designers and developers. Link.
• Doesn’t solve usability problems: if you are implementing A/B testing in suspect that your website isn’t user friendly, it will be hard to measure and get the results you’re looking for. It’s recommended to use usability type testing to identify what the problem is. Link.

Multivariate Testing

What is it?

Multivariate testing uses the same mechanisms as A/B except that instead of testing a whole web page you’re testing the elements inside one webpage. The point of this is to test the elements on your webpage and determine which one is the most successful in accomplishing the objective of that page. Below is a good example of multivariate testing being used for the elements of a webpage. You can see that the image and headline are being tested oppose to redesigning the webpage itself.

Pros

It’s a great way to test out redesigning elements to see how they affect one another to either improve or lessen the webpage. This type of testing however is mainly for websites that have a ton of traffic so that testing these new elements can get meaningful results. Another example I thought was interesting was this company Veeam Software who ran a survey targeting visitors on their product page with the question “What other information would you like to see on this page?” and the answers that came back were pricing. The webpage already had a button that said “Request a quote”. They changed it to “Request Pricing” and received 161.66% increase in clicks. This subtle change is a good example of using multivariate testing and how one element change can affect the webpage.

Cons

As said previously to get strong results in multivariate testing it’s important that the webpage gets a ton of traffic, otherwise a low traffic website won’t be able to see the results. Another con is that because the experiment is factorial, if you have too many changing elements on a webpage it can quickly add up to the endless combinations and figuring out which ones work best together.

Conclusion

In conclusion both tests are very useful and can/should be used as needed separately or together. It’s not one way or another but goes on a case by case basis. They’re two very powerful optimization methods and it’s important to know their differences when creating a website.

References:

A/B and see: a beginner’s guide to A/B testing

http://retail.strands.com/products/ab-testing/

• How changing a single word increased click through rate by 161% - Blog
• Multivariate Testing vs A/B Testing
• The Pros and Cons of A/B Testing - No Pork Pies
• The Critical Difference Between A/B and Multivariate Tests