Thomas Greco – Web Design Ledger

An Intro to Adobe Edge Web Fonts: Updated for 2020

Thomas Greco — Tue, 26 May 2020 12:05:00 +0000

With the release of Creative Cloud 2015, Adobe has continued its tradition of generating a buzz in the tech sector.

In addition to major updates on their programs like Photoshop and Illustrator, Adobe has also released a new platform named Adobe Edge Web Fonts.

Edge Fonts is a stunning font foundry that web designers can use 100% free for all design work.

If you’re familiar with Adobe and the creative cloud platform then you know about TypeKit.

This is Adobe’s premium font service which costs money.

But with the release of Edge Fonts Adobe now provides an alternative to TypeKit, offering web designers over 500 different font-families to choose from.

I’ll give you an overview of Edge Web Fonts and why designers should be excited about this amazing collection of typefaces.

Worth the Wait

In the recent past Google has dominated the web font game. Simply put, no other service provided an extensive collection of web fonts for free.

There is no denying that Adobe TypeKit is extremely popular among web designers. But the price of TypeKit often caused people to stray from using it.

Because Edge Web Fonts is free to use commercially, Adobe now provides an alternative to the once unrivaled Google Webfonts.

Edge Web Fonts aims to provide a free service that is easy to use.

Just like Google Fonts, a person does not need any sort of account to utilize Edge Fonts library (Scroll down for an update on this).

In addition to being easy to use, Edge Fonts is powered by the TypeKit font service.

Users can expect high-end performance and stability for their web fonts.

Edge Web Fonts User Interface

In the image above you can see the interface Edge Web Fonts provides for choosing fonts.

For those of you who’ve used Typekit in the past, you’ll notice the Edge Fonts website is strikingly similar to that of TypeKit.

As a TypeKit user myself I think this is pretty important to note.

The user interface was one of the main reasons why I continued to use TypeKit, and now Adobe is providing this to web designers for free.

In the example above I’ve narrowed the choices down to only serif fonts in order to show you a basic example of how Adobe’s interface works.

Although this may not seem very powerful, it allows you to sift through font faces that are alike in some way.

Edge Fonts also allows you to search fonts depending on whether they will be used as a heading or paragraph text.

This interface is much easier to choose the most appropriate font for whatever environment you’re designing.

Google Fonts is indeed a tremendous font foundry for web designers, however, sifting through the extensive number of fonts can become a problem.

It seems Edge Web Fonts has a leg up in this regard.

Adobe Edge Web Fonts – 2020 Update

In 2018, Typekit was finally and officially renamed as Adobe Fonts.

And that was great for all of us. With this new name came many new, much-needed updates.

For example, there are no more web-only fonts, no more desktop sync limits, and no more pageview limits.

And now instead of only having 500 fonts like there were when it Adobe fonts was first released, there are now thousands of fonts for you to choose from.

Adobe Fonts is free to use IF you have a subscription to any one of their products.

It is no longer a standalone product like it was when it was Typekit.

That is a bummer, but hey, you gotta do what you gotta do.

And chances are, you probably have a subscription to Adobe.

So you should be good to go.

The great thing about Adobe Fonts is that you don’t have to worry about finding the rights to any font you fall in love with, as Adobe takes care of all of that for you!

All fonts are free to use for personal and commercial use.

This means that once you find that perfect font for your project, that’s literally it.

No more contacting the owner and buying the rights to it.

That’s right, you just get to keep the perfect font.

Isn’t that amazing?

Top 10 Adobe Fonts Designers Use

Before we end our time together today, I want to show you my top 10 favorite fonts from Adobe Fonts.

If you’re not convinced that you need to be using Adobe Fonts yet, well, after this, I’m almost certain you will be.

Conclusion

In order to truly grasp the power of Edge Web Fonts you’ll have to check it out for yourself.

Not only does it provide an extensive number of fonts, it also makes the process of finding them quick & easy. Also you should remember that Edge Web Fonts provides premier performance for your font styles by utilizing TypeKit!

You’ll surely not be disappointed when you see what has been given to web designers with the incredible Edge Web Fonts service.

Mobile App Design Review: Wildcard

Thomas Greco — Thu, 17 Sep 2015 16:05:43 +0000

In this post we’re gonna take a look at Wildcard, a completely free news & entertainment application.

Wildcard prides itself on providing a visually stunning platform that allows users to easily sift through engaging content. Throughout this article I’ll discuss different areas of the application that has helped make it so popular among users.

Curated Stories

Bill Gates may have written his "Content is King" essay in 1996, but there is no doubt this concept still holds true today. Especially with technology people are always in search of the best content. This is a need that Wildcard has set out to fulfill.

Above is a screenshot of the application’s home screen.

By looking at this image you’ll notice a white circle in the right-middle of the screen with the number three inside of it. This number indicates the number of stories that Wildcard has curated for a user on a similar topic; In this case, the topic is Elon Musk building a new transportation system. Wildcard will load three different cards related to this story.

I’ve included a screenshot of how Wildcard displays these cards below.

You will see that each card also has the same white circle. With the help of this button, Wildcard aims to expose users to a seemingly endless amount of content.

It also shows the application’s focus on providing constant information that the user will find intriguing.

Easy To Use

If you haven’t realized yet, Wildcard is an extremely user friendly application.

When browsing through related cards the application displays a small overview of the article, as well as the title of a card. When viewing a specific card Wildcard will display the content using their own card layout.

If instead you really like how a particular website composes their material you can revert back to the original style.

Wildcard > Mobile Web Views

Above is a side-by-side comparison of the card view and the mobile view of an article from Wired.com.

While scrolling through the web view my finger would sometimes slide the page, and expose content that I did not wish to see. It also displayed bulky social media links at the top of the article.

When displayed as a card however, the article is optimized for mobile viewing. Wildcard was designed with a minimalist approach.

It styles the content in a way that is most favorable to readers. In turn the app does a great job of eliminating unnecessary distractions, allowing the user to focus solely on content.

The use of cards is one of the many eye-catching features of Wildcard. As users navigate through the app they’re subjected to smooth transitions that truly add to the experience of using Wildcard.

Manage Your Cards

Wildcard allows users to manage a system of cards if they do not have time to read it, or if they simply wish to save a card for a later date.

As I said throughout this article, the developers of Wildcard want to ensure that you’re always exposed to content geared towards your interest. They’ve made the process of saving cards as easy as hitting the paper clip in the bottom part of the screen.

In addition to saving cards, Wildcard also displays solid functionality when dealing with offline capabilities. It makes any card saved by a user accessible without an internet connection!

Now you can read on the go at any place, any time.

Conclusion

And that wraps up my review of Wildcard for iOS. If you’re someone who is interested in application development, I definitely recommend checking it out. You can get a first hand look at how Wildcard has gained popularity by crafting a rock-solid experience for the user.

You can download Wildcard completely free from the app store and try it out for yourself.

Angular Material: Thoughts & Review

Thomas Greco — Thu, 17 Sep 2015 11:39:31 +0000

The Angular Material project integrates Google’s Material Design with the AngularJS MVC framework and offers web engineers(especially AngularJS devs) a solid foundation of tools.

Google’s Design project is a system of tools for prototyping both web and native applications. From this Google created Material Design, a framework centered around design-driven principles.

Material Design was eventually adapted to work with AngularJS, thus marking the creation of angular-material. Throughout this article I’m going to talk further about different aspects of the angular-material project and show you how well it integrates these 2 platforms together.

Harnessing the Power of Angular-Material

When dealing with headings and other typography related styles, Angular-Material offers css classes for you to use. Much of the true power of Angular-Material is accessed through custom components that allow you to control every aspect of an Angular application.

These components come in the form of directives and attributes, and offer a broad range of functionality.

The Layout Attribute

Angular-material utilizes several variations of the layout attribute to style web applications. In the same way that BootStrap uses classes, Angular-Material uses custom attributes to define your applications layout.

Material Design utilizes flexbox, therefore Angular-Material provides the flex attribute for developers to use. Due to its recent struggles with browser support, many are unaware of the inherent control flexbox gives to developers.

Nonetheless Angular-Material’s flex attribute can take a value, though it does not necessarily have to.

Let’s take a look at a bit of code in an example from the Angular-Material website. It gives you a bit of insight as to how the flex attributes work.


  
  This is the first div!
  
  
  This is the second div!

The first div tag would flex to one-third of the space on mobile, and two-thirds on other devices, and the second div expands to two-thirds of the space on mobile, and one-third on other devices.

Functionality Through Different Directives

The flex attribute is just one of the many things that Angular-Material offers.

The framework also makes great use of directives that make tons of different thing possible. For example, Angular-Material provides directives such as md-autocomplete which a will query through a data set depending on a user’s input. Angular-Material will perform this query in realtime, thus providing a the best possible experience for the user.

Among the other directives Angular-Material offers out of the box is md-grid-list. This directive allows you to define complex grids layout and gives the developer a great deal control over what is displayed inside an angular app.

The md-grid-list directive takes different attributes such as md-cols and md-row-height. This directive allows you to define highly complex layouts that are fully responsive, which you can see for yourself in this demo.

The angular-material framework gives you all the tools you need to create highly functional web applications that provide users with a great design & experience. Now that you have some background of the framework, I encourage you to experiment as it is truly a web developer’s best friend.

5 Font Foundries Web Designers should be Using

Thomas Greco — Fri, 11 Sep 2015 12:35:16 +0000

Although sometimes overlooked, solid typography is one of the most important parts of web design. Simply put, the misuse of fonts can prove detrimental for a layout.

It is a web designer’s job to entice the user into reading through the page; and using the ‘right’ font(or fonts) can play a pivotal role in attaining the user’s attention.

Luckily for web designers the Internet holds many solid resources which provide fonts that can be used commercially – sometimes even for free.

To help shed light on some of these resources I’ve compiled a list of five notable font foundries & font resources online.

Google Fonts

First on the list is Google Fonts which lets you choose from over 700 different fonts, all of which can be commercially used for free.

Google Fonts provides font-faces that can match virtually any theme and can easily be integrated into a project with one additional line of code. When push comes to shove, Google Fonts gives you the tools to be successful when choosing the best fonts for your projects.

TypeKit

TypeKit is the first of two products in this list by Adobe. The price of TypeKit varies depending on the plan, however it delivers an incredible portfolio of professional fonts.

Fonts inside the TypeKit foundry are masterfully crafted which makes it incredibly easy to choose a font by providing so many quality options. TypeKit also provides a great user interface for seeking out the correct font family. Also TypeKit provides users with a library of pre-built font stacks with similar typefaces that go well together.

Edge Web Fonts

New on the scene is Edge Web Fonts, the second product by Adobe. You can think of Edge Web Fonts as Adobe’s version of Google Fonts. It has an extremely friendly user interface with an easy-to-browse font catalog.

Moreover the interface of Edge Web Fonts is quite similar to that of TypeKit’s. You can easily sift through 500+ different font families provided for free by Edge Web Fonts. The release of Edge Web Fonts provides yet another fantastic free resource for web designers.

Font Squirrel

Although Font Squirrel does not have the sponsorship of Google or Adobe, it provides great resources web designers need to properly communicate their message.

FontSquirrel offers hundreds of fonts that can be sorted by things such as the type of license for a font-family, as well as a number of different styles or text formats.

The League of Movable Type

Last in this list is League of Movable Type, a unique open source font foundry dedicated to broadening the horizons of typography.

After getting started in 2009 they worked hard to provide the best possible digital typefaces. They offer a wide range of fonts such as League Spartan that can be downloaded directly to your computer.

The League of Movable Type is an awesome movement so you should definitely check it out. After all, it takes groups such as this to raise the bar on quality design.

Hopefully you’ve gained some new insight towards what the world of web fonts has to offer. If you don’t already, you should definitely consider using one of the font foundries mentioned above; They offer thousands of fonts that aid in providing a solid user experience without much extra work.

5 Desktop Apps for Better Productivity

Thomas Greco — Sat, 05 Sep 2015 16:15:03 +0000

Developers need to get the most out of their computers. After all, the computer is the primary tool that developers rely on each & every day.

Over time there have been a number of applications created to expedite the development process. Programmers & coders want a smooth and simple workflow so they can focus on what matters: writing code.

I’ll shed light on a few applications that do make development easy and so much quicker.

Alfred

If I had to describe Alfred I would call it Finder on performance enhancing drugs.

This workflow manager not only sifts through your computer for specific files, but it also allows you to operate applications with the use of hotkeys. You can navigate through your iTunes library, find and copy a CDN to your clipboard, calculate numbers, all without leaving the Alfred command prompt.

Alfred also makes it possible to create highly complex workflows that launch specific applications through the use of hotkeys. These workflows can only be used if the power pack is purchased – but other than that Alfred is completely free to use.

Dash

Kapeli’s Dash application is the programmer’s encyclopedia.

Dash houses all of the documentation for pretty much every major programming language and framework currently in use.

Also Dash can be configured to work with Alfred so you can easily search through documentation for stuff like BootStrap classes & Angular modules.

Dash is free to use, however you must wait 10 seconds each time it opens – unless you’re willing to pay a flat fee of $9.99 which eliminates the wait time.

TotalTerminal

The importance of your computer’s command-line is something that can not be overlooked. Like it or not, any developer worth his or her salt should be able to navigate the command line.

TotalTerminal makes this a bit easier by providing a full-width terminal window. The picture above was taken from my computer desktop; As you can see, I’ve changed the opacity so that I can still see information through the command-prompt if necessary.

Sublime Text 2

Although this may seem a bit obvious, the next application is one of the most popular text editors available for use: Sublime Text 2.

With an extensive list of plug-ins created by an open-source community, Sublime Text 2 provides programmers with everything they need to run a solid IDE. Also I think it’s important to note that Sublime Text 2 is partially free – a completely free alternative is Brackets by Adobe.

Evernote & Evernote Web Clipper

Nowadays so many developers receive their knowledge through searching Google. As a self-starter myself, I understand the immense amount of reading and research that must be done in order to truly understand concepts that seem extremely foreign at times.

With the Evernote Web Clipper you can create an annotated version of whatever you’re reading and save it into a specific notebook. This file will then be synced into your Evernote account, and you’ll be able to view it on any device where you have Evernote installed.

I certainly hope these 5 tools can get you more organized and ready to tackle that next dev project!

Up and Running with NativeScript

Thomas Greco — Wed, 02 Sep 2015 19:40:51 +0000

Last spring the development team at Telerik unveiled its biggest project yet: NativeScript.

NativeScript is a runtime for building completely native applications for iOS and Android using either JavaScript or TypeScript. Yes, you read that correctly. NativeScript makes it possible to develop fully functional native applications without the need to learn Objective-C or Java.

The NativeScript runtime also gives you the power to style applications using css, and provides different custom components for building user interfaces for both Android and iOS devices.

The Telerik team really did a phenomenal job when building the NativeScript runtime. It grants JavaScript developers access to 100% of the native APIs on both iOS and Android – an extremely significant advancement. Although this may sound confusing at first, it’s actually quite simple to understand. This article aims to simplify the process of how NativeScript produces such results. Once you understand that you’ll have a much better understanding of how powerful this new technology really is.

How It Works

NativeScript is not a framework; rather it is a runtime that targets the JavaScript VMs (Virtual Machines) on Android and iOS devices.

On Android the V8 engine is the JavaScript VM, whereas iOS devices rely on the JavaScriptCore engine.

NativeScript targets both of these JavaScript VMs in order to access the different native APIs on a device. This is where NativeScript differentiates itself from the group. When building native applications using technologies such as Apache’s Cordova, your code will be packaged in a container in order to access the native APIs for iOS and Android devices.

The NativeScript runtime, on the other hand, was developed to be a bridge rather than a container. It allows JavaScript code to run on native devices. The Cordova container displays native applications as ‘web views’ whereas NativeScript runs your JavaScript code to display native experiences.

You can read more about NativeScript metadata through this link. Simplified it’s what NativeScript injects to access native APIs.

Live Example

Let’s take a look at the following block of code.

var time = new android.text.format.Time();
time.set( 1, 0, 2015 );
console.log( time.format( "%D" ) );

This is valid NativeScript code and it would result in the string ‘01/01/2015’. In this example, the NativeScript runtime tells the V8 JavaScript Engine that we need to access Android’s time API.

The V8 JavaScript engine does not know how to read Android properly, so NativeScript needs to use metadata to help translate this into a format that a native API on a device can understand.

In that example the Android object is a bit specific, so NativeScript offers a broad variety of cross-platform components. The Telerik team does not want you to have to learn iOS or Android specific terms.

This ability to create cross platform applications is yet another reason why NativeScript is so powerful. Without having to modify a single line of code, developers can use JavaScript to reach both iOS and Android devices. Because NativeScript targets both the JavaScriptCore and V8 virtual machine, the runtime offers the ability to utilize the latest features of these engines as soon as they’re implemented.

Now that you have a basic understanding of NativeScript you should go on and check it out for yourself. The Telerik team has been generating a great deal of buzz with its release, and for good reason. I’ve provided a few links below to videos and other resources for learning NativeScript.

As always, if you have any questions about the NativeScript runtime I would be happy to answer them!

NativeScript Resources

5 Sublime Text Plug-ins for Frontend Development

Thomas Greco — Mon, 31 Aug 2015 20:34:36 +0000

Every developer knows that workflow automation is extremely important to web development. Luckily there are tons of programs built around this concept of automating workflow.

In this article I’m going to talk about several plug-ins that have been created for Sublime Text 2, which is one of the most popular text-editors available. I want to quickly note that any plug-ins running on Sublime 2 should install perfectly in Sublime 3+. So without further ado, let’s take a look at some of these plug-ins and see how they can improve your efficiency when programming.

Package Control

Package Control is essential for anyone using Sublime Text 2. It allows you to easily look up and install packages for Sublime Text 2.

Without this plug-in you would have to manually download and install plug-ins – but package control saves the day by providing an easier way for installation.

Emmet

Emmet is an extremely helpful toolkit for frontend developers. It allows you to quickly generate snippets of code.

For example, the code ul>li*4>a would generate an unordered list containing 4 anchored list items. The Emmet toolkit also provides the ability to move around throughout code seamlessly using keyboard shortcuts.

HTMLPrettify

When working on a big project, files can become cluttered with non-semantic code very quickly. In turn, these files become harder to maintain as this clutter makes it harder to find errors.

With the help of HTMLPrettify your code will automatically be formatted(or beautified) so that you can navigate easily. Although its name suggests otherwise, HTMLPrettify is not limited to HTML files. It can be used to “prettify” JavaScript, CSS, and JSON files as well.

ColorPicker

Colorpicker is a plug-in built for generating hex values for your css files. Having to constantly look up different hex codes can be a pain, so ColorPicker provides you with a color wheel where you can choose a color.

Once you’ve chosen your desired color the Colorpicker plug-in will automatically generate the corresponding hexadecimal value.

AllAutocomplete

Next is the AllAutocomplete plug-in. Sublime Text automatically looks throughout individual files for repeated words; AllAutocomplete takes it one step further and searches through every file of your project so you don’t have to write out the same words over and over again.

HTML5 Boilerplate

It can be a pain to manually write all of the tags necessary to get started with an index.html file – however they are the basis of all web apps.

In an attempt to automate this process the HTML5Boilerplate plug-in was created. It generates an HTML5 template with all the tags necessary to get up and running. All you have to do is create an html file, type htmlboiler, hit tab & your barebones HTML5 boilerplate file will appear.

And there you have it! My list of Sublime Text 2 Plug-ins.

Although these will undoubtedly help your performance, definitely check out what other Sublime plug-ins have to offer. You surely will not be disappointed.