coding Tag Archives - General Assembly Blog | Page 2

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

HTML for Web Development: Building the Bones of Your Website

By

Hypertext Markup Language, or HTML, is a programming language used to describe the structure of information on a web page. Together, HTML, CSS, and JavaScript make up the essential building blocks of websites, with CSS controlling a page’s appearance, and JavaScript programming its functionality. You can think of HTML as providing the bones of a web page, while CSS provides the skin, and JavaScript provides the brains.

A web page can contain headings, paragraphs, images, videos, and many other types of data. Front-end developers use HTML elements to specify what kind of information each item on a web page contains — for instance, the “p” element indicates a paragraph. Developers also write HTML code to specify how different items relate to one another in the overall structure of the page.

Every website you open in your browser, from social networks to music services, uses HTML. A look under the hood of any website would reveal HTML code providing structure for all the page’s components.

A look at the HTML code that structures General Assembly’s website.
A look at the HTML code that structures General Assembly’s website.

How HTML Works in a Web Page

HTML plays a couple of significant roles in a web page. First, we use the structure created by our HTML code to reference, enhance, and manipulate elements on a web page using CSS and JavaScript. For instance, you could use HTML to mark all of the headings on a web page, and then use CSS to specify the font, size, and color you want to apply to those headings to reflect your organization’s branding, or simply a visual design developed for the site. Second, HTML lets us indicate the roles of different elements to search engines and other services that index the content and summarize it for other users. For instance, marking the caption of an image with the “figcaption” element and enclosing the image and its caption in the “figure” element helps a search engine understand that these two pieces of content are related, and that the caption describes the associated image.

Learning HTML at General Assembly

Whether you want to land a job as a front-end or full-stack web developer, or just want to dip your toe into programming, HTML is a natural place to start. Learning HTML, along with CSS and basic JavaScript, provides you with the fundamental skills necessary to create your own interactive single-page website.

In GA’s part-time courses in Front-End Web Development and HTML, CSS & Web Design, and our career-changing, full-time Web Development Immersive program, you’ll get hands-on practice coding your own projects, from static personal and business websites to single-page applications like games and interactive photo galleries. These projects give you practice using basic HTML tags and structuring pages with different components, including headers, footers, sidebars, and navigation. You’ll also code CSS and JavaScript, and learn how to put all three together to build websites that implement modern standards and use best practices for front-end development.

Ask a Question About Our Coding Programs

Meet Our Expert

Sasha Vodnik is a front-end web developer and author who teaches Front-End Web Development and JavaScript Development at General Assembly’s San Francisco campus. He also writes books on HTML, CSS, and JavaScript and creates video courses through Lynda.com.

“I love meeting students from a wide variety of industries, with a whole spectrum of goals, from all over the world. I’m continually inspired by the thoughtful, creative projects they build in the course that showcase their new skills and unique vision.”

– Sasha Vodnik, Front-End Web Development Instructor, General Assembly San Francisco

JavaScript for Web Development: Building an Interactive Website

By

JavaScript is essential to nearly every action you take online, whether it’s entering credit card information, streaming videos and music, or interacting on social networks, just for starters. It’s the programming language used to make webpages interactive — and it’s perhaps the most widely used language because of it.

Developers use JavaScript to create a wide range of features, from simple user interface (UI) functionality to complex visual effects, including:

  • Interfaces like image carousels.
  • News feeds that continue to load new information as you scroll through them.
  • The ability to submit information entered into a Google Doc, survey form, or online payment system.

Features like these are part of a website’s front-end code, which is responsible for what users see and interact with. Front-end JavaScript code runs in a user’s browser, where it’s integrated with the HTML code that makes up a page’s structure and the CSS code that specifies how each of the page’s elements should be displayed.

But not all JavaScript is written for the front end. Developers can also use it for a website’s back end, which is executed on servers, or specialized computers that run websites behind the scenes.

JavaScript allows developers to perform many basic tasks common to a wide variety of programming languages. For instance, conditional logic allows a developer to specify that a section of code should be executed only if a certain condition is met. Imagine you were creating a webpage that accessed weather information for the user’s current location, and then displayed an icon representing the current temperature. You might use a conditional statement to specify that if the temperature is below freezing, the screen should display an image of an icicle.

Conditional Statement

JavaScript developers can organize their code a couple different ways. One approach, known as functional programming, organizes code into functions, which are sets of JavaScript statements that take values as input and return results. Another technique, known as object-oriented programming, groups values and code together into collections known as objects.

A basic familiarity with JavaScript gives you a strong foundation for building applications with popular frameworks such as React, Angular, and Vue, and libraries like jQuery. Frameworks and libraries are pre-written collections of JavaScript code that make it easier for you to build your own applications. While using a framework or a library can allow you to program without needing to write the code for some tasks yourself, a foundation in JavaScript coding without frameworks or libraries — known as vanilla JavaScript — can be a great asset in customizing your apps and debugging them when things aren’t working exactly as you expect.

JavaScript at General Assembly

At General Assembly, JavaScript is a core part of all of our web development courses. It’s one of the central technologies covered in our full-time Web Development Immersive and Web Development Immersive Remote programs, in which students prepare for a career in full-stack web development. You can focus exclusively on the language in our part-time JavaScript Development course (also available online), or get a basic introduction to how JavaScript fits with HTML and CSS in our part-time Front-End Web Development course.

GA instructors help students build JavaScript skills step by step, sharing knowledge and best practices they’ve accumulated as developers in the field. In addition to in-class exercises and homework, students also apply their new knowledge by building projects that make use of all the tools they’ve learned. Students leave with portfolio-worthy projects that demonstrate their new skills, as well as next steps for building apps with JavaScript and learning more about the language.

Ask a Question About Our Coding Programs

Meet Our Expert

Sasha Vodnik is a front-end web developer and author who teaches Front-End Web Development and JavaScript Development at General Assembly’s San Francisco campus. He also writes books on HTML, CSS, and JavaScript and creates video courses through LinkedIn Learning.

“I aim to help students recognize what they already know and connect it to what they’re trying to do. At GA, we teach how to troubleshoot and find answers so you can grow as a developer long after you leave the classroom.”

– Sasha Vodnik, JavaScript Development Instructor, General Assembly San Francisco

Full-Stack Deconstructed

By

Full-Stack-Web-Development

Not long after I changed careers to become a full-stack web developer, I received an odd Facebook message from a family friend. “I visited your website,” he wrote, “and I’m still trying to figure out what pancakes have to do with websites.”

Clever…or clueless? I’m still unsure. But one thing is certain: IHOP needs to move over; the term “full stack” isn’t about pancakes anymore.

Continue reading

Getting Started With Front-End Web Development

By

learn to code

So, you want to learn to code? Awesome! Knowing how to code can help you level up in your current role, open new career opportunities, and empower you to make your app or website ideas come to life. But where should you start?

Although hotly contested among developers, most novice coders begin their education by learning the basics of front-end web development, or the client-facing side of web development. The front end involves what the end user sees, like the design/appearance of the web page.

In order to become a front-end developer, there are three “languages” you need to master: HTML, CSS, and JavaScript, or as I like to call them, “The Holy Trinity.”

Below, I explain the difference between these three languages, and how they work in concert to get a simple website up and running.

Continue reading

6 Surprising Celebrities Who Know How to Code

By

Photo source: Google Creative Commons

Photo source: Google Creative Commons

Over the past few years, students and workers across the United States (and the world) have heard the battle cry to learn code. With over 120,000 open technology jobs  in the U.S. alone, skilled professionals are needed to take businesses and technology to the next level. Some organizations, such as Code.org, have begun enlisting celebrities to learn code—using their influence to encourage others, particularly minorities in tech, to follow their lead.

While some celebs have unexpected backgrounds in technology, others are learning code for the first time. The range of individuals advocating for diversity in computing spans industries and age brackets—and some of them might surprise you.

Continue reading

The DIY Computer: A Discussion with Alex Klein, Founder of Kano

By

Alex Klein was an imaginative kid who didn’t know what he wanted to do with his life. He expressed his creativity through acting, art, and finally, non-fiction writing before entering grad school at Cambridge to study philosophy and politics.

Continue reading