Front-End Web Development Tag Archives - General Assembly Blog

Using APIs in Full-Stack Web Development and App Creation

By

Think about your personal experiences using ride-sharing mobile apps like Lyft. You’re able to request a car to your exact geographic coordinates, right down to the street corner. This functionality is possible thanks to application programming interfaces, or APIs.

An API is a platform that allows different pieces of software, or applications, to communicate with one another. The term is used broadly in the context of programming languages, the web, operating systems, etc. For example, Apple publicly shares a number of APIs powered by iOS, its operating system for iPhones and iPads, for an app developer to use. These APIs allow applications like Facebook, Instagram and Snapchat to access a user device’s camera, microphone, and much more.

What Is an API?

APIs can fall into a number of subcategories. Many web and mobile applications, as well as devices (e.g., Amazon Echo), rely heavily on what are known as web APIs, which we’ll focus on in this guide. A web API uses the same underlying technologies as web browsers to allow different applications to communicate with one another. Web APIs allow applications to retrieve data or perform actions beyond their built-in capabilities. Typically, an application, using the internet, requests some data or action from an API. The API provides a response, and the application then adapts and displays it. The API’s code is hosted on a web server, which is essentially a computer connected to the internet. Depending on the functionality the API is providing, there may be an additional layer of security involved, such as sending a unique key.

Let’s consider a mobile weather application like Dark Sky. When you use it to check the weather for a certain zip code, the application makes a request to the API tool asking for the weather in that zip code. The API has access to the weather data and returns it as its response. Then, the application goes through the weather data and selectively displays it as, for example, the temperature in degrees Fahrenheit. The same process occurs if you check the weather in another city or at your current location.

How to Use an API

Developers can use almost any modern programming language (like JavaScript, Ruby, Python, or Java) for their own API coding. Most programming languages already come with the necessary software to interact with web APIs, but developers typically install additional packages, or code, for convenience and flexibility.

For any given programming language, there’s usually at least one popular framework — a collection of programs — that can be used to create APIs. Ruby developers, for example, use the Rails framework. Developers can also use packages to add features to their APIs, such as additional layers of security. Any additional necessary programs or packages are usually installed with that language’s package manager, e.g., Ruby’s bundler.

How Does an Internal API Work?

An internal API is one that’s used within a company or organization, although the company can choose to make portions of it accessible to the public. Users within that organization can leverage an internal API to share data and business logic (for example, the company’s rules regarding communication between a user interface and a database) across platforms — i.e., web, iOS, or an Android app. Any company with both web and smartphone apps likely has an internal API.

For example, the food-ordering service, Seamless, has web, iOS, and the Android app. All three platforms use an internal API to request that an action be performed, like placing an order for a client, as well as to request data, like the details of a user’s most recent order. This internal API allows Seamless to internally share data (restaurant information) and business logic (a customer ordering a dish) across different devices.

How Does an External API Work?

Many organizations provide external — albeit sometimes limited — APIs and documentation that allow individuals and companies outside of that organization to develop applications using its services. Depending on the external API, there may be registration, payment, or other limitations involved. For example, The New York Times provides an extensive external API that is free but requires that developers register and follow certain guidelines.

Google Maps also provides APIs that allow developers to embed maps in their websites and applications, as well as access directions and estimated travel times. Lyft, for example, uses Google Maps’ API. Other popular external APIs include Yelp’s Business APIs, which enables the user to find businesses, the OpenWeatherMap API, which retrieves weather data, and the Microsoft Azure Emotion API, which determines emotions in images.

Using external APIs allows developers to create their own mashup applications, like one that uses the Yelp Business API to find top-rated coffee shops in a neighborhood and display them on user interfaces as a map with custom icons via the Google Maps API.

APIs at General Assembly

The ability to work with web APIs is a fundamental skill in web development, whether you want to find a job as a front-end or full-stack software engineer or simply create your own applications. In GA’s career-changing Software Engineering Immersive — offered on campus and online — as well as our part-time JavaScript Development course, students learn the theory behind using web APIs and get hands-on practice incorporating them into their own projects. They also explore adjacent technologies such as AJAX and JSON. Many students choose to use a web API as part of their final projects and create their own applications. Our part-time Front-End Web Development course covers API coding essentials as well.

Browse Upcoming Coding Workshops

Meet Our Expert

Saimon Sharif is a software engineer who teaches JavaScript Development courses and workshops at General Assembly’s New York City campus. He works at the clothing-rental company Rent the Runway, focusing on its front-end stack. In his spare time, Saimon listens to podcasts, searches for the perfect cup of coffee, and reads a few too many articles.

“Given that more than half the world’s population has internet access, with more to come, now is a great time to learn web development to create applications and reach that audience.”

Saimon Sharif, JavaScript Development Instructor, General Assembly NYC

What Is Front-End Web Development?

By

Advanced-Front-End-Web-Development

Name: Nick Schaden (@nschaden)
Occupation: Web Designer/Developer

1. In 140 characters or less, what is front-end web development, from your experience?

A mix of programming and layout that powers the visuals and interactions of the web.

2. If a website were a house, front-end web development would be ______?

Front end development would be the pretty exterior that gives the house character, or the host that invites guests in and makes them feel at home.

Continue reading

Using GitHub for Web Development and Cross-team Collaboration

By

Building a website often involves several developers who make changes to many files at once. Tracking these revisions can be a headache, and when something breaks on a site, it’s important to find the change that introduced the problem as soon as possible. Developers turn to version control systems to track these changes and simplify collaboration.

GitHub is a platform that takes this workflow a step further. Built on top of the popular open-source version control system Git, GitHub allows developers to share their code and receive feedback and contributions from the public. Because of this transparency, GitHub has become an integral part of the open-source software revolution, as many companies, including Google and Apple, choose to release portions of their software for free via the platform.

How GitHub Works

GitHub uses Git to manage file revisions and history.

Typically, a developer uploads a copy of their code to a new “repository” on GitHub, which keeps track of those files. When a developer makes a change on their computer to a file that’s stored on GitHub, they can “push” that local change to the copy that’s in the remote repository. These changes can be submitted via GitHub’s website, its desktop application, or by using the computer’s command line interface.

Web developers aren’t the only people who can make changes to files in a repository. Designers can also use it to update images, and content teams can use it to make copy changes. GitHub’s user-friendly interface makes it simple for cross-functional teams to collaborate on the same files. All of the changes are tracked, so it’s possible to revert to an old version of a file. GitHub also enables a developer to create their own copy of another developer’s repository and make changes without affecting the original files.

GitHub’s Main Features

On top of its basic functionalities, GitHub has many user-friendly features for streamlining a developer’s workflow. With additional capabilities for Enterprise and Education accounts, GitHub is widely used across companies, universities, and independent developers to share code.

Here are a few of its most popular features:

  • Issues: GitHub provides a way for developers to submit any issues or bugs they find in the code. An issue creates a page that allows for discussion about the problem and can track any code changes that address it.
  • Documentation: Proper documentation is essential if you want other developers to be able to understand and contribute to your project. This input can help fix bugs or add new features within the code without close supervision from you as the owner. GitHub encourages this by supporting HTML markdown files, which developers can use to create robust and structured documentation.
  • Pull requests: A pull request allows developers to suggest changes to code. The user can open a pull request with the changes they have in mind, and the code’s maintainer can decide whether or not to merge these changes into the code base. GitHub provides an online interface on which developers can see proposed code changes and leave comments.
  • GitHub Pages: GitHub can also host a free basic website in one repository. This allows each user to create a rich web page that’s associated with their GitHub account.
  • Social features: GitHub offers a robust set of social features designed to encourage collaboration on projects. A user on GitHub can “watch” a project and receive notifications when a pull request is created or an issue is opened. By “starring” repositories, users can keep track of their favorite projects. Each project has its social metrics featured prominently on the repository page so users can gain an understanding of its popularity and support

GitHub at General Assembly

At General Assembly, our coding students learn the ins and outs of GitHub through practice, whether they are building a foundation in HTMLCSS, and JavaScript in our part-time Front-End Web Development course, diving into our dedicated JavaScript Development course, or embarking on a coding career in our Web Development Immersiveon campus or online.

Students submit homework assignments via their own repositories, where they receive feedback from their instructors. After graduating, they also use it to showcase their projects and take advantage of GitHub Pages to easily host free websites. We encourage our students to explore open-source tools, such as jQuery or Bootstrap, and they leave able to contribute back to them and continue their own work.

Ask a Question About Our Coding Programs

Meet Our Expert

Adrienne Dreyfus is a software engineer who loves tackling large problems with clean code. She’s deployed code at LinkedIn and Code for America to help people find jobs, and worked on software for fitness trackers at Fitbit to help people stay healthy. She loves teaching web development through Intro to Coding workshops and Front-End Web Development courses at General Assembly’s San Francisco campus. When she’s not inside coding, she’s probably outside with her dog, Rocky Balboa.

Adrienne Dreyfus, Front-End Web Development Instructor, General Assembly San Francisco

Using JSON to Serialize Data to Share Between Applications Seamlessly

By

In JavaScript and other programming languages, we represent real-world entities as objects, or collections of key-value pairs. For example, in JavaScript, if we wanted to represent a student who has a name and a favorite color, we can use an object with two keys — name and favoriteColor — and two values associated with each key:

Json graphic 1

When we want to send these objects as data between two systems, such as a website and the server that runs it, we need a way to format these objects so that they can be read by the receiving server.

JavaScript Object Notation, or JSON, is a style of text notation that’s used to format and interchange structured data. JSON describes how to represent and arrange data sets so they can easily be written, transferred, and parsed by the receiver. JSON is easy for humans to read and write. It’s also easy for machines to programmatically dissect and generate.

Imagine that you signed up for a website with your email address and created a profile with your name and age. Your user profile would appear as a JSON object to the site’s back-end application, which is running on the server and receiving your form submission. This JSON format would allow the application to easily work with your data.

By looking at a document that’s structured using JSON, we can visually interpret data, noting the various relationships within the set, such as what is the parent or child of a certain node (object). In the following example, we can see what owns the “profile” and “account” data by looking at how the JSON document is structured:

Json graphic 2

Try writing your own JSON object and test its validity using a validator like this one!

Usability has made JSON one of the most popular means of serializing data. With it, data can easily be translated from objects into formats that can be stored (for example, in a file) or transmitted (for example, across a network). JSON can represent four primitive data types — string, number, Boolean, and null — as well as two structured types, object and array.

JSON is an open standard file format that can be used by anyone. However, whomever is reading and writing JSON must adhere to the standards laid out by the ECMAScript specification (JavaScript is based on ECMAScript as well). This standardization makes JSON a great choice when sending and receiving data between two systems, such as an API and a client, or a web server and a client.

A Brief History of JSON and Its Rise in Popularity

JSON is language independent, meaning that many programming languages besides JavaScript have the ability to create and parse JSON. In fact, its conventions and data structure format maps effortlessly to popular object-oriented languages such as JavaScript, Ruby, Java, and Python.

As a a result, JSON can be written in one programming environment and parsed, or read, in another. For example, we can look at the popular Twitter API and see that a tweet is represented using JSON. But, if we want to parse that JSON data — say we want to get a feed of the most recent tweets from a certain user — we can choose whatever programming language we want that can read the JSON format. Twitter itself provides many libraries for consuming its API, but you can also do so by writing your own program.

JSON was originally created in the early 2000s by computer programmer and entrepreneur Douglas Crockford and his team at State Software as a lightweight serialization alternative to XML (Extensible Markup Language). JSON.org launched in 2002 to describe the format, and Crockford specified the format officially in the RFC-4627 documentation in 2006.

Today, JSON usage and developer interest is on the rise while XML usage is declining. According to the online API news site and directory The Programmable Web, of the top 10 most popular web APIs, only one — the Amazon Product Advertising API — supports XML and not JSON. Many of the most popular web APIs support both, and several support only JSON: the Facebook Graph API, Google Maps API, Twitter API, AccuWeather API, Pinterest API, Reddit API, and Foursquare API.

How JSON is Used

JSON is built on two data structures:

  • A collection of key-value pairs. In JavaScript, this is called an object. In Ruby, this is commonly called a Hash. Other names that refer to this same idea are dictionary, keyed list, and associative array. An example of a key-value pair is a dictionary: To use it, we look up the word (key) and read the definition (value).
  • A list of values. In most languages, this is realized as an array, vector, list, or sequence. An example of a list of values is the different colors of crayons in a box.

When JSON is combined with the AJAX (Asynchronous JavaScript and XML) web development technique, a web browser is able to send and receive data without needing to refresh the web page. Think about submitting a form to update user information on a website: After the user hits the “submit” button, their details are packaged into the JSON format and sent from the client (web browser) to the server. The server can respond with another piece of JSON data, which the web browser can then parse to show feedback to the user. This popular combination of technologies allows for a seamless user experience.

JSON at General Assembly

At General Assembly, students learn various skills that rely on the JSON format. Within the full-time Web Development Immersive course, aspiring developers create web APIs that use JSON to communicate back and forth between a client and a server. In our part-time JavaScript Development course and self-paced online JavaScript offering, students learn how to work with JSON within the object-oriented programming language. Additionally, in our full-time Data Science Immersive and part-time Data Science course, students write application code in Python, which has the ability to parse and generate data using the JSON format.

Meet Our Expert

Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When he’s not coding, he enjoys cooking vegetarian food and biking around Rhode Island.

Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence

DOM Manipulation: Changing Your Website in Response To User Actions

By

Looking to create a button to change a web page’s background color, build a form that will allow users to add a comment directly to your page, or remove content when a user clicks an “X” button? You’ll need to know how to manipulate the Document Object Model, or DOM, to do all of these things.

The DOM is the structure a web browser generates from an HTML file. The browser reads the HTML file and generates a version of the elements that is formatted for your JavaScript code to communicate with. We need this “translated” version of the HTML so that we can use JavaScript to talk to the elements on the page. If JavaScript could not talk to the DOM, we wouldn’t be able to use JavaScript to change the appearance of the page.

You can picture the DOM as a kind of hanging mobile sculpture, where each node of the mobile is a different HTML element. You could also imagine it as a family tree, where the “root” is the parent of all the other elements in the tree. That means that the largest containing element, <html>, contains all the other elements in the tree. Here’s an example:

DOMManipulation

Here’s what the above HTML looks like as a DOM tree:

DOMManipulation

We frequently use family terminology in referencing parts of the DOM. In the above example, the <html> tag is the parent of the <head> and the <body> and the ancestor of all of the other elements. The <li> elements are the children of the <ul> element. Similarly, the <li>s are sibling elements.

The HTML file itself provides a good way to visualize the Document Object Model, because it’s the file that helps the browser create it. When you indent each subsequent “layer” of HTML, you give yourself a good visual of the nesting of the DOM. Remember, the DOM is created by the browser when it reads your HTML. Your HTML document is the template which creates the DOM.

When building a website, you might want to build functionality for the DOM to change in response to a user action. Every web framework — from Angular, to React, to jQuery — provides some way to adjust the DOM. The best ways to first encounter DOM manipulation are to use plain JavaScript or, even better, use jQuery.

In each, you must first tell the JavaScript how to find the element on the page (we call this selecting the element) and then manipulate it.

How No-Frills JavaScript Interacts With the DOM

In JavaScript, there are separate methods for selecting elements by element type, class, and id. Below are the plain JavaScript methods for selecting elements.

DOMManipulation

Once you’ve selected the element, you can use a number of methods to change or add to it. For example, if you’d like to add some content to the page, you can append HTML using the .appendChild(element) method, like this:

DOMManipulation

You can append a new child HTML element to any part of your page by first selecting the element you want to be a new parent:

DOMManipulation

If you want to append an HTML element with content inside it, you’ll create a text node using the .createTextNode() function like this:

DOMManipulation

You can see that something as simple as adding a div with some text is already getting quite complex. This is where jQuery comes in to simplify our DOM manipulation.

Simplifying DOM Manipulation With jQuery

jQuery is a JavaScript library that provides tools to make life simpler for web developers. Behind the scenes, the jQuery source code is written in JavaScript. That means that anything we do in jQuery could be accomplished in JavaScript with more code. jQuery is designed to simplify DOM manipulation, and its syntax is easier to grasp. It uses CSS-style selectors to pick DOM elements (elements from the HTML). That is, you can select an element by using its tag, class, or id. For example:

$(‘span’) will select all of the span elements,

$(‘.container’) will select all of the elements with a class of container, and

$(‘#hero-image’) will select the element with the id of “hero-image”.

Because CSS selectors can get complex, you can select very specific elements on your page.

Once you have selected a DOM element, you can change it at will using a large array of jQuery manipulation methods.

Here is an example of using jQuery to manipulate some HTML.

The HTML:

DOMManipulation

DOM’s JavaScript component:

DOMManipulation

The above code will change all of the paragraph elements on the page to have a value of “Boo!”. Go to a webpage with jQuery loaded on it, like css-tricks.com, open the console with `command` + `option` + `j`, and paste that code into the prompt. When you execute that code, you’ll notice all of the paragraphs will have changed to say “Boo!”

As you’re working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. If you want to find out the current value of some attribute, you are getting. If you want to change the value, you should be setting. This is the pattern:

  • Getting a value: $(“CSS Selector”).someJqueryMethodName()
  • Settings a value: $(“CSS Selector”).someJqueryMethodName(valueToSet)

Notice that getting a value doesn’t require an argument to the jQuery method, but setting a value does.

Following that pattern, we could get the value of the text of an element on the page:

  • Get the text of the readme (it lives inside of an article tag): $(‘p’).text()
  • Set the text of the readme to: “Boo!”: $(‘p’).text(“Boo!”)

Some jQuery methods require an argument in either case. For example, the .css() jQuery method works as follows:

  • Get the background color: $(‘p’).css(“background-color”)
  • Set the background color to blue: $(‘p’).css(“background-color”, “orange”)

Some of the most common jQuery DOM manipulations are:

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

  • Append HTML content as a child of the current selected element: $(‘.selected-element’).append(htmlContent)
  • Add/remove a new class to/from the selected element: $(‘.selected-element’).addClass(className) / .removeClass(className)
  • Replace all of the current HTML content within the selected element with the inputted htmlContent: $(‘.selected-element’).html(htmlContent)
  • Replace the current text content of the selected element with new text: $(‘.selected-element’).text(newTextString)
  • Change the value within an input element: $(‘.selected-input-element’).val(newValue)
  • Remove the selected element from the page: $(‘.selected-element’).remove()

You can use these manipulation methods, along with event listeners, to change your page in response to user actions.

DOM at General Assembly

In General Assembly’s full-time Web Development Immersive and part-time Front-End Web Development courses, students learn DOM by visiting jQuery-enabled websites like CSS-Tricks and using the console to alter the pages in front of them. Changing all of the titles to some goofy text gives students a sample of the power of this tool.

Students also dive into and read the jQuery documentation to find out about the most useful DOM manipulation methods. We make sure to emphasize .append, .addClass, .html, .text, and .val. Then, we introduce DOM events so that students’ sites can detect clicks, form submissions, scrolling, and keypresses. Much of the time, our response to these events is to manipulate the DOM accordingly. When a user presses a button, it can change the appearance of the web page. We do this by listening for the button press and then manipulating the DOM to impact the page.

Ask a Question About Our Coding Programs

Meet Our Expert

Cory Fauver is a Web Development Immersive instructor and former Front-End Web Development instructor at General Assembly’s San Francisco campus. He left his early career in math education to teach himself web development while building a company with two close college friends. While their product didn’t work out, they left that experience with skills that they’re all using today. Cory enjoys sharing the methods and resources he used to learn HTML, CSS, and JavaScript. When he’s not at a computer, he loves playing ultimate frisbee, backpacking, and being outdoors.

Cory Fauver, Web Development Immersive Instructor, GA San Francisco

Using Ruby on Rails to Develop Affordable Modern Web Applications

By

Ruby on Rails, commonly known as Rails, is a server-side framework that helps developers build modern web applications. It is written in the Ruby programming language and makes programming web applications easier by making certain assumptions about what every developer needs in order to get their application up and running.

Rails is open-source software, meaning anyone can view, edit, and contribute to the source code. It’s released under the MIT License, a legal structure with few restrictions for software reuse, which contributes to Rails’ widespread presence. At the time of writing, Rails has more than 3,300 contributors on GitHub. Everything a developer needs to create database-backed web applications according to the commonly used Model-View-Controller (MVC) pattern is included within the framework.

Rails is opinionated software designed for developer happiness and to help small and large companies launch fast, affordable, production-ready applications. You’ll sometimes hear the phrases “convention over configuration” and “the Rails way,” which refers to adhering to the conventions and the “best” way to do things as agreed upon by the creators of the Rails framework. By adhering to Rails conventions, you’ll likely discover a tremendous increase in productivity; if you attempt to go against conventions, you may have a slower and less ideal experience.

The History of Rails and Its Rise in Popularity

Rails began as an internal framework used at a company called Basecamp, within its eponymous project management platform. In July 2004, David Heinemeier Hansson, Ruby on Rails creator and Basecamp founder, extracted Rails from Basecamp and made it available to the public. The framework gained popularity in 2005 when Hansson, known as DHH in the Rails community, showed off Ruby on Rails’ awesome capabilities and speed by live-coding a completely functioning, database-backed blogging engine in under 15 minutes. Apple further legitimized the Rails framework when it shipped Ruby on Rails with its Mac OS X v10.5 Leopard operating system in October 2007.

Rails gives developers a quick way to get started building a web application with opinionated scaffolding, which generates the model, view, and controller for a new database-backed resource in a single command-line operation. Rails also includes much of the boilerplate code that connects the various pieces of modern database-backed web applications, such as Active Record (the ORM, responsible for mapping database records to application objects), and the Rails router (links incoming requests to actions in the controller). This contrasts with earlier languages used to write applications for the web, like Java, Python, and PHP.

Without a framework like Rails, a developer has to write a lot of code to achieve what Rails could do in just a few lines. Rails also includes live reloading, which means your changes are immediately reflected as you edit your application files.

For anyone who needs a web application, from new developers to seasoned pros, and companies of all sizes, Rails is a great way to jump into developing web applications. Rails’ lasting impact can be seen in other web frameworks it has influenced; it brought automated QA testing for web applications front and center, included JavaScript as a large piece of the framework, endorsed REST principles early on, and reinforced the productivity gains of “convention over configuration.” Rails’ large and friendly community, made up of thousands of developers writing countless plugins (called Gems), continues to drive the framework’s success. Each year, they flock to RailsConf, a highly anticipated event where developers hear about new ideas and innovations within the Ruby on Rails framework and community.

Rails at General Assembly

In General Assembly’s Web Development Immersive and Web Development Immersive Remote, we introduce Rails as a modern web application framework. Developers utilize Rails to act as the back-end server for their full-stack applications — like in this site created by Web Development Immersive graduate Nikki Riser, which allows users to study Japanese words. This means students learn to use Rails as the application programming interface, or API, with the ability to handle incoming requests, model and validate data, communicate with the database, and send data back in a response. They then write front-end application code in JavaScript to consume their back-end API. JavaScript uses a technique called AJAX to communicate with a back end like a Rails API, resulting in a seamless single-page application (SPA).

By learning how to build web applications using Ruby on Rails, new developers gain experience creating and consuming APIs. This introduces a number of important concepts in full-stack web development, including:

  • Receiving requests to a server.
  • Creating routes for incoming requests.
  • Connecting to a database like PostgreSQL.
  • Validating data at the model layer.
  • Sending JSON responses.
  • Adhering to the MVC pattern.
  • Writing tests for application code.
Ask a Question About Our Coding Programs

Meet Our Expert

Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When not coding, he enjoys cooking vegetarian food and biking around Rhode Island.

“Technology moves fast. You need to be good at knowing what and how to learn, and always be learning. Knowledge about a topic can quickly become stale, so knowing how to use the next great thing is required to stay relevant.”

Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence

How jQuery Improves and Simplifies JavaScript Functionality

By

Have you visited a website that has moving parts, updates data, or calculates something from a form? That’s thanks to JavaScript, the go-to language used to make web pages interactive. While JavaScript is immensely popular, it was invented in just 10 days back in the ’90s — and therefore can be a bit unwieldy. Luckily for us, jQuery was created to make the language much more accessible for developers to write.

So, what is jQuery? On one hand, it’s simply a library built on top of JavaScript to make programming JavaScript easier and more enjoyable for web developers. On the other hand, it’s used so ubiquitously in web programming that you can hardly have a conversation about JavaScript without mentioning it. jQuery simplifies front-end web development to such a degree that we’ve coined a separate term — “vanilla JavaScript” — to talk about JavaScript without jQuery.

How jQuery Makes JavaScript Easier to Use

You don’t need to understand how to read code to see that jQuery can greatly shorten and clarify JavaScript programming. Consider that the following code snippets from JavaScript and jQuery perform the exact same task of adding a class to a set of elements.

JavaScript:

jQuery:

Computers can work very quickly, and they don’t care about the level of difficulty of the work they’re performing. Humans, however, care very much about how demanding their work is, and the more intricate the process, the longer it takes to accomplish. Programming skills command a high price in today’s job market, so anything that can improve a human coder’s efficiency is money in the bank. When we can create software more quickly and with fewer bugs, that’s good for everyone. That’s just one reason jQuery is so highly utilized.

More Reasons Why Developers Use jQuery

Aside from simplifying the use of JavaScript, jQuery has several other benefits, including:

  • Ensuring cross-browser compatibility. This means the code works the same whether someone views the page with Internet Explorer, Chrome, Firefox, or something else entirely. This saves programmers a ton of headaches!
  • Plugins that add extra features. Many well-maintained jQuery plugins are used around the web. Want an accordion-style menu? Checkout the jQueryUI plugin. Want a slideshow, carousel, or neat text effect? Look for a plugin before starting from scratch! The community surrounding jQuery is a big part of what makes it great.
  • Making AJAX calls. These are used to make a website perform more elegantly. They provide seamless transitions and timely updates to a page instead of having to refresh the page each time new information is received. For example, imagine you’re reading a news article on a website with a weather widget. If the page was refreshed entirely every time the temperature changed, then reading articles on that site would get annoying very quickly. AJAX allows us to avoid these ugly refreshes by performing the work in the background. This allows our hypothetical weather app to update the temperature without interrupting your reading experience. This functionality does exist in vanilla JavaScript, but it’s quite complex compared to the elegant solution jQuery offers.
  • It doesn’t affect page-load time. jQuery is a small library, so it doesn’t weigh down a web page or take a long time to load. We can get an even smaller version by “minifying” the code — this is a compressed version that isn’t readable by humans. Many large corporations, such as Google, Microsoft, and Yahoo, have content delivery networks that host different versions of jQuery and commonly used jQuery plugins. This means you can use jQuery by adding a link to the jQuery library hosted on these companies’ servers, so it doesn’t even take up room on your own computer.

jQuery at General Assembly

Front-end web development is a natural entry point into the world of programming, and jQuery is one of the most beginner-friendly languages. HTML and CSS form the bones and skin of a website, but JavaScript and jQuery make it come to life with movement and interaction.

In General Assembly’s part-time Front-End Web Development course, students learn the basics of JavaScript and jQuery, along with HTML and CSS, to build interactive custom websites. For a deeper dive into coding, our full-time Web Development Immersive course, on campus and remotely, trains students to be job-ready full-stack web developers, equipped with both front- and back-end skills.

Meet Our Expert

Brandi Butler is a Web Development Immersive instructor at GA’s Seattle campus. She has degrees in computer science and psychology from Western Washington University, and served as a software engineer at PayScale, working on both the front and back ends of the company’s website. In her spare time, Brandi enjoys playing tennis, singing karaoke, traveling, and drinking wine.

Brandi Butler

“Web development allows you to create whatever you want. You can bring your ideas to life and show them to the world.”

Brandi Butler, Web Development Immersive Instructor at General Assembly Seattle

The Evolution of Web Browsers: Navigating the World Wide Web

By

 

Can you imagine the world without the web? Today, we no longer have to memorize concepts or pore over books in search of answers. Instead, we turn to the internet to find them instantaneously — often through a web browser. Let’s walk through what a web browser is and how it works.

What’s the Difference Between the Internet and the Web?

It’s important to recognize the difference between the web and the internet. Yes, these are different things!

  • The internet is the information space; a system of intertwined networks that connect all the computers around the world. The word “internet” itself is a portmanteau for “interconnected network.”
  • The World Wide Web (the web) is a means of accessing information over the internet. It’s a system of web pages that utilize the internet to send and receive files and data. World Wide Web documents are formatted in a certain way, using what’s called markup language (HTML stands for Hypertext Markup Language). These documents are distributed across the internet through a transfer protocol (HTTP, i.e., Hypertext Transfer Protocol). According to the researchers at the nuclear research organization CERN, it was initially developed in the 1960s for sharing documents from one university to another.
  • A web browser is software that provides an easy access to the World Wide Web. Browsers load and render web pages so that they are readable by humans. Think of a web browser as the tour bus that drives you around the web’s top attractions.

Fun fact: Based on a web server survey conducted in January 2018, there are more than 1.875 billion confirmed websites in the world.

The Evolution of Web Browsers

Because the internet was originally developed to share scientific documents, the initial representation of information was extremely dry. In the early days, web browsers were simple applications that only rendered plain HTML pages and had the functionality to add bookmarks. With the development of programming languages, however, the browsers have evolved as well. Nowadays, developers are able to add style to HTML documents using CSS (Cascading Style Sheets) and make websites interactive and dynamic using JavaScript. Every time a user visits a web page, the web browser loads and processes its HTML, assets (images, videos, etc.), style sheets, and JavaScript code.

How Searching the Web Works

It’s the 21st century — who hasn’t turned to the internet to find a funny cat video or check the age of their favorite movie star? Let’s dissect what happens when you type a URL into a web browser’s address bar. URL stands for uniform resource locator (e.g., https://generalassemb.ly/education). It’s a unique identifier for a website that tells a browser the location from which to retrieve a page (in a way that’s readable to humans). In reality, it’s just a series of numbers called an Internet Protocol (IP) address (e.g., 100.12.160.42). Imagine that you’re sending a letter to your friend in Australia. They may have a street address or a P.O. box, but you must provide this information in order for your letter to be delivered, as well as your own address, so your friend knows who sent it. IP addresses offer the equivalent for sending and receiving online requests.

So, what are the components that make up a URL?

Protocol Host Path

You can see that the address starts with the protocol — HTTP, in this case. There are many different communication protocols, but HTTP is the standard for requesting and transmitting files on the internet. Given this URL, your web browser retrieves, interprets, and renders all of the assets associated with that resource: an HTML document, images, styles, and the website’s code.

The Most Popular Web Browsers

You’ve probably heard of different web browsing applications, each with their own unique features and functionalities. Most of them are free, and each has its own particular set of options for privacy, security, interface, shortcuts, etc. The goal of all browsers, however, is to simplify access to the web. Today’s most popular browsers include:

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Microsoft Edge

All of these browsers have a similar Developer Tools functionality. (Hint: Press “F12” on Windows and “option+command+J” on Mac). For instance, all support HTML element and style inspections. You can even “hack” the styles on any website by changing the CSS to your liking — not permanently, of course. The changes will only “live” until you reload the page. Additionally, when it comes to interaction with JavaScript, all browsers support “debugger” functionality, which allows you to “pause” your JavaScript code and investigate the values of its variables.

Each browser also comes with its unique set of features. For example, Firefox offers font and animation analysis tools that are particularly useful in web design. And Microsoft Edge separates errors, warnings, and messages, while other browsers don’t. What will be your browser of choice? I suggest getting familiar with Edge, Firefox, and Chrome.

Web Browsers at General Assembly

Whether on campus or online, all of General Assembly’s coding courses dive into the inner workings of web browsers and the World Wide Web. Start with the basics for free with Dash, learn the essentials on your own time in our mentor-guided, online HTML, CSS, & Web Design or JavaScript courses, or skill up on campus with part-time Front-End Web Development or JavaScript development courses. You can also embark on a career in the field with our full-time Web Development Immersive or Web Development Immersive Remote. No matter which path you choose, you’ll leave able to create websites from scratch and host them so they are accessible by browsers in the public domain.

Ask a Question About Our Coding Programs

Meet Our Expert

Kate Shishkina is a Web Development Immersive instructor at GA’s New York campus who got her start at GA as a student in the course. Because she has experienced this immersion herself, her teaching style is a mix of compassion and “tough love.” A Brooklyn College graduate in computer science, she believes that GA’s course should be the first step upon graduating with a CS degree. College focuses on theory, while GA offers fully hands-on practice.

“If you’re curious and passionate about web development and could spend hours learning about it, you’ll succeed in the field. We all use browsers every day, so everyone should have an idea of how they work.”

Kate Shishkina, Web Development Immersive instructor, GA New York

Heroku: Deploy, Scale, and Manage Applications Without Local Servers

By

Heroku is a platform as a service (PaaS) that enables developers to deploy, scale, and manage their applications without the need to set up and administer their own servers. It’s used at small startups and large-scale companies alike to get applications running on a server. Heroku supports many different languages and types of applications, from mobile apps to APIs and web apps.

Heroku manages many aspects of server administration, infrastructure, and development operations (DevOps), so that application developers can focus on what matters most to them: building their apps. Heroku handles many of the difficult parts of building and running your own web server, such as patching and upgrading systems, 24/7 operations and security, deploying applications, and scaling to meet demand.

A Brief History of Heroku and Its Rise in Popularity

Created in 2007, Heroku was one of the very first cloud applications, which means the entire service was available on its website, heroku.com, as opposed to the end-user having to access the service locally on one’s own company servers. Heroku provides a suite of tools for developers or companies of any size to quickly build and deploy their applications to the web, in a variety of languages. This leads to a faster feedback loop and time to market for applications.

Let’s say a developer has an application they want to publish to the web, like a two-player tic-tac-toe game or a shopping-list app. Before Heroku, developers had to configure a server from the ground up, which could take a few hours to a few days just to set up a basic webserver. This usually involved creating and managing many different pieces of software in a Unix operating system environment, deciding on hosting, software, and hardware. A developer also needed to manually increase or decrease application processes based on the demand for the application’s resources. This crucial DevOps role is inherently risky, time-consuming, and usually requires expertise across multiple domains, including scripting, code deployment, and a wide variety of open source tools and technologies. Heroku relieves much of this stress and workload.

Heroku’s cloud-based deployment platform allows application code to be bundled together with the necessary configuration settings, dependency description, and build requirements, and deployed to a virtual Unix machine called a slug. Scaling up or down — increasing or decreasing the capacity for the server to handle requests — is as easy as increasing the amount of running processes, called “dynos,” for your server. Heroku’s platform supports many of today’s most popular programming languages, including Ruby, Node.js, Java, Python, Clojure, Scala, Go, and PHP.

Recognizing that developers are critical to application and company success, Heroku optimizes for developer happiness. It focuses relentlessly on providing an outstanding experience for everyone involved in the development workflow. The Heroku dashboard and suite of tools allow developers whose main focus is usually on application development to manage the broad and complex responsibilities of DevOps. Today Heroku processes more than 13 billion requests a day and has more than 6 million apps on its platform, deployed by companies like IFTTT, Macy’s, teespring, and more.

Heroku also provides an ecosystem of more than 150 integrated applications for add-on features, some of the most popular being logging with Papertrail, caching with MemCachier, monitoring with New Relic, and database provisioning and management with Postgresql.

Heroku at General Assembly

General Assembly takes advantage of the Heroku platform to host Ruby, Ruby on Rails, and Node.js applications so that our Web Development Immersive and Web Development Immersive Remote developers can quickly build and deploy their work to the web. Throughout the course, developers learn how to deploy their applications to Heroku by setting up the Heroku toolbelt on their computers, integrating Heroku commands into their workflow, and managing deployed applications in the Heroku dashboard. By not requiring specialized DevOps experience to get a web app up and running, developers can get timely feedback on their apps and focus on learning what’s most important: how to develop software.

Ask a Question About Our Coding Programs

Meet Our Expert

Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When not coding, he enjoys cooking vegetarian food and biking around Rhode Island.

“Writing code is a craft as well as a creative outlet, and it’s not limited by industry. The discipline of creating software is useful to anyone, as it’s a way to think about problems and know how to technically solve them.”

Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence

How to Edit CSS Code for Visually Stunning, Responsive Website Design

By

If you’ve ever landed on a website with stunning visuals and layouts, there’s a good chance it was achieved with the help of a programming language called CSS.

CSS, which stands for Cascading Style Sheets, is the language that sets the appearance of a website, including its fonts, color, and layout. It is a companion to the HTML language: HTML provides the content of a website, and CSS enhances the styling of the HTML content. Besides being used to create visually engaging websites, CSS is often used to enhance the aesthetics of user interfaces for web and mobile applications.

You may also come across CSS in popular content management system platforms such as WordPress or Squarespace, where it comes pre-packaged as themes. This allows you to choose the look and feel of your website, be it a photography portfolio or an online clothing store. Familiarity with CSS will come in handy if you intend to customize your website on these platforms, as they often allow you to modify the appearance by editing the CSS code.

As a website is often treated as a representation of a company’s brand or image, it’s worth ensuring that your website’s presentation makes a lasting impression on your target audience, and helps it to stand out from competitors.

Learning CSS can be a lot of fun. You can see your stylings — such as changing a background from blue to yellow, or enlarging an image when your cursor goes over it — reflected instantly as you write the code.

In addition to determining a website’s visual layout, CSS is used to ensure that a website stays consistent when viewed from various devices, like a mobile phone or tablet. This is called responsive web design, and it goes hand in hand with front-end frameworks, such as Bootstrap, to allow us to rapidly create a responsive mobile-first layout. Working knowledge of CSS will help when applying the CSS classes that comes with these frameworks, or when making changes to the pre-defined styling and layout.

CSS at General Assembly

In General Assembly’s part-time Front-End Web Development (FEWD) course, which I teach at our Singapore campus, I walk students through the basics of HTML before embarking on CSS, as the two languages are used hand in hand. I provide an example of a finished website as well to allow students to see what they are working toward.

Throughout FEWD, our full-time Web Development Immersive course, and our online HTML, CSS & Web Design course, students learn how to write CSS syntax and link it effectively with HTML files. We also break down the most commonly used CSS properties, such as styling of text and background images. Students learn how to style multiple elements or a smaller group of elements through the use of classes, IDs, advanced selectors, and pseudo-selectors, and delve into creating layouts by using margins and paddings, floats, and positioning using flexbox.

By the end of these courses, students are equipped with a firm understanding of CSS and the ability to create a visually appealing, interactive website that responds to various mobile or tablet devices.

Ask a Question About Our Coding Programs

Meet Our Expert

Calvin Tan began his career as a visual designer, but pivoted to web development after attending General Assembly’s Web Development Immersive course in Singapore. He’s now a developer and designer specializing in front-end web development. He enjoys graphic design, coding, and imparting his knowledge of both to others.

“I try to put myself in the shoes of my students to understand areas they may struggle with. The most priceless moments for me are when the expression on my their faces go from ‘Huh?’ to ‘Oh!’ when they start to make sense of the information.”

– Calvin Tan, Front-End Web Development Instructor, General Assembly Singapore