Creating Pretty Popup Messages Using SweetAlert2

Every now and then, you will have to show an alert box to your users to let them know about an error or notification. The problem with the default alert boxes provided by browsers is that they are not very attractive. When you are creating a website with great color combinations and fancy animation to improve the browsing experience of your users, the unstyled alert boxes will seem out of place.

In this tutorial, you will learn about a library called SweetAlert2 that allows us to create all kinds of alert messages which can be customized to match the look and feel of our own website.

Display Simple Alert Messages

Before you can show all those sweet alert messages to your users, you will have to install the library and include it in your project. If you are using npm or bower, you can install it by running the following commands:

You can also get a CDN link for the latest version of the library and include it in your webpage using script tags:

Besides the JavaScript file, you will also have to load a CSS file which is used to style all the alert boxes created by the library:

Once you have installed the library, creating a sweet alert is actually very easy. All you have to do is call the swal() function. Just make sure that the function is called after the DOM has loaded.

There are two ways to create a sweet alert using the swal() function. You can either pass the title, body text and icon value in three different arguments or you can pass a single argument as an object with different values as its key-value pairs. Passing everything in an object is useful when you want to specify values for multiple arguments.

When a single argument is passed and it is a string, the sweet alert will only show a title and an OK button. Users will be able to click anywhere outside the alert or on the OK button in order to dismiss it.

When two arguments are passed, the first one becomes the title and the second one becomes the text inside the alert. You can also show an icon in the alert box by passing a third argument. This can have any of the five predefined values: warning, error, successinfo, and question. If you don’t pass the third argument, no icon will be shown inside the alert message.

Configuration Options to Customize Alerts

If you simply want to show some basic information inside an alert box, the previous example will do just fine. However, the library can actually do a lot more than just simply show users some text inside an alert message. You can change every aspect of these alert messages to suit your own needs.

We have already covered the title, the text, and the icons inside a sweet alert message. There is also an option to change the buttons inside it and control their behavior. By default, an alert will only have a single confirm button with text that says “OK”. You can change the text inside the confirm button by setting the value of the confirmButtonText property. If you also want to show a cancel button in your alert messages, all you have to do is set the value of showCancelButton to true. The text inside the cancel button can be changed using the cancelButtonText property.

Each of these buttons can be given a different background color using the confirmButtonColor and cancelButtonColor properties. The default color for the confirm button is #3085d6, while the default color for the cancel button is #aaa. If you want to apply any other customization on the confirm or cancel buttons, you can simply use the confirmButtonClass and cancelButtonClass properties to add a new class to them. Once the classes have been added, you will be able to use CSS to change the appearance of those buttons. You can also add a class on the main modal itself by using the customClass property.

If you interacted with the alert messages in the first example, you might have noticed that the modals can be closed by pressing either the Enter or Escape key. Similarly, you can also click anywhere outside the modal in order to dismiss it. This happens because the value of allowEnterKey, allowEscapeKey, and allowOutsideClick is set to true by default.

When you show two different buttons inside a modal, the confirm button is the one which is in focus by default. You can remove the focus from the confirm button by setting the value of focusConfirm to false. Similarly, you can also set the focus on the cancel button by setting the value of focusCancel to true.

The confirm button is always shown on the left side by default. You have the option to reverse the positions of the confirm and cancel buttons by setting the value of reverseButtons to true.

Besides changing the position and color of buttons inside the alert messages, you can also change the background and position of the alert message or the backdrop around it. Not only that, but the library also allows you to show your own custom icons or images in the alert messages. This can be helpful in a lot of situations.

You can customize the backdrop of a sweet alert using the backdrop property. This property accepts either a Boolean or a string as its value. By default, the backdrop of an alert message consists of mostly transparent gray color. You can hide it completely by setting the value of backdrop to false. Similarly, you can also show your own images in the background by setting the backdrop value as a string. In such cases, the whole value of the backdrop string is assigned to the CSS background property. The background of a sweet alert message can be controlled using the background property. All alert messages have a completely white background by default.

All the alert messages pop up at the center of the window by default. However, you can make them pop up from a different location using the position property. This property can have nine different values with self-explanatory names: top, top-start, top-end, center, center-start, center-end, bottom, bottom-start, and bottom-end.

You can disable the animation when a modal pops up by setting the value of the animation property to false. The library also provides a timer property which can be used to auto-close the timer once a specific number of milliseconds have passed.

In the following example, I have used different combinations of all the properties discussed in this section to create four different alert messages. This should demonstrate how you can completely change the appearance and behavior of a modal created by the SweetAlert2 library.

Important SweetAlert2 Methods

Initializing different sweet alert messages to show them to users is one thing, but sometimes you will also need access to methods which control the behavior of those alert messages after initialization. Fortunately, the SweetAlert2 library provides many methods that can be used to show or hide a modal as well as get its title, text, image, etc.

You can check if a modal is visible or hidden using the isVisible() method. You can also programmatically close an open modal by using the close() or closeModal() methods. If you happen to use the same set of properties for multiple alert messages during their initialization, you can simply call the setDefaults({configurationObject}) method in the beginning to set the value of all those properties at once. The library also provides a resetDefaults() method to reset all the properties to their default values.

You can get the title, content, and image of a modal using the getTitle(), getContent(), and getImage() methods. Similarly, you can also get the HTML that makes up the confirm and cancel buttons using the getConfirmButton() and getCancelButton() methods.

There are a lot of other methods which can be used to perform other tasks like programmatically clicking on the confirm or cancel buttons.

Final Thoughts

The SweetAlert2 library makes it very easy for developers to create custom alert messages to show to their users by simply setting the values of a few properties. This tutorial was aimed at covering the basics of this library so that you can create your own custom alert messages quickly. 

To prevent the post from getting too big, I have only covered the most commonly used methods and properties. If you want to read about all the other methods and properties which can be used to create advanced alert messages, you should go through the detailed documentation of the library.

Don’t forget to check out the other JavaScript resources we have available in the Envato Market, as well.

Feel free to let me know if there is anything that you would like me to clarify in this tutorial.


Source: Nettuts Web Development

Summer On Your Desktop: Fresh Wallpapers For July 2018

Summer On Your Desktop: Fresh Wallpapers For July 2018

Summer On Your Desktop: Fresh Wallpapers For July 2018

Cosima Mielke

2018-06-30T14:00:55+02:00
2018-07-11T01:51:43+00:00

For most of us, July is the epitome of summer. The time for spending every free minute outside to enjoy the sun and those seemingly endless summer days, be it in a nearby park, by a lake, or on a road trip, exploring unfamiliar places. So why not bring a bit of that summer joy to your desktop, too?

In this post, you’ll find free wallpapers for July 2018 created by artists and designers from across the globe as it has been our monthly tradition since more than nine years already. Please note that some of the wallpapers come in two versions as usual (with and without a calendar for the month), while the best-of selection at the end of the post only covers the non-calendar versions. Have a great July — no matter what you have planned!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Design Your Own Wallpaper

Igor Izhik has designed quite a lot of wallpapers for our monthly challenge. If you would like to get started yourself, check out his article in which he shares how he approaches all stages of the process as well as useful tips and tricks for creating illustrations in Adobe Illustrator. Get creative! →

Heated Mountains

“Warm summer weather inspired the color palette.” — Designed by Marijana Pivac from Croatia.

Heated Mountains

Triumphant July

“This summer started out hot, with eyes wide open and monitoring the World Cup in Russia. We wanted to decorate your desktop this July with this colorful Red Square illustration, just before the eagerly anticipated finale, hoping to see the trophy awarded to our players.” — Designed by PopArt Studio from Serbia.

Triumphant July

Robinson Cat

Designed by Ricardo Gimenes from Sweden.

Robinson Cat

All You Need Is Ice Cream

“July is National Ice Cream Month! National Ice Cream Day is celebrated on the 3rd Sunday in July. On this day people celebrate with a bowl, cup or cone filled with their favorite flavor of ice cream. Share some ice cream and some love this month with my wallpaper!” — Designed by Melissa Bogemans from Belgium.

All You Need Is Ice Cream

A Mighty Woman With A Torch

“Last year we visited NYC for the first time during the 4th of July. I took many photos of Lady Liberty and was so deeply inspired by her message.” — Designed by Jennifer Forrest from Indiana.

A Mighty Woman With A Torch

Night Sky Magic

Designed by Ricardo Gimenes from Sweden.

Night Sky Magic

Fly Forever

“Challenges are a part of parcel of life. Surpassing each challenge would be difficult, but it is you who decide whether to keep going or shun the drive. No matter whatever circumstance you are in, ignite your mind and just fly forward into action to achieve what you are capable of and what is beyond your reach.” — Designed by Sweans from London.

Fly Forever

Smile, It’s Summer

“July brings me to summer, and last year in summer, I went to Salzburg, Austria where I took this photo. So every beginning of summer, I think about Salzburg and how sunny and warm it was there.” — Designed by Ilse van den Boogaart from The Netherlands.

Smile, It’s Summer

Even Miracles Take A Little Time

“‘One day, the people that didn’t believe in you will tell everyone how they met you.’ Believe in Yourself. Give it all that you can, take your own sweet time and be your own miracle!” — Designed by Binita Lama from India.

Even Miracles Take A Little Time

July Favorites

Lots of beautiful wallpapers have been created in the nine years since we embarked on our wallpapers adventure. And since it’d be a pity to let them gather dust, we once again dived deep into our archives on the lookout for some July treasures. Please note that these wallpapers, thus, don’t come with a calendar.

A Flamboyance Of Flamingos

“July in South Africa is dreary and wintery so we give all the southern hemisphere dwellers a bit of colour for those grey days. And for the northern hemisphere dwellers a bit of pop for their summer! The Flamboyance of Flamingos is part of our ‘Wonderland Collective Noun’ collection. Each month a new fabulous collective noun is illustrated, printed and made into a desktop wallpaper.” — Designed by Wonderland Collective from South Africa.

A Flamboyance Of Flamingos

Summer Essentials

“A few essential items for the summertime weather at the beach, park, and everywhere in-between.” — Designed by Zach Vandehey from the USA.

Birdie Nam Nam

Summer Cannonball

“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by Maria Keller from Mexico.

Summer Cannonball

Mason Jar

“Make the days count this summer!” — Designed by Meghan Pascarella from the USA.

Mason Jar

Birdie Nam Nam

“I have created a pattern that has a summer feeling. For me July and summer is bright color, joy and lots of different flowers and birds. So naturally, I incorporated all these elements in a crazy pattern.” — Designed by Lina Karlsson from Sweden.

Birdie Nam Nam

Spectate

Designed by Tekstografika from Russia.

Spectate

Summer Never Ends!

“July is a very special month to me — it’s the month of my birthday and of the best cherries.” — Designed by Igor Izhik from Canada.

Summer Never Ends!

World Ufo Day

“The holiday dedicated to those who study the phenomena that have no logical explanation, and the objects, which is attributed to an extraterrestrial origin.” — Designed by Cheloveche.ru from Russia

World Ufo Day

Captain Amphicar

“My son and I are obsessed with the Amphicar right now, so why not have a little fun with it?” — Designed by 3 Bicycles Creative from the USA.

Captain Amphicar!

Tropical Lilies

“I enjoy creating tropical designs, they fuel my wanderlust and passion for the exotic. Instantaneously transporting me to a tropical destination.” — Designed by Tamsin Raslan from the USA.

Tropical Lilies

Day Turns To Night

Designed by Xenia Latii from Germany.

Day Turns To Night

Eternal Summer

“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Eternal Summer

Taste Like Summer!

“In times of clean eating and the world of superfoods there is one vegetable missing. An old forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it — dip it!” — Designed by Alexandra Tamgnoué from Germany.

Taste Like Summer!

Road Trip In July

“July is the middle of summer, when most of us go on road trips, so I designed a calendar inspired by my love of traveling and summer holidays.” — Designed by Patricia Coroi from Romania.

Road Trip In July

World Chocolate Day

Designed by Cheloveche.ru from Russia.

World Chocolate Day

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

Thank you to all designers for their participation. Join in next month!

Smashing Editorial
(il)


Source: Smashing Magazine

Optimization Auditing: A Deep Dive into Chrome’s Dev Console

Chrome DevTools incorporates many sub-tools for debugging web applications on the client side — like recording performance profiles and inspecting animations — most of which you’ve likely been using since your early days of learning web development, mostly through the DevTools console.

Let’s look at some of those tools, focusing particularly on the console and the performance metrics.

To access Chrome’s DevTools:

  • right click anywhere on a page, click Inspect from the context menu
  • use the keyboard shortcuts Ctrl + Shift + I on Windows and Linux systems or Alt + Command + I on macOS
  • use the keyboard shortcuts Ctrl + Shift + J on Windows and Linux systems or Alt + Command + J on macOS.

The Snippets Tool

If you’re frequently writing JavaScript code right in the console, make sure to use the Snippets feature of DevTools instead, which is similar to a code editor and provides mechanisms to write JavaScript code snippets, run them in the context of the current page and save them for later. It’s better than writing multi-line JavaScript code directly in the console.

You can access the Snippets tool from the Sources panel. Once open, the console gets stacked below (if it doesn’t, just press Escape) so you can write, run your code and see the console output at the same time.

Snippets tool

Using the Chrome DevTools Console

You can use the console to interact with any web page using JavaScript. You can query and change the DOM and query/output different types of performance information.

The console can be opened either as a full-screen dedicated panel or as a drawer next to any other DevTools panel by pressing Escape while DevTools is open and has focus.

Accessing and docking the console

When working with the browser’s console, if you want to enter multi-line expressions you need to use Shift + Enter, because just Enter will execute what’s in the input line at that moment.

The console history

You can clear the console history in different ways:

  • by typing clear() in the console
  • by calling console.clear() method in the console or JavaScript code
  • by clicking on the red circle in the top left corner of the console
  • by pressing CTRL+L in macOS, Windows and Linux
  • by right-clicking in the Console and then pressing Clear console.

Clear history

You can preserve the log (by enabling the Preserve log checkbox) between page refreshes or changes until you clear the console or close the tab.

Preserving the log

You can save the history in the Console as a text file by right-clicking in the console and selecting Save as…, then choosing the location of a log file.

Save history

Console variables

The variables you create in the Console are persisted until you do a page refresh, so pay attention to when you’re using keywords such as let or const when declaring variables. Running the same code or function for the second time will throw an Uncaught SyntaxError, saying that the identifier has already been declared. You can either use the OR (||) operator to check if the variable is already defined or you can use var to declare variables, since it doesn’t complain for previously declared variables.

The post Optimization Auditing: A Deep Dive into Chrome’s Dev Console appeared first on SitePoint.


Source: Sitepoint

How To Craft The Perfect Web Developer Ré­su­mé

How To Craft The Perfect Web Developer Ré­su­mé

How To Craft The Perfect Web Developer Ré­su­mé

Aditya Sharma

2018-06-29T14:00:26+02:00
2018-07-11T13:57:24+00:00

Did you know that your ré­su­mé could be the reason that’s holding you back from that 150k+ job that you know you deserve? This guide is dedicated to all the web developers out there and will demonstrate how you can create a successful ré­su­mé that will get you more shortlists than you can fathom. If it’s a piece of paper that is standing between you and your dream job, it’s time to show who’s the boss.

Our guide to making a killer ré­su­mé will broadly talk about the following:

  1. Why Would A Web Developer Need A Ré­su­mé In The First Place?
  2. Ré­su­mé Format: Sorting Out The Key Elements Of A Web Developer Ré­su­mé
  3. Professional Summary
  4. Technical Skills
  5. Managerial Skills
  6. Professional Experience
  7. Education Section In A Web Developer Ré­su­mé
  8. Technical Projects
  9. Additional Sections In The Web Developer Ré­su­mé
  10. ATS Optimization
  11. Key Takeaways
  12. A Sample Ré­su­mé To Get You Started

Why Would A Web Developer Need A Ré­su­mé In the First Place?

I don’t need a ré­su­mé! I’ll have a job before I wake up tomorrow!

I sighed. He was a brilliant web developer and we both knew it. He felt he was wasting away his life and deserved something better — I agreed. He gave his two weeks’ notice and was under the impression that a new job as well as a better profile will just land on his lap.

But he had ignored that singular piece of document which has a track record of making or breaking people’s lives — the humble ré­su­mé.

As part of my job, I go through dozens of ré­su­més on a daily basis. I had seen his ré­su­mé as well. I wish I had the heart to tell him that just being a kickass developer isn’t enough — you have to convince the same to the recruiter on a 1-pager. And while accomplishing a task like that is not rocket science, it’s not a walk in the park either.

Web developers know that a lot depends on networking and client recommendations, so a ré­su­mé usually takes a backseat in most cases. Couple that with a growing demand and you know there won’t ever be a shortage of projects.

So why to waste time on a web developer ré­su­mé? Let’s take a moment and study this graph below:

Web Developer Demand from 2012-2016

Graph showing the demand for web developers from 2012-2016. (Large preview)

The data is taken from Indeed.com, and if you notice the trend in the past few years, you’ll observe two main facts:

  • With the advent of web-based startups, the peak of web development was 5-6 years ago and has either been steady or in a decline.
  • For jobs that require web development as the only skill, the demand is steady, as of now.

Additionally, going by Forbes’ analysis, fields like AI, AR and Data Science are the new up-and-coming stalwarts in the tech industry. Influencers and tech experts strongly believe that these domains have the ability to revamp the way we’ve been doing things until now. So while the demand for web developers is steady right now, the picture is not all rosy.

Sure, as a web developer, you are confident that you’ll never have a shortage of projects. You have a list of happy clients which you served in the past and you believe that their network is enough to sustain you. But if you look at the tech industry in general and see how trends shape up and die down at a breathtaking pace, you’ll realize that this approach is probably not the wisest one.

You think you’ll always have a job or a project because you specialize in something which is in huge demand, but how long do you want to be at the receiving end of client’s tirades? Wouldn’t you want flexible hours, remote work, or professional clients for a change who know what they want?

Wouldn’t you want to 1-up your game from an 80k job to a 150k+ profile?

That’s where your ré­su­mé comes in.

Believe us, we’ve seen how that single piece of a document has changed people’s lives — the individual remains the same, with his certifications, qualifications, previous profiles and what not, but just revamping everything about that individual on paper suddenly transforms the person himself.

We’ve seen it because we’ve done it.

And if the demand for web developers is there, you don’t think you’re the only one who noticed that, right? For every project that you willingly drop or miss, you’ll find ten developers who will pick it up before it even hits the ground. You have a fair idea of the cutthroat competition which is out there, but continue reading and you’ll find out that the competition is not even the tip of the iceberg. The actual recruitment process and the role which a ré­su­mé plays in it might be an eye-opener for you.

Which is why, without further ado, let’s dive in.

2. Re­su­mé Format: Sorting Out The Key Elements Of A Web Developer Ré­su­mé

Broadly speaking, your web developer ré­su­mé will contain the following sections:

  • Contact info
  • Professional Summary
  • Key Skills (Technical + Managerial)
  • Professional Experience
  • Education
  • Projects
  • Extra: Social profiles
  • Interests, Hobbies, Extra-curricular achievements (Optional).

How do you arrange all these sections? What’s the order that you are supposed to follow? Are all of these sections necessary?

That’s where understanding ré­su­mé layouts and formats becomes important.

A ré­su­mé is either Reverse-Chronological, Functional or Hybrid.

2.1 Reverse-chronological

As the name suggests, it starts off by listing your current or last-held profile and continues from there until you reach the part about your ‘Education.’

  • It’s ATS-friendly (more on ATS below) and allows you to emphasize upon your current work profile and achievements. It’s easy to create and is considered to be the standard format for most ré­su­més.
  • The only downside is that in case you are a frequent job-switcher, it might look bad on paper. There’s no way to hide career gaps in a reverse-chronological ré­su­mé.

Below is an example of the same.

Reverse-Chronological Ré­su­mé

Format for a ‘reverse-chronological’ ré­su­mé. (Large preview)

2.2 Functional Ré­su­més

It only lists the companies where you worked at without diving into the details of your actual work profile. Instead, you create a separate section in which you group all your points under relevant skills.

It can be used by people to hide gaps in their career trajectory, but we aren’t fans of this format, simply because you can merely disguise your gaps but sooner or later, it’s bound to show up. It’s always better to be honest, always.

Here’s an example of a functional ré­su­mé. If you’ll notice, it doesn’t allow the recruiter to see your career trajectory or how you evolved to reach where you are.

Functional Ré­su­mé

Format for a ‘functional’ ré­su­mé. (Large preview)

2.3 Hybrid (Combination) Ré­su­més

This format is exactly similar to the reverse-chronological format apart from the fact that in the ‘Professional Experience’ section, the points are grouped by the sills that they represent.

A format like this allows the recruiter to scan relevant points only based on the skills they are looking for. If you can customize your ré­su­mé to the job description, you can direct the attention of the recruiter to where you want. This is the biggest advantage of using this ré­su­mé format.

Another subset of ‘hybrid’ ré­su­més is where you extract all your achievements and create a separate section of ‘Summary of Skills.’ This allows you to create a highly targeted ré­su­mé, focussing only on the skills which you want to showcase to the recruiter.

You’ll find examples of both down below.

Combination Ré­su­mé

Format for a combination (hybrid) ré­su­mé. (Large preview)

Combination ré­su­mé with Summary of Skills

Combination ré­su­mé containing an additional ‘Summary of Skills.’ (Large preview)

3. Professional Summary

We encountered innumerable people who spent countless hours and days polishing their ‘Ré­su­mé Objective’ section. Are you also one of them?

What is the difference between the Professional Summary and ré­su­mé Objective section? We like to misappropriate a JFK quote to answer all queries regarding this conundrum:

Ask not what the company can do for you, but what you can do for the company.

Meet Vanessa. She’s the Head Recruiter at a top-notch IT firm and is now looking for an awesome web developer. Her email is flooded with ré­su­més and they all look the same. She’s tired of seeing people listing out what they want — it looks more like a shopping list than a professional ré­su­mé. Surprisingly, all of them are ‘hard-working’ and possess ‘excellent communication skills’ and are ‘looking for a challenging leadership position’.

— yawn —

Then she opens your ré­su­mé which contains a crisp 4-5 line summary detailing your skills and how you plan to apply those skills for achieving organizational goals. You did your research where you identified high-priority needs of the company, and you’ve mentioned how you plan to address them through the skills that you possess.

She sits up and stops thinking about Game of Thrones for a second. She’s hooked and now wants to meet you in person.

Mission accomplished.

Let us clarify that through an example. Check out a couple of professional summaries and try to see which one delivers greater impact.

I’m a 4 years experienced Web Developer specializing in front-end who’s skilled in ASP.NET, Javascript, C++, HTML, CSS, PHP & MySQL. I am looking for the position of a web developer in a company which will utilize my excellent team management and communication skills.

Technically, there’s nothing wrong with this, just like technically there was nothing wrong with the Star Wars prequels. Now check this out:

5+ years experienced, dynamic and detail-oriented Full Stack Web Developer with a track record of spearheading teams to engineer user-centric solutions for achieving breakthrough efficiency and driving client satisfaction. Highly skilled in end-to-end SDLC and effectively prototyped 20+ product features annually for XYZ to achieve a 25% reduction in costs. Registered unparalleled customer satisfaction levels and received the 2017 Employee of the Year Award for achieving a record-breaking NPS score out of 300+ employees.

See the difference? If you’ll notice, the summary doesn’t include a detailed list of his technical proficiency. It’s better to reserve that for a separate Technical Skills section. The Summary is there to give a bird’s-eye view of your professional career and should be a reason for the recruiter to continue with the rest of your Ré­su­mé.

Additionally, in the first example, the summary ended with an ‘Objective’ statement which serves no purpose to the recruiter. But highlighting your achievements (in the second example) will make the reader pause…and if you manage to do that, congratulations — you are already one step ahead of a majority of applicants out there.

Are you wondering what the kind of professional summary listed above is a bit unreal? What if you are an entry-level Web Developer with no concrete achievement to boast of? What do you do then?

In that scenario, and only in that scenario, in the absence of any significant work experience, you can go for an Objective section in case of a Professional Summary. And there can be multiple ways of approaching the same.

Goal-oriented Web Developer with a Bachelor’s degree in Computer Science and looking to enhance my professional experience with an IT company specializing in web development. Armed with a deep sense of responsibility and possessing very high levels of enthusiasm to give my 110% for any endeavor.

Desperate much?

Right off the bat, it’s always better if the entire ré­su­mé is in third-person — that means no references to ‘I’, ‘me’ or ‘mine.’ It’s always ‘possessing a track record,’ not ‘I possess a track record.’

Additionally, the above summary doesn’t inspire confidence. You can be a fresher and also sound professional without looking like you’ll die of starvation if you don’t get the job. Here’s how:

Dynamic and detail-oriented Web Developer with a knack for conceptualizing and delivering elegant, user-friendly solutions effectively and efficiently. Possesses a track record of developing an e-commerce mobile app, a CRM online portal and a fully-functional website for a nonprofit working with underprivileged children. Armed with an extensive understanding of end-to-end SDLC and cloud computing. Regular participant and organizer of local hackathons and web developer meetups.

This only shows that you don’t need extensive experience with high-end corporates to make a killer professional summary. You only need to understand the motivations of the recruiter who’s hiring.

4. Technical Skills

Like mentioned earlier, for a technical ré­su­mé like that of a web developer, it’s better to reserve a separate section for all your technical expertise. But even in that scenario, there are ways in which you can optimize the space available to deliver greater impact.

Most web developer ré­su­més that we see usually give a long list of their technical proficiency. In their quest to make the list comprehensive and all-inclusive, they often compromise on readability. Let us clarify that through an example:

JenkinsMavenOOJS
CiCdDockerAngular 4
Apache Tomcat 6BitbucketGit
JiraChrome developer toolsHTML5
Kendo UIBootStrapMozilla Firebug (debugger)
CSS3.0MySQLJQuery
AJAXJavaScriptPHP

A layman would think that the skills are all neatly arranged — surely there’s no other way to make it even better, is there?

Well, as a matter of fact, there is. In case of any dilemmas, it’s always better to place yourself in the shoes of the recruiter and come up with ways to make the job of evaluating you even easier.

While there’s nothing wrong with the way the skills are mentioned above, there’s another way through which you can present the same information and make it look even more relevant.

Web Technologies & Frameworks: Angular 4, HTML5, CSS3.0, Kendo UI, PHP

Scripts/UI: JavaScript, OOJS, JQuery, AJAX, BootStrap

Database and ORM: MySQL

Web Debug Tools: Mozilla Firebug (debugger), Chrome developer tools

Application/Web Server: Apache Tomcat 6

Versioning and other tools: Git, Bitbucket, Jira

Deployment Tools: Docker, Maven, CiCd, Jenkins

Boom!

By merely assigning sub-headings to the skills that you possess, you made the recruiter’s job easier. Now she only has to scan the sub-headings to quickly find if what she’s looking for is there in your ré­su­mé or not.

5. Managerial Skills

Many web developers stop at ‘Technical Skills’ and continue with their ‘Professional Experience.’ True, for a tech profile, technical skills play a major role and acts as a foundation for whether or not you’ll be shortlisted or not.

But remember when we talked about the difference between an 80k profile where you are dealing with nonsense clients and a 180k+ profile with flexible hours? The ‘Key Skills’ section containing your managerial and leadership skills will play a critical role in bridging that gap. Web developers are a dime a dozen — from a recruiter’s perspective; it’s cheaper to just hire a freelancer for their development work, if that’s what they are looking for.

But they are not, are they? They are looking for a full-time profile. What do you think would be the difference between the two?

Ownership. Leadership.

Companies aren’t just looking for a robot who can be programmed to do basic tasks. They are looking for future leaders who can take over a few years down the line. And it’s your task to convince the recruiter that you are such an individual. Any freelancer working on an hourly basis will possess the technical skills that you do. But it’s your leadership and managerial skills that will help you make it.

Coming to your non-technical skills, it’s always better if you prioritize hard, professional skills over soft skills like ‘communication’ and ‘self-motivation.’ Why? Simply because there’s no way to prove or quantify the same. But you can always add skills like ‘Issue Resolution,’ ‘Leadership’ or ‘Project Management’ and then proceed with showcasing the same in your ‘Professional Experience’ section.

A simple rule of thumb while mentioning your managerial skills is “Show, Don’t Tell.” It’s always better if you are able to substantiate the skills that you mention with concrete points down below.

Don’t just say that you are a leader. Show that you’ve led teams to achieve departmental goals.

Don’t say that you are good in negotiating. Show how your negotiation skills led an x% reduction in costs.

A few examples of managerial skills which you can include in your ré­su­mé are below.

Front-End DevelopmentAgile MethodologyCode Optimization
Documentation & ReportingRequirement GatheringUI Enhancement
Module ManagementIssue ResolutionStakeholder Management
Client Relationship ManagementProject ManagementTeam Leadership

Mention only those skills which you can elucidate in your ré­su­mé. There’s no point in adding a random list of skills which you’ll find insanely difficult to justify at the time of your interview.

How do you identify all those managerial skills which are relevant?

The ‘Job Description.’ That is your Bible for your entire ré­su­mé writing process.

Look for non-technical skills (both managerial and soft skills) and see if they can be included. Only add them if you think you can justify them, either in points below or at the time of your interview. Nothing will hurt your chances more badly than blatantly lying on your Ré­su­mé.

6. Professional Experience

How do you go about framing points for your ré­su­mé?

The ‘Professional Experience’ section is going to be the most critical section of your ré­su­mé. It’s the fuel of your car — the body and looks are alright, but the car won’t move an inch without juice. This section is that juice for your ré­su­mé.

A handy resource for you would be the ‘Job Description.’ Your task is to align the entire ré­su­mé along the lines of what the recruiter is looking for. Your ré­su­mé should look like it’s in response to the JD, that you possess the ability to resolve all the issues which are inherently mentioned in that document.

6.1 Master CV

A better (but tiring) way to proceed would be to make a MasterCV first. It’s a time-consuming process, but we can guarantee that it’s going to give you rich dividends for the rest of your jolly professional career.

We are assuming that you never actually got a chance to sit down with your ré­su­mé, to look at it and figure out what’s wrong with it and how it can be better. And it’s perfectly alright if that’s the case. Most people have that attitude when it comes to their ré­su­mé. It’s always a last-minute rush, which means that there’s almost always something that you’ll inevitably miss, that there’s always a chance that it can be made better.

MasterCV is how you avoid that situation, it’s an important piece in getting you that 150k+ profile. It’s basically a list of literally everything that you have ever done till date. And we mean everything.

A masterCV is for your own use. No one is going to see it. There’s no need to structure it or keep it to two pages — it can be a 10-page long list of bullet points consisting of every achievement (curricular, extra-curricular, professional, achievements around your hobbies or interests — you name it) in your entire life, or it can be full of deathly long paragraphs. The idea is to keep a single document containing all your achievements till date, and regularly updating it.

What do you think happens when you update your ré­su­mé in a last-minute rush? You only add those points which you are able to recollect at that moment. But if you think about it, your tenure at any organization must be filled with tiny milestones and achievements (i.e. milestones which get missed out when you update your ré­su­mé in a rush).

Once you have your masterCV ready, take out the JD of the profile that you are targeting and scan your masterCV for points which can be interpreted and rephrased along the lines of what the recruiter is looking for. The idea is to customize your ré­su­mé according to the job, and not send a standard ré­su­mé for any and all profiles that you come across.

As you continue to update your masterCV, years down the line when you’ll be applying for something else, you can again come back to that same document and pick out points for tailoring your ré­su­mé to that new profile.

6.2 Cause-Effect Relationship: The Princeton Formula To Rule Them All

Another thing to keep in mind is the cause-effect relationship. Most people find themselves at a loss when it comes to filling out actual points for the job which they were doing. They know what they did, but they can’t write it down in coherent points. When that happens, they resort to a typical JD for jobs like the one they themselves were doing, and then morph those points into their own ré­su­mé.

A fundamental thing which is wrong with this approach is that a typical JD is responsibility-based, while your ré­su­mé should be achievement-based. A JD contains a list of things which the recruiter expects a candidate should be capable of, while your ré­su­mé will contain your achievements around those responsibilities. There’s a stark difference.

The good thing is that a vast majority of applicants resort to this approach. So a tiny deviation from this well-treaded path will automatically elevate your chances of getting shortlisted.

How do you do that? By making sure that there’s a coherent cause-effect relationship in each point. A foolproof way to make sure that you are able to do that is the Princeton formula along the lines of:

A + P + R = A

Action Verb + Project + Result = Accomplishment

If you are able to incorporate the essence of this formula in all your ré­su­mé points, trust us, 99% of your job is done.

Most applicants either mention their responsibilities or their achievements. But this formula ensures that not only you mention these two parameters; you also detail the quantifiable impact of your achievements. Instead of wrapping your achievements around your profile, showcase the impact that you achievement had on the organization. When you do that, you instantly enhance your role from someone who just did what they were told, to someone who took ownership of their responsibilities and delivered an impact at the macro level.

An example of the Princeton formula in action:

Spearheaded a team of 5 Junior Developers to effectively execute 11 projects with 100% on-time delivery while achieving a cost-reduction of 20% and registering CSAT levels of 4.88/5.00

This point is so much better than a generic point along the lines of:

Worked on various projects to decrease costs and achieve client satisfaction.

A point like this clearly highlights the quantifiable impact that you were able to achieve. Beginning a point with an action/power verb (a list of which you can find in the Princeton document linked above, or you can simply google the same) instantly magnifies the impact of that point, as opposed to most other candidates who often tend to ‘manage’ everything.

That’s the kind of point which makes the recruiter pause, and believe us, when a Hiring Manager is going through dozens of ré­su­més on a daily basis, it’s a superhuman task to make her pause and look at your ré­su­mé. Your task is to do just that, and that’s how you do it.

6.3 Bucketing/Subheadings

Another critical weapon in your arsenal to make a stellar Developer ré­su­mé is bucketing, or sub-headings.

Merely framing immaculate points will only get you so far. Let’s say you picked apart your entire experience in your previous profile and came up with this:

  • Developing client-side libraries across both iOS and Android to enable usage of the offline sync feature for the app developer,
  • Envisioned & developed the common network layer for Android to accomplish a reduction in the SDK size by ~20%,
  • Commissioning the development of Logging Framework across all platforms including iOS, Android & Windows,
  • Achieved the ‘Team Excellence Award’ & played a critical role in applying for a patent based on the logging library,
  • Conceptualizing and developing a library for the company to reduce additional costs involved in using third-party libraries,
  • Spearheading a team of ~20 to conceptualize and effectively implement the Mark for Upload feature for the company,
  • Proposing a common network layer for all network calls to be used by the product to effectively optimize SDK size.

Sure, in their individual capacity, the points are meticulously framed and seem to follow the Princeton formula uniformly. But the entire work experience itself looks like a wall of text which will make the recruiter groan the moment she sees it. You don’t want that, do you?

Now look what happens when we take the same points and work our magic to make it a breeze for the recruiter, without changing a thing about the points themselves:

Team Management & Leadership

  • Spearheading a team of ~20 to conceptualize and effectively implement the Mark for Upload feature for the company
  • Commissioning the development of Logging Framework across all platforms including iOS, Android & Windows.

Library Management & Process Optimization

  • Conceptualizing and developing a library for the company to reduce additional costs involved in using third-party libraries
  • Developing client-side libraries across both iOS and Android to enable usage of the offline sync feature for the app developer
  • Proposing a common network layer for all network calls to be used by the product to effectively optimize SDK size.

Key Achievements

  • Envisioned & developed the common network layer for Android to accomplish a reduction in the SDK size by ~20%
  • Achieved the ‘Team Excellence Award’ & played a critical role in applying for a patent based on the logging library.

If that isn’t mic-drop stuff, we don’t know what is.

In a single instant, you transformed the entire professional experience by neatly arranging all the points into buckets or sub-headings. Consequently, the recruiter won’t have to go through the individual points — merely perusing through the buckets will serve the purpose. And to further sweeten the deal, you bolded relevant words and phrases to make the recruiter’s job even easier? That’s what you want, isn’t it? If you make the recruiter’s job easier, she’ll surely return the favor.

6.4 Professional Experience Section for an Entry-level Web Developer

But again, does the above point look a bit unreal? What do you do if you are a fresher with no significant professional experience to mention?

Believe us, possessing years of work experience is not the only way to showcase that you’ll be fit for the job. More than the achievement itself, if you are able to demonstrate that you have the right attitude, your job is done.

So how do you phrase your professional experience in a way that will make you stand in comparison to a Developer armed with a few years of experience?

  • Include projects for which you freelanced in your career till date,
  • Bolster your Github profile and code that you’ve posted there,
  • Include all open-source projects you have contributed to,
  • Mention any hackathons or local developer meetups in which you participated or helped organize.

PRO-TIP: If you are looking for a short-term solution to beef up your entry-level web developer ré­su­mé, just look up for some open-source projects online. You’ll find hundreds of projects to which you can contribute, so you can incorporate the same on your ré­su­mé.

Meet Chad, an entry-level web developer looking for a high-end profile. After hours of deliberations and brainstorming, this is what he came up with:

Entry-level web developer possessing a BA Degree in Computer Science and armed with an eager-to-learn approach where I can deploy my excellent development skills.

— yawning continues —

Since you know that you only get one shot at the profile of your dreams, why would you sabotage your chances if you can do this instead:

FREELANCE PROJECTS:

  • Developed a webapp portal for an e-travel firm to increase the client’s sales by 48%,
  • Enabled the Smiles Dental Clinic to measure patient satisfaction scores through an online form. Assisted in boosting CSAT levels by 7 points within 2 months,
  • Independently developed a website for the local Baseball league championship to increase streaming sales by 50%,
  • Created a webapp to facilitate easy donations through Facebook & Whatsapp for Friendicoes Shelter for the Homeless. Raised donation levels by 45% & helped rehabilitate 25 people from the street.

That’s Vincent. He knew he was stuck in a vicious cycle wherein he needed work experience to gain work experience. So he took matters in his own hands and scouted the digital space for any and every project that he could find. Within a span of 4 months, he executed 4 such projects, strengthened his ré­su­mé to make it at par with a professional developer, and is now leading a team of his own at a top-notch firm.

7. Education Section In A Web Developer Ré­su­mé

This section is often underrated by most developers. Shouldn’t the professional experience and projects be the focus on your ré­su­mé?

Yes. But that doesn’t mean you can scribble your educational qualifications on the back of a napkin and staple it on your ré­su­mé.

You can follow the conventional path and include your degree, college, and year of passing.

But remember. You only get one shot at this.

Let us clarify that through an example:

BA — Computer Science
University of Syracuse, ‘16
GPA 3.9

Um. Okay. Again, it’s not technically wrong. But try this:

BA — Computer Science
University of Syracuse, 2013-2016

  • Utilized a deep-rooted passion for cloud technologies by contributing to the open-source AWS Project for New York University
  • Wrote a column on ‘Is AI the Industrial Revolution of the 21st Century’ for the college magazine
  • Developed the Salesforce Contacts mobile app to streamline operations & performed Jasmine Unit Tests in the TDD process
    • Deployed the MVVM Architecture for boosting ability to build scalable apps & optimized usage of Pagination & Sorting

We don’t have to elucidate the differences, do we? The best part is that it’s easily doable. It’s not necessary that your ‘Education’ section should look like that — the points above are just examples. But if you sit down and brainstorm with yourself, you’ll definitely come up with a list of something which you can quantify and incorporate in your ré­su­mé — participation in clubs, internships, freelance projects, college competitions, publications… we can go on really.

8. Technical Projects

If you’ve been following our tips until now, you can include them all to make a brilliant ‘Projects’ section for your web developer ré­su­mé. Combining the Princeton formula with bucketing and bolding, this is what a sample ‘Projects’ section looks like:

A few obvious pointers that this sample highlights are as follows:

  • For every project, include an ‘Environment’ subheading which lists out all the tools and technologies which were deployed for executing that project. If there are a lot, you can categorize them into further classes (like we did with the ‘Technical Skills’ section).
  • A description of the company/client helps put the project in perspective. The idea is to showcase to the recruiter that you were working for a reputed company. You can include figures around number of employees, revenue, etc. to make sure it comes out like that.
  • Industry standards dictate the location and time period to be aligned to the right, with the company and project title aligned to the left.
  • Adding buckets or subheadings is an effective way to incorporate the skills and methodologies which the recruiter is looking for. You can scan the ‘Job Description’ for skills which the recruiter is targeting and phrase your points to ensure that the bucket (which goes on top of the points, meaning greater visibility) includes those skills.
  • Try to reserve a separate ‘Key Achievements’ section for as many projects as you possibly can, with quantifiable impact to showcase the depth of your contribution.

Web Developer Projects

Key Projects section for the ré­su­mé of a Web Developer. (Large preview)

9. Additional Sections In The Web Developer Ré­su­mé

To deliver the Oomph!-factor to your ré­su­mé, there are additional sections which you can incorporate. Recruiters know the cost of any hiring decision, and they know that if you are on-boarded, you’ll spend a greater part of your day with other team members. It’s important for them to know that you’ll gel along with the team — that’s where these additional sections come in.

You can include sections on ‘Extra-curricular Activities’, ‘Awards & Recognition’, ‘Hobbies/Interests’, and so on. It’s important to stay relevant even when you are working on these sections. Just saying you like to travel or play football won’t add any value to your ré­su­mé. Instead, quantifying your hobbies/interests will go a long way in ensuring that.

Web developers, in particular, can include their social profiles. This is a great guide containing sample developer portfolios that will inspire you to polish your own. A well-maintained Github profile, for instance, will signify that you are not a developer just because you have a degree — it means that you actually like your job and find it engaging enough to do in your free time as well.

This is a sample ‘Hobbies’ section, for instance, the likes of which we see a lot on a daily basis:

HOBBIES
Reading, travel, photography

Surprisingly, a vast majority of applicants will have a ‘Hobbies’ section like this. This tells the recruiter nothing.

Now, check this out:

HOBBIES

  • Convener of monthly meetings of the Webber Society of California, with 800+ members in CA and 10,000+ pan US
  • Photography: Owner and administrator of the Free Smiles Photography Page on Facebook with 7k+ likes
  • Travelled to 7 countries in the last 12 months and documented the same on my travel blog (insert link)

Maybe you don’t own a photography page with 7k+ likes, and that’s okay. The idea is to quantify even your hobbies and interests, to give an idea to the recruiter as to what that hobby means to you. Most recruiters look for people who can have a life outside of the workplace and can maintain a healthy work-life balance. If you can’t elaborate on your hobbies or interests, better to avoid that section altogether than to include it and make it look like you just wanted to fill up space.

A ‘Portfolio’ section will do wonders for your ré­su­mé. You can find projects online which would only take a couple of hours — adding something like that on your ré­su­mé will instantly boost its value. You can’t attach a million lines of code in an Appendix to your ré­su­mé to tell the recruiter that you like to code. But a healthy portfolio containing a list of happy clients and projects successfully executed will bolster your profile.

10. ATS Optimization

Ah. The dreaded ATS. You might have only heard rumors or sordid tales of it, but what exactly is the ATS?

If you’re the Head Recruiter of an MNC that receives thousands of applications on a daily basis, what are your options? To personally go through all of the ré­su­més? To hire a team the size of Denmark and have them scan ré­su­més 24/7? Or, you know, get a software to do the job for you?

Applicant Tracking Systems work a keyword matching algorithm, wherein the software matches the ré­su­mé with the keywords present in the job description. Remember that one time when you sent a ré­su­mé to a company and never heard from them? Did you curse the recruiter after that, wondering why they couldn’t bother to send a standard rejection mail? Have you considered the fact that maybe no human recruiter actually got a chance to scan your ré­su­mé? What if your ré­su­mé was rejected by the ATS even before it landed on a human’s desk?

That happens more often than you think. The solution to that isn’t stuffing your ré­su­mé with keywords. Your task isn’t to beat the ATS alone — even if your ré­su­mé is parsed by the ATS, the recruiter will take one look and trash it even before you get a chance to blink.

This is a great tool to match your ré­su­mé with the JD which you are targeting. It will give you an ATS score depending on how many relevant keywords you used in the ré­su­mé against the JD. Moreover, it will give you a list of keywords which you can include to increase your score. A lot depends on which particular ATS that the company is using. Also, remember that the ATS, at the end of the day, is operated by a human recruiter. You can only guess which keyword the recruiter will look up on the ATS, but you can cater to as many keywords as you possibly can. just to be sure.

Scan the JD to get a list of keywords which are important to the company; additionally, you can paste the entire JD in a word cloud which analyses the frequency of words used in a text. Incorporate those keywords in an organic manner without making it look like you are being blatant about it.

Reminder: ATS is just a step in the entire recruitment process. You shouldn’t compromise meaning or authenticity at the cost of ATS optimization. It would be futile if the ATS is able to parse your ré­su­mé but the recruiter sitting behind a desk thinks the ré­su­mé itself was written by a machine.

11. Key Takeaways

To recap a few critical points that we touched above:

  • A reverse-chronological ré­su­mé format is your best best. A functional or a hybrid (combination) ré­su­mé is not the best way to showcase your achievements with context and impact. A reverse-chronological ré­su­mé showcases your trajectory which gives a bird’s-eye view of your career till date.
  • In case you are not an entry-level developer, go for a professional Summary section instead of an Objective section.
  • Divide your skills into Technical and Managerial Skills. Group all your technical skills under relevant sub-headings to make the job of the recruiter (who will be a generalist and not a ‘techie’) easier. Prioritize professional skills (hard skills) over soft skills and try to elucidate the skills that you have mentioned in your ‘Professional Experience’ section.
  • A MasterCV is the ideal way if you want to break down your job-hunting process into something much more manageable — not just for your immediate requirements but for the long run.

    Having a master document containing all your achievements till date will allow you to customize your job application, instead of sending a generic ré­su­mé for all vacancies.

    And tailoring your ré­su­mé to the job application is how you beat a majority of other applicants.

  • Keep the Princeton formula in mind (Action Verb + Project + Result = Accomplishment) while you are framing points under the ‘Professional Experience’ section. This allows you to establish a cause-effect relationship which can transform your entire application.
  • Bolding and Bucketing (sub-headings) in your work-ex section will make sure you pass the 6-second test. You can use it to only highlight those achievements which you want the recruiters to notice before they dive down into your actual ré­su­mé.
  • Go for additional sections (Hobbies, Interests, etc.) only if you think it will bolster your application, or if you can provide substantial details around the same.
  • Once you are done, check the ATS score of your ré­su­mé against the job description for the profile which you are targeting to identify gaps and areas of improvement.

12. A Sample Ré­su­mé To Get You Started

Still have more doubts around the ré­su­mé-writing process? Want to share your experience of making your ré­su­mé or the job-hunt in general? Give us a shout-out in the comments and we’ll get back to you!

A Sample Web Developer Ré­su­mé

A complete sample ré­su­mé for a web developer (Large preview)
Smashing Editorial
(ra, yk, il)


Source: Smashing Magazine

Improving Page Load Performance: Pingdom, YSlow and GTmetrix

Optimizing websites for speed is a craft, and each craft requires tools. The most-used website optimization tools are GTmetrix, YSlow and Pingdom Tools.

GTmetrix is a rather advanced tool that offers a lot on its free tier, but it also offers premium tiers. If you sign up, you can compare multiple websites, multiple versions of the same website, tested under different conditions, and save tests for later viewing.

YSlow is still relevant, although its best days were those when Firebug ruled supreme among the browser inspectors. It offers a Chrome app and other implementations — such as add-ons for Safari and Opera, a bookmarklet, an extension for PhantomJS, and so on.

For advanced users, PhantomJS integration means that one could, for example, automate the testing of many websites — hundreds or thousands — and export the results into the database.

YSlow’s Ruleset Matrix has for a number of years been a measuring stick for website performance.

Pingdom Tools is a SaaS service that offers monitoring and reporting of website performance, and it has strengthened its market position in recent years. It also offers a DNS health check and website speed testing on its free tier, which is comparable to GTMetrix and YSlow.

For the purposes of this article, we purchased a fitting domain name — ttfb.review — and installed Drupal with some demo content on it. We also installed WordPress on wp.ttfb.review, and demo installations of Yii and Symfony on their respective subdomains.

We used the default WordPress starting installation. For Drupal, we used the Devel and Realistic Dummy Content extensions to generate demo content. For Symfony we used the Symfony demo application, and for Yii we used basic application template.

This way, we’ll be able to compare these installations side-by-side, and point out the things that deserve attention.

Please be aware that these are development-level installations, used only for demonstration purposes. They aren’t optimized for running in production, so our results are likely to be subpar.

The post Improving Page Load Performance: Pingdom, YSlow and GTmetrix appeared first on SitePoint.


Source: Sitepoint

Build a Video Chat Service with JavaScript, WebRTC, and Okta

As recently as seven short years ago, building video applications on the web was a massive pain. Remember the days of using Flash and proprietary codecs (which often required licensing)? Yuck. In the last few years, video chat technology has dramatically improved and Flash is no longer required.

Today, the video chat landscape is much simpler thanks to WebRTC: an open source project built and maintained by Google, Mozilla, Opera, and others. WebRTC allows you to easily build real-time communication software in your browser and is being standardized at the W3C and IETF levels. Using WebRTC, you can build real-time video chat applications in the browser that actually work well! It’s pretty amazing.

Today, I thought it’d be fun to walk you through the process of using WebRTC and Okta to build a simple video chat service that allows users to create a chatroom and share the link around to anyone they want who can then join the room and chat with them in real-time.

The application you’ll be building today will use Okta (a free authentication service) to handle user login and access control and WebRTC for powering all the video functionality. You’ll also use pure JavaScript to create the web application.

By the time you’ve gone through this guide, you’ll have a much better understanding of how both web authentication and real-time video chat works in a pure JavaScript environment.

Let’s get started.

NOTE: Want to play around with the chat app in real-time? You can do so here: https://naughty-bhabha-908faa.netlify.com You can also view the source code for the app we’ll be building on GitHub.

Create the Web Page

The first thing you’ll do is create a simple HTML web page for the app.

When building web applications, I like to start by first creating my markup and CSS, then going back for a second pass and adding in application logic.

Create a new folder somewhere on your computer called chatapp, then create an index.html file with the following contents:

<!DOCTYPE html>
<html>
  <head>
    <title>vchat - a simple video chat app</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header>
        <h1><a href="/">vchat</a></h1>
        <h2><a href="/">a simple video chat app</a></h2>
      </header>

      <div id="okta-login-container"></div>

      <div class="row">
        <div class="col"></div>
        <div class="col-md-auto align-self-center">
          <p id="login"><b>NOTE</b>: You are not currently logged in. If you'd like to start your own
            chat room please <button type="button" class="btn btn-light">log in</button></p>
          <div id="url" class="alert alert-dark" role="alert">
            <span id="roomIntro">ROOM URL</span>: <span id="roomUrl"></span>
          </div>
        </div>
        <div class="col"></div>
      </div>

      <div id="remotes" class="row">
        <div class="col-md-6">
          <div class="videoContainer">
            <video id="selfVideo"></video>
            <meter id="localVolume" class="volume"></meter>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>Hacked together by <a href="https://twitter.com/rdegges">@rdegges</a>
        and <a href="https://twitter.com/oktadev">@oktadev</a>.</p>
    </footer>
  </body>
</html>

This simple page is using the latest version of Bootstrap as well as the Raleway font (my personal favorite) — but not much else.

The key elements present in this minimalistic HTML page are:

  • An okta-login-container div, which will eventually hold our login form
  • A login notice and Room URL placeholder that will notify a user whether they need to log in, and what chat room they are currently in
  • A div that will eventually contain all of the video feeds from various participants

If you open this page up in your browser, you’ll notice that it looks pretty bad. But don’t worry, you’ll make it look pretty soon enough! 😉

vchat screenshot with no styling

Next, you’ll want to create a folder called static, which contains another folder named css. Then, you’ll need to copy the following CSS into a new style.css file inside that folder:

body {                                                                                                                        
  font-family: 'Raleway', sans-serif;                                                                                         
}                                                                                                                             

footer {                                                                                                                      
  text-align: center;                                                                                                         
  margin-top: 2em;                                                                                                            
}                                                                                                                             

h2 {                                                                                                                          
  font-style: italic;                                                                                                         
}                                                                                                                             

header {                                                                                                                      
  text-align: center;                                                                                                         
  margin: 4em;                                                                                                                
}                                                                                                                             

header h1, header h2 {         
  display: inline;             
}                              

header h1 a, header h2 a, header h1 a:hover, header h2 a:hover {                                                              
  color: inherit;              
  text-decoration: none;       
}                              

header h2 {                    
  font-size: 24px;             
  padding-left: .5em;          
}                              

#remotes {                     
  visibility: hidden;          
}                              

#url {                         
  text-align: center;          
  display: none;               
}                              

#login {                       
  display: none;               
}                              

#roomIntro {                   
  font-weight: bold;           
}

.videoContainer {              
  object-fit: cover;           
  margin: 0 auto;              
  padding: 0;                  
}                              

.videoContainer video {        
  width: 100%;                 
  height: 100%;                
  border-radius: 10px;         
  border: 5px double #f2f2f2;  
}                              

.volume {                      
  position: absolute;          
  left: 15%;                   
  width: 70%;                  
  bottom: 20px;                
  height: 10px;                
  display: none;               
}                              

.connectionstate {             
  position: absolute;          
  top: 10px;                   
  width: 100%;                 
  text-align: center;          
  color: #fff                  
}                              

.col-md-6 {                    
  margin-bottom: 1em;          
} 

I won’t go into detail explaining each CSS rule (as I won’t want to bore you to death), but if you add your newly created stylesheet into your index.html page, you’ll notice that the web app now looks a lot nicer:

<head>
  <title>vchat - a simple video chat app</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/style.css">
</head>

vchat screenshot with styling

Set Up Okta

Now that you’ve got a simple web page with some styling on it, let’s set up the user login component using Okta. If you don’t already have an Okta developer account, go create one now then come back (it should only take a second).

Once you’ve got your Okta account and you’re logged into the Okta dashboard, you’ll need to create a new Okta application (this is how Okta knows what type of app you’re building and what type of authentication to allow).

To do this, navigate to the Applications tab from your dashboard and click the Add Application button. Once there, click the Single-Page App icon (because you are building a SPA) then click Next.

Okta create app

Once you’ve reached the Create New Application page fill out the Application Settings form with the following information:

Okta app settings

When done, click Done. Your Okta Application is now almost ready to go.

The next thing you’ll need to do is add your local computer as a Trusted Origin — trusted origins are URLs allowed to interact with Okta from a pure JavaScript environment; you’ll need to explicitly create one.

To do this, click the API tab followed by the Trusted Origins tab from your Okta dashboard. To create your new origin, now click the Add Origin button:

Okta create trusted origin

Once you’ve reached the Add Origin screen, enter the following information which tells Okta to allow you to use the Okta authentication service from your local test environment:

Okta create trusted origin

Finally, now that you’ve configured your Okta Application and all necessary security rules, you should go create some user accounts in Okta that you can log in with later. You can do this by clicking on the Users tab followed by the Add Person button:

Okta create user

Use Okta to Handle User Authentication

Now that you’ve got Okta configured, you need to plug Okta into your web app so users can log into your video chat app.

While there are many different ways to integrate with Okta, for a single-page app like the one you’re building today you’ll want to use the Okta Sign-In Widget.

The Okta Sign-In Widget is a pure JS library you can drop into any web page that handles user authentication for you.

Before adding the widget’s JS code (below), you’ll want to visit your Okta dashboard and grab the Org URL value from the top-right portion of the page.

Okta dashboard

You’ll also need to view the Application you created earlier to grab the Client ID value. These two values (the client ID and org URL) will be used below.

Okta app credentials

Now that you have the necessary credentials, let’s get started plugging the widget into your web app. Open the index.html file you were working on previously and import the Okta Sign-In widget dependencies as well as initialize the widget at the bottom of the page in a script tag. Be sure to substitute {{OKTA_ORG_URL}} and {{CLIENT_ID}} with the appropriate values for your app.

<!-- snip -->

<head>                       
  <title>vchat - a simple video chat app</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn53
84xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/js/okta-sign-in.min.js" type="text/javas
cript"></script>                                               
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-sign-in.min.css" type="text/css"
 rel="stylesheet"/>                                            
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-theme.css" type="text/css" rel="
stylesheet"/>                                                  
  <link rel="stylesheet" href="/static/css/style.css">       
</head>

<!-- snip -->

<footer>
  <p>Hacked together by <a href="https://twitter.com/rdegges">@rdegges</a>
    and <a href="https://twitter.com/oktadev">@oktadev</a>.</p>
</footer>

<script>
  var okta = new OktaSignIn({
    baseUrl: "{{OKTA_ORG_URL}}",
    clientId: "{{CLIENT_ID}}",
    authParams: {
      issuer: "{{OKTA_ORG_URL}}/oauth2/default",
      responseType: ["token", "id_token"],
      display: "page"
    }
  });

  // Render the login form.
  function showLogin() {
    okta.renderEl({ el: "#okta-login-container" }, function(res) {}, function(err) {
      alert("Couldn't render the login form, something horrible must have happened. Please refresh the page.");
    });
  }

  // Handle the user's login and what happens next.
  function handleLogin() {
    // If the user is logging in for the first time...
    if (okta.token.hasTokensInUrl()) {
      okta.token.parseTokensFromUrl(
        function success(res) {
          // Save the tokens for later use, e.g. if the page gets refreshed:
          okta.tokenManager.add("accessToken", res[0]);
          okta.tokenManager.add("idToken", res[1]);

          console.log("user just logged in");
        }, function error(err) {
          alert("We weren't able to log you in, something horrible must have happened. Please refresh the page.");
        }
      );
    } else {
      okta.session.get(function(res) {

        // If the user is logged in...
        if (res.status === "ACTIVE") {

          console.log("user is already logged in")
          return;
        }

        // If we get here, the user is not logged in.
        console.log("user not logged in");
        showLogin();
      });
    }
  }

  handleLogin();
</script>

The code above initializes the Okta widget, handles user authentication, and logs some messages to the developer console to help you understand what’s going on.

The okta object you create above controls the widget’s functionality: by creating a new instance of the OktaSignIn class and giving it your app-specific details, you’re essentially telling Okta where your OpenID Connect server is and how to use it (Okta uses the OpenID Connect protocol behind the scenes to power this login widget).

The handleLogin function you see above is what controls the session management in your app. If a user has just logged in (as part of the OIDC flow) then the user’s access and ID tokens will be stored in HTML local storage so your app can remember who the user is. If the user was already logged in but is viewing the page, a message will be echoed to the console. And if the user is not logged in at all, then the login form will be rendered (via the showLogin function).

Now that you’ve got the widget hooked up to your app, if you view your app in a browser you’ll be able to see the Okta Sign-In Widget in action: it will render a nice looking login form. If you fill in your Okta user login details you’ll notice that the appropriate console.log message will fire: either you aren’t logged in, you just logged in, or you were already logged in.

vchat test Okta login

Configure State Management

The next thing you will need to do is configure state management for the app. But before we dive into that, let’s talk about how the app is going to work.

The video chat app you’re building will give each registered user their own dedicated chat room that they can use at any time and that can be shared with any external person. When another person joins one of these dedicated chat rooms they’ll be instantly put into the video chat session without needing an account on the site.

To make this functionality work in a simple manner, you’ll structure the app such that each registered user will have a dedicated chat room whose URL is {{YOUR_SITE_URL}}?room={{email}}. This way, if my email address is r@rdegges.com then I’ll have a dedicated chat room my friends can join that is {{YOUR_SITE_URL}}?room=r@rdegges.com — easy to remember and easy to share.

If a user is on a page with the room querystring, you’ll know that they are trying to join a specific video chat room and will use that querystring value to put them into the right room. If the user is visiting the homepage of the site (without any querystring), you’ll know that they’re likely trying to log into the app and that you should therefore show them the login form.

This is the basic logic you’ll implement below. We’ll build on this as this guide progresses, adding more and more functionality in until the video chat service is fully built.

To get started, create a hasQueryString function that will be helpful in determining whether or not the user is on the homepage of the app or in a specific chat room:

// Determine whether or not we have a querystring.
function hasQueryString() {
  return location.href.indexOf("?") !== -1;
}

Next, define two helper functions: getRoom and getRoomURL which will determine the chat room name (from the querystring) as well as the fully qualified room URL as well. These will be helpful later on when writing the video chat code:

// Determine the room name and public URL for this chat session.
function getRoom() {
  var query = location.search && location.search.split("?")[1];

  if (query) {
    return (location.search && decodeURIComponent(query.split("=")[1]));
  }

  return okta.tokenManager.get("idToken").claims.email;
}

// Retrieve the absolute room URL.
function getRoomURL() {
  return location.protocol + "//" + location.host + (location.path || "") + "?room=" + getRoom();
}

Now that you’ve got some useful helper functions, you’ll want to modify the handleLogin function from before to:

  • Redirect logged in users to their dedicated chat room ({{YOUR_SITE_URL}}?room={{email}}
  • Notify users who aren’t logged in (but are in a video chat room) that they can log in if they want to
// Handle the user's login and what happens next.
function handleLogin() {
  // If the user is logging in for the first time...
  if (okta.token.hasTokensInUrl()) {
    okta.token.parseTokensFromUrl(
      function success(res) {
        // Save the tokens for later use, e.g. if the page gets refreshed:
        okta.tokenManager.add("accessToken", res[0]);
        okta.tokenManager.add("idToken", res[1]);

        // Redirect to this user's dedicated room URL.
        window.location = getRoomURL();
      }, function error(err) {
        alert("We weren't able to log you in, something horrible must have happened. Please refresh the page.");
      }
    );
  } else {
    okta.session.get(function(res) {

      // If the user is logged in...
      if (res.status === "ACTIVE") {

        // If the user is logged in on the home page, redirect to their room page.
        if (!hasQueryString()) {
          window.location = getRoomURL();
        }

        return;
      }

      // If we get here, the user is not logged in.

      // If there's a querystring in the URL, it means this person is in a
      // "room" so we should display our passive login notice. Otherwise,
      // we'll prompt them for login immediately.
      if (hasQueryString()) {
        document.getElementById("login").style.display = "block";
      } else {
        showLogin();
      }
    });
  }
}

By using the simple helper functions to handle redirects, you’re almost able to accomplish everything you need in terms of state management.

But, there’s one tiny thing left to do: you need to make sure that the login button redirects any users to the homepage of the app so they can view the login form. To do this, simply define an onclick handler on the button element in the page:

<p id="login">
  <b>NOTE</b>: You are not currently logged in. If you'd like to start your own chat room please <button type="button" class="btn btn-light" onclick="document.location='/'">log in</button>
</p>

And with that final change, the app’s state management is now complete!

vchat state management

Time to move onto the fun stuff: real-time video with WebRTC.

Use WebRTC to Enable Real-Time Video Chat

To get real-time video chat working in this app we’ll be using the fantastic SimpleWebRTC library. This library provides some excellent APIs that wrap the underlying WebRTC APIs making them much simpler to work with.

To get started with SimpleWebRTC, you first need to include the required adapter library in the head section of the web app:

<head>
  <title>vchat - a simple video chat app</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/js/okta-sign-in.min.js" type="text/javascript"></script>
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>
  <script src="https://webrtc.github.io/adapter/adapter-4.2.2.js"></script>
  <link rel="stylesheet" href="/static/css/style.css">
</head>

Next, you’ll need to modify the videoContainer div you created previously which will hold your video in order to do two things:

The post Build a Video Chat Service with JavaScript, WebRTC, and Okta appeared first on SitePoint.


Source: Sitepoint

Create Interactive Gradient Animations Using Granim.js

Gradients can instantly improve the look and feel of a website, if used carefully with the right color combination. CSS has also come a long way when it comes to applying a gradient on any element and animating it. In this tutorial, we will move away from CSS and create gradient animations using a JavaScript library called Granim.js.

This library draws and animates gradients on a given canvas according to the parameters you set when creating a Granim instance. There are different methods which can be used to make your gradient respond to different user events like a button click. In this tutorial, we will learn about this library in detail and create some simple but nice gradient animation effects.

Create Solid Color Gradient Animations

Before we begin creating any gradient, you will have to include the library in your project. For this, you can either download Granim.js from GitHub or link directly to a CDN. The library version that I am using in this tutorial is 1.1. Some methods that we will discuss here were only added in version 1.1, so using an older library version when following this tutorial will not always give the expected result. Keeping these points in mind, let’s create our first gradient using Granim.js.

Every time you create a new Granim instance, you can pass it an object of key-value pairs, where the key is the name of a particular property and the value is the value of the property. The element property is used to specify the CSS selector or DOM node which will point to the canvas on which you want to apply a particular gradient.

When you create a gradient animation where the colors change from a relatively light value to a darker value, it might become impossible to read some text that you have positioned on the canvas. For example, the initial gradient applied on an element might be a combination of yellow and light green. In such cases, the text of the canvas would have to be darker for users to be able to read it properly. 

Similarly, the gradient might consist of dark red and black at some other point, and in such cases the dark text would not be easy to read. Granim.js solves this problem for you by allowing you to specify a container element on which you can add the dark and light classes to style the text or other elements accordingly. The value of the elToSetClassOn property is set to body by default, but you can also specify any other container element. The dark and light class names are updated automatically based on the average color of the gradient.

The elToSetClassOn property does not work by itself. You will also have to specify a name for the Granim instance that you created using the name property. If you set the name to something like first-gradient, the name of the classes applied on the container element will become first-gradient-light or first-gradient-dark based on how light or dark the gradient currently is. This way, any element which needs to change its color based on the lightness or darkness of the gradient will be able to do so with ease.

The direction in which a gradient should be drawn can be specified using the direction property. It has four valid values: diagonal, left-right, top-bottom, and radial. The gradients that you create will not move in those particular directions—they will just be drawn that way. The position of the gradient doesn’t change during the animation; only its colors do.

There is also a states property, which accepts an object as its value. Each state specified inside the states object will have a name and a set of key-value pairs. You can use the gradients property to specify different colors which should make up a particular gradient. You can set the value of this property to be equal to an array of gradients. 

Granim.js will automatically create an animation where the colors of the gradient change from one set to another. The transition between different gradients takes 5,000 milliseconds by default. However, you can speed up or slow down the animation by setting an appropriate value for the transitionSpeed property.

After the gradients start animating, they will have to come to an end at one point or another. You can specify if the gradient should then just stop there or start animating again from the beginning using the loop property. This is set to true by default, which means that the gradient would keep animating.

Each color in a gradient can have a different opacity, which can be specified using the opacity property. This property accepts an array to determine how opaque each color is going to be. For two gradient colors, the value can be [0.1, 0.8]. For three gradient colors, the value can be [1, 0.5, 0.75], etc.

You also have the option to specify the time it takes for the gradient animation to go from one state to another using the stateTransitionSpeed. This is different from the transitionSpeed property, which controls the animation speed inside the same state.

In the following code snippet, I have created two different Granim instances to draw different gradients. In the first case, we have only specified a single gradient, so there is not any actual animation and the colors don’t change at all.

Animate Gradients Over an Image

Another common use of the Granim.js library would be to animate a gradient over an image drawn on the canvas. You can specify different properties to control how the image is drawn on the canvas using the image property. It accepts an object with key-value pairs as its value. You can use the source property to specify the path from which the library should get the image to draw it on the canvas.

Any image that you draw on the canvas will be drawn so that its center coincides with the center of the canvas. However, you can use the position property to specify a different position to draw the image. This property accepts an array of two elements as its value. The first element can have the values left, center, and right. The second element can have the values top, center, and bottom

These properties are generally useful when you know that the size of the canvas and the image won’t match. In these situations, you can use this property to specify the part of the image that should appear on the canvas.

If the images and the canvas have different dimensions, you can also stretch the image so that it fits properly inside the canvas. The stretchMode property also accepts an array of two elements as its value. Three valid values for both these elements are stretch, stretch-if-smaller, and stretch-if-larger.

A gradient with blend mode set to normal will completely hide the image underneath it. The only way to show an image below a gradient of solid colors would be to choose a different blend mode. You can read about all the possible blend mode values for a canvas on MDN.

I would like to point out that the ability to animate a gradient over an image was only added in version 1.1 of the Granim.js library. So you will have to use any version higher than that if you want this feature to work properly.

Methods to Control Gradient Animation Playback

Up to this point, we did not have any control over the playback of the gradient animation once it was instantiated. We could not pause/play it or change its state, direction, etc. The Granim.js library has different methods which let you accomplish all these tasks with ease.

You can play or pause any animation using the play() and pause() methods. Similarly, you can change the state of the gradient animation using the changeState('state-name') method. The state-name here has to be one of the state names that you defined when instantiating the Granim instance.

More methods were added in version 1.1 which allow you to change the direction and blend mode of an animation on the fly using the changeDirection('direction-name') and changeBlendingMode('blending-mode-name') methods.

In the following code snippet, I am using a button click event to call all these methods, but you can use any other event to call them.

Final Thoughts

In this tutorial, I have covered the basics of the Granim.js library so that you can get started with it as quickly as possible. There are a few other methods and properties that you might find useful when creating these gradient animations. You should read the official documentation in order to read about them all.

If you’re looking for additional JavaScript resources to study or to use in your work, check out what we have available in the Envato Market.

If you have any questions related to this tutorial, feel free to let me know in the comments.


Source: Nettuts Web Development

How Mobile Web Design Affects Local Search (And What To Do About It)

How Mobile Web Design Affects Local Search (And What To Do About It)

How Mobile Web Design Affects Local Search (And What To Do About It)

Suzanna Scacca

2018-06-28T14:30:06+02:00
2018-07-11T13:57:24+00:00

As mobile-first takes center stage in the majority of articles I write these days, I’ve had a number of designers and developers question why that is. Sure, Google has made a big push for it, so it’s smart to do what Google tells you. But, for some websites, the majority of traffic doesn’t come from mobile users.

At the moment, there are certain websites that happen to receive more mobile traffic than others, and a lot of it boils down to location. As Google explains it:

“Looking for something nearby—a coffee shop, noodle restaurant, shoe store—is one of the most common searches we do. In fact, nearly one-third of all mobile searches are related to location.”

Logically, it makes sense. If a user has access to a desktop or laptop at home or work, they’re more likely to use it to initiate a search. Whether they’re multitasking (like while coordinating dinner with a friend through Skype), walking around a city, or decide to order dinner in but don’t want to move from the couch, the mobile device is a quick way to get that information.

In this article, I’m going to focus explicitly on these kinds of consumers and the websites that appeal to them. In other words, if you design websites for businesses with a local presence, keep reading to learn how to use mobile web design to improve their local search ranking.

In last year’s Local Consumer Review survey, Bright Local revealed that 97% of consumers had used the Internet to search for local businesses at some point in 2017. For some users, the Internet was frequently used as a resource, with 12% looking for new businesses every day and 29% doing so at least once a week.


A breakdown of how frequently people search for local businesses online.
A breakdown of how frequently people search for local businesses online. (Image source) (Large preview)

A report by hitwise shows that the majority of online searches begin on mobile:


Industries whose users most commonly begin their searches for on mobile.
Industries whose users most commonly begin their searches for on mobile. (Image source) (Large preview)

Notice the trend in business types whose users most often begin their searches on mobile (i.e. they’re mostly local businesses).

Further, it appears that these kinds of searches are done for the purposes of research at the start of the buyer’s journey. If web designers and developers can get into the minds of their target users and the kinds of questions they might ask or features they might seek out, they can more effectively build a relevant mobile experience through their sites.

For those of you who specialize in building websites for clients with a local user base, you should utilize mobile design strategies that improve local search results. While some of your efforts outside the website will help with this (like creating a Google My Business page and responding to reviews on Yelp), there’s a lot that can be done with your design to greatly contribute to this as well.

Strategy 1: “Design” Your Metadata For Mobile

Copywriters and web developers are already aware of what a critical role metadata plays in a website’s search marketing efforts. In just a few succinct strings of text, you can tell search engines and your audience a lot about your website and each of its web pages. This is particularly helpful in local search as users look for results that answer the “[fill in the blank] near me” question.

But that’s not the strategy I’m talking about here. Instead, I want to focus on how you can “design” your metadata so that it’s more attractive to mobile users once your website actually appears in their local search results.

There are a couple ways to do this:

The first is to craft succinct metadata strings for each web page. Let’s take the Liquid Surf Shop website, for instance:


Refer to the first search result for Liquid Surf Shop. Notice how succinctly it’s written.
Refer to the first search result for Liquid Surf Shop. Notice how succinctly it’s written. (Image source) (Large preview)

The first search result looks nice, doesn’t it? The web page name and URL each fit on one line. The description accurately describes what the shop does (and points out where it’s located!) while also fitting within the allotted space for mobile search descriptions.

Now, take a closer look at the Liquid Surf Shop when it’s compared against direct competitors in mobile search:


Liquid Surf Shop’s metadata is well-written and to the point.Liquid Surf Shop’s metadata is well-written and to the point.
Liquid Surf Shop’s metadata is well-written and to the point. (Image source) (Large preview)

If you look at the entries for East of Maui and Dewey Beach Surf Shop above, notice how their descriptions end with an incomplete sentence. Then, look at the Bethany Surf Shop below it. The meta title is way too long for the space given. This lack of attention to metadata might cost these websites visitors when positioned around a well-written listing like the one at the Liquid Surf Shop.

Another thing you can do to improve local search listing appearance (as well as how high it ranks on the page) is to use schema markup in your design’s code.

Schema.org has created a robust set of structured data that businesses can use to improve search engine comprehension and, consequently, results. Local businesses, in particular, would find schema markup especially helpful as it allows them to “tag” various elements consumers tend to use in the decision-making process.

Here’s an example of schema markup done well for a local business: Henlopen City Oyster House:


Schema markup found for Henlopen City Oyster House home page.
Schema markup found for Henlopen City Oyster House home page. (Image source) (Large preview)

As you can see, the developer has marked up the home page with various structured data. Specifically, they have associated it with three “types”: Local Business, Restaurant, and Service. Each of those schema types have been drilled down even further into details about the location, contacting the restaurant, cuisine type, and so on. This is great for connecting mobile users to the kind of local business they seek out.

Strategy 2: Shorten The Website

With some mobile websites, it may be okay to ask users to scroll four or five times before they reach the end of the page. Or to go two or three pages deep to get to a desired endpoint.

That said, that type of extended on-site experience probably isn’t ideal for local mobile users. While Google does pay attention to factors like time-on-site and pages visited, what you need to be more concerned with is high bounce rates and lack of engagements or conversions.

In order to create this ideal situation for users while still appeasing the search gods, your focus when designing a website and its navigation is to keep it short and to the point.

I’m going to use the Bad Hair Day website for this example:


This is the first thing you see upon entering the Bad Hair Day website.
This is the first thing you see upon entering the Bad Hair Day website. (Image source) (Large preview)

The header of the website contains all the information someone might realistically need if they want to contact the hair salon and spa. The address is there along with a phone number (which does have a click-to-call function) and social media icons.

Other types of websites would do well to put business-specific information and calls-to-action here as well. For example:

  • Location search
  • Hours of operation
  • Make an appointment or reservation
  • View a menu (for food)

…and so on.


The simplified navigation menu for the Bad Hair Day website.
The simplified navigation menu for the Bad Hair Day website. (Image source) (Large preview)

Scroll just a little bit down the website and you can open the hamburger menu. As you can see, this navigation is simply structured and keeps all the essentials on the top level for easy discovery.


One more scroll on the Bad Hair Day site takes you to this informational section.
One more scroll on the Bad Hair Day site takes you to this informational section. (Image source) (Large preview)

The home page of this mobile website only requires three full swipes before you get to the end of it, which is a truly nice touch. Rather than create an overly elaborate home page with summary sections of each page that force users to scroll and scroll, Bad Hair Day keeps it simple.

By offering such a user-friendly layout and structure, Bad Hair Day has created a truly awesome first impression. In addition, by keeping things simple, the website isn’t burdened by excessive amounts of images, animations, scripts, and so on. Because of this, the mobile site loads quickly.

Strategy 3: Localize Visual Content

If your sites are mostly comprised of large swatches of color and stock photography, this one won’t apply. However, if the designs you create include custom-made photos and videos, there’s a unique opportunity to use this visual content to rank in local search.

If it makes sense, include photos that strongly resonate with local residents. Recognizable images of the local landscape or cityscape will give visitors a reason to feel a stronger connection to the business. It’s kind of like bonding over a local sports team during a consultation call or first meeting. Only, you’re able to make this connection with them through your choice of imagery.

But that’s just how you appeal to visitors’ local ties on the website. How about in search?

For this, use alt text on images and videos. This is typically recommended for the purposes of accessibility (i.e. helping impaired visitors consume your content even if they can’t see or hear it). However, alt text is also readable by Google bots. If you use the right kinds of location-driven keywords in your image’s alternative text, that visual content can rank higher in local image searches. Just keep in mind that you don’t want to sacrifice accessibility for local SEO. Make your alt text descriptive while finding ways to infuse local keywords into it.

One of the local business types I think this is particularly useful for is a real estate agency. Like Jack Lingo Realty. Here is a listing Jack Lingo posted on its website for a home in Rehoboth Beach:


Real estate listing on the Jack Lingo website.
Real estate listing on the Jack Lingo website. (Image source) (Large preview)

The top of the page includes a series of beautiful images taken of the house located at 17 West Side Drive, Rehoboth Beach, Delaware.

Now, open up the page source and look at what the first image’s alt text says:


Example of location-specific alt text used on the Jack Lingo website.
Example of location-specific alt text used on the Jack Lingo website. (Image source) (Large preview)

The alt text includes a unique identifier at the start of it (probably to distinguish it from the other images in the gallery), but is then followed by the address of the property. For prospective homeowners who do their research via Google for properties in that particular neighborhood and community, well, guess what they find when they do a Google image search for it?


Jack Lingo takes the top spots in local image search.
Jack Lingo takes the top spots in local image search. (Image source) (Large preview)

Jack Lingo’s property images take the top spots. Pretty impressive, right? So, the next time you design a website for a client whose business depends on showing off a product or property, think about how you can optimize it for local image results.

Strategy 4: Add Reviews And Ratings When Possible

I always like to refer to the aggregation of reviews and ratings on your own website as a way to control the conversation about your brand. It makes sense, right? When customers are left without a podium to speak from, they’re going to make their own… on Yelp, Google, Facebook, TripAdvisor, and wherever they feel like it. While there’s no escaping this entirely, offering a space for reviews and ratings on your website can help control the flow of feedback.

It also can improve the look of a local search result.

The example I’m going to use for this is the Fairfield Inn & Suites Rehoboth Beach:


The top of the Fairfield Inn & Suites page displays the average user rating as well as number of reviews.
The top of the Fairfield Inn & Suites page displays the average user rating as well as number of reviews. (Image source) (Large preview)

As you can imagine, a major hotel property owned by Marriott will already receive a lot of reviews from the web.


An expansion of how users rate the Marriott property, on average.
An expansion of how users rate the Marriott property, on average. (Image source) (Large preview)

However, by adding reviews and ratings to its own website, Marriott is accomplishing a few things that will help it with local search users. For starters, there’s the transparency factor. Marriott has actively solicited customers for feedback on their hotel stay and published those reviews for all to see. Local users are very fond of online reviews, with 73% claiming that positive reviews increase their trust in a local business.


The Fairfield Inn & Suites listing includes an eye-catching rating.
The Fairfield Inn & Suites listing includes an eye-catching rating. (Image source) (Large preview)

In addition, Marriott’s inclusion of a rating system on its website proves beneficial within local search results, too.

As you can see in the list of results for “Rehoboth beach de lodging”, Marriott is the only one that includes a rating—and an impressive one at that. If mobile users are quickly scrolling through search results for the most relevant and attractive business for their needs, a positive review might be enough to stop them dead in their tracks.

Strategy 5: Build Dedicated Location Pages

When designing websites with multiple locations, be sure to create a dedicated page for each location. There are on-site benefits to think about as well as search-related ones.

For starters, individual location pages reduce the amount of work visitors have to do once they get on the site. You’ve likely seen those “Location” pages before that are cluttered with a dozen or so locations, each with information related to address, phone number, email, website and so on. By giving each location a separate page, however, you don’t have to worry about compromising readability or focus.

The Tanger Outlets website demonstrates this point well as you can see that, in just a few clicks, visitors can quickly learn more about their personal location without the clutter or distraction of all the others.


he Tanger Outlets navigation includes a page dedicated to Locations.
he Tanger Outlets navigation includes a page dedicated to Locations. (Image source) (Large preview)

The Tanger Outlets navigation menu puts the “Locations” page right at the very top. It’s likely the first thing visitors search for as they aim to learn more about their local outlet mall and its offering of shops and brands.


The “Location” page on the Tanger Outlets site includes an interactive map.
The “Location” page on the Tanger Outlets site includes an interactive map. Image source) (Large preview)

The “Location” page for the Tanger Outlets website then displays an interactive map. Users can drag the map around and try to find their location on their own or they can enter details below in the short form.


Example of a location-specific page and details from Tanger Outlets.
Example of a location-specific page and details from Tanger Outlets. Image source) (Large preview)

Upon finding their location, users then receive a high-level overview of the location, phone number, and hours of operation for the Tanger Outlets near them. There are additional pages they can visit to learn more about stores and deals at that particular mall.

By creating dedicated location pages on your website, you’re also giving it an extra chance to rank within local search results.

Strategy 6: Place Your CTA Front And Center

As you might have noticed, there are common themes running through these strategies: simplicity and straightforwardness. The more quickly you can deliver information to your visitors through smart design techniques, the greater the likelihood they will engage and/or convert.

As it pertains to these key checkpoints, you obviously know what to do about designing call-to-action buttons for mobile: make them big, colorful, clickable, and in the thumb zone. But what about placement? Some argue that a call-to-action should always be placed in the most logical of locations. In many cases, that’s directly after a descriptive section of text that “sells” visitors on the reason for clicking through.

On mobile, you don’t really have time to waste. And if they’re doing a search explicitly looking for a local business that does X, Y or Z, then it would be beneficial to put your CTA front and center.

The Atlantic Oceanside is an extreme example of how to do this, but it’s one I believe is done well all the same:


The top of the Atlantic Oceanside page displays a “Book Now” button.
The top of the Atlantic Oceanside page displays a “Book Now” button. (Image source) (Large preview)

The very top of the Atlantic Oceanside website is a prominent “Book Now” button. Granted, some users might not be ready to pull the trigger on a hotel reservation the second they enter the site, but it’s still a good idea to have the button there. It’s a reminder that the booking process is going to be as painless as possible.


The “Book Now” button appears a number of times throughout the Atlantic Oceanside website.
The “Book Now” button appears a number of times throughout the Atlantic Oceanside website. (Image source) (Large preview)

For visitors who aren’t ready to book right away, the website includes the same CTA throughout the rest of the site. It’s consistently designed and worded so that visitors always know where to find it.


The Atlantic Oceanside site also includes the CTA in the navigation.
The Atlantic Oceanside site also includes the CTA in the navigation. (Image source) (Large preview)

There’s another instance of the CTA that I think is placed quite well and that’s the one that exists in the navigation. You can see that all the important details about a guest’s stay are presented first, but then “Book Now” and the business’s phone number are at the bottom of the list so users don’t have to dig through pages to find that information.

If you want to make conversions easier for mobile users, don’t bury your CTAs.

Strategy 7: Include Geotargeting Features

The last strategy I’m recommending is less about design and more about features you can apply to your site that give visitors a personalized experience.

Geotargeting and geolocation services (like beacon technology) were really hot topics a few years ago. Think back to when Pokémon Go was all anyone could talk about. Mobile users were willingly giving apps their location data in return for what they considered to be a valuable experience. I believe you should be doing the same when designing mobile websites for local search users.

With geotargeting features, you have the opportunity to enhance visitors’ experience in a way that a global-serving website can’t.

WSFS Bank is an example of a business that makes good use of this feature. First, it asks for permission to use the current location as determined by the user’s mobile device:


WSFS Bank politely asks visitors for access to geolocation data.
WSFS Bank politely asks visitors for access to geolocation data. (Image source) (Large preview)

Upon granting access to the mobile website, the user is then presented with information at the top regarding the closest WSFS Bank location:


A sticky top bar is now presented to the mobile user on the WSFS Bank website.
A sticky top bar is now presented to the mobile user on the WSFS Bank website. (Image source) (Large preview)

There are other use cases for geotargeting that your visitors might find useful as well. For instance, you could offer targeted discounts, include in-store availability checks, and convert prices to their local currency (if not the same as your own). Ultimately, your access to their location should be used to improve their experience and compel them to convert online or visit the brick-and-mortar location.

Wrapping Up

Designing for mobile-first isn’t all too tricky these days now that we’ve had time to adjust to it. That said, designing mobile websites for local search users is a different story. It’s not that they don’t appreciate a responsive design or shorter contact forms like everyone else. It’s just that their motivation and goals aren’t always the same as everyone else’s.

So, in addition to designing websites for mobile-first indexing, pay attention to how the design affects the website’s appearance in search results as well as how it’s received by local search users.

Smashing Editorial
(lf, ra, il)


Source: Smashing Magazine

Ethereum: Introducing Mist, a Human-friendly Geth Interface

This article explains how to install and work with Geth and Mist, which allow you to mine or develop Ethereum software, and to control your own node and your own wallet’s key, thereby signing your own transactions instead of relying on third party software.

In order to communicate with the Ethereum blockchain, we must use a blockchain client. The client is responsible for broadcasting transactions, mining, signing messages and communicating with smart contracts.

Currently, the most popular clients for Ethereum are Geth and Parity. They both come as command line tools with terminal consoles for blockchain operations.

Since most people aren’t comfortable using command line tools, client extensions like Mist were created. They “wrap” the functionality of the client in a user-friendly interface — enabling people not proficient in command line usage to participate in the network.

What is Mist?

Mist is a program which connects to Geth in the background, and also serves as an interface for the wallet.

When Geth is running, it synchronizes with the public blockchain by downloading all its data. Mist is just a human-friendly interface for talking to Geth. In other words, Geth is both your node and your wallet, but instead of talking to it through obscure commands (such as web3.fromWei(eth.getBalance(eth.coinbase)) to get an account’s balance), Mist will provide that same information in the UI without you even having to ask for it.

You can download Mist from this link. Download the version called Mist-installer, not the Ethereum-Wallet one.

The difference between Mist-installer and Ethereum-wallet is that Mist is, by itself, a web and Ethereum browser as well as a wallet interface. Ethereum-wallet has the browser functionality removed for safety, and only a single dapp installed — the wallet interface. Hence, they are the same, but the latter is limited in functionality.

The file you pick will depend on your operating system. macOS users will pick the .dmg file, Windows users will go for the .exe file, while Linux users will most often go with the .deb file.

After having downloaded it, run the installation process then run the app. If you’re not sure where it got installed, just enter its name into your operating system’s search bar:

Seeing where Mist is installed

Mist: First Run

After running for the first time, Mist checks whether or not it has the latest Geth installed on the same machine and then checks for contact with the Ethereum network.

Checking for contact with the Ethereum network

Then, Mist looks for peers — nodes it can connect to so it can download blockchain data from them.

Looking for peers

Having found them, Mist begins to download the extraordinary amount of required data.

Downloading required data

This can take days, depending on the speed of the computer and internet connection. It doesn’t have to finish all at once: you can shut it down and come by later or leave it overnight. You can also launch the app outright and wait for sync in the background while actually using the app.

After syncing is finished, Mist will ask which network to use: Main or Test. Pick any of them. Unless you made an address beforehand in Geth via the personal.newAccount command (you probably didn’t and that’s fine), it’ll also ask you for a password. That password additionally secures your wallet, but don’t forget it: it cannot be changed and it cannot be restored. Choose wisely. The JSON file that gets generated by this process is then encrypted with this password, and can be imported into various wallet tools like MetaMask, MyEtherWallet, etc. To get to the JSON file(s) (for backup purposes) go to File -> Backup -> Accounts and Mist will open the folder containing the JSON files of generated addresses.

The post Ethereum: Introducing Mist, a Human-friendly Geth Interface appeared first on SitePoint.


Source: Sitepoint

JavaScript Graphics and Animation

Full-day workshop • June 28th In this workshop, Seb will demonstrate a variety of beautiful visual effects using JavaScript and HTML5 canvas. You will learn animation and graphics techniques that you can use to add a sense of dynamism to your projects.
Seb demystifies programming and explores its artistic possibilities. His presentations and workshops enable artists to overcome their fear of code and encourage programmers of all backgrounds to be more creative and imaginative.
Source: Smashing Magazine