Everyone is familiar with .com and .net, but did you know you get your own free .design domain?

Because it’s a fairly new domain, there are still plenty of short .design names available. So the good news is, you can shorten or improve your existing branding by switching to the .design domain. Eg. johnsmithdesign.com -> johnsmith.design

You can also get your own unique email address such as hola@yourname.design or you can even use it as a clever redirect to another site, like a Behance profile.

Get Your FREE .design Domain

We have teamed up with Porkbun to offer all Webdesigner Depot subscribers a free .design domain name. The first year is free, and yearly renewals will be just $35 instead of the $70 offered at some registrars.

You also get:

• Free email hosting – you can add an email address (or multiple addresses!) that matches your domain name. For example, anne@goldsmith.design or info@goldsmith.design, or any other name you want.
• SSL Security – An SSL certificate will encrypt your visitors’ sensitive data, and also display your site with “HTTPS” in your address bar, which will let visitors know that you’ve made their security your top priority. You’ll also avoid the “NOT SECURE” label from Google.
• Free WHOIS Privacy – Your contact information will be private, and protected forever. Other registrars charge you for this. PorkBun won’t.
• Free website builder – If you want to build your .design website with no code, you can build it for free using their site builder, powered by Weebly. And with this option you don’t have to pay for website hosting.
• Free domain connection – Whether you built your website (or plan to build it) with other services like WIX, SquareSpace, or Weebly, you can easily connect your .design domain to your website platform. Your website content will stay exactly the same, but you’ll have a modern .design domain name for your website to show off!

Here’s your chance to get a free website domain name that reflects what you do and helps you showcase your work.

YES! I WANT MY FREE .DESIGN DOMAIN NAME!

To Claim Your Free Domain:

1. Click to claim & search for your domain name
2. Click the pink + icon on the desired domain
3. Click the checkout button & complete the checkout process.

This offer does not apply to premium names.

[– This is a sponsored post on behalf of Porkbun –]

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

Source

Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the moment (ha!) we need to work with date and time.

But we don’t always need to use libraries. Date can actually be quite simple if you know what to watch out for. In this article, I’ll walk you through everything you need to know about the Date object.

First, let’s acknowledge the existence of timezones.

Timezones

There are hundreds of timezones in our world. In JavaScript, we only care about two—Local Time and Coordinated Universal Time (UTC).

• Local time refers to the timezone your computer is in.
• UTC is synonymous with Greenwich Mean Time (GMT) in practice.

By default, almost every date method in JavaScript (except one) gives you a date/time in local time. You only get UTC if you specify UTC.

With this, we can talk about creating dates.

Creating a date

You can create a date with new Date(). There are four possible ways to use new Date():

1. With a date-string
2. With date arguments
3. With a timestamp
4. With no arguments

The date-string method

In the date-string method, you create a date by passing a date-string into new Date.

new Date('1988-03-21')

We tend towards the date-string method when we write dates. This is natural because we’ve been using date strings all our lives.

If I write 21-03-1988, you have no problems deducing it’s 21st of March, 1988. Yeah? But if you write 21-03-1988 in JavaScript, you get Invalid Date.

There’s a good reason for this.

We interpret date strings differently in different parts of the world. For example 11-06-2019 is either 11th June, 2019 or 6th November 2019. But you can’t be sure which one I’m referring to, unless you know the date system I’m using.

In JavaScript, if you want to use a date string, you need to use a format that’s accepted worldwide. One of these formats is the ISO 8601 Extended format.

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`

Here’s what the values mean:

• YYYY: 4-digit year
• MM: 2-digit month (where January is 01 and December is 12)
• DD: 2-digit date (0 to 31)
• -: Date delimiters
• T: Indicates the start of time
• HH: 24-digit hour (0 to 23)
• mm: Minutes (0 to 59)
• ss: Seconds (0 to 59)
• sss: Milliseconds (0 to 999)
• :: Time delimiters
• Z: If Z is present, date will be set to UTC. If Z is not present, it’ll be Local Time. (This only applies if time is provided.)

Hours, minutes, seconds and milliseconds are optional if you’re creating a date. So, if you want to create a date for 11th June 2019, you can write this:

new Date('2019-06-11')

Pay special attention here. There’s a huge problem with creating dates with date strings. You can spot the problem if you console.log this date.

If you live in an area that’s behind GMT, you’ll get a date that says 10th June.

If you live in an area that’s ahead of GMT, you’ll get a date that says 11th June.

This happens because the date-string method has a peculiar behavior: If you create a date (without specifying time), you get a date set in UTC.

In the above scenario, when you write new Date('2019-06-11'), you actually create a date that says 11th June, 2019, 12am UTC. This is why people who live in areas behind GMT get a 10th June instead of 11th June.

If you want to create a date in Local Time with the date-string method, you need to include the time. When you include time, you need to write the HH and mm at a minimum (or Google Chrome returns an invalid date).

new Date('2019-06-11T00:00')

The whole Local Time vs. UTC thing with date-strings can be a possible source of error that’s hard to catch. So, I recommend you don’t create dates with date strings.

(By the way, MDN warns against the date-string approach since browsers may parse date strings differently).

If you want to create dates, use arguments or timestamps.

Creating dates with arguments

You can pass in up to seven arguments to create a date/time.

1. Year: 4-digit year.
2. Month: Month of the year (0-11). Month is zero-indexed. Defaults to 0 if omitted.
3. Day: Day of the month (1-31). Defaults to 1 if omitted.
4. Hour: Hour of the day (0-23). Defaults to 0 if omitted.
5. Minutes: Minutes (0-59). Defaults to 0 if omitted.
6. Seconds: Seconds (0-59). Defaults to 0 if omitted.
7. Milliseconds: Milliseconds (0-999). Defaults to 0 if omitted.

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Many developers (myself included) avoid the the arguments approach because it looks complicated. But it’s actually quite simple.

Try reading numbers from left to right. As you go left to right, you insert values in decreasing magnitude: year, month, day, hours, minutes, seconds, and milliseconds.

new Date(2017, 3, 22, 5, 23, 50)

// This date can be easily read if you follow the left-right formula.
// Year: 2017,
// Month: April (because month is zero-indexed)
// Date: 22
// Hours: 05
// Minutes: 23
// Seconds: 50

The most problematic part with Date is that the Month value is zero-indexed, as in, January === 0, February === 1, March === 2 and so on.

We have no idea why month in JavaScript is zero-indexed, but it is. Rather than argue about why January should be 1 (and not 0), it’s better to accept that month is zero-indexed in JavaScript. Once you accept this fact, dates become much easier to work with.

Here are some more examples for you to familiarize yourself:

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Notice dates created with arguments are all in Local Time?

That’s one of the perks of using arguments—you won’t get confused between Local Time and UTC. If you ever need UTC, you create a date in UTC this way:

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

Creating dates with timestamps

In JavaScript, a timestamp is the amount of milliseconds elapsed since 1 January 1970 (1 January 1970 is also known as Unix epoch time). From my experience, you rarely use timestamps to create dates. You only use timestamps to compare between different dates (more on this later).

// 11th June 2019, 8am (in my Local Time, Singapore)
new Date(1560211200000)

With no arguments

If you create a date without any arguments, you get a date set to the current time (in Local Time).

new Date()

You can tell from the image that it’s 25th May, 11:10am in Singapore when I wrote this article.

Summary about creating dates

1. You can create date with new Date().
2. There are four possible syntaxes:
1. With a date string
2. With arguments
3. With timestamp
4. With no arguments
3. Never create a date with the date string method.
4. It’s best to create dates with the arguments method.
5. Remember (and accept) that month is zero-indexed in JavaScript.

Next, let’s talk about converting a date into a readable string.

Formatting a date

Most programming languages give you a formatting tool to create any Date format you want. For example, in PHP, you can write date("d M Y") to a date like 23 Jan 2019.

But there’s no easy way to format a date in JavaScript.

The native Date object comes with seven formatting methods. Each of these seven methods give you a specific value (and they’re quite useless).

const date = new Date(2019, 0, 23, 17, 23, 42)

1. toString gives you Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
2. toDateString gives you Wed Jan 23 2019
3. toLocaleString gives you 23/01/2019, 17:23:42
4. toLocaleDateString gives you 23/01/2019
5. toGMTString gives you Wed, 23 Jan 2019 09:23:42 GMT
6. toUTCString gives you Wed, 23 Jan 2019 09:23:42 GMT
7. toISOString gives you 2019-01-23T09:23:42.079Z

If you need a custom format, you need to create it yourself.

Writing a custom date format

Let’s say you want something like Thu, 23 January 2019. To create this value, you need to know (and use) the date methods that comes with the Date object.

To get dates, you can use these four methods:

1. getFullYear: Gets 4-digit year according to local time
2. getMonth: Gets month of the year (0-11) according to local time. Month is zero-indexed.
3. getDate: Gets day of the month (1-31) according to local time.
4. getDay: Gets day of the week (0-6) according to local time. Day of the week begins with Sunday (0) and ends with Saturday (6).

It’s simple to create 23 and 2019 for Thu, 23 January 2019. We can use getFullYear and getDate to get them.

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

It’s harder to get Thu and January.

To get January, you need to create an object that maps the value of all twelve months to their respective names.

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

Since Month is zero-indexed, we can use an array instead of an object. It produces the same results.

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

To get January, you need to:

1. Use getMonth to get the zero-indexed month from the date.
2. Get the month name from months

const monthIndex = d.getMonth()
const monthName = months(monthIndex)
console.log(monthName) // January

The condensed version:

const monthName = months(d.getMonth())
console.log(monthName) // January

You do the same thing to get Thu. This time, you need an array that contains seven days of the week.

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

Then you:

1. Get dayIndex with getDay
2. Use dayIndex to get dayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

Short version:

const dayName = days[d.getDay()] // Thu

Then, you combine all the variables you created to get the formatted string.

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

Yes, it tedious. But it’s not impossible once you get the hang of it.

If you ever need to create a custom-formatted time, you can use the following methods:

1. getHours: Gets hours (0-23) according to local time.
2. getMinutes: Gets minutes (0-59) according to local time.
3. getSeconds: Gets seconds (0-59) according to local time.
4. getMilliseconds: Gets milliseconds (0-999) according to local time.

Next, let’s talk about comparing dates.

Comparing dates

If you want to know whether a date comes before or after another date, you can compare them directly with >, <, >= and <=.

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

It’s more difficult if you want to check if two dates fall exactly at the same time. You can’t compared them with == or ===.

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

To check whether two dates fall exactly at the same time, you can check their timestamps with getTime.

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

If you want to check whether two dates fall on the same day, you can check their getFullYear, getMonth and getDate values.

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

There’s one final thing we have to cover.

Getting a date from another date

There are two possible scenarios where you want to get a date from another date.

1. Set a specific date/time value from another date.
2. Add/subtract a delta from another date.

Setting a specific date/time

You can use these methods to set a date/time from another date:

1. setFullYear: Set 4-digit year in Local Time.
2. setMonth: Set month of the year in Local Time.
3. setDate: Set day of the month in Local Time.
4. setHours: Set hours in Local Time.
5. setMinutes: Set minutes in Local Time.
6. setSeconds: Set seconds in Local Time.
7. setMilliseconds: Set milliseconds in Local Time.

For example, if you want to set a date to the 15^th of the month, you can use setDate(15).

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

If you want to set the month to June, you can use setMonth. (Remember, month in JavaScript is zero-indexed!)

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 June 2019

Note: The setter methods above mutate the original date object. In practice, we should not mutate objects (more on why here). We should perform these operations on a new date object instead.

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

Adding/Subtracting delta from another date

A delta is a change. By adding/subtracting delta from another date, I mean this: You want to get a date that’s X from another date. It can be X year, X month, X day, etc.

To get a delta, you need to know the current date’s value. You can get it using these methods:

1. getFullYear: Gets 4-digit year according to local time
2. getMonth: Gets month of the year (0-11) according to local time.
3. getDate: Gets day of the month (1-31) according to local time.
4. getHours: Gets hours (0-23) according to local time.
5. getMinutes: Gets minutes (0-59) according to local time.
6. getSeconds: Gets seconds (0-59) according to local time.
7. getMilliseconds: Gets milliseconds (0-999) according to local time.

There are two general approaches to add/subtract a delta. The first approach is more popular on Stack Overflow. It’s concise, but harder to grasp. The second approach is more verbose, but easier to understand.

Let’s go through both approaches.

Say you want to get a date that’s three days from today. For this example, let’s also assume today is 28 March 2019. (It’s easier to explain when we’re working with a fixed date).

The first approach (the set approach)

// Assumes today is 28 March 2019
const today = new Date(2019, 2, 28)

First, we create a new Date object (so we don’t mutate the original date)

const finalDate = new Date(today)

Next, we need to know the value we want to change. Since we’re changing days, we can get the day with getDate.

const currentDate = today.getDate()

We want a date that’s three days from today. We’ll use add the delta (3) to the current date.

finalDate.setDate(currentDate + 3)

Full code for the set approach:

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

The second approach (the new Date approach)

Here, we use getFullYear, getMonth, getDate and other getter methods until we hit the type of value we want to change. Then, we use create the final date with new Date.

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

Both approaches work. Choose one and stick with it.

Automatic date correction

If you provide Date with a value that’s outside of its acceptable range, JavaScript recalculates the date for you automatically.

Here’s an example. Let’s say we set date to 33rd March 2019. (There’s no 33^rd March on the calendar). In this case, JavaScript adjusts 33^rd March to 2^nd April automatically.

// 33rd March => 2nd April
new Date(2019, 2, 33)

This means you don’t need to worry about calculating minutes, hours, days, months, etc. when creating a delta. JavaScript handles it for you automatically.

// 33rd March => 2nd April
new Date(2019, 2, 30 + 3)

And that’s everything you need to know about JavaScript’s native Date object.

Interested to learn more JavaScript?

If you found this intro to Date useful, you might love Learn JavaScript, a course I created to teach people everything they need to know about JavaScript.

In the course, I cover the basic concepts of what you need to know, then I show you how to use the concepts you learned to build real-world components.

Have a look. You might find it helpful.

In the meantime, if you have any JavaScript questions, feel free to contact me. I’ll do by best to create free articles to answer your questions.

The post Everything You Need to Know About Date in JavaScript appeared first on CSS-Tricks.

Which Roles Do You Need to Fill?

This really depends on why you’re hiring someone as well as the direction you see your business going.

Consider the following:

Your client base is growing and you’re tired of turning down work. In that case, you’d likely want to hire designers and developers to share your workload with.

You spend more time responding to emails and managing finances than actually building websites. If you’re passionate about doing the revenue-generating activities in your business, you should hire an assistant, sales rep, or maybe even an accountant to pass the tedious and ill-filling tasks to.

You want to offer an end-to-end digital solution, but don’t have the capacity or skills to do it. First, you need to clearly define the services your agency is going to offer. If they’re not in your wheelhouse, that’s exactly who you need to hire for: copywriter, marketer, SEO specialist, and other creatives will round out your team.

Do You Need Full- or Part-Time Assistance?

Just because you’re in a position to bring someone onto your team doesn’t mean that they automatically need to become a full-time employee.

Evaluate where your business currently stands:

• How much overflow work do you have?
• How much work have you turned away in the last six months?
• Do you have enough clients and a predictable revenue stream that can support a new hire?

Decide how much time you need from a new hire along with how much you can realistically pay before setting a work schedule.

What Kind of New Hire Do You Need?

There are three kinds of new hires you might need:

• An independent contractor
• A part-time employee
• A full-time employee

Keep in mind that contractors cannot be managed the same way employees are. This means you can’t dictate when they work, where they work from, which tools they use, and so on. You can provide guidelines and processes for their work, but there can be no direct training or supervision.

How Much Do You Pay Them?

First, you have to determine how much you can afford to pay someone and whether or not that’s enough for the work they’re being hired to do.

Then, it’s important to recognize the difference between paying a contractor and an employee. Whereas contractors get paid the hourly or flat rate you agree upon, payments are much more complicated for employees.

When you hire someone as an employee, don’t forget to factor in additional costs like:

• Taxes
• Health insurance
• Paid time off
• Workers’ compensation (if they work on-site)
• Retirement account contributions (when applicable)

You will also either need to invest in payroll software or to hire someone to handle it for you.

Should They Work On-Site or Remotely?

If you hire an employee that’s going to work closely with you, it might be beneficial to hire someone locally to work from the same office space. That would be a good idea for someone like a fellow designer or an assistant.

Then again, many creative professionals and administrators do just as well working remotely.

What you need to figure out then is the following:

Can you afford to rent an office that’s convenient to get to and conducive to collaboration and productivity?

Or: If working remotely, can you cover the costs of the tools your employee must use to do their job (e.g. computer, software, wi-fi, etc.)?

Or: Is something in between — like a co-work space where you can occasionally hold in-person meetings — the most cost-effective and productive way to work with your employee?

Are There Any Legal Matters You Have to Deal With as an Employer?

Yes. While these may vary from country to country, the basic idea is the same. You’ll want to:

• Register your business with the local government and acquire an employer identification number.
• Obtain a business license.
• Register with your local labor department.
• Prepare all necessary paperwork to hire an employee and provide verification to the government that they’re eligible for work.
• Set yourself up with a payroll service to ensure you make all payments to employees and the government on time.

To be on the safe side, review the guidelines provided by your local government for small business owners to make sure you cover all your bases.

Where Do You Find Candidates?

The first place to start is by asking for referrals from people you trust and who also understand your work style and personality well.

If you’re unable to find candidates through that channel, you’ll find them in a variety of locations around the web:

• Your favorite Facebook or LinkedIn groups
• Professional job boards like Indeed
• Freelancer marketplaces like Guru or Toptal

Or you can post the job description on your website, optimize it for search or paid ads, and let them find you.

How Do You Vet Job Candidates?

For starters, you don’t need to interview everyone that applies to the position. However, you do need a system that enables you to quickly vet each candidate:

1. Confirm that they follow all instructions in the job description/application.
2. Review their resume and make sure they have all the qualifications you require.
3. Have a look at their portfolio and verify the quality is at the desired level.
4. Scan their social media profiles to make sure there’s nothing there that indicates they’d be unprofessional and, as a consequence, harm your business.

Once you’ve narrowed down the pool of candidates, schedule video calls with the remaining few. This gives you a chance to see if they know how to use basic technology, if they’re punctual, how their personality jibes with your own, as well as to make sure their goals and interests align with your company’s.

You should then talk to the references provided by the candidates you’re interested in. This final step will help you determine who is best-suited to the position.

How Do You Onboard New Hires?

Before you send an offer letter, contract, and tax forms to your new hire, make sure your business is ready to bring them on.

• Create an employee handbook with information about your business, mission, values, information on holidays and time off, payment schedules, and general company rules and expectations.
• Aggregate the process documentation you’ve developed for yourself and store it in a well-organized repository for employee training and future reference.
• Create a training program and schedule it with a mix of written, video, and hands-on learning experiences.
• Set up a “toolbox” for them that includes all of the software and login information they need to get moving.
• Set them up in your project management system and create a checklist of onboarding tasks to get them acquainted with your system before they start working.

When you’re sure everything is in order, send them a welcome email and packet, and get them started!

Congratulations on Hiring Your First Employee

Hiring someone is going to change your business — hopefully, for the better. Just do your due diligence and make sure they’re the perfect fit for the role as well as for you. Then, give them all the tools they need to hit the ground running. If you can prepare them for success, they’ll have no problem contributing to your own.

Featured image via DepositPhotos.

Source

People go to the theme parks to get something that they cannot get in their homes.

Hence, theme parks continually change to incorporate new technologies to provide a seamless digital experience to their visitors. With the technological advances, many of the theme parks have started to incorporate AR/VR technologies by hiring an AR/VR development company to give an all-new an amazing feeling to the customers. For instance, renowned Universal Studios had utilized OMNIMAX screens many years back, in which they take their visitors to the impossible places by making use of the motion bases and massive 3D domes to provide the visuals. The result? A heightened and seamless experience, however, the person is indeed aware that they’re seated in a hydraulic seat, just watching a huge screen.

Let’s now talk about these two technologies and how they are helping the theme parks to get more attention and make more money and why should the theme parks adopt these technologies.

What is AR technology?

Augmented Reality is moving the virtual image over real-world gadgets. The overlay is executed all the while with the info got from a camera or another information gadget like savvy glasses. This super-imposition of virtual pictures over genuine items makes a deception that can adequately connect with clients in a virtual world.

Augmented reality turns the surrounding around into the digital space by keeping the virtual objects in place of the real-time objects. AR is usually experienced in gaming, in creating the immersive gaming experiences that make use of the actual surroundings.

What is Virtual Reality?

Virtual Reality (VR) is a new interface which immerses an individual in the 3D environment instead of making them watch on-screen display. Computer generated & content provide a simulating real experience with the help of senses (touch, sight, hearing).

Virtual reality recreation requires two primary parts: a source of the content and a client gadget. Programming and equipment, at the end of the day. As of now such frameworks incorporate headsets, all-headings treadmills, unique gloves, goggles. VR instruments ought to give sensible, characteristic, superb pictures and connection conceivable outcomes. For this, gadgets depend on estimations like:

• Pixel Persistence
• Motion delay
• Audio/video synchronization
• Image resolution
• Field of view

VR needs many devices such as a computer/smartphone, headset or other machines in order to create the digital surrounding, & a motion tracker gadget in some of the cases.

VR requires several devices such as a headset, a computer/smartphone or another machine to create a digital environment, and a motion tracking device in some cases.

The above table image shows a basic understanding of the AR/VR technologies.

AR and VR technology together incorporated in the theme parks and rides:

As per statistics, the virtual reality and augmented reality market amounted to about 12 billion US dollars and is now expected to dramatically expand in the near future, with the forecasts for the year 2022 amounting to whopping 192 billion US dollars. Check the image below:

Benefits that the theme parks get after making use of these technologies:

Theme parks have incorporated the Virtual Reality technology to the other existing attractions, including turning rides and drop towers. Artificial Intelligence is the technology that offers a way for the theme parks to have conversations with the guests when individuals are not around. By making use of the vast amount of data, the machines can make smart recommendations and also offer useful information based on the visitor’s query. A number of amusement parks have started using these technologies and have gained a lot of attention and positive response from the visitors. This has also increased its revenue manifolds. Stand-alone AR/VR parks are also becoming a norm because of the fact that they are in great demand & when demand is there, profits are guaranteed.

The Future?

AR/VR technologies have all the potential in the near future to improve the theme parks in a great way. With time, it seems that the frame rate, resolution and other such variables controlling the VR’s visual imagery will be improving more. It may go up to the extent that the real and virtual world will almost be indistinguishable. Moreover, the developers and designers will definitely figure out some ways to merge a free-roaming VR experience with the more enhanced and advanced VR-operated ride vehicle. Anyway, whatever the future holds, you as an end user and a theme park fan, must be in for an amazing roller-coaster ride!

Sorting is a super handy JavaScript method that can display the values of an array in a certain order. Whether that’s real estate listings by price, burger joints by distance, or best nearby happy hours by rating, sorting arrays of information is a common need.

If you’re already doing this with JavaScript on a project, you are will likely using the built-in array .sort method, which is in the same family of array methods that includes .filter, .map and .reduce.

Let’s take a look at how to do that!

A quick note about side effects

Before going into the details of how to use .sort, there is a very important detail that needs to be addressed. While many of the ES5 array methods such as .filter, .map, and .reduce will return a new array and leave the original untouched, .sort will sort the array in place. If this is unwanted, an ES6 technique to avoid this is using the spread operator to concisely create a new array.

const foo = ['c','b','a'];
const bar = ['x','z','y'];
const fooSorted = foo.sort();
const barSorted = [...bar].sort();

console.log({foo, fooSorted, bar, barSorted});

/*
{
  "foo":       [ "a", "b", "c" ],
  "fooSorted": [ "a", "b", "c" ],
  "bar":       [ "x", "z", "y" ],
  "barSorted": [ "x", "y", "z" ]
}
*/

foo and fooSorted both reference the same array, but bar and barSorted are now individual arrays.

General overview

The only parameter of the .sort method is a function. The spec refers to this as the compareFn — I will refer to it as the “comparison function” for the rest of the post. This comparison function accepts two parameters, which I will refer to as a and b. a and b are the two elements that we will be comparing. If you do not provide a comparison function, the array will coerce each element into a string and sort according to Unicode points.

If you would like the a to be ordered first in the array, the comparison function should return a negative integer; for b, a positive integer. If you would like the two to maintain their current order, return a 0.

If you don’t understand, don’t worry! Hopefully it will become much more clear with a few examples.

Comparing numbers

One of the simplest callbacks to write is a number comparison.

const numbers = [13,8,2,21,5,1,3,1];
const byValue = (a,b) => a - b;
const sorted = [...numbers].sort(byValue);
console.log(sorted); // [1,1,2,3,5,8,13,21]

If a is greater than b, a - b will return a positive number, so b will be sorted first.

Comparing strings

When comparing strings, the > and < operators will compare values based on each string’s Unicode value. This means that all uppercase letters will be “less” than all lowercase letters, which can lead to unexpected behavior.

JavaScript does have a method to help with comparing strings: the String.prototype.localeCompare method. This method accepts a comparison string, a locale, and an options object. The options object accepts a few properties (all of which you can view here), but I find that the most useful is “sensitivity.” This will affect how comparisons work between letter variations such as case and accent.

const strings = ['Über', 'alpha', 'Zeal', 'über', 'uber', 'Uber', 'Alpha', 'zeal'];

const sortBySensitivity = sensitivity => (a, b) => a.localeCompare(
  b,
  undefined, // locale string -- undefined means to use browser default
  { sensitivity }
);

const byAccent  = sortBySensitivity('accent');
const byBase    = sortBySensitivity('base');
const byCase    = sortBySensitivity('case');
const byVariant = sortBySensitivity('variant'); // default

const accentSorted  = [...strings].sort(byAccent);
const baseSorted    = [...strings].sort(byBase);
const caseSorted    = [...strings].sort(byCase);
const variantSorted = [...strings].sort(byVariant);

console.log({accentSorted, baseSorted, caseSorted, variantSorted});

/*
{
  "accentSorted":  [ "alpha", "Alpha", "uber", "Uber", "Über", "über", "Zeal", "zeal" ],
  "baseSorted":    [ "alpha", "Alpha", "Über", "über", "uber", "Uber", "Zeal", "zeal" ],
  "caseSorted":    [ "alpha", "Alpha", "über", "uber", "Über", "Uber", "zeal", "Zeal" ],
  "variantSorted": [ "alpha", "Alpha", "uber", "Uber", "über", "Über", "zeal", "Zeal" ]
}
*/

To me, baseSorted seems to be the most logical for most alphabetical sorting — ‘ü’, ‘u’, ‘Ü’, and ‘U’ are equivalent, so they remain in the order of the original array.

Running functions before comparing values

You may want to run a comparison function on a value that is derived from each array’s element. First, let’s write a comparison function factory that will “map” over the element before calling the comparison function.

const sortByMapped = (map,compareFn) => (a,b) => compareFn(map(a),map(b));

One use case for this is sorting based on the attribute of an object.

const purchases = [
  { name: 'Popcorn', price: 5.75 }, 
  { name: 'Movie Ticket', price: 12 },
  { name: 'Soda', price: 3.75 },
  { name: 'Candy', price: 5 },
];

const sortByMapped = (map,compareFn) => (a,b) => compareFn(map(a),map(b));
const byValue = (a,b) => a - b;
const toPrice = e => e.price;
const byPrice = sortByMapped(toPrice,byValue);

console.log([...purchases].sort(byPrice));

/*
[
  { name: "Soda", price: 3.75 },
  { name: "Candy", price: 5 },
  { name: "Popcorn", price: 5.75 },
  { name: "Movie Ticket", price: 12 }
]
*/

Another case might be to compare an array of dates.

const dates  = ['2018-12-10', '1991-02-10', '2015-10-07', '1990-01-11'];
const sortByMapped = (map,compareFn) => (a,b) => compareFn(map(a),map(b));
const toDate = e => new Date(e).getTime();
const byValue = (a,b) => a - b;
const byDate = sortByMapped(toDate,byValue);

console.log([...dates].sort(byDate));
// ["1990-01-11", "1991-02-10", "2015-10-07", "2018-12-10"]

Reversing a sort

There are some cases where you may want to reverse the outcome of a comparison function. This is subtly different than doing a sort and then reversing the result in the way ties are handled: if you reverse the outcome, ties will also be reversed in order.

To write a higher order function that accepts a comparison function and returns a new one, you will need to flip the sign of the comparison’s return value.

const flipComparison = fn => (a,b) => -fn(a,b);
const byAlpha = (a,b) => a.localeCompare(b, null, { sensitivity: 'base' });
const byReverseAlpha = flipComparison(byAlpha);

console.log(['A', 'B', 'C'].sort(byReverseAlpha)); // ['C','B','A']

Running a tiebreaker sort

There are times when you may want to have a “tie-breaker” sort — that is, another comparison function that is used in the case of a tie.

By using [].reduce, you can flatten an array of comparison functions into a single one.

const sortByMapped = map => compareFn => (a,b) => compareFn(map(a),map(b));
const flipComparison = fn => (a,b) => -fn(a,b);
const byValue = (a,b) => a - b;

const byPrice = sortByMapped(e => e.price)(byValue);
const byRating = sortByMapped(e => e.rating)(flipComparison(byValue));

const sortByFlattened = fns => (a,b) => 
  fns.reduce((acc, fn) => acc || fn(a,b), 0);

const byPriceRating = sortByFlattened([byPrice,byRating]);

const restaurants = [
  { name: "Foo's Burger Stand", price: 1, rating: 3 },
  { name: "The Tapas Bar", price: 3, rating: 4 },
  { name: "Baz Pizza", price: 3, rating: 2 },
  { name: "Amazing Deal", price: 1, rating: 5 },
  { name: "Overpriced", price: 5, rating: 1 }, 
];

console.log(restaurants.sort(byPriceRating));

/*
{name: "Amazing Deal", price: 1, rating: 5}
{name: "Foo's Burger Stand", price: 1, rating: 3}
{name: "The Tapas Bar", price: 3, rating: 4}
{name: "Baz Pizza", price: 3, rating: 2}
{name: "Overpriced", price: 5, rating: 1}
*/

Writing a random sort

You might want to sort an array “randomly.” One technique that I have seen is to use the following function as the comparison function.

const byRandom = () => Math.random() - .5;

Since Math.random() returns a “random” number between 0 and 1, the byRandom function should return a positive number half of the time and a negative number the other half. This seems like it would be a good solution, but unfortunately, since the comparison function is not “consistent” — meaning it may not return the same value when called multiple times with the same values — it may result in some unexpected results.

For example, let’s take an array of numbers between 0 and 4. If this byRandom function was truly random, it would be expected that the new index of each number would be spread out equally over enough iterations. The original 0 value would be just as likely to be in index 4 as index 0 in the new array. However, in practice, this function will bias each number to its original position.

See the Pen
Array.sort() Random ? by Adam Giese (@AdamGiese)
on CodePen.

The “diagonal” from the top-left will statistically have the greatest value. In an ideal and truly random sort, each table cell would hover around 20%.

The fix for this is to find a way to ensure that the comparison function remains consistent. One way to do this is to map the random value to each array element before the comparison, then map it away after.

const sortByMapped = map => compareFn => (a,b) => compareFn(map(a),map(b));
const values = [0,1,2,3,4,5,6,7,8,9];
const withRandom = (e) => ({ random: Math.random(), original: e });
const toOriginal = ({original}) => original;
const toRandom = ({random}) => random;
const byValue = (a,b) => a - b;
const byRandom = sortByMapped(toRandom)(byValue);

const shuffleArray = array => array
  .map(withRandom)
  .sort(byRandom)
  .map(toOriginal);

This ensures that each element has a single random value that is only calculated once per element rather than once per comparison. This removes the sorting bias towards the original position.

See the Pen
Array.sort() Random ? by Adam Giese (@AdamGiese)
on CodePen.

The post Level up your .sort game appeared first on CSS-Tricks.

I love the way Erik Kennedy talks about digital design. Very practical and understandable. Have a listen to a chat with him we had on ShopTalk.

One of his latest blog posts is titled “The #1 Way to Spice Up Your Designs (And Create a More Cohesive Brand)” and it’s about something he pegs as more of an intermediate (beyond the basics) level design tip about the idea of motifs.

In music, that might be a bit of a melody that asserts itself periodically and kinda informs the rest of the song. It’s equally interesting in design, where a theme — perhaps a geometric element — is sprinkled in tastefully that helps the gestalt. Ties the room together, as they say.

Anyway, if you’re serious about getting better at design, his course is where it’s at and opens up in mid-June. So, now’s the time to think about it.

Direct Link to Article — Permalink

The post Designing with Motifs appeared first on CSS-Tricks.

<div class="card__body">
  <p class="card__body__content">Lorem ipsum lorem</p>
  <div class="card__body__links">
    <!-- Grandchild elements -->
    <a href="#" class="card__body__links__link--active">Link</a>
  </div>
</div>

// main.scss
@import "_variables.scss";
@import "_mixins.scss";

@import "_global.scss";
@import "_navbar.scss";
@import "_hero.scss";

@mixin flex-center($direction) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

.box {
  @include flex-center(row);
}

import styled from 'styled-components';
    
const Button = styled.button`
  background-color: palevioletred;
  color: papayawhip;
`;

// Output
<style>
  .dRUXBm {
    background-color: palevioletred;
    color: papayawhip;
  }
</style>

<button class="dRUXBm" />

const getDimensions = size => {
  switch(size) {
    case 'small': return 32;
    case 'large': return 64;
    default: return 48;
  }
}

const Avatar = styled.img`
  border-radius: 50%;
  width: ${props => getDimensions(props.size)}px;
  height: ${props => getDimensions(props.size)}px;
`;

const AvatarComponent = ({ src }) => (
  <Avatar src={src} size="large" />
);

Hey WDD Readers, it’s June! Depending on where you live, you could either be heading out for a day of Summer fun, or curling up in your home at the bottom of Chile with a hot drink. And if you’re in Chile keeping warm, can I join you?

This month, we got lucky enough to have lots and lots of pretty colorful designs in the mix, as well as a bit of classic minimalism and monochromatic goodness. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

The McBride Company

The McBride Company has a simple portfolio that makes excellent use of a vector-based background to maintain a consistent visual identity all across the site. While there are parts of the design that might benefit from more contrast and larger body text, the overall effect is striking and beautiful.

Platform: Craft CMS

Paulina Hanzel

Paulina Hanzel’s portfolio is minimalist, visually striking, and does little more than it needs to to get the job done (something I can always respect). While the neon-on-white color scheme can occasionally blast the eyeballs, it’s a memorable design.

Plus the “hamburger menu” icon actually includes text that says, “menu”, and I can absolutely get behind that kind of microcopy.

Platform: Static Site

The Digital Panda

The Digital Panda combines two things I absolutely love: pandas (and who doesn’t love them?), and those sort of blob-like design elements that I’m still a bit obsessed with. And let’s be honest, I’m most likely going to be obsessed with them until I next redesign my own portfolio.

Now the main navigation doesn’t always get all the contrast it needs as you scroll down the page, but on the other hand, those are some of the smoothest drop shadows I’ve seen in a while.

Platform: Static Site

estudio nk

estudio/nk’s agency portfolio has a simple, clean design that is fairly standard, though the choice to display blog posts as a slidable carousel on the home page is… interesting. Where it really stands out is in their use of smooth, quality animations. Overall, it’s just a pleasure to browse.

Platform: Custom CMS (I think)

Stimmt

Stimmt mixes the ever-classic put-the-grid-in-the-background design aesthetic with a lot more color than you usually get from that kind of design, dressed up with some admittedly great animation. Plus I like their use of illustration.

Platform: Static Site

Zolderkamer Collectief

The Zolderkamer Collectief spices up a rather simplistic, mostly-one-column portfolio with only a background gradient, and some good-looking type. The fact that you can only see the rest of their portfolio upon request (because they’re not allowed to show you otherwise) might seem annoying to some, but creates a sense of mystery for me.

Platform: Static Site

ATTCK

ATTCK makes a bold impression with some lovely constellation-based imagery, and some rather cheeky boasting, including: “We let the dogs out”, “We know the way to Sesame Street”, and even “We are the crypto to your blockchain”. (I dare you to use that line to try and pick someone up in a bar, bonus points if you live nowhere near Silicon Valley.)

They back up their boasting with some great typography, and a visually pleasing layout.

Platform: WordPress

Blubolt

Blubolt is here because it looks good. It’s not going to blow your mind or blast your eyeballs, but it’s well made, and pretty. Enjoy.

Platform: WordPress

Diko

Diko’s agency website is a highly PowerPoint-ish site that depends a lot on its animation and video, and it works. It won’t blow your mind, but I have no real complaints beyond the usual “It’s too JS-dependent” thing.

Platform: Contentful

C&I

C&I embraces that sort of prefessional-elegant aesthetic that video and photo agencies are known for, though they do a lot more than that. Still, they mostly depend on the imagery to carry them through, and it works for them.

Platform: WordPress

Array

Array’s portfolio is a pleasantly minimalist affair with a bit of asymmetry thrown in. It’s a small note, but these designers know the value of keeping a single-column layout from getting too wide to easily read the text. It’s a lesson some designers seem, to have forgotten these days.

Platform: Custom CMS (I think)

Nick Losacco

Nick Losacco does a lot of different things, but his typeface design is listed first for a reason. In keeping with the theme, his portfolio relies heavily on its typography for navigation and visual spice.

Platform: Custom CMS (I think)

Boris Verks

Boris Verks’ one-page portfolio is a lovely example of type-based design with a little asymmetry thrown in for good measure. And I absolutely love the anteater that is deconstructed/reconstructed as you scroll down the page… I just do.

Platform: Static Site

Orkestra

Orkestra brings us another beautiful and nearly monochromatic design that’s heavy on the animation and outlined type. I have to say, I never get tired of seeing flawlessly executed grid-based layouts.

Platform: Static Site

Eva Garcia

Eva Garcia’s makeup artist portfolio is a classic example of its style: elegant, sophisticated, and artsy as all heck, while still being fairly intuitive and usable.

Platform: Statc Site

Spark44

Spark44 leans into its self-described theme of “big and lean”. Everything on the site including the type is big, and none of it is contrived or overly fancy. There’s just enough solid red and imagery the offset the mostly-monochromatic theme. It’s not minimalism for its own sake: it’s minimalism with powerful intention behind it.

Platform: Static Site

Sylvain Julé

Sylvain Julé’s portfolio is as minimalist as they get, and I have to admit that I quite like the way they pulled off the two-column layout. I also appreciate the way they use video to show off their portfolio pieces… even if it does load a bit slowly on my current Internet.

Platform: Static Site

Animal

Animal takes us back (yes, back) to that sort of post-minimalism with some asymmetry, a whole lot of white space, and a case study-focused approach to showing off their work.

Platform: WordPress

Optima Ninja

Optima Ninja brings us another great design with lots of purple, diagonally-orientated elements (I always like those), and clean sans-serif typography. It’s maybe the single most classically “business-friendly” design on the list this month, and it’s actually kind of a nice break from all of the super artsy stuff.

Platform: Static Site

Oxymoron

Oxymoron (love the name) gets wild with illustration, a giant mobile phone “frame”, emoji, spaghetti, and a page that you can scroll down (or up) infinitely because it loops.

They ask if you want to see their “credentials” in PDF format, and clicking “no” will actually get you a message that says “Ok, we totally respect that.” It’s… it’s just… Look guys, I don’t have any reason or the budget to hire you, but can we be friends?

Platform: Static Site

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

Source

User experience (UX) is arguably the most crucial aspect of a website. It affects every part of a customer’s journey – from how they perceive the brand to how easily they make a purchase.

Despite this importance, a survey by Econsultancy revealed that 12% of businesses do not carry out user testing and have no plans to implement it. Furthermore, a third of respondents stated they currently didn’t but plan to rectify that within the next year.

Of those who didn’t do any form of UX testing, more than 50% revealed that cost was a barrier to implementation. Although great UX has the potential to be the most profitable part of an organization, it is true that execution can be expensive. Afterall, according to Upwork, the average freelance UX designer can charge up to $65 per hour just for user research.

Although choosing an established professional or agency is usually the best course of action when creating a great user experience, there are several budget-friendly options which can still pay dividends. All businesses, from small firms to multinationals, have the potential to benefit from these:

Use data to learn how customers use the website

Google Analytics (GA) is an essential tool for businesses, providing firms with all the data they need to investigate website performance. Furthermore, this tool carries several benefits when evaluating UX.

For example, GA demonstrates when visitors leave a website or drop out before conversion. Timings can also be assessed to investigate how long, on average, it takes for individuals to navigate around the page.

Separately, heatmap tools can highlight where users are clicking on a webpage as well as how far they scroll. These might highlight, for example, that very few individuals are responding favorably to a call to action or reacting to a specific button.

As a result, this data can demonstrate areas for improvement which require just a few simple changes to fix. However, one downside of this approach is that it highlights problems – but doesn’t specify why these occur. That will require further analysis to determine.

Competitor analysis

Customers expect certain aspects from websites and understanding this can be crucial to success. For example, due to the growth of organizations such as Amazon, individuals generally expect e-commerce businesses to follow a precise formula.

On product pages, this might include elements such as reviews, multiple images, frequently asked questions, and in-depth descriptions.

While there is scope for innovation in UX, taking inspiration from competitors never hurts. By evaluating these organizations, going through their customer processes, and identifying elements which succeed, these own features can potentially be replicated.

There is always something to learn from competitor analysis – especially if several websites follow similar conventions.

Ask the customer

Customers are often an untapped source of feedback. Despite social media and review websites making it easier than ever for customers to express their opinions, businesses can be slow to capitalize on this opportunity.

For example, companies could potentially provide a small discount in exchange for users completing a questionnaire. We suggest following this format:

• Why did you visit the website?
• Were you able to achieve your goal?
• If not, why was this not possible?

This information can help pinpoint specific errors across a website and might also identify new opportunities for expansion.

Focus on the fundamentals

As you are working on a budget, it is essential to focus on the foundations of UX.

Use the budget you do have to get the fundamentals right, and you will see the greatest benefit from this (an obvious point, but worth mentioning).

Earlier we discussed the importance of business data in making informed UX choices. However, there is something to be said for taking a more basic approach. For example, by following the customer journey around the website, individuals can review common UX concerns and determine if they should be improved. These include:

• Website navigation – Does the website have clear menus, options, and an interface which allows customers to easily locate what they need?
• Page speed – Does the website, or certain pages, take too long to load? To put this into context, anything longer than two to three seconds may need to be investigated.
• The checkout process – Can customers easily purchase goods or services using the current system? In the event of an error, is this information clearly displayed? Furthermore:
  • Can you use the checkout as a guest?
  • Can you easily click on the links and buttons?
  • Is it easy to read?

Think of the 80/20 rule, 20% of your input into the right places will likely give you 80% of your desired output.

Implement guerrilla testing

Guerrilla testing involves gathering UX feedback from users by taking a website – or item – into a public location and asking individuals to try it. However, this low-cost, simple solution has positives and negatives.

For example, while this has the potential to get a large number of fresh eyes on a situation – leading to several new ideas – the individuals approached may not belong to the target market. Therefore, any data collected might not be entirely relevant. Furthermore, it can be time-consuming to implement this process.

As a result, guerrilla testing is not something which can be completed in a few hours. To get the best results possible, it needs careful strategy and planning. We recommend this guide to guerrilla testing to learn more.

Remote Testing

For the opposite of guerilla testing, look no further than this option. Remote testing uses screen-sharing software to record how customers interact with a website. Participants are set a series of tasks to perform – such as purchasing a product – then their actions are recorded.

When selecting this option, testers will need to decide whether or not to moderate the process. By moderating, testers are in the room and thus able to question participants further about their choices – usually leading to valuable additional insights. However, unmoderated users may browse the website more realistically, away from the gaze and questions of a moderator.

Regardless, remote testing takes place in an environment which is closer to how customers interact with a website.

Cost is not a barrier to implementing UX

Remember that user experience is all about the user, when working on a tight budget it’s important to base your decisions on data and testing, rather than instinct or following the HiPPO (Highest Paid Person’s Opinion). Do this, and you will have a website which is designed around the user.

Good user experience is fundamental to the success of a website and those which make even the smallest investment will start seeing results. In this article, we have covered several budget-friendly approaches, each one demonstrating that cost really is not a barrier.