(This is a sponsored post.)

YOOtheme Pro is a powerful theme and page builder developed by YOOtheme that provides a new experience of building websites in WordPress. Designers will get an easy and exciting way to design and create websites due to premium layouts and an intuitive page builder, and developers will especially appreciate its extendability and clean and semantic code. YOOtheme has been known as a leading theme provider for over 10 years, and now with YOOtheme Pro they created the next page builder to be watched for on the WordPress market.

The Page Builder

If you are familiar with WordPress, YOOtheme Pro is a perfect choice for you since it is seamlessly integrated into the native WordPress customizer. You can easily create your layouts by dividing your content into sections, rows and grids. And thanks to the drag and drop interface, you can design beautiful responsive page layouts without even having to code. All your changes will be instantly shown in live preview.

Arrange Your Content With Ease

YOOtheme Pro has a growing library of over 30 content elements. Here you can find both common elements like the Video, Panel, Image or Heading, but you can also expect some advanced elements such as the Slider, Slideshow or Gallery with the masonry effect and filter option and even more. YOOtheme Pro also allows you to place WordPress widgets anywhere in your layout. All elements are built with the popular front-end framework UIkit that provides modern codebase with fast and sleek JavaScript.

Sophisticated Layouts for Your Website

YOOtheme invests a lot of time and effort into the development of their layouts. A team of professional designers regularly creates complete website concepts with a thought-out content structure and focus on modern design trends. They already have over 100 layouts with free-to-use images and even hand-made illustrations that can be found in the Layout Library. You can filter layouts according to topics and types, mix and match them, save your own layouts to reuse them later. This provides you with unlimited possibilities and makes creating websites in WordPress as easy as can be.

A Library of Over 70 Beautiful Styles

What makes YOOtheme Pro stand out even more is the Style Library that includes over 70 handcrafted styles. One click, and the look of your website changes completely. Whether you are looking for a minimalistic or a bold style, this substantial collection represents all trends. You can customize next to anything with YOOtheme Pro, from changing the style of each item separately to applying changes globally. This gives you all the power to style your WordPress website with none of the coding.

Integrated Unsplash Image Library

The popular Unsplash library that provides quality and free-to-use photos is seamlessly integrated into YOOtheme Pro. Due to this integration you can search through the library and try out images directly on your website without having to leave YOOtheme Pro. Use filter, browse through collections and users and insert images directly into your layouts. The images will only be downloaded after your click Save. This feature is a real time-saver for every designer.

Lightning-fast and Developer-friendly

YOOtheme Pro is a true piece of German engineering, it is fast, lightweight and easy like no other page builder. Powered by Vue.js and Uikit, it provides a great user experience. YOOtheme Pro also cares about speed. The small code size as well as the latest web technologies ensure the first meaningful paint gets quickly on the screen. And with auto-generated srcsets, lazy loading images and next-gen image formats like WebP YOOtheme Pro will boost the Google PageSpeed rank for your WordPress website. What’s more, Google Fonts are stored locally, which saves the request to Google and ensures GDPR compliance.

A modular and extendable architecture makes YOOtheme Pro extremely developer-friendly. It allows you to override everything, add custom elements, CSS, JavaScript and new themes settings. An extensive documentation including video tutorials and a section specifically written for developers will help you get started in no time.

Get YOOtheme Pro

YOOtheme Pro both simplifies and empowers website building. Regular release of theme packages including sophisticated layouts on a specific topic, six style variations and free-to-use images will make YOOtheme Pro the only thing you’ll need to create a website. And while we could talk more about how YOOtheme Pro supports WooCommerce and has a a Footer Builder and many desktop and mobile header layouts, we’d rather let you see for yourself. Get YOOtheme Pro and experience the future of website building today.

Direct Link to Article — Permalink

The post Introducing the YOOtheme Pro Page Builder appeared first on CSS-Tricks.

Building A PWA Using Angular 6

Ahmed Bouchefra

2018-09-20T13:35:23+02:002018-09-20T11:42:41+00:00

In this tutorial, we’ll be using the latest Angular 6 to build a PWA by implementing the core tenets that make a PWA. We’ll start by creating a front-end web application that consumes a JSON API. For this matter, we’ll be using the Angular HttpClient module to send HTTP requests to a statically JSON API generated from the Simplified JavaScript Jargon GitHub repository. We’ll also use Material Design for building the UI via the Angular Material package.

Next, we’ll use the “Audits” panel (Lighthouse) from Chrome DevTools to analyze our web application against the core tenets of PWAs. Finally, we’ll explain and add the PWA features to our web application according to the “Progressive Web App” section in the Lighthouse report.

Before we start implementing our PWA, let’s first introduce PWAs and Lighthouse.

Recommended reading: Native And PWA: Choices, Not Challengers!

What’s A PWA?

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we’ll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don’t need to go through app stores.

A PWA needs to be:

• Progressive
  Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
• Responsive
  Fit any form factor, desktop, mobile, tablet, or whatever is next.
• Connectivity independent
  Enhanced with service workers to work offline or on low-quality networks.
• App-like
  Use the app-shell model to provide app-style navigation and interactions.
• Fresh
  Always up-to-date thanks to the service worker update process.
• Safe
  Served via HTTPS to prevent snooping and ensure content has not been tampered with.
• Discoverable
  Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
• Re-engageable
  Make re-engagement easy through features like push notifications.
• Installable
  Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
• Linkable
  Easily share via URL and not require complex installation.

Introducing Lighthouse

Lighthouse is an open-source auditing tool created by Google which can be used to audit websites and applications for accessibility performance, SEO, best practices and PWA features.

You can access Lighthouse from the Audit tab in Chrome DevTools as a module in Node.js or as a CLI tool. You can use Lighthouse by providing an URL and then running the audits which will provide you with a report containing the auditing results which are basically suggestions on how you can improve your web application.

Installing Angular CLI v6 And Generating A Project

In this section, we’ll install the latest version of Angular CLI then we’ll use it to create a new Angular 6 project.

Angular CLI requires Node.js >= 8.9+ so first make sure you have the required version installed by running the following command:

$ node -v

In case you don’t have Node.js installed, you can simply head on to the official Node download page and grab the Node binaries for your system.

Now, you can go ahead and install the latest version of Angular CLI by running:

$ npm install -g @angular/cli 

Note: Depending on your npm configuration, you may need to add _sudo_ to install packages globally.

You can generate your Angular 6 project by running the following command in your terminal:

$ ng new pwademo

This will create a project with a structure that looks like:

Most work that’s done will be inside the src/ folder that contains the source code of the application.

Creating The Angular Application

After generating a project, we’ll build a web application that consumes a JSON API and displays the items on the home page. We’ll use the HttpClient service for sending HTTP requests and Angular Material for building the UI.

Adding Angular Material

Thanks to Angular CLI v6 and the new ng add command, adding Angular Material to your project is only one command away. You just need to run the following command from your terminal:

$ cd pwademo
$ ng add @angular/material

You can see from the screenshot that the command installs the required package from npm and update a bunch of files for setting up Angular Material in your project which previously needed manual updates.

Setting Up HttpClient And Consuming The JSON API

Now, let’s setup the Angular project to use HttpClient for sending HTTP requests. First, you need to import the HttpClientModule module in the main application module in the src/app/app.module.ts file:

/*...*/
import { HttpClientModule } from  '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
/*...*/
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export  class  AppModule { }

That’s it. We can now inject and use HttpClient in any component or service that belongs to the main module.

For demo purposes, we’ll consume a statically generated JSON API from the Simplified JavaScript Jargon GitHub repository. If you are consuming any other resource, make sure you have CORS enabled so the browser doesn’t disallow reading the remote resource due to the Same Origin Policy.

Let’s create a service that interfaces with the API. Inside your project folder, run:

$ ng g service api

This will create a service called ApiService in the src/app/api.service.ts file.

Now open the src/app/api.service.ts file and update it to reflect the following changes:

import { Injectable } from  '@angular/core';
import { HttpClient } from  '@angular/common/http';
import { Observable } from  'rxjs';

export  interface  Item{
name:  string;
description:  string;
url:  string;
html:  string;
markdown:  string;
}

@Injectable({
providedIn:  'root'
})

export  class  ApiService {
private  dataURL:  string  =  "https://www.techiediaries.com/api/data.json";
constructor(private  httpClient:  HttpClient) {}
fetch():  Observable<Item[]>{
return <Observable<Item[]>this.httpClient.get(this.dataURL);
}
}

We first imported the HttpClient and Observable classes then injected the HttpClient in the constructor as httpClient and added a fetch() method which calls the get() method of HttpClient (for sending an HTTP GET request to our JSON endpoint) and returns an Observable that we can subscribe to later.

We also declared an Item interface which represents a single item of the returned JSON data.

Next import this service from the application component. Open the src/app/app.component.ts file and add:

import { Component, OnInit } from  '@angular/core';
import { ApiService } from  './api.service';
import { Item } from  './api.service';

@Component({
selector:  'app-root',
templateUrl:  './app.component.html',
styleUrls: ['./app.component.css']
})
export  class  AppComponent  implements  OnInit{
title  =  'pwademo';
items:  Array<Item>;
constructor(private  apiService:  ApiService){
}
ngOnInit(){
this.fetchData();
}
fetchData(){
this.apiService.fetch().subscribe((data:  Array<Item>)=>{
console.log(data);
this.items  =  data;
}, (err)=>{
console.log(err);
});
}
}

We import the ApiService that we created before and we inject it as apiService, we also import the Item class which represents a single item of our JSON data and we declare the items variable of type Array which will hold the fetched items.

Next, we add a fetchData() method which calls our fetch() method that we defined in the ApiService which returns an Observable. We simply subscribe to this observable in order to send a GET request to our JSON endpoint and get the response data that we finally assign to the items array.

We call the fetchData() method in the ngOnInit() life-cycle event so it will be called once the AppComponent component is initialized.

Adding The Application UI

Our application UI will consist of a navigation bar and the skeleton of the page which will be created with Angular Material.

Before using an Angular Material component, you’ll need to import its module. Each Material component belongs to its own module.

Open the src/app/app.module.ts file and add the following imports:

/*...*/
import { MatToolbarModule } from  '@angular/material/toolbar';
import { MatCardModule } from  '@angular/material/card';
import { MatButtonModule } from  '@angular/material/button';

@NgModule({
declarations: [
AppComponent
],
imports: [
/*...*/
MatToolbarModule,
MatCardModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export  class  AppModule { }

We import modules for toolbar, card and button components and we add them to the imports array of the AppModule.

Next, open the src/app/app.component.html file, delete what’s in there and add:

<mat-toolbar  color="primary">
<mat-toolbar-row>
<span>JS-jargon</span>
</mat-toolbar-row>
</mat-toolbar>
<main>
<mat-card *ngFor="let item of items">
<mat-card-header>
<mat-card-title>{{item.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
{{item.description}}
</mat-card-content>
<mat-card-actions>
<a  mat-raised-button  href="{{item.url}}"  color="primary">More</a>
</mat-card-actions>
</mat-card>
</main>

We use Material components to create the UI. The component is used to create a Material toolbar and the component is used to create a Material card etc.

We iterate over the items array which gets populated by the fetchData() method when the component is initialized, and display items as Material cards. Each card contains the name, description and a link for more information (The link is styled as a Material button using the mat-raised-button directive).

This is a screenshot of the application:

Building The Application For Production

Typically, when checking your application for PWA features you should first build it for production because most PWA features are not added in development. For example, you don’t want to have service workers and caching enabled in development since you will periodically need to update the files.

Let’s build the application for production using the following command:

$ ng build --prod

The production build will be available from the dist/pwademo folder. We can use a tool like http-server to serve it.

First, install http-server using the following command:

$ npm i -g http-server

You can then run it using the following command:

$ cd dist/pwademo
$ http-server -o

The -o option will automatically open the default browser in your system and navigate to the http://127.0.0.1:8080/ address where our web application is available.

Analyzing The Application Using Lighthouse

Let’s now analyze our application using Lighthouse. First, launch Chrome and visit our application address http://127.0.0.1:8080/.

Next, open Developer Tools or press Ctrl + Shift + I and click on the Audit panel.

You preferably need to set the Emulation to Mobile instead of Desktop to emulate a mobile environment. Next, click on Perform an audit… blue button. You’ll have a dialog opened in which you need to choose the types of the audits you want to perform against your web application. Un-check all types but Progressive Web App and click the Run audit button.

Wait for the Lighthouse to generate the report. This is a screenshot of the result at this stage:

Lighthouse performs a series of checks which validate the aspects of a Progressive Web App specified by the PWA Checklist.
We get an initial score of ³⁶?₁₀₀ that’s because we have some audits passed.

Our application has 7 failed audits mainly related to Service Workers, Progressive Enhancement, HTTPS and Web App Manifest which are the core aspects of a PWA.

Registering A Service Worker

The first two failed audits (“Does not register a service worker” and “Does not respond with a 200 when offline”) are related to Service Workers and caching. So what’s a service worker?

A service worker is a feature that’s available on modern browsers which can be used as a network proxy that lets your application intercept network requests to cache assets and data. This could be used for implementing PWA features such as offline support and Push notifications etc.

To pass these audits we simply need to register a service worker and use it to cache files locally. When offline, the SW should return the locally cached version of the file. We’ll see a bit later how to add that with one CLI command.

Recommended reading: Making A Service Worker: A Case Study

Progressive Enhancement

The third failed audit (“Does not provide fallback content when JavaScript is not available”) is related to Progressive Enhancement which is an essential aspect of a PWA and It simply refers to the capability of PWAs to run on different browsers but provide advanced features if they’re available. One simple example of PE is the use of the HTML tag that informs users of the need to enable JavaScript to run the application in case It’s not enabled:

<noscript>
Please enable JavaScript to run this application.
</noscript>

HTTPS

The fourth failed audit (“Does not redirect HTTP traffic to HTTPS”) is related to HTTPS which is also a core aspect of PWAs (service workers can be only served from secure origins, except for localhost). The “Uses HTTPS” audit itself is considered as passed by Lighthouse since we’re auditing localhost but once you use an actual host you need a SSL certificate. You can get a free SSL certificate from different services such as Let’s Encrypt, Cloudflare, Firebase or Netlify etc.

The Web App Manifest

The three failed audits (“User will not be prompted to Install the Web App”, “Is not configured for a custom Splash Screen” and “Address bar does not match brand colors”) are related to a missing Web App Manifest which is a file in JSON format that provides the name, description, icons and other information required by a PWA. It lets users install the web app on the home screen just like native apps without going through an app store.

You need to provide a web app manifest and reference it from the index.html file using a tag with rel property set to manifest. We’ll see next how we can do that automatically with one CLI command.

Implementing PWA Features

Angular CLI v6 allows you to quickly add PWA features to an existing Angular application. You can turn your application into a PWA by simply running the following command in your terminal from the root of the project:

$ ng add @angular/pwa

The command automatically adds PWA features to our Angular application, such as:

• A manifest.json file,
• Different sizes of icons in the src/assets/icons folder,
• The ngsw-worker.js service worker.

Open the dist/ folder which contains the production build. You’ll find various files but let’s concentrate on the files related to PWA features that we mentioned above:

A manifest.json file was added with the following content:

{
    "name": "pwademo",
    "short_name": "pwademo",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
    ]
}

As you can see, the added manifest.json file has all the information required by a PWA such as the name, description and start_url etc.

The manifest.json file, links to icons with different sizes, that were also added automatically in the assets/icons folder. You will, of course, need to change those icons with your own once you are ready to build the final version of your PWA.

In the index.html file, the manifest.json file is referenced using:

<link  rel="manifest"  href="manifest.json">

The ngsw-worker.js file, was also automatically added, which contains the service worker. The code to install this service worker is automatically inserted in the src/app/app.module.ts file:

...
import { ServiceWorkerModule } from  '@angular/service-worker';

@NgModule({
declarations: [
AppComponent
],

imports: [
...
ServiceWorkerModule.register('/ngsw-worker.js', { enabled:  environment.production })
],

The @angular/service-worker is installed by the ng add command and added as a dependency to pwademo/package.json:

"dependencies": {
...
"@angular/service-worker": "^6.1.0"
}

The service worker build support is also enabled in the CLI. In the angular.json file a "serviceWorker": true configuration option is added.

In the index.html file a meta tag for theme-color with a value of #1976d2 is added (It also corresponds to the theme_color value in the manifest.json file):

<meta  name="theme-color"  content="#1976d2">

The theme color tells the browser what color to tint UI elements such as the address bar.

Adding the theme color to both the index.html and manifest.json files fixes the Address Bar Matches Brand Colors audit.

The Service Worker Configuration File

Another file src/ngsw-config.json is added to the project but It’s not a required file for PWAs. It’s a configuration file which allows you to specify which files and data URLs the Angular service worker should cache and how it should update the cached files and data. You can find all details about this file from the official docs.

Note: As of this writing, with the latest 6.1.3 previous ng add @angular/pwa command will fail with this error: Path “/ngsw-config.json” already exists so for now the solution is to downgrade @angular/cli and @angular/pwa to version 6.0.8.

Simply run the following commands in your project:

$ npm i @angular/cli@6.0.8
$ ng i @angular/pwa@6.0.8
$ ng add @angular/pwa

Now let’s re-run the audits against our local PWA hosted locally. This is the new PWA score:

The Angular CLI doesn’t automatically add the JavaScript fallback code we mentioned in the Progressive Enhancement section so open the src/index.html file and add it:

<noscript>
Please enable JavaScript to run this application.
</noscript>

Next, rebuild your application and re-run the audits. This is the result now:

We have only one failed audit which is related to HTTPS redirect. We need to host the application and configure HTTP to HTTPS redirect.

Let’s now run the audits against a hosted and secured version of our PWA.

We get a score of ¹⁰⁰?₁₀₀ which means we’ve successfully implemented all core tenets of PWAs.

You can get the final code of this demo PWA from this GitHub repository.

Conclusion

In this tutorial, we’ve built a simple Angular application and have turned it into a PWA using Angular CLI. We used Google’s Lighthouse to audit our application for PWA features and explained various core tenets of PWAs such as Service Workers for adding offline support and push notifications. The Web Manifest file for enabling add-to-home-screen and splash screen features, Progressive Enhancement as well as HTTPS .

You may also need to manually check for other items highlighted (under the “Additional items to manually check” section) but not automatically checked by Lighthouse. These checks are required by the baseline PWA Checklist by Google. They do not affect the PWA score but it’s important that you verify them manually. For example, you need to make sure your site works cross-browser and that each page has a URL which is important for the purpose of shareability on social media.

Since PWAs are also about other aspects such as better perceived performance and accessibility, you can also use Lighthouse for auditing your PWA (or any general website) for these aspects and improve it as needed.

(rb, ra, yk, il)

At least once every day, some designer somewhere in the world will look at something made months or years ago; failing that, some executive will get the bright idea that they can make their mark on a company and the world by changing something that already exists, instead of making something new. One or both of these people might get this sort of itch in the back of their head, accompanied by a sense of dissatisfaction and ill-defined purpose.

The itch will get itchier, the dissatisfaction will grow, and the purpose will begin to form until, one day, they blurt out the words: I think we should redesign our website (and/or make a King Kong movie that focuses on the human characters).

Redesigning a site is not unlike rebooting a movie or TV show. They’re both massively complex creative endeavors that attempt to draw in an existing audience while also appealing to a new one. They’re also both fraught with dangers, as while a good redesign or reboot can bring life back to something that has aged poorly, they can also just flop hard.

As designers, we have an opportunity to learn from the successes and failures of Hollywood. It’s not a one-to-one comparison, but there are enough similarities to make a few observations:

1. You Need to Know if Anyone Wants This

Some people might not know that the original version of The Mummy was actually made in 1932, and starred the legendary Boris Karloff. Brendan Fraser brought his signature charm to the story again in 1999, over sixty years later. A lot can happen in sixty years, including a World War, a couple more wars, the invention of the computer as we know it, and the invention of redesigning websites as a concept.

So when the 1999 movie showed up, it premiered in what was practically a new world. The stars were likable, the Indiana Jones influence set it apart from its predecessor, but it kept the same sense of adventure, with a few actually kind-of-scary moments. The world was ready for it.

And then in 2017, someone decided to reboot The Mummy again with an eye toward creating a whole new franchise of monster movies. But it was a lackluster movie at best, despite the talent that went into it, and people could remember the heart that went into the Brendan Frasier version all too easily, and the comparison hurt the new movie. The world was not ready for it. Going too fast hurt The Mummy Franchise, and don’t even get me started on all of the Spiderman reboots. That was ridiculous.

If you’re going to redesign your site, don’t do it too soon. And when you do get around to it, make sure it’s actually bringing something people want to the table. Speaking of which…

2. You Need to Know What Made the Original Special

Let’s take a look at Total Recall, for example. The original was a fun sci-fi romp that combined light social commentary, silliness, and Arnold being Arnold. Replace Arnold with a star of lesser charisma, and the silly movie falls apart. Take away the silliness, and it’s a generic sci-fi action film. It still would have been good for its time, probably, but probably not as beloved as it is now.

The 2012 remake couldn’t get Arnold back, and as good as Colin Farrell and the rest of the cast were, they couldn’t carry the movie alone. That delightful silliness was also gone, replaced by light touches of sarcasm. The mild social commentary was still there, but it was so shallow as to be easily dismissed.

They took a formula that worked, and removed at least two-thirds of it. Before you ever touch a website with the intent of redesigning it, you want to know why people like it at all. This means user research, and actually talking to users. God knows that if they’d polled the fans of the original movie, they might have kept some of its charm intact.

3. Your Audience May Change

People don’t usually want the same things for their entire lives. Times, people, and sensibilities change. Take the new Lost in Space series on Netflix. The original started in 1965, only one year before the original Star Trek launched. It featured TV tropes and family dynamics that were considered acceptable in its day; and so it unsurprisingly lasted longer than the forward-looking Star Trek.

The new series can’t rely on those older family dynamics. Audiences expect a bit more drama in their sci-fi, a more realistic and nuanced approach to characters, and boy oh boy did Robot ever get a makeover. Dr. Smith, too. Audiences (particularly Netflix customers) have also come to expect a more diverse cast of characters, and so that’s what they’re getting.

All in all, it’s a fairly successful reboot that combines the core concept of the show with the changed expectations of its audience. Do I have to make an analogy to website redesign, here? Well I will: how has your userbase changed since your site was launched? Do you know? If you don’t, you should find out right now.

4. The Medium May Change Too

With a solid-enough concept and an enduring audience, you could more or less keep telling the same story; but even then, the medium will change. Here we come to the many iterations of James Bond. They don’t technically count as “reboots”, but hey… they illustrate my point. Who doesn’t want to be smooth, sophisticated, and dangerous when they need to be? Bond’s time may come one day, but for now, the saga continues.

Even so, the way James Bond films get made, from a technical standpoint, has changed often. It had to. With advancements in technology, refinements in cinematic storytelling, and cultural shifts, the Bond movies of today look very different from the first bond films, while being much the same in terms of substance.

A redesign of your site doesn’t have to mean changing its core philosophy, but it might be worth it to refine your design by rebuilding it with newer design and coding principles in mind. If you have a solid core design to work from, then iteration—rather than a full redesign—might be the better option.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Picture this: you are driving down some country back roads, you notice a quaint, little town off in the distance. As you approach the town, you pass the welcome sign. In your mind, what sort of font did you picture? For me, it has to be something welcoming, something that would make me come back. But most importantly, something unique that the little town can identify with. In today’s blog post, we are going to be talking about a font that I believe fits the previous description perfectly: introducing Monroe.

About 8 years ago, Daniel Hernández released a font that he had big hopes in. Unfortunately, things didn’t go exactly as planned, and in 2013, the designer decided to stop selling it. But, this story doesn’t have a sad ending, as Hernández noticed that the looks of the font are not the best, and invested time into finishing the project he strongly believed in. Now, Monroe has gotten a new, improved, and upgraded version, that includes more weights and alternate glyphs.

What’s in the package?

As seen on Creative Market, each font style contains 819 glyphs and the set has 394 characters for 207 Latin-based languages. Montoe also includes:

• 5 stylistic sets that offer a wide range of signs
• swashes
• discretionary ligatures
• 5 weights: Thin, Ultra Light, Light, Regular and Bold.

Due to its fine, modern touch, the Monroe Font is suitable for many projects that you might come up with. We assure you that the versatile font would look amazing on business cards, packaging, book covers, all sorts of invitations, and even in-web design. It would also make a great pair with many of the fonts we features in our “Font of the week” series, so make sure you check those out, too.

Daniel Hernández spends most of his time designing fonts. Creative Market is the best place where you can support his work buy purchasing your favorite. Below, I have listed some of the artist’s work in collaboration with other designers, which I hope you’ll find helpful:

Trend Rough

Texta Narrow

Newslab Family

Trend Hand Made Family

Boston

If you are a font creator and would like to be featured in a similar post on our blog, send us an email at webdesignledger.blog@gmail.com and we will tell you all the simple steps you need to take.

Read More at Monroe Font Comes Back Improved After 8 Years FOTW#9

Here on Webdesignledger, you know how we love our series. So today, we’ll be launching a new series called Product of the Week. In this new series, we’ll be going over some of our favorite IOT items that we think you’ll love, too. Designers, developers, and geeks alike will all love what we’re cooking up. So fasten your seatbelts, and get ready for a ride.

To kick things off for this new and exciting series, we’re going to be taking a look at piece of tech that I think we all can appreciate: smart watches. But, the specific product we’re going to introduce you to is no simple smart watch. In fact, this new smart watch makes all the competition look like regular watches. Introducing NOAH Smart Hybrid Watches:

Who is NOAH?

NOAH, a Transilvania based tech company, is no stranger to making quality products. For the past few years, they have spent countless hours making sure that this watch is the perfect fit for whoever buys it. The Noah Smartwatch is the world’s first smartwatch to be completely encased in wood. Each external wooden case is handcrafted to perfection for a sophisticated and elegant look.

As you can see in the image above, there are quite a few options for customization so that each customer gets exactly the look they want. NOAH even took it a step further and thought about people with metal allergies, and ensured that no metal would touch the wrist of the wearer.

Beauty and intelligence

Although the wooden aspect of the watch is unique, it’s not the only unique feature NOAH came up with. The brains behind the creation of the watch came up with a technology that allows the face of the watch to look like a regular watch, while still maintaining all the cool tech a smart watch has. You’ll have the looks of an elegant watch while still being able to receive notifications about incoming calls and messages, information about the person calling, alarms, timers, step counters, and many other features available through the support app.

Think about how often you have to charge or change the battery on any of your devices. It doesn’t typically last very long, does it? This challenge was presented to the developers, and resolved quickly. They created a watch with more than a year of full functionality.

“We developed a partnership for implementing the new technology and the production of few

components with companies from Switzerland and Hong Kong, but the product design and the

assembly of the smart hybrid is handcrafted in-house. Each wooden case is polished and treated manually in a process that takes about 3 hours for each product.” – Ruben Perju, co-founder NOAH Watches

Active and heritage for him or her

NOAH will start their new product off with two lines, active and heritage. The active line is for those who are always in motion, while the heritage is for those who are wanting more of an elegant look. In addition, the watches will have custom designs for him or her, each with 5 different cases, belt options, and colors.

If you’re interested in getting your hands on this one-of-a-kind smart watch, then you’re in luck. Their campaign is set to run for a total of 45 days where customers can purchase their watches at an impressive $169 for the limited number of watches that they have. After that campaign is over, the price goes up to $199.

We hope you enjoyed this first installment of product of the week here on Webdesignledger. It’s very exciting for us to be sharing our favorite products with you. If you’re interested in posts like this, and want to stay up to date with every to do with design, then be sure to follow along in our new series!

Read More at Product of the Week: NOAH Watches

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots.

For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component).

There are three types of slots:

• default / unnamed slots: used when you have a single slot in a component. We create them by adding in the template where we want to be able to inject our content. This tag will be replaced with any content passed to the component’s template.
• named slots: used when you have multiple slots in a component and we want to inject different content in different places (slots). We create those by adding with a name attribute (e.g. ). Then when we render our component, we provide a slot content for each named slot by adding a slot attribute with the slot name.

<base-layout>
  <template slot="header">
    <h1>My awsome header</h1>
  </template>
  <template slot="footer">
    <p>My awsome footer</p>
  </template>
</base-layout>

By doing that, the tags in the component will be replaced by content passed to the component.

• scoped slot: used when you want a template inside a slot to access data from the child component that renders the slot content. This is particularly useful when you need freedom in creating custom templates that use the child component’s data properties.

Real-World Example: Creating a Google Map Loader component

Imagine a component that configures and prepares an external API to be used in another component, but is not tightly coupled with any specific template. Such a component could then be reused in multiple places rendering different templates but using the same base object with specific API.

I’ve created a component (GoogleMapLoader.vue) that:

1. initializes the Google Maps API
2. creates google and map objects
3. exposes those objects to the parent component in which the GoogleMapLoader is used

Below is an example of how this can be achieved. We will analyze the code piece-by-piece and see what is actually happening in the next section.

Let’s first establish our GoogleMapLoader.vue template:

<template>
  <div>
    <div class="google-map" data-google-map></div>
    <template v-if="Boolean(this.google) && Boolean(this.map)">
      <slot :google="google" :map="map" />
    </template>
  </div>
</template>

Now, our script needs to pass some props to the component which allows us to set the Google Maps API and Map object:

import GoogleMapsApiLoader from "google-maps-api-loader";

export default {
  props: {
    mapConfig: Object,
    apiKey: String
  },
  data() {
    return {
      google: null,
      map: null
    };
  },
  async mounted() {
    const googleMapApi = await GoogleMapsApiLoader({
      apiKey: this.apiKey
    });
    this.google = googleMapApi;
    this.initializeMap();
  },
  methods: {
    initializeMap() {
      const mapContainer = this.$el.querySelector("[data-google-map]");
      this.map = new this.google.maps.Map(mapContainer, this.mapConfig);
    }
  }
};

This is just part of a working example. You can dive in deeper this example.

OK, now that we have our use case set up, let’s move onto breaking that code down to explore what it’s doing.

1. Create a component that initializes our map

In the template, we create a container for the map which will be used to mount the Map object extracted from the Google Maps API.

// GoogleMapLoader.vue
<template>
  <div>
    <div class="google-map" data-google-map></div>
  </div>
</template>

Next up, our script needs to receive props from the parent component which will allow us to set the Google Map. Those props consist of:

• mapConfig:?Google Maps config object
• apiKey:?Our personal api key required by Google Maps

// GoogleMapLoader.vue
import GoogleMapsApiLoader from "google-maps-api-loader";

export default {
  props: {
    mapConfig: Object,
    apiKey: String
  },

Then, we set the initial values of google and map to null:

data() {
  return {
    google: null,
    map: null
  };
},

On the mounted hook, we create an instance of googleMapApi and the map object from it. We also need to set the values of google and map to the created instances:

async mounted() {
  const googleMapApi = await GoogleMapsApiLoader({
    apiKey: this.apiKey
  });
  this.google = googleMapApi;
  this.initializeMap();
},
methods: {
  initializeMap() {
    const mapContainer = this.$el.querySelector("[data-google-map]");
    this.map = new this.google.maps.Map(mapContainer, this.mapConfig);
  }
}
};

So far, so good. With all that done, we could continue adding the other objects to the map (Markers, Polylines, etc.) and use it as an ordinary map component.

But, we want to use our GoogleMapLoader component only as a loader that prepares the map — we don’t want to render anything on it.

To achieve that, we need to allow the parent component that will use our GoogleMapLoader to access this.google and this.map that are set inside the GoogleMapLoader component. That’s where scoped slots really shine. Scoped slots allow us to expose the properties set in a child component to the parent component. It may sound like an inception, but bear with me one more minute as we break that down further.

2. Create component that uses our initializer component

In the template, we render the GoogleMapLoader component and pass props that are required to initialize the map.

// TravelMap.vue
<template>
  <GoogleMapLoader
    :mapConfig="mapConfig"
    apiKey="yourApiKey"
  />
</template>

Our script tag should look like this:

import GoogleMapLoader from "./GoogleMapLoader";
import { mapSettings } from "@/constants/mapSettings";

export default {
  components: {
    GoogleMapLoader,
  },
  computed: {
    mapConfig() {
      return {
        ...mapSettings,
        center: { lat: 0, lng: 0 }
      };
    },
  }
};

Still no scoped slots, so let’s add one.

3. Expose google and map properties to the parent component by adding a scoped slot

Finally, we can add a scoped slot that will do the job and allow us to access the child component props in the parent component. We do that by adding the tag in the child component and passing the props that we want to expose (using v-bind directive or :propName shorthand). It does not differ from passing the props down to the child component, but doing it in the tag will reverse the direction of data flow.

// GoogleMapLoader.vue
<template>
  <div>
    <div class="google-map" data-google-map></div>
    <template v-if="Boolean(this.google) && Boolean(this.map)">
      <slot
        :google="google"
        :map="map"
      />
    </template>
  </div>
</template>

Now, when we have the slot in the child component, we need to receive and consume the exposed props in the parent component.

4. Receive exposed props in the parent component using the slot-scope attribute

To receive the props in the parent component, we declare a template element and use the slot-scope attribute. This attribute has access to the object carrying all the props exposed from the child component. We can grab the whole object or we can de-structure that object and only what we need.

Let’s de-structure this thing to get what we need.

// TravelMap.vue
<template>
  <GoogleMapLoader
    :mapConfig="mapConfig"
    apiKey="yourApiKey"
  >
    <template slot-scope="{ google, map }">
      {{ map }}
      {{ google }}
    </template>
  </GoogleMapLoader>
</template>

Even though the google and map props do not exist in the TravelMap scope, the component has access to them and we can use them in the template.

Yeah, OK, but why would I do things like that? What is the use of all that?

Glad you asked! Scoped slots allow us to pass a template to the slot instead of a rendered element. It’s called a scoped slot because it will have access to certain child component data even though the template is rendered in the parent component scope. That gives us a freedom to fill the template with custom content from the parent component.

5. Create factory components for Markers and Polylines

Now, when we have our map ready, we will create two factory components that will be used to add elements to the TravelMap.

// GoogleMapMarker.vue
import { POINT_MARKER_ICON_CONFIG } from "@/constants/mapSettings";

export default {
  props: {
    google: {
      type: Object,
      required: true
    },
    map: {
      type: Object,
      required: true
    },
    marker: {
      type: Object,
      required: true
    }
  },
  mounted() {
    new this.google.maps.Marker({
      position: this.marker.position,
      marker: this.marker,
      map: this.map,
      icon: POINT_MARKER_ICON_CONFIG
    });
  },
};

// GoogleMapLine.vue
import { LINE_PATH_CONFIG } from "@/constants/mapSettings";

export default {
  props: {
    google: {
      type: Object,
      required: true
    },
    map: {
      type: Object,
      required: true
    },
    path: {
      type: Array,
      required: true
    }
  },
  mounted() {
    new this.google.maps.Polyline({
      path: this.path,
      map: this.map,
      ...LINE_PATH_CONFIG
    });
  },
};

Both of these receive google that we use to extract the required object (Marker or Polyline) as well as map which gives as a reference to the map on which we want to place our element.

Each component also expects an extra prop to create a corresponding element. In this case, we have marker and path, respectively.

On the mounted hook, we create an element (Marker/Polyline) and attach it to our map by passing the map property to the object constructor.

There’s still one more step to go…

6. Add elements to the map

Let’s use our factory components to add elements to our map. We must render the factory component and pass the google and map objects so data flows to the right places.

We also need to provide the data that’s required by the element itself. In our case, that’s the marker object with the position of the marker and the path object with Polyline coordinates.

Here we go, integrating the data points directly into the template:

// TravelMap.vue
<template>
  <GoogleMapLoader
    :mapConfig="mapConfig"
    apiKey="yourApiKey"
  >
    <template slot-scope="{ google, map }">
      <GoogleMapMarker
        v-for="marker in markers"
        :key="marker.id"
        :marker="marker"
        :google="google"
        :map="map"
      />
      <GoogleMapLine
        v-for="line in lines"
        :key="line.id"
        :path.sync="line.path"
        :google="google"
        :map="map"
      />
    </template>
  </GoogleMapLoader>
</template>

We need to import the required factory components in our script and set the data that will be passed to the markers and lines:

import { mapSettings } from "@/constants/mapSettings";

export default {
  components: {
    GoogleMapLoader,
    GoogleMapMarker,
    GoogleMapLine
  },
  data() {
    return {
      markers: [
        { id: "a", position: { lat: 3, lng: 101 } },
        { id: "b", position: { lat: 5, lng: 99 } },
        { id: "c", position: { lat: 6, lng: 97 } }
      ],
      lines: [
        { id: "1", path: [{ lat: 3, lng: 101 }, { lat: 5, lng: 99 }] },
        { id: "2", path: [{ lat: 5, lng: 99 }, { lat: 6, lng: 97 }] }
      ]
    };
  },
  computed: {
    mapConfig() {
      return {
        ...mapSettings,
        center: this.mapCenter
      };
    },
    mapCenter() {
      return this.markers[1].position;
    }
  }
};

And we’re done!

With all those bits and pieces completed, we can now re-use the GoogleMapLoader component as a base for all our maps by passing different templates to each one of them. Imagine that you need to create another map with different Markers or just Markers without Polylines. By using a pattern of scoped slots, it becomes very easy since all we need to pass now is different content to the GoogleMapLoader component.

This pattern is not strictly connected to Google Maps; it can be used with any library to set the base component and expose the library’s API that might then be used in the component that summoned the base component.

It might be tempting to create a more complex or robust solution, but this gets us the abstraction we need and it becomes an independent piece of our codebase. If we get to that point, then it might be worth considering extraction to an add-on.

The post Using Scoped Slots in Vue.js to Abstract Functionality appeared first on CSS-Tricks.

Visual Studio Live Share Can Do That?

Burke Holland

2018-09-19T13:30:17+02:002018-09-20T11:42:41+00:00

A few months ago, Microsoft released its free Visual Studio (VS) Live Share service. VS Live Share is Google Docs level collaboration for code. Multiple developers can collaborate on the same file at the same time without ever leaving their own editor.

After the release of Live Share, I realized that many of us have resigned ourselves to being isolated in our code and we’re not even aware that there are better ways to work with a service like VS Live Share. This is partly because we are stuck in old habits and partly because we just aren’t aware of what all VS Live Share can do. That last part I can help with!

In this article, we’ll go over the features and best practices for VS Live Share that make developer collaboration as easy as being an “Anonymous Hippo.”

Share Your Code

Live Share comes as an extension for both Visual Studio and Visual Studio Code (VS Code). In this article, we’re going to focus on VS Code.

You can also install it via the VS Live Share Extension Pack, which includes the following extensions, all of which we are going to cover in this article…

• VS Live Share
• VS Live Share Audio
• Slack Chat extension

Once the extension is installed, you will need to log in to the VS Live Share service. You can do that by opening the Command Palette Ctrl/Cmd + Shift + P and select “Sign In With Browser”. If you don’t log in and you try and start a new sharing session, you will be prompted to log in at that time.

There are several ways to kick off a VS Live Share session. You can do it from the Command Palette, you can click that “Share” button in the bottom toolbar, or you can use the VS Live Share explorer view in the Sidebar.

A link is copied to your clipboard. You can then send that link to others, and they can join your Live Share session — provided they are using VS Code as well. Which, aren’t we all?

Now you can collaborate just like you were working on a regular old Word document:

The other person can not only see your code, but they can edit it, save it, execute it and even debug it. For you, they show up as a cursor with a name on it. You show up in their editor the same way.

The VS Live Share Explorer

The VS Live Share explorer shows up as a new icon in the Action Bar — which is that bar of icons on the far right of my screen (the far left of yours for default Action Bar placement). This is a sort of “ground zero” for everything VS Live Share. From here, you can start sessions, end them, share terminals, servers, and see who is connected.

It’s a good idea to bind a keyboard shortcut to this VS Live Share Explorer view so that you can quickly toggle between that and your files. You can do this by pressing Ctrl/Cmd + K (or Ctrl/Cmd + S) and then searching for “Show Live Share”. I bound mine to Ctrl/Cmd + L, which doesn’t seem to be bound to anything else. I find this shortcut to be intuitive (L for Live Share) and easy to hit on the keyboard.

Share Code Read-Only

When you start a new sharing session, you will be notified thusly and asked if you would like to share your workspace read-only. If you select read-only, people will be able to see your code and follow your movements, but they will not be able to interact.

This mode is useful when you are sharing with someone that you don’t necessarily trust — maybe a vendor, partner or an estranged ex.

It’s also particularly useful for instructors. Note that at the time of this writing, VS Live Share is locked to 5 concurrent users. Since you probably are going to want more than that in read-only mode, especially if you’re teaching a group, you can up the limit to 30 by adding the following line to your User Settings file: Ctrl/Cmd + ,.

"liveshare.features": "experimental"

Change The Default Join Behavior

Anyone with the link can join your Live Share session. When they join, you’ll see a pop-up letting you know. Likewise, when they disconnect, you get notified. This is the default behavior for VS Live Share.

It’s a good idea to change this so that you have to manually approve someone before they can join your session. This is to protect you in the case where you go to lunch and forget to disconnect your session. Your co-workers can’t log back in, change one letter in your database connection string and then laugh while you spend the next four hours trying to figure out how your life has gone so horribly wrong.

To enable this, add the following line to your User Settings file Ctrl/Cmd + ,.

"liveshare.guestApprovalRequired": true

Now you’ll be prompted when someone wants to join. If you block someone, they are blocked for the duration of the session. If they try to join again, you won’t be notified and they will be unceremoniously rejected by VS Live Share.

Go and enjoy your lunch. Your computer is safe.

Focus Followers

By default, anyone who joins your Live Share session is “following” you. That means that their editor will load up whatever file you are in and scroll whenever you scroll. Even if you switch files, participants will see exactly what you see.

The second that a person makes changes to a file, they are no longer following you. So if you are both working on a file together, and then you go to a different file, they won’t automatically go with you. That can lead to a lot of confusion with you talking about code in the file you’re in while the other person is looking at something entirely different.

Besides just telling each other where you are (which works, btw), there is a handy command called “Focus Participants” that is in the Command Palette Ctrl/Cmd + Shift + P.

You can also access it as an icon in the VS Live Share Explorer view.

This will focus your participants on the next thing you click on or scroll to. By default, VS Live Share focus requests are accepted implicitly. If you don’t want people to be able to focus you, you can add the following line to your User Settings file.

"liveshare.focusBehavior": "prompt"

Also note that you can follow participants. If you click on their name in the VS Live Share Explorer view, you will begin to follow them.

Because following is turned off as soon as the other person begins editing code, it can be tough to know exactly when people are following you and when they aren’t. One place you can look is in the VS Live Share Explorer view. It will tell you the file that a person is in, but not whether or not they are following you.

A good practice is to just remember that focus is always changing so people may or may not see what you see at any given time.

Debug As A Team

Participants can share any debug sessions that you run. If you start a debug session, they will get the exact same experience that you do. If it breaks on your side, it breaks on theirs, and they get the full debug view into all of your code.

They can step in, out, over, add watches, evaluate in the Debug Console; any debugging that you can do, they can do too, and they can control it.

Debugging can also be launched by participants. Be default, though, VS Code does not allow your debugger to be started remotely. To enable this, add the following line to your User Settings file Ctrl/Cmd + ,:

"liveshare.allowGuestDebugControl": true

Share Your Terminal

A lot of the work we do as developers isn’t in our code; it’s in the terminal. Some days it seems like I spend about as much time on my terminal as I do in my editor. This means that if you have an error on your terminal or need to type some command, it would be nice if your participants in VS Live Share can see your terminal in addition to your code.

VS Code has an integrated terminal, and you can share it with VS Live Share.

When you do this, you have the opportunity to share your terminal as read-only, or as read-write.

By default, you should be sharing your terminal as read-only. When you share your terminal read-write, the user can execute arbitrary commands directly on your terminal. Let that sink in for a moment. That’s heavy.

It goes without saying that having remote write access to someone’s terminal comes with a lot of trust and responsibility. You should only ever share your terminal read-write with people that you trust implicitly. Estranged ex’s are probably off the table.

Sharing your terminal read-only safely allows the person on the other end of the line to see what you are typing and your terminal output in real time, but restricts them from typing anything into that terminal.

Should you find yourself in a scenario where it would be quicker for the other person to just get at your terminal instead of trying to walk you through some wacky command with a ton of flags, you can share your terminal read-write. In this mode, the other person has full remote access to your terminal. Choose your friends wisely.

Share Your localhost

In the video above, the terminal command ends with a link to a site running on http://localhost:8080. With VS Live Share, you can share that localhost so that the other person can access it just like it was their own localhost.

If you are running a shared debug session, when the participant hits that localhost URL on their end, it will break for both of you if a breakpoint is hit. Even better, you can share any TCP process. That means that you can share something like a database or a Redis cache. For instance, you could share your local Mongo DB server. Seriously! This means no more changing config files or trying to get a shared database up. Just share the port for your local Mongo DB instance.

Share The Right Files The Right Way

Sometimes you don’t want collaborators to see certain files. There are likely private keys and passwords in your project that are not checked into source control and not suitable for public viewing. In this case, you would want to hide those files from anyone participating in your Live Share session.

By default, VS Live Share will hide any file that is specified in your .gitignore. If there is a file that you want to hide, just add it to your .gitignore. Note though, that this only hides the file in the project view. If you are in a shared debugging session and you step into a file that is in the .gitignore, it is still loaded up in the editor and your collaborators will be able to see it.

You can get more fine-grained control over how you share files by creating a .vsls.json file.

For instance, if you wanted to make sure that any files that are in the .gitignore are never visible, even during debugging, you can set the gitignore property to exclude.

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"exclude"
}

Likewise, you could show everything in your .gitignore and control file visibilty directly from the .vsls.json file. To do that, set the gitignore to none and then use the excludeFiles and hideFiles properties. Remember — exclude means never visible, and hide means “not visible in the file explorer.”

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore":"none",
    "excludeFiles":[
        "*.env"
    ],
    "hideFiles": [
        "dist"
    ]
}

Sharing And Extensions

Part of the appeal of VS Code to a lot of developers is the massive extensions marketplace. Most people will have more than a few installed. It’s important to understand how extensions will work, or not work, in the context of VS Live Share.

VS Live Share will synchronize anything that is specific to the context of the project you are sharing. For instance, if you have the Vetur extension installed because you are working with a Vue project, it will be shared across to any participants — regardless of whether or not they have it installed as well. The same is true for other context-specific things, like linters, formatters, debuggers, and language services.

VS Live Share does not synchronize extensions that are user specific. These would be things like themes, icons, keyboard bindings, and so on. As a general rule of thumb, VS Live Share shares your context, not your screen. You can consult the official docs article on this subject for a more in-depth explanation of what extensions you can expect to be shared.

Communicate While You Collaborate

One of the first things people do on their inaugural VS Live Share experience is to try to communicate by typing in code comments. This seems like the write (get it?) thing to do, but not really how VS Live Share was designed to be used.

VS Live Share is not meant to replace your chat client of choice. You likely already have a preferred chat mechanism, and VS Live Share assumes that you will continue to use that.

If you’re already using Slack, there is a VS Code extension called Slack Chat. This extension is still a tad early in its development, but it looks quite promising. It puts VS Code in split mode and embeds Slack on the right-hand side. Even better, you can start a Live Share session directly from the Slack chat.

Another tool that looks quite interesting is called CodeStream.

CodeStream

While VS Live Share looks to improve collaboration from the editor, CodeStream is aiming to solve that same problem from a chat perspective.

The CodeStream extension allows you to chat directly within VS Code and those chats become part of your code history. You can highlight a chunk of code to discuss and it goes directly into the chat so there is context for your comments. These comments are then saved as part of your Git repo. They also show up in your code as little comment icons, and these comments will show up no matter which branch you are on.

When it comes to VS Live Share, CodeStream offers a complimentary set of features. You can start new sessions directly from the chat pane, as well as by clicking on an avatar. New sessions automatically create a corresponding chat channel that you can persist with the code, or dispose of when you are done.

If chatting isn’t enough to get the job done, and you need to collaborate like it’s 1999, help is just a phone call away.

VS Live Share Audio

While VS Live Share isn’t trying to reinvent chat, it does re-invent your telephone. Kind of.

With the VS Live Share Audio extension, you can call someone directly and do voice chat from within VS Code.

The other person will then get a prompt to join your call.

You will see a speaker icon in the bottom status bar when you are connected to a call. You can click on that speaker to change your audio device, mute yourself, or disconnect from the call.

The last tip I’ll give you is probably the most important, and it’s not a fancy feature or obscure setting you didn’t know existed.

Change Your Muscle Memory

We’ve got years of learned behavior when it comes to getting help or sharing our code. The state of developer collaboration tools has been so bad for so long that we are conditioned to paste code into Slack, start an awkward Skype calls that consist mostly of “tell me when you can see my screen”, or crowd around a monitor and point excessively, i.e. stock photo style.

The most important thing you can do to get the most out of VS Live Share is to actually use VS Live Share. And it will have to be a “conscious” effort.

Your brain is good at patterns. You are constantly recognizing and classifying the world around you based on patterns you have identified, and you are so good at it, you don’t even realize you are doing it. You then develop default responses to these patterns. You form instincts. This is why you will default to the old ways of collaboration without even thinking about what you are doing. Before you know it you will be on a Skype call with someone sharing your screen — even if you have Live Share installed.

I’ve written a lot about VS Code and people will ask me from time to time how they can get more productive with their editor. I always say the same thing: the next time you reach for the mouse to do something, stop. Can you do that something with the keyboard instead? You probably can. Look up the shortcut and then make yourself use it. At first it’s going to be slower, but if you are willing to deliberately adopt a different behavior, you will be astonished at how fast your brain will default to the more productive way of doing something.

The same goes for Live Share. You will be on a call sharing your screen when it occurs to you that you could be using Live Share. At that moment, stop; click that “Share” button in the bottom of VS Code.

Yes, the person on the other end may not have the extension installed. Yes, it may take a moment to set it up. But if you work on establishing this behavior now, the next time you go to do this, it will “just work” and it won’t be long before you don’t even have to think about it, and at that point, you will finally have achieved that “Anonymous Hippo” level of collaboration.

More Resources

• VS Live Share Extension Pack
• VS Code Live Share Docs
• Extensions and Ecosystem Support
• Getting Started With VS Live Share

(rb, ra, il)

Welcome to our roundup of the best websites launched (or relaunched with major updates) in the last four weeks. September marks the beginning of Fall in the northern hemisphere, and reflecting that change, we’re seeing fewer light, airy, minimal designs, and more rich, warm, comforting designs.

There’s been a flood of new design agency sites, and a ton of new season fashion sites launched this month—we’ve included the best. You’ll also find some great photography and lots for lovers of typography. Enjoy!

Critical Mass

Critical Mass is one of those design agencies you’d just love to work for. Their new site is a homage to themselves, telling a success story from their roots in Calgary, to 11 different offices around the world, with some exceptional work along the way.

Genesis

Genesis is a London eatery specializing in organic, healthy food. Their site is ever so slightly bizarre. Entirely black and white, with mystic-inspired illustrations, the site definitely makes me want to eat there, at least once.

Libratone

With bold color blocking, an unconventional grid, and one of the more interesting slideshows you’ll see, Libratone’s site is walking the walk by exuding confidence, sophistication, and a sense of freedom. A great site the perfectly encapsulates its brand identity.

Marc Jacobs

Marc Jacobs is one of the world’s most productive fashion labels, selling a dizzying array of products through this site. Despite the vast range of goods, there’s still time for careful details if you look, check out the animated bag for example.

Tao Tajima

Filmmaker Tao Tajima’s site features fullscreen clips of his work. What makes this site stand out is the liquid-style transition that segues between projects as you scroll. The way the video flexes is a magical effect perfectly in keeping with Tajima’s work.

GT Zirkon

Following the fashion for typefaces to get their own websites, GT Zirkon is a fantastic deep-dive into the design features of this sans-serif typeface. Entirely black and white, the animated noodle details continue to grow, creating a unique sense of time.

Porter & Pals

Feeding our dogs a healthy diet is super important to all owners. Porter & Pals wants you to trust them with your pooch’s diet, they’re different, and they want you to know it. Not convinced? Just keep refreshing the homepage for some hilarious pictures.

Alberta Ferretti

At first glance, Alberta Ferretti’s site looks much the same as any other minimal, grid-based fashion site. Where this site stands out is the playful use of the grid to create unexpected shapes and counter-intuitive alignment.

DAD

Dad is a design agency based in the Netherlands. Scroll through its colorful site and the work scrolls vertically, while the background type scrolls horizontally. Somehow, it works. If they don’t win a D&AD award there really is no poetry in the world.

Hourly App

Hourly is yet another time-tracking app for iOS, so far, so dull. But what sets Hourly apart is the 80s style typography and color palette. The bold choice is reflected in the app’s site, and delivers an impactful, and ultimately individual design.

Studio.Build

Studio.Build is a creative digital and branding agency that believes in big statements made simply. The site features a slideshow of selected work to scroll through, but click-through to the full portfolio for some exceptional design work.

Siri

Apple’s brand new site for its flagship AI product is predictably Apple-like, with a whole ton of mysterious black, gigantic sized type, and some lovely subtle gradients. Rarely does color-coding sections feel so exclusive.

Fred Perry

Fred Perry’s site is a perfect demonstration of how to do parallax right. Used to highlight the size of the product range, and the free shipping options, rather than simply to add interest, it’s an engaging effect on this site.

Sudtipos

Some type foundries focus on black and white to pull us in. Sudtipos have gone in completely the other direction, draping their site in colors inspired by their native Argentina. It’s a fitting approach for a colorful design collective.

The Wing

The Wing is a co-working space with a difference: it’s women-only. With its roots in community activism in the 19th and 20th centuries, The Wing has four spaces in NY and DC, and has plans for six more. It’s a site targeting women, with none of the clichés.

Swallowtail Tea

Swallowtail Tea’s art direction features heavy use of Photoshop’s noise filter, giving the site a nostalgic feel—plus the added benefit of much smaller image files, delivering a faster, more pleasant browsing experience.

Foster Type

Fittingly for a site showcasing type and lettering design, the online portfolio of Dave Foster features some exceptionally well-set type. For lovers of detailed design, it’s a pleasure to browse through and admire.

The Disconnect

The Disconnect is a unique approach to publishing on the web, they want you to disconnect in order to view the content. Just browse over and then turn off your wi-fi. Only on its second issue, it’s great, distraction-free journalism.

The Floral Society

Who doesn’t love flowers? The Floral Society sells high-quality products for amateur florists. From a Christmas wreath workshop, to DIY wedding flowers. It’s a delightful site put together on Squarespace, proving that anyone really can design a website.

The D. E. Shaw Group

A superlative example of an animation that transforms as you scroll, the D. E. Shaw Group’s site is a modern, abstract depiction of investment banking. As a way to illustrate a non-tangible product, it’s difficult to beat.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

It is too soon to talk about Christmas presents, but sometimes it’s good to plan ahead. The Kickstarter program is the place where designers’ ideas can thrive. You can either submit a project and wait for the money to pour in, or support a clever invention by buying it, or donating for it. We’ve dedicated today’s post to those products that we think designers would love. So whether you are a designer, your partner is a designer, or somebody close to you is a designer, I’m sure you would all love to get hold of these Kickstarter products.

As designers, we should always encourage people who are trying to succeed by creating whatever their minds give birth to. We know that quality work implies a ton of time spent. We all had to go though the same progress at the beginning of our careers. This is why I strongly believe that we should support Kickstarter Products we believe in, the same way other people supported and encouraged us when they believed in us.

Since April 28, 2009, Kickstarter’s statement was:

Kickstarter helps artists, musicians, filmmakers, designers, and other creators find the resources and support they need to make their ideas a reality. To date, tens of thousands of creative projects — big and small — have come to life with the support of the Kickstarter community.

Ever since then, $3.9 Billion has been pledged, and 150,541 projects have been successfully funded. At this very moment, there are 3,622 live projects waiting to find their ways to success. The old projects are still on the platform for anyone to have access to them. If there’s something in particular you are looking for, but it’s no longer live, you can still use Kickstarter to find it and purchase it.

After navigating around the website for a while, we found some things that you might be interested in. We know we certainly were. Here’s what we found:

Experience Journal : Notebook for your creative observation

GPS ART POSTER

Sigmund Freud Typeface – A Letter to your Shrink.

“World’s First 3D Metal and Mechanized Playing Cards”

SparkMaker FHD – The Most Affordable FHD SLA 3D Printer

Perfect Cut: The All-In-One Utility Knife for Complex Shapes

We hope you enjoyed this list we’ve created, and that you will share it with other people, as well. This will help us keep producing content on our blog. We would also like to help all the designers who read our blog posts. So if you are a designer and would like to be featured on our website, write us an email at webdesignledger.blog@gmail.com and we will tell you all the steps you need to make. Easy!

Read More at Kickstarter Products Designers Will Love

Project management can be a time consuming and stressful job. Other than the fact that your entire team relies on you to make tough decisions and guide them on the path to success, you have to schedule and manage every project.

monday.com exists to make project management a breeze. With a hefty list of features and tools, you’ll find yourself managing and collaborating with the best without even breaking a sweat.

At its core, monday.com is an Agile project management software. Historically, agile is one of the most used and effective methodologies that’s ever existed in project management, and that’s nothing to shake a stick at. But, besides all the history and features, what makes monday.com so great? Well, I’m glad you asked:

Collaboration at it’s finest

One of the biggest reasons anyone uses a project management software is to collaborate with the rest of their team. All your planning and scheduling means nothing if you can’t deliver that information to everyone else. Not only can you share the plans with everyone on the team, you’ll be able to receive direct message, easily edit timelines as the project goes forward, and keep an eye on what everyone’s up to.

“A company’s structure is the result of leadership that creates a culture. We wanted a culture of togetherness, of people getting recognition. Today, at Wix parties, I can approach any employee and talk to them about their work. It blows their minds. They’re like, ‘How do you know?’ and the answer is monday.com! Do you know what that does to their motivation?” – Avishai Abrahami, CEO and founder of Wix.com.

Let’s not forget about the most important people in this whole operation – the clients. Remember, the clients are the reason you get a paycheck, and they deserve to be in the loop, too. With monday.com, you can add your clients as guests for the project so that they can get constant, real-time updates as soon as everyone else.

Simplicity is the key

Often times, softwares like this overwhelm the user. monday.com thought about this and condensed everything into one space. You can manage everything from one single dashboard. Instead of trying to navigate the entire website for one tool, you have the full arsenal of tools at the click of your mouse.

Having trouble finding info from that project you worked on from last year? A simple search will quickly lead you to any image, update, project, or assignment your team has ever worked on.

On top of this already massive pile of impressive highlights, you can integrate many of your favorite apps into one place. monday.com is truly a one-stop shop.

They also offer a mobile version so that you can stay updated on the go. Many project management softwares don’t offer any way to get real-time information unless you’re in the office. With the app, you’ll never miss an important update again.

Why you need monday.com

monday.com is one of the most widely used softwares on the market. Everyone who’s familiar with it will agree that there’s nothing else like it. Nowhere else will you get this sort of usefulness, versatility, and simplicity.

With their impressive list of features, all-in-one dashboard, user focused navigation, and constant praise and reviews, it’s easy to see why so many people chose and continue to choose monday.com.

Read More at Monday.com – The Project Manager’s Paradise