7855504698

Some people are born to code. Others have a fear of coding. You can think of Dennis Ritchie, Linus Torvalds, and Bill Gates. These people are destined to do one thing — code. But for many programmers, they were either forced to learn to code at school or motivated to study because they wanted to build the next Google or Facebook.

I got into coding by accident. In 2013, I had the idea of building an ecommerce website that would sell consumer electronics. I, therefore, “googled” for the fastest way to build a website and discovered WordPress. After purchasing a web hosting service, a domain name and a WordPress theme, I built my first website in a week.
[optin-monster-shortcode id=”kgcmfonyst584cx2hmvr”]

I quickly realized that I needed some HTML and CSS skills to make customizations to the website. I also found out how important it is to learn PHP — the programming language that powers WordPress.

I looked for the best resources on the internet and found Mark Lassoff’s courses at LearnToProgram.tv. Although I took a few programming courses at school, I really didn’t understand how they work. My teachers were also pretty bad at teaching programming.

Thankfully, Mark’s web development courses were easy to follow. I managed to absorb the fundamentals and the core stack (HTML, CSS, JavaScript, PHP, MySQL) in a few months.

However, it was not easy when i started to learn to code, primarily because of the distractions and disruptions in the web development space. Just as I was learning PHP, I stumbled upon Ruby on Rails (RoR) and found it to be cool. RoR was the hottest stack at the time and coding schools were marketing it, as a framework that commands the highest salaries.

There I was, dumping PHP over Rails. It was a mistake. RoR isn’t beginner-friendly. You needed to know other things, like Ruby (used to build RoR), the command line and version control, not to mention that you still need to learn HTML, CSS, and a little bit of JavaScript.

I got frustrated and stopped coding for a year, because I got overwhelmed.  However, my desire to learn persisted. I had already built a few websites for friends and companies in my area. I used those websites to land interviews for web developer positions at companies and startups.

My point here is: when you learn to code it can be intimidating.  However, every successful programmer goes through the same process of ups and downs. If I could go back, I would focus on one programming language and stop changing lanes so often.

In the next sections, I’ll share with you some tips to avoid this trap of getting overwhelmed. I’ll also show you the easiest way (that I know) to learn coding. If you’re struggling to learn programming, then read on.

Five Reasons Why People Are Afraid to learn to Code

Before we get into the nitty-gritty stuff, I’ll highlight five reasons why people are afraid of learning how to code. It’s important to understand these things, because for you to succeed at coding, you need to be good at facing your fears. Here are five reasons why learning to code can be intimidating.

1. People Think It’s Too Difficult

One of the top reasons why people are afraid of learning a programming language is that they think it’s too difficult to learn to code. While programming terminologies can be intimidating, they’re often easy to learn. Once you understand the fundamentals, it’s easier to catch on. For example, the command line interface is scary at first, but once you understand the core concepts, and with a little practice, you’ll eventually get it.

2. They Presume That They’ll Fail

Most beginners think that they’re bound to fail and that their efforts will amount to nothing. This is the result of believing that learning to code is too difficult. Presuming that you’ll fail, affects your mindset and you’ll soon start to have negative thoughts.

3. Beginners Think It’s Too Late to Learn

Another reason why people are reluctant to learn to program, is they think they’re too old to learn. The truth is that programming is a never-ending skill that you need to develop. You don’t stop learning, even if you’re experienced.  It is like any profession. I only managed to understand programming at 32. So, don’t be discouraged.

4. They Think They’re Not Meant to Code

I mentioned that some people are born to code, while others aren’t. While this might be true for a very few people, most programmers are made. This means that they struggled like  many others and found success by trying over and over again.

5. People Think It’s Expensive.

Lastly, some people think that when you learn to code, it is expensive. They probably heard about expensive coding boot camps. Although some U.S. boot camps are very expensive, you can always buy a good book on Amazon or purchase an online course on Udemy. In my case, I enrolled at 8334704989.

10 Ways to Overcome the Fear of Coding

Now that we’ve identified the five obstacles of learning to code, I’ll share some tips with you  to overcome these fears. These tips are actionable.  Therefore, you can start implementing these strategies to help you in your journey to learn to code.

1. Find a Good Resource

This is probably the easiest way to crush your fear of coding. You must find a good resource. It can be a book, a written tutorial on a website, or a video that teaches and helps you learn to code. Finding a good resource will guarantee that you get the right training, as well as the best practices. In looking for a resource, find the ones that are beginner-friendly. These resources don’t assume that you have prior knowledge of programming.

2. Just Start

Don’t worry too much about what programming language to start with when you learn to code. Start learning the first language that you’ll encounter,  including HTML, JavaScript or PHP. Start working on the fundamentals and build a simple website, using your newly-acquired knowledge.

3. Start Small

Don’t be afraid to start small. Facebook wasn’t built in a day, and the Windows operating system wasn’t coded in a month.  You should stop believing that you’ll have to start big with all guns blazing. Starting small is the way to overcome the fear of coding.

4. Build Things

One of the fastest ways to learn to code is to build something. It could be a simple static website or a game. The point of building something is to force yourself to apply the knowledge that you’ve acquired. When you build a website, for example, you’ll get the whole picture. You’ll also feel confident.

5. Focus on One Programming Language Before Jumping into Another

Don’t make the same mistake that I did. I jumped from one programming language to another, without really understanding the basics. I would research the hottest frameworks and start learning. This is a big no. I wasted a lot of time. Stick to one programming language, and don’t learn something new, until you’re comfortable enough building simple programs with it.

6. Realize That You Don’t Need to Know 100% of a Programming Language

Once you know at least 70% of the language, it’s time to jump to another one. The trick is to cover 70% of a programming language. The mastering of a programming language takes years to achieve. The world of web and mobile development is constantly changing, and you need to be fast enough to adapt. Jeff Bezos is master of the 70% rule. If he’s 70% sure of something, he’ll usually make a decision. In your case, explore another programming language.

7. Don’t Worry About the Big Picture. Trust the Process

This is probably the most important tip. You must trust the process. Be patient and let the concepts sink in, one by one. Focus on the journey, while keeping your eyes on the destination. Don’t rush and don’t be intimidated by how much you don’t understand when you learn to code.

 8. Break Down Code into Smaller Chunks

Learning how to break down code into smaller chunks will help you understand what each code is doing. You’ll also learn to code faster. This skill will be useful when you take on larger tasks or when you work with a team. Start by copying programming tutorials that you find online. Peruse each code, one by one.

 9. Attend a Bootcamp (Optional)

This one is optional.  However, if you have the time and money, consider going to a boot camp (onsite or remote). Boot camps are a quick way to get into programming. It’s also a great way to meet fellow programmers, potential mentors, and employers. Boot camps have a chosen curriculum or stack, which eliminates the need for you to figure out which path to take. For example, the 208-857-4762 covers everything you need to get into web development.

10. Find a Mentor

Another way to crush the fear when you learn to code, is to find a mentor. This is a programmer who has years of experience under his or her belt. If you’re lucky to meet one, try asking a few questions and see if that person is willing to help. In most cases, experienced programmers love to help those who are curious and willing to learn.

10 Steps to Succeed at Coding

Overcoming your fear of coding isn’t enough. It’s just the first step. You need to back it up with habits. I’m talking about consistent, daily practices that will guarantee your success as a programmer. In this section, I’ll cover some of the habits of successful coders, so you can integrate them into your life.

1. Go to Meetups or Attend a Dev Conference

Consider going to meetups or attending dev conferences. They’re a great way to meet other developers, programmers, and potential employers. Hang out with the right people who will push you to master coding. Going to a dev conference will help you see the bigger picture. It’ll also inspire and refresh you.

2. Build a Project with a Team

Building websites on your own is good.  However, building something with other programmers is better. Pair programming is a technique commonly used in agile software development, in which two programmers work together on a project. This is often the result of going to meetups and networking with other coders.

3.Contribute to Open Source Communities

Another way to level up your programming skills is to contribute to open source projects.  This will allow you to read the code written by other programmers. You’ll also learn how to use version control and how to publish on GitHub. You’ll be exposed to different coding styles and your code will be viewed by other coders. You’ll not only give back to the community, but you’ll also build your portfolio in the process.

4. Master the Art of “Googling”

The best coders are surprisingly good at “googling” stuff. As a programmer, Google is your best friend. You’ll find everything you need on Google. You should also add StackOverflow, Quora, and Reddit to your list. Unfortunately, many beginners think that you need to know everything, in order to succeed. The best programmers learn along the way, by using Google as a tool to learn new things.  Therefore, if you encounter something new or whenever you’re confused about a concept, “google” it.

5. Teach Others to Code

It’s a fact that you’ll learn to code more, if you teach others. This is called the protégé effect. It is a phenomenon that explains why learning by teaching is effective. Teaching others, even when you’re not yet a pro, forces you to use effective learning strategies to get your point across. It also forces you to internalize concepts and master languages. Start by creating short YouTube videos or writing tutorials on your website.

6. Answer Questions Asked by Other Beginners

Another way to cement programming concepts, is to answer questions on programming forums and communities on the web. Beginners and professionals frequently post questions on websites like StackOverflow, Quora, and Reddit. If you know something that others don’t, feel free to share. Answering questions will boost your confidence and establish your name as an expert.

7. Code Every Day

There is no excuse for this step. They even say that you need to code for 10,000 hours to become a master of a programming. It doesn’t actually matter how many hours you dedicate for coding. What matters is the habit. Professional writers write every day. Athletes train every day. As a coder, you must code every day.

8. Think Like a Computer

Before you dismiss this tip as a crazy idea, consider the benefits of being able to think like a computer. Imagine that you could clearly think in your head what your code is telling your computer. If you can think like a computer, then you would easily master programming. This means being able to read from right to left (like a computer), break down components and verbally explain what each code does.

9. Keep Learning

Becoming a master takes time. That’s why it’s important to keep learning. You need to stay sharp, especially where frameworks are now released almost every month. Even the most experienced programmers, learn something new every day. They move on to newer technologies to avoid getting stuck. This means that you must master the fundamentals, procedural programming, functional programming, object-oriented programming, data structures and algorithms.

10. Learn Soft Skills

In addition to technical skills, you need to hone your soft skills to succeed as a programmer. This means learning how to communicate well — both verbal and written — and becoming a good team player. You need to be able to market yourself as a programmer and nail interviews to get jobs. Soft skills are as important as hard skills.

Takeaways

  • Anyone can learn to code. It doesn’t matter how old or young you are.
  • The biggest hurdle to learning to code is the fear of coding itself. There are five reasons why some people are afraid of learning programming.
  • You can overcome the fear of coding by understanding what’s stopping you and adopting the 10 tips that I’ve shared with you.
  • Once you’ve overcome the fear, learning to program is much easier.
  • Take your coding career to the next level, by adopting the 10 steps to becoming a pro.

Conclusion

By now, I hope I’ve convinced you to learn how to code. This is because success really depends on your willingness to learn and to work hard.

I personally think it’s easier to learn, when you have a great mentor, like Mark Lassoff, to show you the ropes. If you’re interested, you can check out the Framework Professional Developer Program, an online boot camp that will make you job-ready in 20 weeks.

Watch and learn, as Mark teaches you front-end and back-end web development.

You’ll build projects that you can showcase on your portfolio. You’ll also learn how to pull off your first interview and get your first web development job.

(281) 813-9356

CSS Flexbox is a CSS layout system for designing web pages. It is a comparatively new addition to the front end world, only gaining widespread browser support in the last few years. This is a guide to CSS Flexbox for Beginners.

The most distinctive aspects of flex layouts are that elements are form-fitting, automatically resizing to take up available space. This attribute allows flexbox to gracefully solve common problems that developers face in an increasingly mobile-first world. As such, flexbox is an invaluable tool for any frontend developer.

In this article, we will cover:
  • The background and history of flexbox
  • Core flex CSS properties
  • Creating a responsive layout using only
    <div></div> s and flex

[optin-monster-shortcode id=”kgcmfonyst584cx2hmvr”]

History of Flexbox

Block Layout (or, the Dark Ages)

Before flexbox, frontend developers largely relied on the block layout to style documents. Other layouts had more specific purposes: inline for text, table for tables, and positioned for elements attached to the page in a specific location.There are several problems which the block layout does not solve well. First, positioning elements was hard. The generally accepted solution for “sticking” elements to certain sides of the page relied on float, a fairly inflexible CSS property. As an example, imagine a standard two-column layout. One could make the left column float left, and the right column float right. However, what if three columns are needed? Because float directions are binary, we are left with an inelegant solution like “left-left-right”.

Secondly, sizing elements was hard. Block elements are sized to fit their content. To fit the page, a two-column layout has to explicitly style its children with rules like width: 50%. If a new column is added, all columns must be changed to be width: 33%. This can be made more concise and declarative with a rule like .parent > .column { width: 33% }, but this is merely a stopgap: the 33% manual calculation is still there. Despite these issues, the block layout was largely considered an adequate method for styling documents. However, everything changed with the advent of smartphones.

The Rise of Mobile

In the 2000s, mobile devices enjoyed a massive uptick in popularity. The world saw a proliferation of various screen sizes, the likes of which developers never had to support before. This presented a problem: the same website had to display correctly on an extremely diverse set of dimensions. Layouts had to not break given drastically different dimensions or even different orientations. Because existing block layouts relied so much on explicit height and width calculations, they were often brittle under changing screen sizes, causing a large amount of developer frustration.

The block layout was lacking; as such, developers turned to alternative tools to create responsive styles. Javascript was identified as a solution, with popular libraries like jQuery and Bootstrap dynamically resizing elements in response to changes in window size. While this granted the flexibility block layouts lacked, Javascript was not perfect: it had its own set of issues. Dynamic resizing required querying the DOM and manually setting attributes, which incurred a performance penalty. In addition, because CSS is handled by the browser itself, layout interactions are optimized and can tap into the device’s GPU for higher performance. Finally, Javascript tends to be slower than native browser code. These issues led to the common complaint of choppy resizing.

Javascript Animation: Then and Now

It’s worth noting that Javascript has been catching up quickly, with many animation-optimized libraries matching or even exceeding CSS performance (Velocity.js is often touted as being virtually indistinguishable from WebGL). However, for general purpose layout-related work, it’s safe to assume that CSS will always be faster than JS.

Enter Flexbox

Flexbox was therefore introduced as a solution that was more dynamic than block layouts, yet still entirely CSS. Because flex elements grow to fit their container, flex-based layouts enjoy several attractive properties:

  • Efficient arrangement and positioning of elements
  • Even distribution and formatting of content across containers
  • Easy handling of “sticky” elements such as footers
  • Decoupling of content and layout

It’s worth noting that all of the above can be achieved with block layouts. However, in addition to providing these properties, flexbox provides them with minimal configuration. This means that flex layouts can gracefully transition between different screen sizes, with very little work needed from the developer.

Imperative vs. declarative CSS

The distinction between imperative and declarative code is common across all aspects of programming. Imperative code explicitly instructs a program how to do a task, while declarative code describes what the outcome should be, and delegates the task of “figuring out how” to the program itself. Block layouts that rely on floats and clears often require the developer to manually calculate dimensions. For example, one way to achieve a “sticky footer” with block layouts is to set the body height to be the height of the page minus the height of the footer (e.g. calc(100vh – footer height)). Thus, they are an example of an imperative way to code layouts, where the browser is explicitly instructed to assign a certain height to an element.

Because flex layouts automatically resize to fit available space, they require less configuration from the developer. For example, to achieve a sticky footer, a developer simply has to set the flex container to flex-direction: column and flex-grow: 1, and the footer element will ALWAYS be right at the bottom of the page. Declarative code tends to be more concise, readable, and portable. Imperative code can also be more fragile: because a height is manually set in the block example, if the footer height ever changes, the body height must be changed as well. This is an example of undesired coupling of content and layout: layouts should be resistant to changes in content.

What Flexbox Is Not

Before we proceed with the rest of our Flexbox for Beginners guide, several misconceptions about flexbox should be resolved. Given that flex is still relatively new, there remains some confusion about what flexbox is, exactly. This is exacerbated by the fact that several popular libraries are built on top of flexbox, with libraries such as Flexbox Grid and FlexboxLayout adding to the confusion.

Flexbox is NOT a library. It is a standard that browsers implement in their rendering engines. This means that NO installs are needed (unless you use an ancient version of Internet Explorer, in which case you need a polyfill).

Flex Syntax

As previously mentioned, flexbox provides attractive properties with very little configuration needed. Flexbox achieves all it does with only a handful of properties, making it incredibly easy to learn. Within the flexbox system, elements can be flex containers and/or flex items. An element is made a flex container by setting display: flex, and all children become flex items. (Note that a flex child can also be a flex container if its display type is also set to flex.) Without any further configuration, the main change we can observe is that flex items stretch to fill the height of their flex container, as opposed to fitting their content.

Note that this article will only cover the most basic flex properties, with which one can solve the majority of layout issues. For information on all available flex properties, see the MDN docs.

In the following examples, we will work off of the following HTML snippet:

<div style=”display: flex; height: 100px; border: 2px solid
red;”>
<div style=”border: 2px solid blue”>Hello world</div>
<div style=”border: 2px solid blue”>Goodbye cruel world</
div>
</div>

HTML Snippet

Flex container properties

Flex container properties are used to arrange children. A flex container has two axes, the main axis and the cross axis. The main axis lies on the direction which the content flows, while the cross axis is the perpendicular axis. By default, the main axis is the horizontal axis, while the cross axis is the vertical axis. The three most commonly used flex container properties are flex-direction, justify-content, and align-items. Many common layouts can be implemented using just these three properties.

Flex-Direction

flex-direction sets which axis is the main axis, and which is the cross axis. The default is row, for which the horizontal axis is the main axis, and the vertical axis is the cross axis. When setting the value to column, the vertical axis becomes the main axis, and the horizontal becomes the cross axis.

Flex row
flex-direction: row (default)

Flex column
flex-direction: column

Justify-Content

justify-content distributes items along the main axis. When using a row layout, this horizontally aligns children, and when using a column layout, this vertically aligns them. The default is flex-start. flex-center and flex-end position children at the center and end, respectively, while space-around and space-between center the children and automatically assign whitespace to fill the container. If you are experimenting with these properties in the browser, try resizing the window. Note that when using space-around or space-between, content remains evenly spaced as you adjust the window size – no configuration needed!

Flex start
justify-content: flex-start (default)

Flex center
justify-content: flex-center

Flex end
justify-content: flex-end

Flex around
justify-content: space-around

Flex between
justify-content: space-between

Align-Items

align-items positions items along the cross axis. Older developers will be well aware of the frustrations involved in vertically centering elements; flexbox allows dead simple centering with a single property. While there are several possible values, we will focus on stretch, flex-start, center, and flex-end in this article for simplicity. Note that when setting align-items to anything other than stretch, flex items no longer grow to fit the container.

Stretch
align-items: stretch (default)

Flex start
align-items: flex-start

Flex center
align-items: flex-center

Flex end
align-items: flex-end

Flex Axes

While it is easy to think of align-items as horizontal and justify-content as vertical, this can present confusion when working with both flex rows and flex columns. Try to associate align-items with the cross axis and justify-content with the main axis, and flex-direction with whether the horizontal or vertical axis is the main axis.

Flex item properties

Flex item properties are used to position the item within its container. In this article, we will cover align-self, flex-grow, and flex-shrink. There are several more, but these cover the most common use cases.

Align-Self

align-self is used to align flex items on a case-by-case basis. It has the same possible values as align-items.

Align-self
First item flex-start, second item flex-end

Flex-Grow and Flex-Shrink

flex-grow and flex-shrink control the flex factor of a flex item. Simply put, it is a number that represents how much an element should grow or shrink proportionally to its sibling items. The initial values are 0 and 1, respectively. When flex-grow is set to 1 or greater, the flex item will grow on the main axis to fit its container.

Flex factor calculates the relative size of elements via ratios. If an element has flex-grow: 3 and its sibling has flex-grow: 1, the first element will be three times the width of the second. flex-shrink works the same way. flex-grow and flex-shrink interact with each other, and can sometimes lead to unintuitive results. They are fairly complex properties, and I encourage readers to experiment with them, because there are too many combinations of values to properly outline here.
The property flex can be used as a shorthand, and accepts three values, with the first representing the grow factor and the second representing the shrink factor. The third represents a property called flex-basis that represents a default size; we will not cover it in this article. Example: flex 1 0.

flex-grow
First item flex-grow: 3, second item flex-grow: 1

flex-shrink
First item flex-shrink: 3, second item flex-shrink: 1

Building Responsive Layouts with Flex

With the properties described above, we’re now ready to tackle creating responsive layouts. We will create a lightweight replication of the layout of meetup.com, which is a fairly standard web layout.

Throwback: Jezzball!

Before diving into page layouts, let’s take a trip down memory lane. Older readers will likely be familiar with Jezzball, an arcade-style game that was released for Windows 3.2.

Jezzball

The premise of Jezzball is that the player must build horizontal or vertical “walls” to subdivide levels into smaller and smaller rectangles, in order to segregate an ever-increasing number of bouncing red-and-white balls. As the available space decreases, the balls bounce more and more frenetically, and the player must carefully continue to build walls without making contact with the balls, which kills the player.

When visualizing web layouts, I like to think of Jezzball. Its concept of subdividing a rectangle into smaller and smaller rectangles is basically how designing basic layouts with HTML and CSS works, except less frantic and without the risk of death (frontend developers may dispute this last point).

Splitting the Page

Meetup’s frontpage features several sections: there is a header, a nav bar, several body sections, and a sticky footer (not visible in the screenshot).

Meetup.com

When thinking about layouts, try to mentally split the page up into separate sections, each with their own purpose. Taking inspiration from Jezzball, let’s build some walls to subdivide the page:

Meetup.com split

Great! Just by drawing three lines, we now have something to go off of. Let’s think about our strategy first, and describe what we know:

  • The page follows a standard vertical layout. Therefore, we want the flex container to have flex-direction: column.
  • For the most part, children have their contents centered both horizontally and vertically. We can achieve this by making the flex items also flex containers (keep in mind that text nodes are considered child DOM nodes). We avoid using align-items: center on the parent because then the child will no longer stretch to fit its parent.
  • The search bar is an oddly offset rectangle that doesn’t cleanly fit in any subdivision. This will likely need position: absolute.
  • The body is split horizontally into two columns, and each column follows a vertical content flow. Thus, the body flex container will be a row, and the children themselves will also be flex containers in column layout.

With this, let’s get started with our meetup competitor, meetdown.com.

Semantic HTML

In this example, we will mostly use <div/>s and inline styles to keep things simple (and also to show how powerful flexbox is with minimal code). In an actual site, semantic HTML tags such as <header/> and <section/> should be used, and styles should be applied via class names representative of the role of the styled element.

Scaffolding

Let’s start with an empty HTML snippet and add what we know we’ll need. As a shortcut, let’s define some shortcut class names (in a real app, your classnames should be defined based on content, not based on styling). The classes will be left out in subsequent snippets to save space, but I will give each of them recognizable names. Also note the border styling on <div/> for visibility.

<!DOCTYPE html>
<html>
<head>
+ <title>Meetdown -- An Alternative Meeting Site</title>
+<style>
+ div { border: 2px solid red; }
+ .flex { display: flex; }
+ .column { flex-direction: column; }
+</style>
</head>
+<body class=”flex column”>
</body>
</html>

 

Nav Bar

The first element we run into is the nav bar. We see that there is a logo on the left, and several links on the right. Developers used to the block layout may reach for float in this case. However, recall that we saw a property earlier for this exact use case: justify-content: space-between. This will make items in the flex container stick to the left and the right sides of the container.

Note that if we make all the items sibling elements, they will be evenly spaced across the page. Instead, we want only the logo to be on the left, while all the others are on the right. If we made all elements in the nav siblings, this would require the left child to be positioned differently than all other children. When making layout decisions, think of how to reduce exceptions as much as possible. Following our Jezzball instincts, let’s build a vertical wall right in the middle to make a left and right child, then build several more walls in the right child for each individual link.

<body class=”flex column”>
+ <div class=”flex justify-space-between”>
+ <div class=”flex”>
+ <div>Meetdown</div>
+ </div>
+ <div class=”flex”>
+ <div>Create a Meetdown</div>
+ <div>Explore</div>
+ <div>Messages</div>
+ <div>Notifications</div>
+ </div>
+ </div>
</body>

 

Navigation

Not the prettiest, but it’ll do.

 

Header

The header content is centered both horizontally and vertically, and is just some simple text. We need one horizontal line to divide the header text and the description text, and several more vertical lines to divide the description text. I added some colors as well.

<body class=”flex column”>
<div class=”flex justify-space-between”>
<div class=”flex”>
+ <div style=”color: #F64060”>Meetdown</div>
</div>
<div class=”flex”>
<div>Create a Meetdown</div>
<div>Explore</div>
<div>Messages</div>
<div>Notifications</div>
</div>
</div>
+ <div class=”flex column” style=”background: #F64060; color: white;”>
+ <div class=”flex align-center justify-center”>
+ <h1>Find a Meetdown</h1>
+ </div>
+ <div class=”flex justify-center”>
+ <div>9 Meetdowns in your group</div>
+ <div>&middot</div>
+ <div>112 Meetdowns nearby</div>
+ </div>
+ </div>
</body>

 

Header

Search Bar

Note the search bar is “floating” between the header and body. We can achieve this by setting the header to position: relative; and the search bar to position: absolute; with a negative bottom. We also add some padding to the header to space things out properly. The search box container has align-self: center; applied (keep in mind the container is a flex column), as well as a smaller width. The actual search bar we’re imitating is a bit more complex, but you get the idea.

<body class=”flex column”>
<div class=”flex justify-space-between”>
<div class=”flex”>
<div style=”color: #F64060”>Meetdown</div>
</div>
<div class=”flex”>
<div>Create a Meetdown</div>
<div>Explore</div>
<div>Messages</div>
<div>Notifications</div>
</div>
</div>
+ <div class=”flex column” style=”background: #F64060; color: white; position: relative; padding-bottom: 20px; margin-bottom: 20px”>
<div class=”flex align-center justify-center”>
<h1>Find a Meetdown</h1>
</div>
<div class=”flex justify-center”>
<div>9 Meetdowns in your group</div>
<div>&middot</div>
<div>112 Meetdowns nearby</div>
</div>
+ <div class=”flex align-self-center” style=”background: black; position: absolute; bottom: -20px; padding: 5px; width: 60%”>
+ <input placeholder=”All meetups” />
+ <div>within 5 miles of New Haven, CT</div>
+ </div>
</div>
</body>

 

Search Bar

Body

Our body is composed of two columns, each their own flex containers. Similar to the search bar, the body container has align-self: center; and a smaller width. Thus, we first use a vertical line to divide the two columns, then split each with horizontal lines. The left column is wider than the right column; we use flex-grow to assign a flex factor, making the left column twice as wide as the right. A brief examination of the children shows that they are just more of the same: the left column’s children are flex rows with time on the left and a flex column on the right, while the right column’s children are just some widgets. To save time, we’ll use placeholders.

<body class=”flex column”>
<div class=”flex justify-space-between”>
<div class=”flex”>
<div style=”color: #F64060”>Meetdown</div>
</div>
<div class=”flex”>
<div>Create a Meetdown</div>
<div>Explore</div>
<div>Messages</div>
<div>Notifications</div>
</div>
</div>
<div class=”flex column” style=”background: #F64060; color: white; position: relative; padding-bottom: 20px; margin-bottom: 20px”>
<div class=”flex align-center justify-center”>
<h1>Find a Meetdown</h1>
</div>
<div class=”flex justify-center”>
<div>9 Meetdowns in your group</div>
<div>&middot</div>
<div>112 Meetdowns nearby</div>
</div>
<div class=”flex align-self-center” style=”background: black; position: absolute; bottom: -20px; padding: 5px; width: 60%”>
<input placeholder=”All meetups” />
<div>within 5 miles of New Haven, CT</div>
</div>
</div>
+ <div class=”flex align-self-center” style=”width: 60%”>
+ <div class=”flex column flex-grow-2”>
+ <div>Some child</div>
+ <div>Some child</div>
+ <div>Some child</div>
+ </div>
+ <div class=”flex column flex-grow-1”>
+ <div>Some child</div>
+ <div>Some child</div>
+ <div>Some child</div>
+ </div>
+ </div>
</body>

 

Body

Footer

Almost done! All that’s left now is the sticky footer. Sticky footers have long been a thorn in the side of frontend developers. When content does not fill the page vertically, the footer should be attached to the bottom of the page. However, if there is more content than does fit, the page should scroll, with the footer still being at the bottom. Before flexbox, developers did all sorts of tricks to achieve a sticky footer. With flex, however, all we need to do is separate the content into one <div/> and apply flex-grow to it. Remember that when flex-grow is 1 or greater, the flex item it is assigned to will expand to fit its container along the main axis.

First, we apply height: 100% to <html/> and <body/> to make them take the full height of the window. We then nest everything we’ve done so far in a new <div/> that is a flex column with flex-grow: 1. Finally, we make our footer the same way we’ve made our other elements so far.

+<html class=”height-100”>
<head>
<title>Meetdown -- An Alternative Meeting Site</title>
</head>
<style>
div { border: 2px solid red; }
.align-center { justify-content: center }
.align-self-center { align-self: center; }
.column { flex-direction: column; }
.flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.height-100 { height: 100%; }
.justify-center { justify-content: center }
.justify-space-between { justify-content: space-between }
</style>
+<body class=”flex column height-100”>
+ <div class=”flex column flex-grow-1”>
<div class=”flex justify-space-between”>
<div class=”flex”>
<div style=”color: #F64060”>Meetdown</div>
</div>
<div class=”flex”>
<div>Create a Meetdown</div>
<div>Explore</div>
<div>Messages</div>
<div>Notifications</div>
</div>
</div>
<div class=”flex column” style=”background: #F64060; color: white; position: relative; padding-bottom: 20px; margin-bottom: 20px”>
<div class=”flex align-center justify-center”>
<h1>Find a Meetdown</h1>
</div>
<div class=”flex justify-center”>
<div>9 Meetdowns in your group</div>
<div>&middot</div>
<div>112 Meetdowns nearby</div>
</div>
<div class=”flex align-self-center” style=”background: black; position: absolute; bottom: -20px; padding: 5px; width: 60%”>
<input placeholder=”All meetups” />
<div>within 5 miles of New Haven, CT</div>
</div>
</div>
<div class=”flex align-self-center” style=”width: 60%”>
<div class=”flex column flex-grow-2”>
<div>Some child</div>
<div>Some child</div>
<div>Some child</div>
</div>
<div class=”flex column flex-grow-1”>
<div>Some child</div>
<div>Some child</div>
<div>Some child</div>
</div>
</div>
+ </div>
+ <div class=”flex column” style=”background: black; color: white”>
+ <div>Create a Meetdown</div>
+ <div>Some Links</div>
+ <div>Some More Links</div>
+ </div>
</body>
</html>

 

And we’re done! Here is the final layout, with the <div/> borders removed. Definitely a worthwhile competitor to meetup.com. When’s the IPO?

Footer

 

<!DOCTYPE html>
<html class=”height-100”>
<head>
<title>Meetdown -- An Alternative Meeting Site</title>
</head>
<style>
.align-center { justify-content: center }
.align-self-center { align-self: center; }
.column { flex-direction: column; }
.flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.height-100 { height: 100%; }
.justify-center { justify-content: center }
.justify-space-between { justify-content: space-between }
</style>
<body class=”flex column height-100”>
<div class=”flex column flex-grow-1”>
<div class=”flex justify-space-between”>
<div class=”flex”>
<div style=”color: #F64060”>Meetdown</div>
</div>
<div class=”flex”>
<div>Create a Meetdown</div>
<div>Explore</div>
<div>Messages</div>
<div>Notifications</div>
</div>
</div>
<div class=”flex column” style=”background: #F64060; color:
white; position: relative; padding-bottom: 20px; margin-bottom:
20px”>
<div class=”flex align-center justify-center”>
<h1>Find a Meetdown</h1>
</div>
<div class=”flex justify-center”>
<div>9 Meetdowns in your group</div>
<div>&middot</div>
<div>112 Meetdowns nearby</div>
</div>
<div class=”flex align-self-center” style=”background:
black; position: absolute; bottom: -20px; padding: 5px; width:
60%”>
<input placeholder=”All meetups” />
<div>within 5 miles of New Haven, CT</div>
</div>
</div>
<div class=”flex align-self-center” style=”width: 60%”>
<div class=”flex column flex-grow-2”>
<div>Some child</div>
<div>Some child</div>
<div>Some child</div>
</div>
<div class=”flex column flex-grow-1”>
<div>Some child</div>
<div>Some child</div>
<div>Some child</div>
</div>
</div>
</div>
<div class=”flex column” style=”background: black; color:
white”>
<div>Create a Meetdown</div>
<div>Some Links</div>
<div>Some More Links</div>
</div>
</body>
</html>

Final Code

 

Future of CSS Layouts

As we can see, flexbox is an immensely useful tool for web layouts. However, it may surprise you to know that flex was never intended to be the be-all end-all for layouts! Indeed, browser developers are currently hard at work implementing yet another layout system: the grid layout!

One issue with flexbox is that flex containers are either rows or columns. When attempting to style a two by two square of elements, alignment becomes difficult, since either the main or cross axes will need to be manually lined up with the other. In other words, flex works well for aligning items in a single dimension: horizontal or vertical. On the other hand, grid layout is designed to align items in two dimensions. This allows for a more rigid system of alignment more suitable for large-scale page layouts. However, current adoption is hampered by the relatively recency of widespread browser support: major browser vendors have only begun to officially support Grid in the last year. Today, developers commonly use browser polyfills to patch grid functionality into their websites. However, this has its own host of issues, such as increased bundle size.

In the future, it is likely that frontend developers will design layouts primarily using grid, with Flexbox being used mainly for styling within layout sections, such as form fields.

And as for the block layout? This isn’t Super Mario; let’s leave the blocks behind.

Best Javascript Libraries

Introduction

JavaScript libraries allow us to add new features to our applications and prevent us from having to duplicate code that other people have already created. Some of the best JavaScript libraries have been around for many years. However, I’m going to avoid covering those. Instead, we’ll be covering some of the JavaScript libraries that are new and trending. These libraries include React, FusionCharts, math.js, Lodash, and CreateJS. This is by no means a complete list of all the JavaScript libraries that are worth learning. Entire books could be written on each one of these JavaScript libraries. This article will only scratch the surface of each of them. Two of these libraries (Lodash and CreateJS) were also covered in an article that I wrote last year, titled Top JavaScript Libraries for 2017. I originally intended not to recycle any materials on any specific libraries, but I like Lodash and CreateJS so much that I decided to also include them in this year’s edition. The other three libraries in the 2017 version (Chart.js, LeafletJS, and Three.js) are also worth learning, since one year later they are still awesome. The 2017 version of this article is located here:

/blog.learntoprogram.tv/top-JavaScript-libraries-for-2017/

[optin-monster-shortcode id=”kgcmfonyst584cx2hmvr”]

Differences between JavaScript libraries and JavaScript frameworks

Before I begin covering these various libraries, it is important to understand the difference between a library and a framework. It’s common for people to confuse these two concepts (some people even believe that libraries and frameworks are the same thing). The explanation of the difference is often confusing. It’s also possible for something to be just a library, just a framework, or both. This makes the issue even more confusing. A JavaScript library consists of source code which contains functions and objects. By including the JavaScript library in your application, you can use these functions and/ or objects without having to create them from scratch on your own. It’s a way for us to avoid “re-inventing the wheel” by allowing us to take advantage of useful code that has already been written by other programmers.

On the other hand, a JavaScript framework will usually affect the general structure of your application. Frameworks usually always contain one or more libraries. One main difference between them is that you may use a library in any way that suits you, while a framework usually specifies some guidelines regarding how it should be used. A framework will often have rules that your code (and its general structure) must abide by to “work within its framework”. Although I won’t be explaining “Inversion of Control” (IoC), it’s a concept that is crucial to completely understanding the difference. It’s beyond the scope of this article. Further research upon this subject is required to thoroughly understand the difference between frameworks and libraries. To make a long story short, when you use a library, your code makes calls to various functions or objects within the library. However, when using a framework, the framework makes calls to your code (this is often referred to as “don’t call us, we’ll call you”).

The idea of a framework is a bit more difficult to grasp than the idea of a library. Therefore, if the idea of a framework doesn’t make sense to you, don’t worry about it too much for now. I simply want to make it clear that there is a difference, even though the terms are often used interchangeably. I’m aware that this brief discussion may have opened up a can of worms within your mind, but this type of mental discomfort often plants the seeds of profound realizations. With that being said, let’s move on and begin playing with JavaScript libraries.

Best Javascript Libraries: React

Download /reactjs.org

React is somewhere in between the definition of a library and a framework. I won’t dwell on this matter though, since a quick Google search can provide further information about the issue and allow you to form your own perspective on this. I prefer not to get caught up in this sort of controversy, since I tend to value the actual substance of something more than the label people put on it.

React was initially released in 2013. It has grown into a very common buzzword within the world of front-end development. React is most often used for improving the efficiency, scalability, and/or simplicity of web applications. Although React is often used for large-scale applications since it is well known for scalability, it’s easy to get started with React and to begin learning it. Furthermore, there are plenty of free tutorials and other resources on the web to provide a strong foundation. I won’t cover installation in this article. You may prefer to use a different method of installation than what I used on my machine. The React website (reactjs.org) should provide everything that you need for the installation process.

Bruce Lee once said that “the best way to learn to swim is to jump in the water” (just don’t drown).
This concept also applies to programming. We’re going to use “Create React App” to create our
application, which requires that you have Node (version 6 or higher) and NPM (Node Package
Manager) at the time this article was written. If you aren’t sure whether you have Node installed (or
the version) then enter the following command at your command prompt:

node -v

If you have node installed, it will tell you the version that you have installed. If you don’t have Node installed, then you’ll most likely receive some sort of error message. Fixing this error message is easy, since installing Node is easy. If you’re a developer, it doesn’t hurt to have Node installed on your machine, even if you have no interest in using React. Therefore, I suggest installing it.

First, let’s install Create React App with the following command:

npm install -g create-react-app

Next, let’s create an app named ltp-react-tutorial:

create-react-app ltp-react-tutorial

Once create-react-app finishes getting your application ready to play with, let’s change into the directory of your application:

cd ltp-react-tutorial

Finally, let’s start the development server for our application:

npm start

It’s possible to run multiple servers for React applications, although each one needs to have a different port (port 3000 is usually the default choice). Let’s take a look at our web application in a browser at /localhost:3000/, given that you used port 3000 (if you used a different port, just change the 3000 to whichever port you chose for the application). If you read this article more than a few months after it was written, then your results may vary. However, the initial application created by create-react-app appears as in Figure 1-1.

Figure 1-1: Initial Application

Before we take a look at App.js, let’s take a look at index.js from within the src directory of your
React application.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import registerServiceWorker from ‘./
registerServiceWorker’;
ReactDOM.render(<App />, document.getElementById(‘root’));
registerServiceWorker();

Code Listing 1-1: index.js

Don’t worry too much about everything that is being imported, since this article is only meant to give you a brief introduction to React. Let’s focus on the first line of code after the import statements. First, we call the ReactDOM render function, which displays our App component (the source of which is found in App.js) into an HTML element with the id “root”. If you open up the file public/ index.html, you will notice that there is a div element with the id of root. This is where the App component is actually displayed. If you removed that div, then the application would no longer function properly. That doesn’t mean you couldn’t use a div by a different id, I just want to make it a bit more clear what goes on under the hood. The next line of code registers a service worker for serving assets from the local cache. I’m not going to delve deeply into this, but you may view the code in src/registerServiceWorker.js, if you want to understand how it works. I should also mention here that React components are important to understand, since they allow us to break user interfaces down into pieces that are easy to work with. At this current point, we only have one component defined in our code (App), but that’s because it’s simply a Hello World type of application. Let’s take a look at the code for our App component, as shown in Code
Listing 1-2.

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
class App extends Component {
render() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo”
/>
<h1 className=”App-title”>Welcome to React</h1>
</header>
<p className=”App-intro”>
To get started, edit <code>src/App.js</code> and
save to reload.
</p>
</div>
);
}
}
export default App;

Code Listing 1-2: The App Component – App.js

Just like with the previous example, don’t concern yourself with the imports. The definition for the App component all exists within the curly braces after class App extends Component. The word “extends Component” means that it’s a type of component (and inherits all of the properties of a React component in OOP fashion). Let’s change the line “To get started, edit <code>src/App.js</ code> and save to reload.” simply to “Hello World!” for a more traditional first program. The app should refresh automatically without you manually reloading it, and you should see the message at the bottom changed to “Hello World!” React is great for all sorts of applications that you may develop. There is much to learn on how to properly wield it. Using React effectively, usually also requires knowledge of design principles, which is outside of the scope of this article. There are also other JavaScript libraries that we need to cover. Now that you’ve gotten your feet wet, you should feel comfortable delving deeper into the sea of React. The reactjs.org website has a great tutorial on making a Tic-Tac-Toe game. There are also plenty of other great resources that are freely available on the subject. Let’s move on and
play with FusionCharts.

Best Javascript Libraries: FusionCharts

Download iminohydrin

In the 2017 version of this article, I covered a JavaScript charting library named Chart.js. That library is still great for charting purposes, although I wanted to cover a different charting library this time. FusionCharts only allows the “trial version” for free. However, the term “trial version” is misleading, since it still comes with full features. FusionCharts wants you to pay for it if you’re using it for commercial purposes, but allows everyone to use it for free. If it’s free, it’s for me.

In addition to creating standard charts (bar graphs, pie charts, etc.), FusionCharts is also great for creating gauge charts and map charts. In this article, we’ll learn how to create a bar graph, pie chart, and a map chart with FusionCharts. Let’s jump right in and get started by installing FusionCharts. Visit fusioncharts.com in a web browser and click “Download free trial”. You may also install FusionCharts via npm or Bower. However, in this case I simply downloaded and extracted the zip archive. The files that you will need to import into your web applications for FusionCharts to work exist within the js directory.

First, we’re going to create a bar graph showing the performance of different sales people within a sales company. The motives behind this chart are mysterious and unknown. However, one could imagine that it may be for determining who should be eligible for a promotion and who should be eligible for replacement. It could also be used to determine the effectiveness of major changes in work flow or new marketing strategies. The possibilities may be greater than what you may initially expect. Within the directory where you have your installation of FusionCharts, create a new HTML file named bargraph.html and populate it with the code shown in Code Listing 2-1. After you get it working and see the result shown in Figure 2-1, then we will dissect the code to understand how it works.

<html>
<head>
<title>FusionChart Bar Graph - Sales By Employee</title>
<script type=”text/JavaScript” src=”js/fusioncharts.js”></script>
<script type=”text/JavaScript” src=”js/themes/fusioncharts.theme.fint.js”></
script>
<script type=”text/JavaScript”>
FusionCharts.ready(function(){
var salesChart = new FusionCharts({
“type”: “column3d”,
“renderAt”: “barGraphContainer”,
“width”: “600”,
“height”: “400”,
“dataFormat”: “json”,
“dataSource”: {
“chart”: {
“caption”: “Another Day Another Dollar, Inc.”,
“subCaption”: “Total Sales in USD by Employee”,
“xAxisName”: “Year 2017”,
“yAxisName”: “Sales”,
“theme”: “fint”
},
“data”: [
{
“label”: “Charlie”,
“value”: “765382”
},
{
“label”: “Layla”,
“value”: “445044”
},
{
“label”: “Dave”,
“value”: “111450”
},
{
“label”: “Tami”,
“value”: “942333”
},
{
“label”: “Chris”,
“value”: “0”
}
]
}
});
salesChart.render();
})
</script>
</head>
<body>
<div id=”barGraphContainer”>If you see this message, your bar graph didn’t
load properly.</div>
</body>
</html>

Code Listing 2-1: bargraph.html

Figure 2-1: FusionCharts Bar Graph

If you hover your mouse over any of the bars, you will also see a little blurb pop-up with the name of the employee and their annual sales. As you may have noticed, Chris didn’t produce a single dollar in sales this year. This was because he was too busy writing this article on JavaScript libraries.

I won’t be covering the basic concepts of HTML, JavaScript, or JSON in this article. Therefore, if my explanation of the code confuses you, you might benefit from learning those concepts. HTML, JavaScript, and JSON should be in the repertoire of most developers, so I suggest acquiring these skills if you don’t have them already. I should also note that although this example uses a JSON structure, you may also use XML instead.

The first two JavaScript elements reference the FusionChart core library and FusionChart fint theme. There are four themes available from the initial installation at this time (which are stored in the directory js/themes): carbon, fint, ocean, and zune. You can try changing the themes with various charts to see how it effects the output – preferences may vary. After the two JavaScript references, we encounter the JavaScript that does the heavy lifting. Before we explore the rest of the JavaScript, I want to note that the only portion of the HTML code that you should notice is the div (with the id barGraphContainer) which is used to render the bar graph. When the graph is rendered, the default text (If you see this message, your bar graph didn’t load properly) is replaced with the graph. Therefore, if you see the text instead of the graph, consider it to be an error message.

The first thing that we see in the JavaScript code is the FusionCharts ready function. In this particular program, pretty much everything occurs within the ready function, although this probably wouldn’t be the case for real world apps. The ready function is executed once the DOMContentLoaded browser event has been triggered, which in plain English means that all of the HTML content has been loaded. This is an advantage, since it could be a shame if our JavaScript was executed before the div element (barGraphContainer) used to render the chart was ready for it.

Let’s now take a look at what happens once the code passed to our ready function is executed. It really consists of only two main things – creating a FusionChart object (named salesChart, although you can choose a different name if you wish) in which we store the JSON structure containing the data for the chart, and then render that FusionChart object.

Although I won’t explain the general principles of JSON, I will at least define what each part of our
JSON structure means:

1. type – The type of chart that we’re rendering, which in this case is column3d. There are other types you could use instead. If you want, you can change the type to column2d to see a two-dimensional version of the bar graph.

2. renderAt – This specifies the HTML div in which the chart should be rendered at.

3. width –The width of the chart in pixels.

4. height –The height of the chart in pixels.

5. dataFormat –The data format (both XML and JSON are valid data formats) of
the chart.

6. dataSource –Data source actually consists of two children JSON objects: chart and data. The chart JSON specifies the general background information of the chart, while the data JSON represents the specific information to populate the chart with.

6a. chart –This consists of caption, subCaption, xAxisName, yAxisname, and theme. It should be fairly self-explanatory about how these work, if you take a close look at the graph. You can even manipulate the values to see how it effects the output.

6b. data –The data used to create each bar in the graph. It’s an array of labels and values; each label represents the name of the employee, while each value represents their annual sales.

The only other thing that we do, is call the render function on our FusionChart object (salesChart). This renders the chart into the HTML div with the id barGraphContainer, since that was the div specified for rendering in our JSON.

FusionCharts may appear intimidating at first, but once you have created only a few charts, you’ll be amazed at how easy it is to use. Let’s take a look at two other examples of FusionCharts. However, I won’t explain the code in depth, since it should be easy to understand now that I’ve explained how the bar chart works in depth. Let’s take a look at a pie chart which shows the owners of the United States National Debt. The code is shown in Code Listing 2-2, and the output is shown in Figure 2-2.

 

<html>
<head>
<title>FusionChart Pie Chart - United States National Debt</title>
<script type=”text/JavaScript” src=”/static.fusioncharts.com/code/
latest/fusioncharts.js”></script>
<script type=”text/JavaScript” src=”/static.fusioncharts.com/code/
latest/themes/fusioncharts.theme.fint.js?cacheBust=56”></script>
<script type=”text/JavaScript”>
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: ‘pie2d’,
renderAt: ‘pieChartContainer’,
width: ‘800’,
height: ‘600’,
dataFormat: ‘json’,
dataSource: {
“chart”: {
“caption”: “United States National Debt Owners”,
“subCaption”: “February 2016 (US Treasury Data)”,
“numberPrefix”: “$”,
“showPercentInTooltip”: “0”,
“decimals”: “1”,
“showPercentValues”: “1”,
“useDataPlotColorForLabels”: “1”,
/Theme
“theme”: “fint”
},
“data”: [{
“label”: “United States”,
“value”: “12900000000”
}, {
“label”: “China”,
“value”: “1300000000”
}, {
“label”: “Japan”,
“value”: “1100000000”
}, {
“label”: “Other Countries”,
“value”: “3800000000”
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id=”pieChartContainer”></div>
</body>
</html>

Code Listing 2-2: piechart.html

Figure 2-2: FusionCharts Pie Chart

I configured this pie chart to show the percentage of the debt next to each country name. The dollar amount of the debt for a particular country is shown when you hover over the portion of the pie for that country. Finally, we will create at a map chart that displays the number of illicit drug overdose deaths by state in the United States. You can move your cursor over a particular state to see the number of illicit drug overdose deaths in 2014.

<html>
<head>
<title>FusionChart Map - U.S. Drug Overdose Deaths by State</title>
<script type=”text/JavaScript” src=”js/fusioncharts.js”></script>
<script type=”text/JavaScript” src=”js/themes/fusioncharts.theme.fint.js”></
script>
</head>
<body>
<div id=”mapContainer”></div>
<script type=”text/JavaScript”>
FusionCharts.ready(function () {
var salesByState = new FusionCharts({
“type”: “maps/usa”,
“renderAt”: “mapContainer”,
“width”: “800”,
“height”: “600”,
“dataFormat”: “json”,
“dataSource”: {
“chart”: {
“caption”: “Drug Overdose Deaths by State”,
“subcaption”: “Year 2014”,
“entityFillHoverColor”: “#cccccc”,
“showLabels”: “1”,
“theme”: “fint”
},
“colorrange”: {
“minvalue”: “0”,
“startlabel”: “Low”,
“endlabel”: “High”,
“code”: “#e44a00”,
“gradient”: “1”,
“color”: [
{
“maxvalue”: “923”,
“displayvalue”: “Average”,
“code”: “#f8bd19”
},
{
“maxvalue”: “5000”,
“code”: “#6baa01”
}
]
},
“data”: [
{
“id”: “HI”,
“value”: “157”
},
{
“id”: “DC”,
“value”: “96”
},
{
“id”: “MD”,
“value”: “1070”
},
{
“id”: “DE”,
“value”: “189”
},
{
“id”: “RI”,
“value”: “247”
},
{
“id”: “WA”,
“value”: “979”
},
{
“id”: “OR”,
“value”: “522”
},
{
“id”: “CA”,
“value”: “4521”
},
{
“id”: “AK”,
“value”: “124”
},
{
“id”: “ID”,
“value”: “212”
},
{
“id”: “NV”,
“value”: “545”
},
{
“id”: “AZ”,
“value”: “1211”
},
{
“id”: “MT”,
“value”: “125”
},
{
“id”: “WY”,
“value”: “109”
},
{
“id”: “UT”,
“value”: “603”
},
{
“id”: “CO”,
“value”: “899”
},
{
“id”: “NM”,
“value”: “547”
},
{
“id”: “ND”,
“value”: “1070”
},
{
“id”: “SD”,
“value”: “63”
},
{
“id”: “NE”,
“value”: “125”
},
{
“id”: “KS”,
“value”: “332”
},
{
“id”: “OK”,
“value”: “777”
},
{
“id”: “TX”,
“value”: “2601”
},
{
“id”: “MN”,
“value”: “517”
},
{
“id”: “IA”,
“value”: “264”
},
{
“id”: “MO”,
“value”: “1067”
},
{
“id”: “AR”,
“value”: “356”
},
{
“id”: “LA”,
“value”: “777”
},
{
“id”: “WI”,
“value”: “853”
},
{
“id”: “IL”,
“value”: “1705”
},
{
“id”: “KY”,
“value”: “1077”
},
{
“id”: “TN”,
“value”: “1269”
},
{
“id”: “MS”,
“value”: “336”
},
{
“id”: “AL”,
“value”: “723”
},
{
“id”: “GA”,
“value”: “1206”
},
{
“id”: “MI”,
“value”: “1762”
},
{
“id”: “IN”,
“value”: “1172”
},
{
“id”: “OH”,
“value”: “2744”
},
{
“id”: “PA”,
“value”: “2732”
},
{
“id”: “NY”,
“value”: “2300”
},
{
“id”: “VT”,
“value”: “83”
},
{
“id”: “NH”,
“value”: “334”
},
{
“id”: “ME”,
“value”: “216”
},
{
“id”: “MA”,
“value”: “1289”
},
{
“id”: “CT”,
“value”: “623”
},
{
“id”: “NJ”,
“value”: “1253”
},
{
“id”: “WV”,
“value”: “627”
},
{
“id”: “VA”,
“value”: “980”
},
{
“id”: “NC”,
“value”: “1358”
},
{
“id”: “SC”,
“value”: “701”
},
{
“id”: “FL”,
“value”: “2634”
}
]
}
});
salesByState.render();
});
</script>
</body>
</html>

Code Listing 2-3: map.html

 

Figure 2-3: FusionCharts Map

Best Javascript Libraries: Math.jsv

Download /mathjs.org

Now, let’s have some fun with math.js, which is a JavaScript library for performing mathematics. Since JavaScript has some built-in support for math, we will explore some of the advanced features that math.js has to offer. Many applications don’t involve advanced mathematics, but the applications that do greatly benefit are from libraries such as these. In our examples, we will be downloading the math.js file and placing it in the same directory as the code for our examples. However, if you install math.js via npm (with the -g option, which means global installation) you may also use it on the command line. We won’t be covering that in this article, but it’s worth knowing. Head on over to mathjs.org, which is the math.js website. It’s quite possible for the layout of the website to change, but it should be relatively easy to navigate towards the download/installation page. Once you’ve created a directory with the math.js library in it, create another HTML file within that directory and populate it with the code in Code Listing 3-1. The output will exist within the web console, as shown in Figure 3-1.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/JavaScript” src=”math.js”></script>
</head>
<body>
<script type=”text/JavaScript”>
/ Rounding
console.log(“92.322 rounded to the nearest integer: “ + math.round(92.322));
/ 92
/ Square root
console.log(“Square root of 16: “ + math.sqrt(16)); / 4
/ Derivatives
console.log(“Derivative of x*4 + x: “ + math.derivative(‘x^4 + x’, ‘x’)); /
4 * x ^ 3 + 1
/ Create a two-dimensional array and then square it
var array2D = [[3, 7], [0, -5]];
var array2DSquared = math.square(array2D);
console.log(“A two-dimensional array: “ + math.format(array2D)); / [[3, 7],
[0, -5]]
console.log(“Square of the two-dimensional array: “ + math.
format(array2DSquared)); / [[9, 49], [0, 25]]
/ Create a matrix and then square it
var matrix = math.matrix([[12, 1], [-7, 2]]);
var matrixSquared = math.square(matrix);
console.log(“A matrix: “ + math.format(matrix)); / [[12, 1], [-7, 2]]
console.log(“Square of the matrix: “ + math.format(matrixSquared)); /
[[144, 1], [49, 4]]
/ Add and multiply two-dimensional arrays
console.log(“Adding two-dimensional arrays: “ + math.format(math.add(array2D,
array2DSquared))); / [[12, 56], [0, 20]]
console.log(“Multiplying two-dimensional arrays: “ + math.format(math.
multiply(array2D, array2DSquared))); / [[27, 322], [0, -125]]
/ Add and multiply matrices
console.log(“Add two matrices: “ + math.format(math.add(matrix,
matrixSquared))); / [[156, 2], [42, 6]]
console.log(“Multiply two matrices: “ + math.format(math.multiply(matrix,
matrixSquared))); / [[1777, 16], [-910, 1]]
/ Add and multiply a two-dimensional array and a matrix
console.log(“Add a two-dimensional array to a matrix: “ + math.format(math.
add(array2D, matrix))); / [[15, 8], [-7, -3]]
console.log(“Multiply a two-dimensional array by a matrix: “ + math.
format(math.multiply(array2D, matrix))); / [[-13, 17], [35, -10]]
/ Calculate the size of a two-dimensional array
console.log(“Size of array2D: “ + math.format(math.size(array2D))); / [2,
2]
/ Calculate the size of a matrix
console.log(“Size of matrix: “ + math.format(math.size(matrix))); / [2, 2]
/ Sin, Cosine, and Tangent
console.log(“Sin of 120 degrees: “ + math.eval(‘sin(120 deg)’)); /
0.8660254037844387
console.log(“Sin of 120 radians: “ + math.eval(‘sin(120 rad)’)); /
0.5806111842123143
console.log(“Cosine of 120 degrees: “ + math.eval(‘cos(120 deg)’)); /
-0.4999999999999998
console.log(“Cosine of 120 radians: “ + math.eval(‘cos(120 rad)’)); /
0.8141809705265618
console.log(“Tangent of 120 degrees: “ + math.eval(‘tan(120 deg)’)); /
-1.7320508075688783
console.log(“Tangent of 120 radians: “ + math.eval(‘tan(120 rad)’)); /
0.7131230097859091
/ Simplification
console.log(“Simplify 5x + 2x: “ + math.simplify(‘5x + 2x’).toString()); /
7 * x
console.log(“Simplify x^3 + 7 + x^3 * 4 - 9: “ + math.simplify(‘x^3 + 7 + x^3
* 4 - 9’).toString()); / 5 * x ^ 3 - 2
</script>
</body>
</html>

Code Listing 3-1: mathjs.html

Figure 3-1: Console Output

When you run this code in a browser, you will simply see a blank white page. Don’t freak out – this is all part of the game plan. All of our output is in the console for this example. Therefore, go ahead and enter the web console. The procedure for entering the console varies slightly depending on the browser. However, most modern browsers have user friendly developer tools. If you’re confused, a quick Google search should be able to come to the rescue.

Most of the workings of the math.js library should be relatively straightforward just by browsing through the source code. However, there are a few things that I should note. First, make sure to use “math” and not “Math” if you’re trying to use math.js instead of the native JavaScript Math object. Some numbers also might not output properly, without using math.format (such as arrays and matrices). However, in many cases you can get by fine without it. Regardless, you should always check the output of your calculations whenever you begin working with a new mathematics function within the library. Everything should work as expected much of the time, but it’s always best to make sure you’re using the function properly before applying it to some real-world problem.

There are much more advanced things that you can do with math.js, but even this basic example covered things such as simplification, derivatives, and matrix math. Keep in mind that you don’t have to use this library all by itself. For example, combining the power of math.js with FusionCharts could help you perform valuable mathematical computations on your data prior to using it to generate a chart. This could allow you to utilize information that may have been unavailable (or at least rather time consuming to figure out) by simply using FusionCharts directly with data from a database. You could even also throw React into the mix in order to improve the efficiency of the application and to help with building the user interface. The next library that we’re going to cover (Lodash) is helpful in many different applications. It also works well with other libraries. To make a long story short, each of these libraries may seem somewhat limited in application by themselves, but no library needs to feel lonely. To be completely honest, it’s actually best for libraries to be oriented towards specific types of problems. A jack-of-all-trades library would be extremely bloated, take longer to learn, and most users would only use a small fraction of its features.

Best Javascript Libraries: Lodash

Download (785) 208-0684

Lodash is a JavaScript library of utility functions that helps us to avoid writing our own custom functions for common programming tasks. Lodash is actually based upon another JavaScript library named underscore.js (which was developed in 2009). The original developers of underscore .js have instead shifted their energy into further developing Lodash. I personally believe that Lodash actually gets its name from underscore.js, since an underscore ( _ ) looks like a dash (-). However, it is lower than a regular dash – hence a “low dash”. This is merely speculation and I could be wrong. When calling Lodash functions, we reference the Lodash library with the underscore character (similar to how we reference the Leaflet library with the L character).

A utility function allows us to put code that often gets re-used into a single function. This prevents us from duplicating code, avoids sloppiness, and encourages organization. The utility functions within Lodash apply to arrays, collections, loops, numbers, strings, and objects. In other words, Lodash is practical for an extremely wide range of different programming situations. To get started, visit the Lodash website (lodash.com) and download the library. In the 2017 version of the article, we used a CDN (Content Delivery Network). However, in this edition, we’ll DOWNLOAD: /lodash.com download the library instead. The src attribute of our script tag will point to the lodash.js file that we downloaded from the Lodash website. Create a file named hello-lodash.html, and then copy/paste the code from Code Listing 5-1 into it. It contains all of the code that we’ll be using to display a few utility functions within Lodash that work
with arrays.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Hello Lodash!</title>
<script src=”lodash.js”></script>
</head>
<body>
<div id=”output”></div>
<script>
var output = document.getElementById(“output”);
var ages = [22, 12, 16, 18, 19, 10, 81, 32, 17];
output.innerHTML = “Original Ages: “;
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});
output.innerHTML += “<br /><br />Reversed Ages: “;
ages = _.reverse(ages);
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});
output.innerHTML += “<br /><br />Sorted Ages: “;
ages = _.sortBy(ages);
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});
</script>
</body>
</html>

Code Listing 5-1: hello-lodash.html

 

When you view this page in a browser, you should receive the same output displayed in Figure 5-1.

Figure 5-1: hello-lodash.html

This program is really quite simple, but it shows off how Lodash makes it so easy to perform common programming tasks. First, we create an array and use the Lodash forEach utility function to iterate through each of the elements (displaying each element in our HTML div that we named output):

var ages = [22, 12, 16, 18, 19, 10, 81, 32, 17];
output.innerHTML = “Original Ages: “;
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});

 

A “for-each” loop is native to many languages, but it isn’t a native part of the JavaScript language. In a nutshell, Lodash makes JavaScript much more powerful and awesome. Next, we reverse the order of the values within the array by using the Lodash reverse function. We then display the values yet again by iterating through the array with the forEach utility function:

output.innerHTML += “<br /><br />Reversed Ages: “;
ages = _.reverse(ages);
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});

 

It wouldn’t be difficult to write a function that starts at the maximum index of an array, and then proceeds to iterate through the array until we reach index 0. With each iteration, we could add each value to a new array (which would be the same size as the original), and then return that new array (the Lodash reverse function probably works similar to this under the hood). However, it’s even easier to just call the reverse function on the array as opposed to writing our own utility function. It serves as good exercise to learn how functions like this actually work, but it would be a waste of time to keep writing functions like this over and over again.

As I’ve matured as a developer, I’ve realized that even copy/ pasting code can be a waste of time (as opposed to using libraries), and it isn’t fun to update the same function in twenty different source code files each time you decide you want to change how that function works. Finally, we call the sortBy function on our array of ages. The sortBy function sorts the ages from smallest to largest, and then outputs them to our output div within each iteration of the forEach loop:

output.innerHTML += “<br /><br />Sorted Ages: “;
ages = _.sortBy(ages);
_.forEach(ages, function(value) {
output.innerHTML += value + “ “;
});

We’ve only covered a few simple utility functions within Lodash that work with arrays, although there are many other Lodash functions specifically for working with arrays. There are also Lodash utility functions for working with all sorts of things besides just arrays or collections. An entire book or course could be written to teach any of the libraries that we’ve examined in this article. I encourage you to read the Lodash documentation at /lodash.com/docs/ to discover some of the other great things that Lodash has to offer. Many JavaScript libraries are only helpful to a niche of programmers, although Lodash may benefit just about anyone that writes JavaScript code. It wouldn’t be difficult to write a function that starts at the maximum index of an array, and then proceeds to iterate through the array until we reach index 0. With each iteration, we could add each value to a new array (which would be the same size as the original), and then return that new array (the Lodash reverse function probably works similar to this under the hood).

However, it’s even easier to just call the reverse function on the array as opposed to writing our own utility function. It serves as good exercise to learn how functions like this actually work, but it would be a waste of time to keep writing functions like this over and over again. As I’ve matured as a developer, I’ve realized that even copy/ pasting code can be a waste of time (as opposed to using libraries), and it isn’t fun to update the same function in twenty different source code files each time you decide you want to change how that function works. Finally, we call the sortBy function on our array of ages. The sortBy function sorts the ages from smallest to largest, and then outputs them to our output div within each iteration of the for Each loop.

Best Javascript Libraries: CreateJS

Download 929-287-7888

CreateJS is actually an entire suite of multiple JavaScript libraries and tools. It allows us to easily integrate graphics, animation, sound, and interactivity via the HTML canvas element. It consists of four primary libraries:

EaselJS is primarily used for creating and rendering graphics, text, and animations via the HTML5 canvas element (which we saw earlier in our index.html). For more information on EaselJS, check out the official documentation at:/www.createjs.com/docs/easeljs/
modules/EaselJS.html

TweenJS is designed for tweening animation. I’m sure you may be confused by the word tweening (as I certainly was). Tweening is defined as generating the values between two points. For example, the points between (1, 2) and (4, 5) is (2, 3) and (3, 4), if following a straight line (but keep in mind that not all trajectories are necessarily straight). TweenJS has great synergy with EaselJS, since it can add neat features to your animations. For more information on TweenJS, check out the official documentation at: /www.createjs.com/docs/tweenjs/modules/TweenJS.html

SoundJS is an API for working with sound. It is used to create sounds, play/pause/stop sounds, change the volume of sounds, load sounds, and even install plugins. For more information on SoundJS, check out the official documentation at: /www.createjs.com/docs/soundjs/modules/SoundJS.html

PreloadJS is used for preloading our assets. Preloading refers to the initial loading that takes place before the rest of our application executes. For more information on PreloadJS, check out the official documentation at : /www.createjs.com/docs/preloadjs/modules/PreloadJS.html

Since CreateJS is so large, I decided not to provide any examples of each library in an effort to prevent this article from becoming too large and intimidating. However, CreateJS is an awesome suite of Javscript libraries. I felt that I would be doing this article an injustice, if I didn’t at least mention it. There are numerous tutorials on the web which may help you get started with CreateJS. I also teach how to develop an application using CreateJS in the book that I wrote with Mark Lassoff: “App Development Guide: Wack-A Mole” (which is available on Amazon.com). I can absolutely guarantee that CreateJS will make your applications much more fun, interesting, and interactive. If you’re interested in using JavaScript to create games, do yourself a favor, and check it out!



Day in the Life of a Coder: Three Perspectives

Welcome to a Day in the Life of a Coder: Three Perspectives! We go beyond simply a day in the life, since we also discuss our general perspective and opinions on the Information Technology field. I used the same questions for three developers from Rhode Island in talking about their career in coding. The diversity of the answers to the same question reflect the diverse nature of developers. Our first interview is with Kaighen Finley.

[optin-monster-shortcode id=”kgcmfonyst584cx2hmvr”]

Kaighen Finley, lessons from her career

How did you become interested in the world of Computer Science and Information Technology?
As a child, I recall always having a pc at home, thanks to my parent working as a desktop technician. That provided the basis, but not the passion. The passion came first when I started playing video games, and later on when I started modding them. I’d spend days/weeks/ months working on my creations. It was enthralling. I figured that sort of passion was something I should pursue as a career field.

What is an average day at work like for you?
I have a lot more flexibility than most people. I won’t say too much more on this one right now though.

In your opinion, what are some of the main social issues that relate to a career in development?
I think net neutrality and ‘the right to be forgotten’ are some issues of chief concern regarding our current climate.

Do you have any advice for aspiring or new developers?
Connect your coding activities to something you’re passionate for,
or about. That will drive you exponentially further than just doing
something you don’t love.

What are your favorite programming languages and why?
I don’t really have a favorite. But I appreciate that each language has its own set of intricacies and/or advantages that – once known – allow that language or skill set to specialize in certain tasks. From there, it really just becomes a matter of choosing the best (or ‘nearest’) tool for the job!

What is an example of a solution to a challenging problem that you faced as a developer in your career in computer science?
Print it out so you can see it. Slow down, take a few steps back or go for a walk, and ponder the architecture. You should think about the end goal. The way you’re wiring the code now isn’t the only way to do it. Be flexible. Understand what you’re doing. The more you understand, the more options you can derive. Stack overflow: surely you’re not the only one to have had this problem. Compare what works now to what doesn’t work. Find the broken link. The separation of concerns can help with the clarity of code, and so can commenting. Neither are necessary, but both can be positive.

Is there anything else you would like to say regarding development?
Anything else I want to say? Hmm. Life is Sorcery. Treat it as such.

Christopher Simpson, Lessons Learned

How did you become interested in the world of coding and development?
I have been interested in computers and tech ever since I was a child. Some of my earliest memories include taking apart my Mother’s 1970’s hand-held radio screw by screw to see how it worked (of which she did not approve) and trying for hours to get Hitchhiker’s Guide to the Galaxy to run on the family Apple IIe. There’s just something about Computer Science that has always made my brain happy.

What is an average day at work like for you?
My days are normally longish, averaging about 9.5 hours. Therefore, I generally start off slow — catching up on emails and reading science, tech and web design news articles for the first little bit. Once the coffee has kicked in, I’ll organize my day by what projects I can actually finish and get those out of the way first. After that, I do as much work on the highest priority task as possible before sending it for approval, then work on the next until I’m instructed to change directions.

In your opinion, what are some of the main social issues that face the field?
People that don’t understand even the basics of computer science usually have the strongest opinions on how it should work and the loudest voices when something doesn’t. With the recent explosion of readily available technology, everyone is an expert now because they can download an app from Google Play or the Apple Store, regardless of having no idea what is actually making these tiny programs run.

Do you have any advice for aspiring or new developers?
Back up. Back up, back up, back up! You should always be able to roll-back any given change you’ve made. Many developers use systems like Git to keep track of things, but even going old-school and saving copies of whatever you are working on locally is better than nothing. Don’t be afraid to break things, because it’s inevitable. I literally threw up the first time I crashed a live website. It is not recommended.

What are your favorite programming languages and why?
As a front-end website developer I have little use for what most consider to be a real programming language like C++ or Python. I know HTML, CSS, some JavaScript and a bit of jQuery (which isn’t really a language) and that gets me by. Recently I’ve been working with Shopify’s proprietary “language” called “Liquid” and I absolutely love it. It’s like if HTML and JavaScript had a child that grew up to be President.

What is an example of a solution to a challenging problem that you faced as a developer in your career in computer science?
I work with a shopping cart software package that doesn’t natively integrate Amazon Pay, which was demanded by upper management. What I had to do was to find a second cart solution that did accept Amazon Pay, duplicate our store’s inventory into it and find a way to take everything from the original shopping cart and move it into the new Shopify cart to check out there with one button. The solution is messy… really messy, but it works and we’ve had a 20% increase in conversions because of it.

Is there anything else you would like to say regarding development?
I started off as a graphic designer thinking all I’d ever need to know is Photoshop and Illustrator. Then I got bored and found that software development (web or otherwise) presents constant challenges to overcome. In order to grow, a person must be confronted with problems to solve and the same can be said about becoming a better programmer. There are many ways to solve any given development issue. It’s finding the right one that is the trick. Read, experiment, research, develop your methods and don’t let others put you down for not doing it the best way or their way. Just make it work.

Chris Coscina, on his Career

How did you become interested in the world of Computer Science?
I remember that the first computer we had as a child only had a black screen with a green cursor. You could type on it, but it didn’t have a printer. It also didn’t have any software on it that we could use. There was literally nothing that you could do on it, besides type things on a screen. I don’t even have any idea what the operating system was, since it doesn’t resemble any commonly used operating system within the past twenty years. I’m still curious about where my parents got this thing from, since it seemed like it was an ancient artifact from Babylon or something like that. I tried many times to get it to do something other than just print words on a screen. However, there wasn’t even a prompt or anything. Maybe there was some way to do more with it, but I don’t even think a manual exists for it.

When I was about eight years old, my parents finally bought our family a computer that had great functionality for that particular time period. It was running Windows 3.1 – it had Microsoft Paint, Microsoft Word, America On-Line (which at the time was synonymous to the internet if you weren’t a techie), as well as other odds and ends. By the age of eleven, I began creating websites about video games that I enjoyed playing, such as Resident Evil, Pokemon (back in the days when it was only available for GameBoy), and Mortal Kombat. Much like Kaighen, I then got into modding different games, which became a huge source of growth for me. I even tried to lead a development team to create a really awesome Half-Life modification when I was thirteen. However, everyone would just laugh at me when they found out how young I was. Needless to say, the mod never reached completion. However, I still learned quite a bit from having set out on a mission to create that mod. Often in life, it’s not so much the destination that matters, but rather the journey. I’ll quote Lao Tzu on this one:

A good traveler has no fixed plans and is not intent upon arriving.
A good artist lets his intuition lead him wherever it wants.
A good scientist has freed himself of concepts and keeps his mind open to what is.

These principles (which may be found in the Tao Te Ching) have guided much of my approach towards growing as a developer, and also as a human being in general. I should note that another document which had a deep early influence on me is an article titled How to Become a Hacker by Eric S. Raymond: /www.catb.org/ esr/faqs/hacker-howto.html

What is an average day at work like for you in your career in computer science?
This would always vary significantly, depending on the company. Some companies are very “go with the flow”, while others can be highly regimented with many scheduled meetings. I tend to find that too much structure tends to conflict with productivity. At the moment, I work on projects for a couple of different companies from my own home. I just sit down at my computer whenever I decide I want to do some work. It’s really that simple, since I like to keep things simple. Simplicity is valuable for most things in life. However, it’s especially valuable when it comes to engineering, coding, and testing.

In your opinion, what are some of the main social issues that relate to a career in computer science?
There are many different social issues that relate to a career computer science. I could go on for hours about it. A large number of technology based social issues are rooted in the fact that our society and culture simply doesn’t mature quickly enough to keep up with the pace of technological advancements. For example, the process required to put new laws into effect (meetings, bribing politicians, politicians writing the laws, politicians voting on the laws, and so on) is not exactly immediate. However, the process by which new technologies can affect the entire world in a huge way, is often much more immediate. To make matters worse, most people pulling the strings in society don’t have a deep understanding of computer science (or technology in general), which causes them to make irrational decisions regarding how to govern it.

In my humble opinion, the most dangerous technology based social issue is rapidly increasing automation. There is a CGP Grey video on YouTube titled “Humans Need Not Apply” that explains how automation has already eliminated many jobs in our economy, and why it will probably continue to eliminate jobs. I highly suggest watching that video for more background on the subject, since I can only give an overview. ATM machines, self-checkout lanes, WebMD, automated restaurants, etc., are decreasing the number of employees that many different types of organizations need. If self-driving cars ever become mainstream, it could also destroy the transportation industry (which employs more people in our country than any other industry). Many people argue that this phenomena does create new jobs within the tech industry, which is true. However, for every job created in the field of automation, a much larger number of jobs may be destroyed. There are many jobs that are difficult (perhaps even impossible) to automate. However, we would experience major social catastrophes long before we reached the level of one hundred percent unemployment anyway. We’re already dealing with major problems within our society, but truly catastrophic events could occur by the time we even reach fifty percent unemployment.

One of the major problems is that the corporations can’t simply refuse to go in this direction. If they don’t do so, then they will have difficulty competing with their rivals. Nevertheless, the corporations are shooting themselves in the foot, from a long term perspective, by automating jobs to pinch pennies. As jobs become scarcer, wages are likely to decrease due to greater competition for jobs (supply and demand). In other words, fewer members of a household will be working, and the members that still have a job will probably be paid less than they are now (even though they’ll usually need to support a larger percentage of their family). It will gradually become very difficult for the citizens of our society to afford the goods and services offered by most businesses. At this point, the entire structure could easily collapse.

If extremely high levels of unemployment occur, then we will have a much greater need for government funded social services. Which leads me to a question – where does the money for social services come from? Tax revenues, much of which comes from people working (income tax), people buying stuff (sales tax), and businesses. If the number of people working is very low, few people are spending much money on goods/services, and most businesses crumble, then how will we afford this increasing need for social services? You could simply not offer the services that are required to keep the peace, but then this could lead to social unrest. In which case, the police or even the military could step in. Are you aware that the police and the military also get paid through our taxes? If people (and even corporations) can’t afford to pay their taxes, I’m not quite sure that people will want to fight against that social unrest for free. Furthermore, in that type of situation, the police and the military would probably need to go against their own friends and family members. Exactly what would happen in this type of dynamic is unclear to me, since it would certainly be chaotic and uncertain.

It is possible to look at the bright side of things. We can generate vast amounts of resources due to technological advances, and technology is continuing to advance. We are capable of producing far more than enough food to feed everyone. It’s just that the world’s economies are structured in a way that prevents some people from being able to eat on a daily basis. It isn’t that the current model for our economy didn’t work in the past, because it did. However, if we reach a point where only a small number of people are needed to work jobs to “keep the machine going” then survival should no longer be based on making a living from working at a job. These dynamics could lead to either extreme oppression or a new renaissance period. Once people no longer need to focus on accomplishing mundane tasks, we can focus on greatly advancing our cultures in the fields of art, science, health etc. This doesn’t mean that money shouldn’t exist or that we shouldn’t have responsibilities, it just means that we need to put into practice a better way of doing things. There are different potential implementations of social systems that could work well. There are at least as many implementations of social systems that won’t work well in the future, so this should be carefully considered by every person in the entire world.

Do you have any advice for aspiring or new developers?
Never stop having fun and always keep growing. Mastery is not an end, but rather a new beginning.

What are your favorite programming languages and why?
This entirely depends on what I’ve set out to accomplish or the problem that I’m solving. I often don’t have the privilege of choosing the programming language for a project. Many developers complain if they are required to work with a programming language that they don’t prefer. I take a different approach, because the challenges that any specific programming language presents, just make things more interesting for me. When I get to choose the language, I generally lean towards what I consider to be the best tool for the job. However, the Deputy Controller of CitiBank once told me that “it is a poor workman that blames his tools”. I take this approach towards my work. If I need to chop down a tree, but all I can use for the task is a hammer, then the tree will get chopped down.

What is an example of a solution to a challenging problem that you faced as a developer in your career in computer science?
At one point in my career, I worked for a rather small company that didn’t have a scan system in place. Therefore, they took inventory manually, since their company was still getting their foot in the door at the time. This was a very time consuming process. As a result, people would sometimes simply guess the inventory count because counting that many units of product drove them crazy.

All of the product that went out the door was always part of a particular shipment (except in rare cases, such as bringing product to a trade show). Each shipment had a tracking number, and the log of tracking numbers for each order id would be copy/pasted into a web application that added the shipment tracking to the database. The database also kept track of the items in the order. I mentioned to upper management that I could write some code that would automatically deduct from the inventory every time the tracking numbers would be imported. During the import, it would deduct from the inventory table based on the number of units purchased of each item.

When the manufacturing team would finish a batch of product, they used another application that I created for quality control purposes. I configured the code for that application to automatically increase the inventory by the number of units in the batch for that particular product. The time that it took me to write the inventory automation code within both applications (the shipping application and the manufacturing application) was equivalent to the amount of time required for roughly five manual inventory counts. On the surface, it seemed like a very complicated problem. The truth of the matter is that the solution was really quite simple.