MIT | The Blog Pros

December 11, 2023

Building Components For Consumption, Not Complexity (Part 1)

Design systems are on the tip of every designer’s tongue, but the narrative in the industry mainly focuses on why you need a design system and its importance rather than the reality of endless maintenance and internal politics. The truth is that design teams spend years creating these systems only to find out that few people adhere to the guidelines or stay within the “guardrails.”

I’ve been fortunate with Figma to host and run workshops at various conferences across Europe that center on one very specific aspect of product design: components.

I love components! They are the start, the end, the hair-tearing-out middle, the “building blocks,” and the foundation — the everything within every great product design organization.

The reason they are so important to me is because, firstly, who doesn’t like efficiency? Second, and more importantly, they are proven to increase the time-to-delivery from design to engineering, and here comes a buzzword — they offer a route to return on investment (ROI) within design teams. This is becoming increasingly important in a tough hiring market. So what’s not to love?

Note: You may be interested in watching Matt Gottschalk’s talk from Figma’s Config 2023 conference, which was dedicated to the topic of ROI within small design teams. The talk explored how small design teams can use design systems and design operations to help designers have the right environment for them to deliver better, more impactful results.

Like in most things, a solution to this is education and communication. If you aren’t comfortable with modifications on styles, you may want to set up your components in such a way as to indicate this. For example, using emojis in layers is the quickest way to say, “Hey, please don’t edit this!” or “You can edit this!”.

Or, consider shipping out components that are named for intention. Would separating components entirely (components named for intention) work better? An Input/Error, rather than a customizable Input?

When considering the emoji name approach, here’s a set that I’ve relied on in the past:

Components
- 🚨 Deprecated
- 🟠 Not ready
Component instances
- 🔐️ Not editable
- ✍️ Overwritten name
Layers
- ✍️ Editable
- 🚨 Important
Component properties
- ◈ Type
- ✍️ Edit text
- 🔁️ Swap instance
- 🔘 Toggle
- ←️ Left
- →️ Right
- 🖱 Interaction
- 📈 Data
- ↔️ Size

Flexible: Responsive Design

Ahh, our old friend, responsive design (RWD)!

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints and design for this flexibility. But first, we must accept the ebb and flow of things.”

— John Allsopp, “A Dao of Web Design”

As it stands, there is no native solution within Figma to create fully responsive components. What I mean by “fully responsive” is that layout directions and contents change according to their breakpoint.

Here’s an example:

Note: It is technically possible to achieve this example now with auto layout wrapping and min/max widths on your elements, but this does not mean that you can build fully responsive components. Instead, you will likely end up in a magic numbers soup with a lengthy list of variables for your min and max widths!

With this limitation in mind, we may want to reconsider goals around responsive design within our component libraries. This may take the form of adapting their structure by introducing… more components! Do we want to be able to ship one component that changes from mobile all the way up to the desktop, or would it be easier to use, find, and customize separate components for each distinct breakpoint?

“Despite the fun sounding name, magic numbers are a bad thing. It is an old school term for ‘unnamed numerical constant,’ as in, just some numbers put into the code that are probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what they are for. Magic numbers in CSS refer to values which ‘work’ under some circumstances but are frail and prone to break when those circumstances change.”

— Chris Coyier, “Magic Numbers in CSS”

Never be hesitant to create more components if there is a likelihood that adoption will increase.

Then, what does this look like within Figma? We have a few options, but first, we need to ask ourselves a few questions:

Does the team design for various screen sizes/dimensions? E.g., mobile and desktop web.
Does the development team build for a specific platform/screen size(s)? E.g., an iOS team.
Do you build apps aligning with native style guides? E.g., Material D esign.

The answers to these questions will help us determine how we should structure our components and, more importantly, what our library structures will look like.

If the answer to questions 1. (Design for various screen sizes/dimensions?) and 2. (build for a specific platform/screen sizes?) is “No,” and to 3. (Build apps aligning with native style guides?) is “Yes,” to me, this means that we should split out components into separate component library files. We don’t want to enter into a world where an iOS component is accidentally added to a web design and pushed to production! This becomes increasingly common if we share component naming conventions across different platforms.

If the answer to question 3. (“Do we build native apps, using their design guidelines?”) is “Yes,” this definitely requires a separate component library for the platform-specific styles or components. You may want to investigate an option where you have a global set of styles and components used on every platform and then a more localized set for when designing on your native platforms.

The example below, with an example mapping of library files for an iOS design project, is inspired by my Figma community file (“Simple design system structure”), which I created to help you set up your design system more easily across different platforms.

→ Get “Simple design system structure” [FigJam file / Luis Ouriach, CC-BY license]

If you are designing across multiple platforms in a device-agnostic manner, you can bring components a lot closer together! If you aren’t currently working with an agnostic codebase, it might be worth checking Mitosis (“Write components once, run everywhere”).

A common challenge among development teams is using the same language; while one sub-team may be using Vue, another perhaps is using React, causing redundant work and forcing you to create shared components twice. In “Create reusable components with Mitosis and Builder.io,” Alex Merced explores in detail Mitosis, a free tool developed under the MIT license. Mitosis can compile code to standard JavaScript code in addition to frameworks and libraries such as Angular, React, and Vue, allowing you to create reusable components with more ease and speed.

Using A Variant

This may look like a variant set, with a specific property for device/size/platform added. For example,

As you can imagine, as those components increase in complexity (with different states added, for example), this can become unwieldy. Combining them into the same variant is useful for a smaller system, but across larger teams, I would recommend splitting them up.

Using Sections

You could consider grouping your components into different sections for each platform/device breakpoint. The approach would be the following:

Use pages within Figma libraries to organize components.
Within the pages, group each breakpoint into a section. This is titled by the breakpoint.
Name the component by its semantic, discoverable name.

There is a caveat here! I’m sure you’re wondering: “But couldn’t variables handle these breakpoints, removing the need for different components?” The answer, as always, is that it’s down to your specific implementation and adoption of the system.

If your designer and developer colleagues are comfortable working within the variable workflow, you may be able to consolidate them! If not, we may be better served with many components.

Additionally, the split-component approach allows you to handle components in a structurally different manner across these different sizes — something that is not currently possible with variants.

Auto Layout

Regardless of how we organize the components, responsiveness can be pushed very far with the use of auto layout at every level of our screens. Although it can be intimidating at first, the auto layout makes components work similarly to how they would be structured in HTML and CSS, moving design and engineering teams closer together.

Let’s take a simple example: a generic input field. In your main component, you’re likely to have a text label within it with the text, e.g., “Label.” Generics are useful! It means that we can swap this content to be specific to our needs at an instance level.

Now, let’s say you insert this component into your design and swap that “Label” content for a label that reads “Email address.” This is our override; so far, so good.

However, if you then decide to change your main component structurally, you put that label at risk of losing its overrides. As an example of a structural change, your original “Placeholder” now becomes a “Label” above the input field. Instinctively, this may mean creating a new text element for the label. But! Should you try this, you are losing the mapping between your original text element and the new one.

This could potentially break your existing signed-off designs. Even though this seems like it could work — layer names are a great way to preserve overrides — they are separate elements, and Figma won’t know how to transfer that override to the new element.

At this point, introducing component properties can save us from this trouble. I’d recommend adding a text component property to all of your text layers in order to try to prevent any loss of data across the design files in which we are using the component.

As I showed before, I find adding a writing emoji (✍️) to the property name is a nice way to keep our component properties panel as scannable as possible.

Content Specificity

A decision then needs to be made about how specific the default content is within the component.

And this is where we should ask ourselves a question: do we need to change this content frequently? If the answer is yes, abstracting specific textual values from components means that they can be interpreted more widely. It’s a little bit of reverse psychology, but a text layer reading “[placeholder]” would prompt a designer to change it to their local use case.

If the answer is no, we will bake the fixed value we want into the component. Going back to our input field example, we might set the default label value to be “Email address” instead of “placeholder.” Or, we could create an entirely new email address component! (This is a call we’d need to make based on anticipated/recorded usage of the component.)

Imagery / Media

When setting up a content system within Figma, a few different questions immediately pop up:

How do you use specific media for specific components?
How do you fix aspect ratios for media?

Within Figma, an image is essentially a fill within a shape rather than its own content type, and this impacts how we manage that media. There are two ways to do this:

Using styles.
Using component sets (variants).

Before we look at styles and components, though, let’s take a look at the format that all assets within Figma could take.

Practically, I would advise setting up your media assets as their own library within Figma, potentially even setting up a few libraries if you work across various products/brands with different approaches to media.

For example, the imagery your product team uses within design files and marketing materials is likely to be very different, so we would look to set these up as different Figma libraries. A designer using those assets would toggle “on” the library they need to create an asset for a specific intention, keeping the right media in the right place.

Because this media is the same as any other style or component within Figma, we can use slash naming conventions to group types of media within the names.

Domain examples:

Company website,
Product,
Marketing,
Sub brand/s.

Media types:

Logo,
Icon,
Illustration,
Image,
Video.

Example names, using the format:

Figma.com/Logo/Figma,
Figma.com/Icon/Variable,
Figma.com/Illustration/Components,
Figma.com/Image/Office,
Designsystems.com/Logo/Stripe,
Designsystems.com/Icon/Hamburger,
Designsystems.com/Illustration/Orbs,
Designsystems.com/Image/Modular grid.

These are split into:

Library: Figma.com or Designsystems.com,
Media type: Illustration or Logo,
Media name: e.g., Component libraries, Iconography.

Although I’m using images for the examples here, it works with video assets, too! This means we can move in the direction of effectively using Figma like a mini DAM (digital asset manager) and iterate fast on designs using brand-approved media assets, rather than relying on dummy content.

“A digital asset management solution is a software solution that provides a systematic approach to efficiently storing, organizing, managing, retrieving, and distributing an organization’s digital assets. DAM functionality helps many organizations create a centralized place where they can access their media assets.”

— IBM, “What is digital asset management?”

Using Fill Styles

Fill styles aren’t just for color! We can use them for images, videos, and even illustrations if we want to. It’s worth bearing in mind that because of the flexible nature of fills, you may want to consider working within fixed sizes or aspect ratios to ensure cropping is kept to a minimum.

Figma’s redline “snapping” feature lets us know when the original asset’s aspect ratio is being respected as we resize. It’s a pretty cool trick!

You can get the above example from Figma’s community:

→ “Fixed aspect ratio images with variants” [Figma file / Luis Ouriach, CC-BY license]

For this world, though, I would advise against trying to hack Figma into setting up fully responsive images. Instead, I’d recommend working with a predefined fixed set of sizes in a component set. This may sound like a limitation, but I strongly believe that the more time we spend inside Figma, the further we get from the production environment. “Can we test this in the actual product?” is a question we should be asking ourselves frequently.

Practically, this looks like creating a component set where we set the fixed sizes along one dimension and the aspect ratio along the other. Creating a matrix like this means we can use the Component Properties panel to toggle between sizes and aspect ratios, preserving the media inside the component.

This can be used in tandem with a separate set of components specifically for images. If we combine this with Figma’s “nested instances” feature within variant components, we can “surface” all the preferred images from our component set within every instance at the aspect ratios needed!

Arrangement

This is the hardest thing to predict when we think through the usability of customizable components. The simplest example here is our old enemy: the form. Instinctively, we may create a complete form in a component library and publish it to the team. This makes sense!

The issue is that when a designer working on a particular project requires a rearrangement of that structure, we are kind of in trouble.

This problem extends to almost all component groups that require manipulation. Tables, menus, lists, forms, navigation… we will hit this wall frequently. This is where I’d like to introduce the concept of fixed vs flexible content within components, which should help to address the future problems of a world where we put the DRY (don’t repeat yourself) principles at risk.

As design system maintainers, we naturally want to keep components as composable as possible. How can this one component be used in lots of different ways without requiring us to ship an infinite number of variations? This is the central theme of the DRY principle but can be challenging in design tools because of the lack of component order management within the main components.

As a result, we often end up in a world where we build, maintain, and ship endless variations of the same component in an attempt to keep up with snowflake implementations of our core component.

“‘When should we make something a component?’ is a question I’ve been fielding for years. My strong answer: right from the start. Creating things with a component-based mindset right out the gate saves countless hours — everything is a component!”

— Brad Frost, “Design system components, recipes, and snowflakes”

For example, the form we spoke about before could be one for:

Logging in;
Registering;
Signing up to the newsletter;
Adding billing information.

These are all clearly forms that require different data points and functionality from an engineering perspective, but they will most likely share common design foundations, e.g., padding, margins, headings, labels, and input field designs. The question then becomes, “How can we reduce repetition whilst also encouraging combinatorial design?”

A concept that has been long-used in the developer world and loosely agreed upon in the design community is termed “component slots.” This approach allows the design system maintainers to ship component containers with agreed properties — sizing, padding, and styles — whilst allowing for a flexible arrangement of components inside it.

Taking our previous form examples, we can then abstract the content — login form, register form, newsletter form, and billing information form — and provide a much simpler shell component from the library. The designers using this shell (let’s call it a “form/wrapper”) will then build their forms locally and replace the slot component inside the shell with this new custom main component.

This is best explained visually:

Does this custom component need to live in multiple files? If yes, we move it to the next level up, either team-level libraries or global, if working on a smaller system. If not, we can comfortably keep that component local to the specific Figma file on a page (I like to call it “❖ Components”).

Important: For this premise to really work, we must employ auto layout at every level, with no exceptions!

Conclusion

That was a lot to process (over five thousand words, actually), and I think it‘s time for us to stop staring at the computer screen and take a little break before walking through the next set of principles.

Go grab a drink or take some rest, then meet me in Part 2, where you will learn even more about the adoptable, indexable, logical, and specific components.

May 11, 2023

14 Best WordPress Development Agencies (2023)

Are you looking for a WordPress development agency to customize your website?

WordPress development agencies will put together a team of coding and design specialists to customize your site, such as creating a custom theme or plugin. They may also offer services like WordPress migration and maintenance, along with digital marketing.

In this article, we will share some of the best WordPress development agencies that can help create the high-quality, custom website you are looking for.

Why Use a WordPress Development Agency?

One of the best things about WordPress is that it’s easy to use. Most people won’t need to hire a designer or developer to create a website.

However, once your site starts making money, you might consider building a custom website, custom WordPress theme, or custom plugins. In that case, you will need to find a developer to help you get the job done.

You could hire a freelance developer to create the code you need. But for larger jobs, it’s often better to use a WordPress development agency. This is a team of professionals who combine their expertise to offer a mix of services.

These services can include website development and design, plugin and theme development, website maintenance, WordPress migration, consulting, marketing, and more.

Of course, hiring a WordPress development agency will cost more than a freelancer, so they are typically used for enterprise and large-scale websites. Depending on your needs, you may want to get quotes from several theme developers, web designers, and agencies.

If you want to make the most of the speed and security of WordPress.com’s VIP managed hosting services, then you should also look for an agency that is a WordPress.com VIP partner.

With that being said, let’s take a look at some of the best WordPress development agencies you can hire to take your website to the next level.

1. 10up

10up is a web design and consulting firm with decades of experience in open-source platforms like WordPress.

Their services include website design, custom plugin development, and website optimization.

They also contribute hours of development to the WordPress.org project by submitting patches and employing dedicated staff to work on it.

10up has also developed 25 free plugins, including MPL-Publisher, which can help you turn your blog posts into an ebook. They have contributed to the core jQuery project and sponsored jQuery Foundation by supporting their website.

10up is also one of the featured WordPress.com VIP Gold partners. The company has an impressive list of clients with brands like TechCrunch, WP Engine, and GoDaddy, along with organizations like the World Economic Forum.

2. rtCamp

rtCamp is a top global design and development agency that specializes in WordPress solutions at an enterprise scale.

Their services include custom theme and plugin development, WooCommerce development, and more. They can also migrate your website from another platform to WordPress.

They have created several free plugins and themes like rtMoto and rtPanel for the community.

Like 10up, they are WordPress.com VIP Gold partners. Their clients include Fortune 500 companies, government agencies, and household brands like General Electric.

3. Human Made

Human Made is a UK-based WordPress design and development agency that provides enterprise-grade WordPress solutions. They are also an official WordPress.com VIP partner.

Their services include custom WordPress design and development, plugin development, theme development, and hosting.

They give back to the WordPress community by sponsoring 12 contributors to various open-source projects.

They also offer several free and paid WordPress plugins, including WP Remote, BackupWordPress, and WordPress Menu Exporter.

They specialize in enterprise-scale development for global brands like News UK, USA Today, TechCrunch, Sony, PayPal, Skype, Airbnb, and many more.

4. Multidots

Multidots is an award-winning WordPress development agency with over a decade of experience. They specialize in helping businesses publish content at an enterprise scale.

Their services include custom plugin development, theme development, WordPress implementation, WordPress migration, and website optimization.

They are the creators of MultiCollab, a plugin that allows you to add collaboration to the WordPress block editor, similar to Google Docs. They also sponsor 7 contributors to the WordPress core and are WordPress.com VIP Gold partners.

They have helped enterprises like Ask Media Group, PepsiCo, MIT, Warner Bros, and Ford grow their business websites. They also created a centralized sneaker data repository for Sneaker News.

5. Fixel

Fixel is a small and versatile design agency based in Oregon. The company was founded in 2008 when a group of freelancers decided to accomplish more by combining their skills.

Their services include web design and development, as well as branding. They can build quality websites quickly using the WordPress block editor, including eCommerce and membership sites.

Since they are a small agency, you will work directly with the team instead of going through managers. This setup streamlines the process and helps you achieve your goals quickly.

Their recent clients include LegitScript, Lia Griffith, and Better Fellow.

6. Modern Tribe

Modern Tribe WordPress Development Agency

Modern Tribe is a WordPress design and development agency with a twist. They are a collaborative organization of freelancers and experts. Overall, they have 72 talented teammates in 5 countries and 45 cities.

Modern Tribe has built several hundred websites, and they usually work on more than 20 projects simultaneously. The company offers a wide range of services, including WordPress expertise, strategy, user experience design, and more.

They are the creators of The Events Calendar plugin, which is a popular event management plugin for WordPress, with over 15 million downloads. They also contribute to the BigCommerce for WordPress plugin.

They have designed websites and built software for Fortune 500 companies, government institutions, as well as startup companies. Their clients include the New York Times, Harvard, eBay, Mozilla, MTV, and ESPN.

7. DevriX

DevriX is a European technical WordPress development agency. They focus on WordPress maintenance, customized digital solutions, and ongoing development.

They provide custom WordPress plugin development, website redesign, and website maintenance services. They focus on delivering scalable and secure WordPress websites within many industries, including healthcare, finance, and eCommerce.

DevriX also regularly contributes to the core WordPress platform. In fact, they have 9 WordPress core contributors on the team. They have also contributed 14 useful free plugins, including DX Out of Date and DX Unanswered Comments.

Their clients include the BBC, Forbes, Inc., and Yahoo!

8. WebFX

WebFX is a custom WordPress development agency that provides personalized website development services to businesses. They also focus on search engine optimization.

They create WordPress websites that are responsive, mobile-friendly, and SEO-optimized. They have a track record of delivering superior WordPress development services with guaranteed results.

Their clients include Hilton, Verizon, Fujifilm, the YMCA, Rowan University, and Solar Alliance.

9. Noesis.tech

Noesis.tech WordPress Development Agency

Noesis.tech is a leading WordPress development agency that offers custom WordPress solutions for businesses of all sizes.

Their services include website design, custom plugin development, and website optimization. They lead the way in innovating across many industries, including eCommerce, ePublishing, eLearning, and eCommunity.

They are WordPress.com VIP Top Silver partners, and their clients include Colgate, Netflix, Kay Beauty, Sharekhan, and The Bombay Canteen.

10. The Code Company

The Code Company WordPress Development Agency

The Code Company is an award-winning agency that offers WordPress development services with a specialization in digital publishing.

Their services include custom WordPress theme development, eCommerce development, and website optimization. They also offer WordPress development and migration, complex integrations and custom functionality, and media and publishing consulting.

They work with media companies and digital publishers of all sizes, from small startups to large global organizations. Their clients include eBay Ads, California Sun, The Dispatch, Mumbrella, and Pedestrian Group.

11. Alley

Alley is a highly-respected WordPress agency that specializes in creating custom digital experiences for publishers, nonprofit institutions, museums, and brands.

Their services include custom WordPress development, website optimization, and editorial workflow systems.

They are WordPress.com VIP partners and have published several new open-source packages for PHP, JavaScript, and WordPress developers.

Alley has worked with some of the biggest names in media and publishing, including The New Yorker and National Geographic.

12. Americaneagle.com

Americaneagle.com WordPress Development Agency

Americaneagle.com is a reputable WordPress development agency and WordPress.com VIP partner that provides a wide range of web services to businesses of all sizes.

They offer many different services, including custom WordPress design and development, eCommerce development, complex integrations, WordPress migrations, and digital marketing.

They actively contribute to the WordPress community by sponsoring WordCamp events. They also contribute to the WordPress core code, themes, and plugins through their team of experienced WordPress developers.

They are known for creating award-winning websites for businesses of all sizes, from small startups to Fortune 500 companies. Their clients include WeatherTech, the NYC Department of Education, Werner, and State Electric Supply Co.

13. XWP

XWP is a full-service WordPress website development company based in Australia. They can build and design a new website with all the features you need. Alternatively, they can customize your old site existing or personalized themes and plugins.

They are experts in developing custom websites, themes, and plugins. They can also migrate your current website from another platform to WordPress.

In addition to working with clients, they contribute to WordPress.org, including regular contributions to WordPress core releases. They have also contributed to many free WordPress plugins.

XWP is a WordPress.com VIP featured partner agency with a global team of WordPress experts. Their clients include Pantheon, Rolling Stone, Jetpack, Unsplash, GoDaddy, and Cloudinary.

14. WPExperts

WPExperts is a Pakistani digital agency that specializes in WordPress development services. They are WordPress.com VIP partners and provide customized WordPress solutions to businesses of all sizes.

Their services include custom theme and plugin development, WordPress migration and maintenance, and digital marketing. They are certified developers for WooCommerce, BuddyPress, LearnDash, AffiliateWP, Easy Digital Downloads, and more.

WPExperts’ clients come from a variety of industries, including eCommerce, healthcare, and education. Some of their clients include Zillow, Square, Stripe, the University of Southern California, and Sony Pictures.

Which Is the Best WordPress Agency?

In our opinion, the best WordPress development agencies are 10up, rtCamp, Human Made, Multidots, and Fixel.

If you need a website built quickly, then the best WordPress agency is Fixel. They have a small and responsive team who can quickly build a website with a Gutenberg layout.

On the other hand, if you need someone to develop your specific custom ideas, then 10up and Human Made are great choices. They have decades of experience in creating custom websites and plugins and have worked with some of the world’s biggest brands.

But what if you need a complex WordPress project like a large eCommerce or eLearning website? In that case, we recommend rtCamp and Multidots because they specialize in helping enterprise-level customers on a global scale.

We hope this tutorial helped you pick the best WordPress development agency for your website. You may also want to see our guide on how to increase your blog traffic or our expert picks for the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 14 Best WordPress Development Agencies (2023) first appeared on WPBeginner.

December 12, 2022

The Future Of Design: Human-Powered Or AI-Driven?

This article is a sponsored by STUDIO

For years, reports have been warning of technology taking away jobs, particularly in fields like food preparation, truck driving, and warehouse operations. These jobs are often considered “blue-collar” and involve repetitive manual labor. However, many in the creative community believed their careers were immune to automation. After all, a designer’s craft is anything but monotonous. While computers can crunch numbers quickly, how are they going to be able to design?

Then something surprising happened: Artificial intelligence (AI) made inroads into the design. In product design, Mattel is using AI technology for product design. In interior design, designers are creating mockups with AI that can detect floors, walls, and furniture and change them. In graphic design, Nestle used an AI-retouched Vermeer painting in marketing to sell one of its yogurt brands. Advertising agency BBDO is experimenting with producing materials with Stable Diffusion.

But how about fields with a distinctly defined medium, like web design? Turning the focus to web design, this article will provide a brief history of AI in web design, explore its current implications for creativity, and offer suggestions for how web designers can stay ahead of the curve.

The Road Leading Here

AI’s capabilities outlined are a result of development dating fifty years ago and have rapidly accelerated in recent years with advanced computation models, additional training data that goes into improving the models, and improved computing power to run the models.

In 1950, Alan Turing, known as the Father of modern computer science, asked the famous question: Can machines think? Research began by attempting to teach machines human knowledge with declarative rules, which eventually proved to be difficult given the many implicit rules in our daily lives.

In the 90s, the above knowledge-feeding approach transitioned to a data-driven approach. Scientists began creating programs for computers to learn from large amounts of data with neural network architectures, much as how a human brain functions. This shift accelerated progress, producing breakthroughs, including IBM’s Deep Blue beating the world champion at chess in 1997, and Google Brain’s deep neural network learning to discover and categorize objects.

Recently, advancements in neural network model sophistication, data availability, and computing power further accelerated machines’ capabilities. In 2014, Ian Goodfellow created the first generative adversarial neural network, which allowed machines to generate new data with the same statistics as the original data set. This discovery readies the stage for AI models like DALL·E 2, StableDiffusion, and MidJourney in 2022, which demonstrate original creations abilities outlined at the beginning of the article.

Next, we will explore the implications of these technologies for web designers.

Today’s Implications

Today, designers and clients typically go through six stages together before arriving at a new website. The term “client” is used loosely and can refer to inter-departmental teams working on in-house websites or the individual responsible for building a website on their own.

Forming
The designer works with the client to assess the context for a website design.
Defining
The designer extracts the complete set of requirements and drafts a project plan to meet expectations.
Ideating
The designer generates tailored ideas meeting the requirements.
Socializing
The designer presents the ideas to the client and supports in choosing one to proceed.
Implementing
The designer creates high-fidelity designs, which are then turned into code for deploying.

In order to better understand the impact of AI, we will break down the six stages of the web design process and examine the specific activities involved. Using the latest academic research and deployment examples, we will assess AI’s theoretical capabilities to perform activities in each stage. Our team will also create a webpage with AI technologies that everyone has access to today and compare it with the manual process for a practical perspective.

Forming

Forming calls for the designer to inquire about the unique instance, explore ambiguous perspectives, and ignite stakeholder enthusiasm.

Inquires unique instance: Undemonstrated capacity.
When taking on a new client, it’s crucial to evaluate their unique context and determine whether web design is the right solution to meet their business goals. However, current AI models often struggle with analyzing subjects that aren’t included in their training data sets. With it being impossible to pre-collect comprehensive data on every business, it’s clear that current AI models lack the ability to be inquisitive about each unique instance.
Explores ambiguous perspectives: Undemonstrated capacity.
At the beginning of the engagement, it is essential to consider multiple perspectives and use that information to guide exploration. For example, a designer might learn about the emotional roots of a client’s brand and use that knowledge to inform the website redesign. While AI models from institutions like MIT and Microsoft have shown early promise in recognizing abstract concepts and understanding emotions, they still lack the ability to fully adopt human perspectives. As a recent article from Harvard Business Review pointed out, empathy is still a key missing ingredient in today’s AI models.
Ignites stakeholder enthusiasm: Undemonstrated capacity.
In order to set up a project for success, both the client and designer must be enthusiastic and committed to seeing it through to completion. While AI has shown potential in creating copy that resonates with consumers and motivates them to make a purchase, it remains unproven when it comes to sparking motivation for long-term business engagements that require sustained effort and input.

The AI Experiment

Designers
In preparation for a product launch, our designers evaluated the different launch approaches and decided to build a landing page. They intuitively decided to focus on nostalgic emotions because of the emotional connection many designers have with their tools. The team worked closely with product managers to get them excited.

AI
For the purpose of this article, the design team also attempted to use AI for the same tasks. General conversational models like ChatGPT were unable to diagnose a website’s necessity for us and only offered generic advice. When it came to generating early directions, models mostly produced results that skewed towards functional differentiation, failing to consider empathy and emotions that could make designers and stakeholders enthusiastic.

Defining

Defining calls for the designer to collect detailed requirements, set expectations, and draft a project plan.

Collects requirements: Theoretical capacity
To ensure that all detailed requirements are collected, clients should be encouraged to verbalize their needs in terms of technical specifications, page count, and launch dates. AI models are now capable of performing these requirement-collection tasks. Thanks to examples of human exchanges fed to the models, Natural Language Processing (NLP) and Natural Language Understanding (NLU) have enabled AI to parse, understand, and respond to inputs. One of the latest models, OpenAI’s ChatGPT, can ask for additional context, answer follow-up questions, and reject inappropriate requests. AI models are already being deployed for customer service and have shown positive results in terms of trust and satisfaction.
Aligns expectations: Theoretical capacity
The client and designer should align on criteria such as acceptance standards and future communication schedules. To help facilitate this alignment, AI models are now capable of handling negotiations autonomously. In academia, research from Meta (formerly Facebook) shows how AI models can use simulation and prediction to complete negotiations on their own. In the business world, companies like Pactum are helping global retailers secure the best possible terms in B2B purchases with their proprietary AI models.
Drafts project plan: Theoretical capacity
To ensure that a project stays on track, it’s important for the designer to establish milestones and deadlines. AI models are now capable of estimating task durations and sequencing activities in a project. In 2017, researchers demonstrated the use of a machine learning algorithm called Support Vector Machine for accurate forecasting of project timelines. Further research has also established the use of Artificial Neural Networks for defining task relationships and creating work breakdown structure (WBS) charts.

The AI Experiment

Designers
Designers collected requirements from the product team using a tried-and-true questionnaire. The landing page needs to match the product launch date, so the teams chatted about the scope. After some frustrating back-and-forth where both teams accused the other of not having a clue, they finally came to a mutual agreement on a project plan.

AI
Designers tried the same with ChatGPT. Designers have AI role-play as the design team to collect requirements from the product team. AI performed admirably, even inspiring the team to add new items to their questionnaire. Designers then asked it to create a project plan while feeding it the same concerns received from the product team. Though the designers did not expect to use the produced schedule as-is, as factors like the team’s current workload were not considered, they still thought it performed reasonably well.

Ideating

Ideating calls for the designer to develop ideas relevant to previously defined criteria, ensure they are novel to contribute to the client’s differentiation and ensure they are of value to support the client’s business outcomes.

Develops relevant ideas: Theoretical capacity
Ideas generated should align with consensus from earlier stages. Today’s AI models, like OpenAI’s DALL·E 2, can generate output that aligns with prompt criteria by learning the relationship between prompts and outputs through training data. This allows the AI to produce design ideas, including for UI design, that reflect the prompt criteria.
Ensures novelty: Theoretical capacity
Ideas generated should offer fresh impressions and not a mere copy of existing executions. Today’s AI models can generate novel output using diffusion techniques. By scrambling and reassembling learned data in new ways, AI can create new data that resembles the learned data. This allows the AI to combine aspects of what it has learned in order to generate new ideas, similar to how humans combine known concepts to create new ideas. Imagen Video by Google, Make-a-Video by Meta, MidJourney, and Stable Diffusion are all examples of how AI models can generate completely new output.
Ensures value-add: Theoretical capacity
Ideas generated should offer value-add to the client. AI models can compete with or surpass humans in this area thanks to their ability to learn from large amounts of data and their unmatched computational power for identifying patterns. This makes AI a strong candidate for inspiring, deriving, and supercharging ideas, providing value that may be difficult for humans to achieve on their own alone.

The AI Experiment

Designers
Designers brainstormed a couple of ideas for the hero based on “nostalgia” directions discussed in earlier stages.

AI
Next, designers tried to put ChatGPT to the test to generate design ideas. They were positively surprised at the “wizard” and “time machine” approaches. They then turned to DALL·E 2 to generate visuals. Obviously, some additional work in UI design tools is still necessary before the ideas can be presented. See the samples generated below.

Socializing

Socializing calls for the designer to form a recommendation, convey the recommendation, and respond to feedback.

Forms a recommendation: Theoretical capacity
A designer should develop a point of view on the ideas presented. AI models have attained the ability to sort options based on scoring. By using datasets that track design and attention, AI models can be trained to evaluate and rank design options according to their potential for improving conversions. However, the ability of AI models to evaluate more subjective, emotionally-charged objectives has yet to be proven.
Conveys recommendation: Theoretical capacity
A designer should provide a persuasive narrative to aid the client’s decision. AI models have proven to be capable of creating persuasive narratives that can aid in decision-making, much like a human. For example, IBM Research’s Project Debater is able to generate relevant arguments that support positions held. However, the ability of AI models to strike a balance between assertiveness and overbearingness in practical use cases remains an area of study.
Updates based on received feedback: Theoretical capacity
A designer should take in the client’s feedback as a source of input for course correction. AI models like DALL·E 2 and ChatGPT are able to adapt and improve their output based on feedback. By updating the input prompts with feedback, these models are able to generate more accurate, aligned outputs. In cases where the feedback includes new or unrecognized concepts, textual inversion techniques can be used to help the model learn and incorporate these concepts into its output.

The AI Experiment

Designers
Designers gathered the latest design ideas, prioritized them by aesthetic intuition and conversion best practices, and prepared a review deck.

AI
With AI, designers sorted the earlier ideas from DALL·E 2 through models trained on design and attention data. The model provided designers with a simulated course of gaze, giving them confidence in a particular idea. However, they would still like to put it through an actual usability test if selected. They then enlisted ChatGPT to generate a script to sell the idea. With feedback received, they updated the prompt to DALL·E 2. Designers agreed that the ability to quickly and mostly effortlessly iterate felt productive.

Implementing

Implementing calls for the designer to complete designs, author code, and compile both into a functioning website.

Completes designs: Theoretical capacity
Creative directions should be fleshed out based on the aligned decision. Today’s AI models are capable of completing designs based on textual or pictorial input. These AI models use machine learning techniques to identify connections between input prompts and outputs and, based on your input instance, interpolate a completed design output. Under research, there are already models which can return medium-fidelity mockups by detecting and brushing up UI elements on low-fidelity sketches. In deployment, OpenAI’s Outpainting feature allows extensions of original designs, producing stunning results such as extensions of Johannes Vermeer’s Girl with a Pearl Earring scene. The ability to automatically generate web page designs based on the style of a specific section from a design proposal isn’t too far-fetched, given the demonstrated capabilities of current models.
Authors code: Theoretical capacity
HTML, CSS, and JavaScript should be produced to realize the design. Today’s AI models have shown early capabilities to produce code from functionality descriptions. This capability is made possible as these models have been trained on large amounts of data that demonstrate the relationship between descriptions of functionality and code that implements it. By learning from this data, AI models are able to generate code that accurately implements the desired functionality. Models in use today include the assistive feature in Microsoft’s PowerApps software, where the feature turns natural language into ready-to-use code for querying. At GitHub Next, which researches emerging technologies in software development, its VP predicts in the next couple of years, coders “will just be sketching the architectural design, (where) you’ll describe the functionality, and the AI will fill in the details.” Although output from models today still requires human review, the implementation of feedback loops is expected to lead to a continual improvement in quality.
Compiles design and code: Theoretical capacity
For compilation, design and code need to be aligned to complete the chosen idea. As AI models possess the above-mentioned design and coding capabilities, automatic generation and alignment may not be too far-fetched. In a recent interview, engineers at OpenAI have already demonstrated technologies that let anyone produce simple apps just by describing what they want, such as “Make me a personal website with PayPal embedded for payments.” This “Gutenbergian” future, in which anyone with an idea can bring it to fruition, is on the brink of erupting.

The AI Experiment

Designers
Designers fine-tuned the design, handed them off to developers and went through two rounds of reviews.

AI
With AI, designers called in developers and worked together to try code-generation services available today. Both designers and developers were surprised complete syntaxes were generated and agreed the experience felt futuristic. However, they were not comfortable with deploying the code as-is and would like to further explore its compatibility with their existing codebase.

A Glimpse Of The Future

The advent of technology in the realm of design is a well-known phenomenon, and designers have long been at the forefront of leveraging its potential to innovate and push the boundaries of their craft. Just as in the late 15th century the rise of the printing press has encouraged scribe artists, in the 19th century textile machines encouraged artisans, and more recently, photo-editing software has encouraged darkroom artists to shift their creative focus, it is not far-fetched to expect a similar shift triggered by AI in the 21st century.

As we consider AI’s potential to take on various tasks throughout the web design process, it is evident that later stages of the design process will be particularly susceptible to automation. Accordingly, productive designers will shift to focus their creativity on earlier stages in order to differentiate from replaceable tasks.

Day-to-day activities will move from pixel-pushing and software operation to strategizing and forming intents with clients.

The future of creativity is heading upstream.

We don’t expect this creative shift to happen overnight but gradually in three waves. While the AI models outlined have demonstrated signs of capabilities related to web design, for trusted deployment, the models will need to be trained with additional industry data. The quantity of training data will help the models develop higher accuracy toward addressing the field’s most abstract and generalized problems. Considering abstraction and scope, we will expand on the discussed automation of the web design process by forecasting effects on a time scale. With the ability to measure, we hope this will help practitioners manage the approaching future.

Wave 1: Design Copilot

The wave refers to the ability of AI models to assist designers in once manual and time-consuming tasks. These tasks will mainly be of low abstraction within a narrow scope. This specificity requires less training data, and the controlled output domain will allow AI models to meet expectations consistently. We are currently at the onset, with technology previews from Adobe and upstarts like us. Plausible examples in the future may include tools helping designers to automatically adapt one design for different screen sizes, implement suggested animations to make designs interactive, or complete technically-complex format adjustments with descriptive prompts.

Wave 2: Generation and Management

The next wave refers to the ability of AI models to generate semi-completed web designs based on prompts, as well as assist in client relationship management. Generation tasks include Ideating and Implementing output ideas, which involve higher abstractions in a narrow scope. While existing models like ChatGPT and DALL·E 2 are already capable of generating design suggestions and outputs as images, additional pattern-learning with web design-specific datasets will be required to improve variation and quality. Furthermore, there are still concerns that must be addressed, such as issues related to copyright and ethics.

On the other hand, Management tasks include Defining and Socializing ideas, which involve lower abstraction despite a wider scope. While use cases in adjacent industries have proven successful, implementation in everyday account management will require further oversight. For example, the ability to strike a balance between persuasion and tactful communication during the process will need additional monitoring.

Wave 3: Automation

The third wave refers to end-to-end automation of the web design process, including support of strategy and intent development in the Forming stage. There have been attempts at a leapfrog, including AI modules in website builders. However, it will take additional time and effort to overcome the hurdles mentioned earlier, particularly the ability to incorporate uniquely human perspectives, such as empathy, before AI can fully replace a designer’s contribution.

Your Next Step

As AI enters the world of design, it opens up a whole new realm of possibilities. Applications such as generative models are already demonstrating some theoretical capabilities and even practical applications across multiple stages of web design.

While AI still lacks uniquely human capabilities, such as inquisitiveness and empathy, opportunities abound for designers to collaborate with technology to unlock new levels of creativity. Like a brush stroke on an empty canvas, designers and AI have the potential to create something truly extraordinary. Together, they will paint a brighter future for the world of design.

Interested in leveraging AI in your web designs today? Sign up today!

August 11, 2020

Halfmoon: A Bootstrap Alternative with Dark Mode Built In

I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it.

The elevator pitch

Halfmoon is a front-end framework with a few interesting things going for it:

Dark mode built right in: Creating a dark mode version of a site is baked in and a snap.
Modular components: A lot of consideration has gone into making modular components — such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. — that can be used anywhere to make layouts, even complex ones like dashboards.
JavaScript is optional: Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies.
All the CSS classes you need: The class names should be instantly familiar to anyone who has used Bootstrap because that was the inspiration.
Cross-browser compatibility: Halfmoon fully supports nearly every browser under the sun, including really old ones like Internet Explorer 11.
Easily customizable: Halfmoon uses custom CSS properties for things like colors and layouts, making it extremely easy to customize things to your liking, even without a CSS preprocessor.

In many ways, you can think of Halfmoon as Bootstrap with an integrated dark mode implementation. It uses a lot of Bootstrap’s components with slightly altered markup in many cases.

OK, great, but why this framework?

Whenever a new framework is introduced, the same question is inevitably pops up: Why did you actually build this? The answer is that I freaking love dark modes and themes. Tools that come with both a light and a dark mode (along with a toggle switch) are my favorite because I feel that being able to change a theme on a whim makes me less likely to get bored looking at it for hours. I sometimes read in dim lighting conditions (pray for my eyes), and dark modes are significantly more comfortable in that type of situation.

Anyway, a few months ago, I wanted to build a simple tool for myself that makes dark mode implementation easy for a dashboard project I was working on. After doing some research, I concluded that I had only two viable options: either pickup a JavaScript-based component library for a front-end framework — like Vuetify for Vue — or shell out some cash for a premium dark theme for Bootstrap (and I did not like the look of the free ones). I did not want to use a component library because I like building simple server-rendered websites using Django. That’s just my cup of tea. Therefore, I built what I needed: a free, good-looking front-end framework that’s along the same lines as Bootstrap, but includes equally good-looking light and dark themes out of the box.

Future plans

I just wanted to share Halfmoon with you to let you know that it exists and is freely available if you happen to be looking for an extensible framework in the same vein as Bootstrap that prioritizes dark mode in the implementation.

And, as you might imagine, I’m still working on Halfmoon. In fact I have plenty of enhancements in mind:

More components
More customization options (using CSS variables)
More examples and templates
Better tooling
Improved accessibility examples in the docs
Vanilla JavaScript implementations of useful components, such as custom multi-select (think Select2, only without jQuery), data tables and form validators, among other things.

In short, the plan is to build a framework that is really useful when it comes to building complex dashboards, but is still great for building any website. The documentation for the framework can be found on the project’s website. The code is all open-source and licensed under MIT. You can also follow the project on GitHub. I’d love for you to check it out, leave feedback, open issues, or even contribute to it.

The post Halfmoon: A Bootstrap Alternative with Dark Mode Built In appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

December 5, 2019

10 Places to Find Beautiful Free SVG Icon Sets

Looking for beautiful vector icons for your next web design project? Every website in the making could use some icons to help spruce things up a bit and add visual interest. Even subtle icons draw eyes to your UI and help users navigate.

And SVG vectors scale to any size, which means unlike PNGs and JPEGs, they’ll never get blurry if you make them smaller or larger. Place them anywhere throughout your site, and never worry about them looking bad on other devices and screen sizes.

If you want to add icons to your website design, here are some of the best places to find them. Just make sure to check the license on each to see if you’ll need to include attribution.

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets

Material.io

Material Design offers a set of open source UI elements to help you build a beautiful website, including this awesome icon kit. These well-made vectors span several categories and can fit almost any kind of website. There are also five different styles to choose from just to add a little variety.

Simple Icons

Looking for SVG icons for popular online brands like Spotify, Skype, or Firefox? You can find hundreds of them here, all creatively sorted by their brand’s color scheme. You can also search the list or organize alphabetically.

Zondicons

Forever free and constantly being updated, Zondicons is set of consistently designed geometric icons for any website or app. These vectors are scalable, pixel perfect, and seamlessly blend in with a modern style.

Ikonate

With over 300 customizable icons to choose from, Ikonate has a little something for everyone. Besides the sheer variety here, you can also change icon and border size, corner softness, and color right on the webpage. These are totally free to use and lightweight.

Feather Icons

Feather is a set of beautiful, minimal UI icons perfect for adding some subtle flair to your website or app. With nearly 300 icons, decorating your site’s interface will be easy.

Heroicons UI

Here are 100 assorted icons in a thick, friendly-looking style, with enough elements to flesh out your site. This set is free for use under an MIT license, which means you can include them in commercial projects too.

Entypo

Entypo features over 400 premium icons comprising of general UI elements as well as assorted objects. There’s also a socials extension with logos for sites like Twitter and Instagram. With just a small attribution on your site, these quality icons are available for any project.

GitHub Octicons

GitHub has created their own set of icons for use in your projects. Mixed in with UI objects like arrows and chevrons, you’ll find icons based off GitHub’s logo and others inspired by technology.

Hawcons

500 professional, carefully crafted icons, in two styles as well as two colors. What more could you need? This icon pack is sorted into six categories, and available in 4 vector and bitmap file types as well as a font file, offering ultimate versatility.

Linearicons

These simple line art icons look great, and they’re super easy to install too. All you need to do is add a line of code to your site and the icons will be delivered by CloudFront, or you can download the icons you want as a vector, PDF, desktop font, or web font.

Free Vector Icon Packs for Any Project

Images and icons are the best way to make your website look better. A site chock full of text with nothing to break it up is boring and hard to read. Insert a few elegant icons in the right spot and you’ll find that your website looks a lot more interesting. It’s amazing what a few small images can do.

November 7, 2019

Interesting free software from MIT

For any karaoke freaks out there, There is an experimental package available for free from MIT called spleeter. This is a simple (in terms of use) AI which is quite remarkable in its ability to separate an audio file into component sounds. In its simplest form it can take a song and split it into separate instrumental and vocal files. Great for those of us who want to see how we would sound in place of the original artist. If you already have python 3.x installed you can get the package by

pip install spleeter

although it is always a good idea to make sure pip is current by first doing

pip install --upgrade pip

As an example, if you have a file, Mad World.mp3 you can split it up by

spleeter separate -i "Mad Worls.mp3" -o audio_out -n filename

The first time you run it will be a tad slow as it must first download the training files into the folder pretrained_models. Subsequent runs are much faster. Output is in

.\audio_out\Mad World\accompaniment.wav
.\audio_out\Mad World\vocals.wav

I found that the easiest way to plug myself in was to run Audacity (free audio software), drop in the accompaniment and vocals as separate stereo tracks, then add a new stereo track. Plug in the headphones, hit record and sing along. Then you can mute or delete the original vocal track and voila.

Adding command line parameters allows you to separate out instrumental tracks as separate drum, piano, etc.

June 23, 2019

Get Lat Lng from Google Geocoding API

I have been trying to get Lat Lng from this code using the same call to Google Geocoding API, but I have not found a way.
Any suggestion would be greatly appreciated!

/*!
 * geotext v1.0
 *
 * https://github.com/Frizzled/geotext
 *
 * Copyright (c) 2014 Vladimir Loscutoff
 * Released under the MIT license
 */
var GeoText = (function ($, gMaps, undefined) {
    'use strict';

    function GeoText(vars) {
        this.vars = { // Settings
            'name' : 'default',
            'delimiter' : ', '
        };
        this.data = { // Settings
            'success' : false
        };

        // Merge settings
        if (vars !== undefined) { this.vars = $.extend(this.vars, vars); }

        this.init();
    }

    GeoText.prototype.init = function() {
        var that = this;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function (location) {
                    var point = new gMaps.LatLng(location.coords.latitude, location.coords.longitude);
                    new gMaps.Geocoder().geocode({'latLng': point}, function (res, status) {
                        if(status === gMaps.GeocoderStatus.OK && res[0] !== undefined) {
                            that.setLocation(res[0]);
                        }
                    });
                }
            );
        }
    };

    GeoText.prototype.setLocation = function(location) {
        var that = this;
        that.data.success = true;
        $.each(location.address_components, function(k,v1) {
            $.each(v1.types, function(k2, v2) { 
                that.data[v2]=v1.short_name;
                that.data[v2+'_long']=v1.long_name;
            });
        });
        that.applyText();
    };

    GeoText.prototype.applyText = function() {
        var that = this;
        var geoFields = $('[class*=geotext]');
        $.each(geoFields, function(key, field) {
            var $field = $(field);
            var delimiter = $field.data('geotext-delimiter') || that.vars.delimiter;
            var text = that.parseField($field, delimiter);
            if (text) {
                // Check for leading or following text
                if ($field.data('geotext-text-before')) { text = $field.data('geotext-text-before') + text; }
                if ($field.data('geotext-text-after')) { text = text + $field.data('geotext-text-after'); }

                if ($field.is('input')) {
                    $field.val(text).change();
                } else {
                    $field.html(text);
                }
            }
        }); 
    };

    GeoText.prototype.parseField = function(field, delimiter) {
        var that = this;

        // Get rules
        var getRules = /geotext\[(.*)\]/.exec(field.attr('class'));
        if (!getRules) { return false; }
        var str = getRules[1];
        var rules = str.split(/\[|,|\]/);
        $.each (rules, function(key, rule) {
            rules[key] = rule.replace(" ", "");
            if (rules[key] === '') { delete rules[key]; }
        });

        // Generate text
        var text = '';
        $.each (rules, function(key, rule) {
            try {
                switch (rule) {
                    case "address": text += that.data.street_number +' '+ that.data.route; break;
                    case "street": text += that.data.route; break;
                    case "street-long": text += that.data.route_long; break;
                    case "city": text += that.data.locality; break;
                    case "city-state": text += that.data.locality +delimiter+ that.data.administrative_area_level_1; break;
                    case "city-state-zip": text += that.data.locality +delimiter+ that.data.administrative_area_level_1 + ' ' + that.data.postal_code; break;
                    case "state": text += that.data.administrative_area_level_1; break;
                    case "state-long": text += that.data.administrative_area_level_1_long; break;
                    case "zip": text += that.data.postal_code; break;
                    case "county": text += that.data.administrative_area_level_2; break;
                    case "country": text += that.data.country; break;
                    case "country-long": text += that.data.country_long; break;
                    case "lat":  location.coords.latitude; break;
                }
                if (rules[(key+1)] !== undefined) { text += delimiter; }
            } catch (ignore) {}
        });

        return text;
    };

    return GeoText;
})(jQuery, google.maps);

April 30, 2019

Free Programming Courses from Harvard, MIT, Microsoft and More

Did you know that you can learn computer science and programming online from institutions like Harvard, MIT, Berkeley and Microsoft on edX.org? The nonprofit site offers 2,000 online courses from 140 institutions worldwide. Courses are free to try.

Popular Courses

Here are some of the most popular courses and programs offered on edX:

CS50 from Harvard

The most popular course on edX gives you an introduction to computer science and programming. Learn how to think algorithmically and solve programming problems efficiently. Gain familiarity in a number of programming languages including C, Python, SQL, JavaScript, CSS and HTML.

Front End Web Developer from W3C

W3C (World Wide Web Consortium) is the organization that develops web standards. It was founded by the inventor of the web, Tim Berners-Lee. In this 5 course program, learn how to code with modern HTML5 tags, draw and animate fun web graphics, and play audio and video elements. Learn CSS best practices for web page design and the fundamentals of JavaScript to help you develop interactive web apps.

Introduction to Computing in Python from Georgia Tech

In this 4 course program, learn the fundamentals of computer science in one of the field’s most popular programming languages, Python 3, including writing code, executing it, interpreting the results, and revising the code based on the outcomes. Rated as one of the most in-demand and beginner-friendly programming languages, a background in Python will give you a solid foundation to build your career. Short videos (2-3 minutes each) are rapidly interwoven with live programming problems and multiple-choice questions to give you constant feedback on your progress and understanding.

C Programming with Linux from Dartmouth

Did you know that smartphones, your car’s navigation system, robots, drones, trains, and almost all electronic devices have some C-code running under the hood? Along with the C programming language comes Linux, an essential operating system that powers almost all supercomputers and most of the servers worldwide, as well as all Android devices and most “Internet of Things” devices.

In this 7-course program, develop and debug code in the C programming language. Discover the foundations of computer programming and Linux, manipulate the command line, manage processes, files and memory, and compile C code with Linux.

Data Science from Harvard

Data science is one of the hottest fields in programming. Learn key data science essentials in this 9-course program, including R and machine learning, through real-world case studies to jumpstart your career as a data scientist. Also learn statistical concepts such as probability, inference, and modeling and how to apply them in practice. Gain experience with data visualization with ggplot2 and data wrangling with dplyr. Become familiar with essential tools for practicing data scientists such as Unix/Linux, git and GitHub, and RStudio. This is one of the most popular programs on edX.

Blockchain for Business from the Linux Foundation

Everyone has heard of blockchain, but most don’t understand how it can apply to their business. Learn exactly what a blockchain is, its impact and potential for change around the world, and analyze use cases in technology, business, and enterprise products and institutions in this fundamental course from the experts at the Linux Foundation.

Microsoft Courses

Some of the popular Microsoft courses include:

Introduction to Typescript

Want to write organized code for your website that you can easily manage and maintain? TypeScript is the answer to building scalable web applications. TypeScript lets you write JavaScript the way you want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It works on any browser. Any host. Any OS.

Introduction to Bootstrap

Bootstrap is an open source project originally created by Twitter to enable creation of responsive, mobile first web pages. Bootstrap has a standard set of classes that allow developers to quickly create applications that scale to devices of all sizes, and incorporate common components such as dialog boxes and validation. Bootstrap has become a de facto standard for web design.

Introduction to jQuery

jQuery is the most popular library for JavaScript. In this course, you will learn how to use jQuery to add additional power and interactivity to your web pages. You’ll see how to take advantage of jQuery in your web pages, how to work with the HTML document, and even make server-side calls.

Introduction to Angular

In this course, you will learn about the basics of how Angular works, and why Angular has emerged as a popular framework for JavaScript/TypeScript application development. You will also learn how to properly set up your development environment for creating an Angular app, including installing VS Code, Node.JS, TypeScript, and the Angular CLI.

Introduction to ReactJS

ReactJS is the latest JavaScript framework to capture the hearts and attention of the frontend developer community. Developers love ReactJS because it’s highly performant and renders changes almost instantly. The best part about ReactJS is that it is a relatively small framework and does not take too much time to learn!

Start Learning Today

If you are looking for something else, edX offers beginner to advanced programming courses in C++, C#, Java, Power BI, Artificial Intelligence, Machine Learning, Deep Learning, Cybersecurity, IoT, Cloud Computing, AWS, Azure, DevOps, and more. View more courses here.

March 14, 2019

Making AI Facial Recognition Less Racist

AI has famously been rather poor at recognizing faces in a non-racist way. The size of the challenge was highlighted by recent work from MIT and Stanford University, which found that three commercially available facial-analysis programs displayed considerable biases against both gender and skin-types.

For instance, the programs were nearly always accurate in determining the gender of light-skinned men but had an error rate of over 34 percent when it came to darker-skinned women.