I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }
}

That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing.

I could duplicate the breakpoint for each child:

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

   .child-2 {
        @include breakpoint(desktop) {
        }
    }

}

The compiled CSS comes out to something like this:

@media screen and (min-width: 700px) {
  .parent {
  }
}
@media screen and (min-width: 700px) {
  .parent .child {
  }
}
@media screen and (min-width: 700px) {
  .parent .child-2 {
  }
}

Or, I could duplicate the children under the first nested breakpoint:

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}

That results in:

@media screen and (min-width: 700px) {
  .parent .child {
  }
  .parent .child-2 {
  }
}
.parent .child {
}
.parent .child-2 {
}

Or I could do a combination of the two. Neither of them feels particularly great because of the duplication, but I’m not sure there is a perfect answer here. I err a little more on duplicating the media query, as it seems less error-prone than duplicating selectors.

The post Where Do You Nest Your Sass Breakpoints? appeared first on CSS-Tricks.

Icons are great and all, but as we’ve been shown time and time again, they often don’t do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.

I’m a fan of this markup pattern, including the inline SVG as the preferred icon system:

<button>
  <svg class="icon icon-cart" viewBox="0 0 100 100" aria-hidden="true">
    <!-- all your hot svg action, like: -->
    <path d=" ... " />
  </svg>
  Add to Cart
</button>

Or, if the button is really a link and not a JavaScript-powered action, I’ll use an instead of a wrapper.

Direct Link to Article — Permalink

The post The ineffectiveness of lonely icons appeared first on CSS-Tricks.

A/B Testing For Mobile-First Experiences

Suzanne Scacca

2019-02-11T12:00:26+01:002019-02-13T08:14:38+00:00

Your client’s website is done. They’re thrilled with it. You and your team are satisfied with the results. And visitor reception looks good so far.

While I recognize that a lot of research, experimentation, analysis and review went into the creation of the website, is that all there is to building a winning website these days? I’d argue that the mobile-first web has added a layer of complexity that few are fully prepared for.

Which is why your work shouldn’t stop when you hit the “Publish” button.

If you’re not yet performing post-launch A/B testing for your website clients, that’s a big mistake. Although we have a massive amount of case studies and other research at our disposal that confirm how to design for conversion on desktop, the mobile experience is still relatively new. At least the mobile-first experience as we know it today.

The following guide includes tips for A/B testing for mobile websites and will get you thinking about conversion rate optimization in other ways than just “Buy This Now”.

A Brief Introduction To A/B Testing For Mobile

Once a website has gone live, Google Analytics and any conversion rate optimization (CRO) tools you hook up to the site will start feeding you data about your users. If you choose to do something with these valuable insights, you have two options:

1. Identify obstacles in the experience and implement changes to the site to resolve them.
2. Identify a single obstacle in the experience, hypothesize why it occurred and create an alternative version of the site to test the resolution.

The first option seems cut-and-dried. The data tells you there is an issue; you create a solution for it. But like I mentioned already, the chances of succeeding when shooting from the hip like that only work with tried and true desktop design techniques. Even then, it can still be risky if your audience doesn’t align with the average online user’s behavior.

The second option, on the other hand, allows designers to more safely implement changes to a mobile website. Until you have a clear picture of the mobile user’s journey through your website (which, realistically, could involve them jumping from a mobile device to desktop at some point), mobile A/B testing must be an essential part of your job as a web designer.

This is how A/B testing works:

• Identify a part of the website that you believe needs a change. (This should be based on findings in your data or direct reports from users about problematic experiences.)
• Hypothesize why there is friction and how you think it can be resolved.
• Choose just one element to change.
• Using A/B testing software, set up your test variables. You should pit the control (i.e. original version of the site) against a variation of the element.
• Run the test against equal parts of mobile visitors.
• Let the test run for two to four weeks.
• Monitor results to make sure you’re generating sufficient data and take note of any anomalies along the way.
• End the test and review the results.
• If there’s a significant margin between the control and variation results, use your mobile A/B testing tool (like VWO) to implement the winner.

It’s okay if you find that the control is the winner. Take what you’ve learned and apply it to your A/B testing efforts going forward.

Recommended reading: How To Conduct Usability Studies With Participants With Disabilities

Tips For A/B Testing For Mobile-First Experiences

You’re here because you want to know how to increase conversions on the websites you build for clients. The tips below will force you to step outside typical conversion rate optimization planning and think outside the box as you test your theories.

Tip #1: Stop Thinking About Mobile vs. Desktop A/B Testing

With traditional A/B testing, you typically have verifiable proof of what works and what doesn’t. You tweak the wording on a call-to-action and more users click to buy the product. You change the color of the shirt in a photo and sales go up by 25%. You move the placement of the CTA to the bottom of the post and more readers subscribe.

In other words, you know that a change you made will directly impact the business’s bottom line.

However, when it comes to mobile, it’s not that easy.

Qubit published a report called The Influence of Mobile Discovery in 2018.

The above image depicts the differences in the mobile halo effect from 2016 to 2017.

The mobile halo effect is a term Qubit uses to describe how the activity that takes place on mobile directly influences what happens on desktop. Qubit’s research of over 1.2 billion customer interactions with the web found:

Analyzing the cohort of users in our dataset who logged into their accounts on more than one type of device shows that mobile activity directly influences an average of 19% of computer revenue. In some sub-verticals, this influence is much higher, with Fashion seeing an average of 24%, while some retailers receive as many as 1 in 3 of their computer transactions as a result of mobile-browsing.

What’s more, this information only accounts for mobile users who logged into a website from multiple devices. Qubit suspects that people who simply discover a website through mobile also lead to this halo effect. This, in turn, drives up the value of desktop conversions because of how helpful mobile is during the discovery phase of the customer journey.

This is why you can’t just look at mobile-only results on a mobile-first A/B test.

Instead, conduct your tests in the following manner:

• Run your test with mobile visitors.
• Review the results from your A/B testing tool to see if you were able to remove the obstacle from the mobile experience.
• Then, look at your Google Analytics results from the same time period. Even if mobile traffic continued to drop off at the same point, you may find that desktop traffic and engagement increased as a result.

In sum, don’t go into mobile A/B testing thinking that everything you do must result in a greater amount of sales, subscribers or members on mobile. Instead, focus on how to improve the experience as a whole so that it improves your overall conversion rate.

Tip #2: Start with the Header

Remember that there are four micro-moments (or motivations) that drive mobile users to a website:

1. I want to know.
2. I want to go.
3. I want to do.
4. I want to buy.

With such a clear purpose driving their journey to and hopefully through your mobile site, don’t force them to wait for what they’re asking for. In terms of design, this translates to shortening their pathway — either to conversion or to completing the mobile experience before moving to desktop.

When you begin mobile-first A/B testing, look at elements that provide an answer to the micro-moments that are most relevant to your website.

Is there a way to place them in the header of the website or within the first scroll or two of the home page? Or can you at least design a one-click shortcut in the navigation to take them to it?

Here are some ideas:

1. I want to know.

Websites with lots of content would do well to test whether or not rearranging the navigation and putting emphasis on relevant and timely categories helps with conversion.

BuzzFeed takes this theory a step further:

In addition to customizing the navigation regularly, BuzzFeed has chosen to leave the main navigation out in the open on mobile, with a fun selection of emojis to draw attention to the timeliest of categories.

Another way to answer the “I want to know” search is by providing a point of contact in as streamlined a fashion as possible as SensesLab has done:

The “Mail” icon in the top-right corner takes mobile visitors to the Contact page. However, this is no ordinary contact page. While an introduction to their point of contact and email address is given, it’s the contact form below that really shines:

The entire form fits within an entire screen-grab on my iPhone above. There’s no wasting of time by providing instructions on how to fill out the form or anything like that. Users just need to click on the highlighted fields to personalize their responses.

Even better:

SensesLab has anticipated their responses and provided pre-populated answers along with custom keyboards to shorten the amount of time anyone has to spend filling this out.

2. I want to go.

I think the solution to test for with this one is obvious. In other words:

Where in the header or above the fold do you place the reservation buttons?

Just don’t be afraid to think outside the box with this. For example, this is The Assemblage website:

The Assemblage is a coworking space located in New York City. While the mobile site could’ve easily prioritized conversions up top (i.e. “Get your membership now!”), it instead provides a shortcut that makes more sense.

With the focus on booking a tour, mobile visitors can easily claim a date and time. Then, worry about learning all about and seeing the workspace in person later.

Completing the booking process is incredibly easy on mobile, too.

There are other ways to think outside the box when it comes to designing and testing for “I want to go”. This next example combines two micro-moments and does so in a really unique way, in my opinion.

This is Visit California:

Among the well-chosen icons its placed in the header of the site, Visit California also includes a “Map” icon. After all, what is one of the main reasons why someone would visit this site?

“I want to go to California and need suggestions!”

Now, behind this map icon is not a reservation system, enabling users to book their trip to California. With a site promoting travel to such an expansive location, users are more likely to use this site to gather information to decide where to go. The Map icon, then, is their key to drilling down deeper into those answers:

This is a unique and visually stimulating way to get research topics and answers into the hands of people who want it.

3. I want to do.

This question is an interesting one to design and A/B test for.

On the one hand, you’d assume that “I want to do” would be answered by articles that provide a how-to for the desired task. When that’s the case, the abundantly sized search bar from Kitchn is a good idea to test for:

It’s clear what Kitchn users want to do when they get here: search for recipes. And with a magazine of Kitchn’s size, that could be a difficult task to accomplish by using the traditional navigation. Instead, this search bar that’s nearly comparable in size to the entire header bar provides a faster solution.

But then you have the other kind of “I want to do” situation to design for — the one where the visitor of your mobile site wants to go out in the real world and get something done. This is similar to the “I want to go” solution from The Assemblage.

ReShape is a fitness center in Poland:

Once you open the navigation on this website, users encounter a number of options to learn about the fitness center and its services.

What’s nice about this, however, is that the website allows current customers to cut the line and schedule a class right away through the calendar icon. There’s no need to download and use a separate mobile app. It’s all right on the mobile website and it’s easy to do, too:

When the success of the website and business is contingent upon getting customers to actually do something, don’t bury it in the mobile experience.

4. I want to buy.

Lastly, there’s the “I want to buy” scenario you have to test for.

While the hypothesis for this kind of test is going to be easy enough to figure out — “I want to get more mobile customers to make a purchase” — it’s how you use your design to compel them to do so that’s going to be difficult. Because, again, you have to remember that mobile conversion isn’t simple.

One example I really like of this comes from The Bark, a magazine for dog owners.

What’s nice about this design is that there are two actions competing against one another:

1. The content of the website that allows visitors to peruse articles for free.
2. The unobtrusive yet boldly designed sticky bar with an attractive offer to convert.

As more and more we move away from pop-ups and with the sidebar having little to no place on mobile, we’re running out of options for ways to jump into the experience and say:

Hey! Buy this now!

You could place banners in-line with the content, but that may be too disruptive for your users. While I’d assume that a sticky bar that can easily be dismissed is the better way to compel mobile visitors to convert, this is why we have A/B testing. To let us know what exactly our specific audience will do when confronted with a Buy (Subscribe) CTA on mobile.

And if they don’t want to convert there, that’s fine. At least you’ve done your due diligence in testing alternative scenarios to see if you can improve your success rate.

Tip #3: Encourage Users to Save Instead

This last point is a good segue into what I’m going to talk about next:

There are just some websites that won’t convert well on mobile.

Although research on Generation Z as consumers is still relatively new, many suggest that they are going to be true multichannel shoppers. Most of their research will be done on mobile devices, but the preferred shopping experience will be from a computer or in person.

Whether or not that’s true for Gen Z, millennials or any other generation of consumer, I think it’s a smart idea to test for this hypothesis. Until your mobile conversion rates are consistently and significantly higher than desktop and in-person conversion, encouraging mobile users to “Save” their progress on your site might be the better design choice.

As you work on designing and redesigning websites this year, you might want to save yourself the trouble of committing solely to a conversion funnel. Instead, build in shortcuts to “Save” on the mobile experience like:

• Sign up for an account.
• Save products to your cart or wish list.
• Save an article or feed for future reading.
• Share your email address for future updates.
• Sign up for a free demo and we’ll take care of the rest.

Then, when the site is live, test how the conversion rates are affected with or without them.

Here are some neat examples of websites that use “Save” features well on mobile.

This is Entrepreneur magazine:

See that icon in the header between the search magnifying glass and account settings? This is where Entrepreneur enables regular readers to save content for future consumption:

As you can see, readers can save all sorts of content under this Save feature, making it easy to return to Entrepreneur articles any time, any place and from any device.

Then, there’s the example of Zendesk:

For those of you designing websites for service providers and SaaS companies, this is an excellent way to help your users “Save” their progress. I know it might not look that way at first glance, but let me explain:

Zendesk isn’t wasting anyone’s time with an overlong description of what it does and why people need to purchase its help desk software. Instead, it’s clearly summarized what users can expect and then provides two appealing calls-to-action. Regardless of which option the mobile user chooses, Zendesk requires them to provide contact information.

So, let’s say a mobile user fills out the form to enter the demo. They get inside it, but then realize they’re short on time or just don’t want to interact with it on mobile. Fine. Zendesk now has their information and will be in touch soon to follow up about the experience. The mobile user can then re-enter the experience from their preferred device when the inevitable follow-up email reminds them to do so.

Tip #4: A/B Test Your Page and Post Length

Another suggestion I’m going to make for mobile-first A/B testing is content length.

I actually touched on the subject of brevity in my previous article, How Web Designers Can Contribute to Mobile-First Marketing. However, I didn’t talk about how you can use A/B testing to confirm whether or not that’s the right path for your website.

There are case studies and research reports galore that discuss the subject of ideal content length for both desktop and mobile. Some are emphatic that shorter is always better, which is why I think we’ve seen such a huge push for video over written content in past years.

But then there are some who suggest that length should be determined on a case-by-case basis.

Take the Neil Patel blog, for instance. If I had to guess, I’d say that his articles are between 2,000 and 5,000 words on average — even on mobile. Considering Patel is a multi-millionaire, I don’t suspect that his lengthy posts have hurt the success of his brand in the least bit.

So, again, this is why we need A/B testing — just to confirm our suspicions and put any fears we might have about the efficacy of a site’s design or content to rest.

Unless your client comes to you as a well-known brand and they’ve already proved they can produce successful 2K-word posts like Patel, you have to test this.

Talk to your writers and marketers and ask them to create two different versions of your content for the first month or two. This includes the home page, blog posts, product pages and any other key pages in the user’s journey. Run a test to see if the length of the page on mobile affects readability as well as conversions.

You can then use these results to refine the rest of the content on your site, making sure you’re providing mobile users with the ideal reading experience wherever they go.

Wrapping Up

The goal in mobile-first A/B testing is to inspire mobile visitors to keep moving through the experience. Even if the element you’ve chosen to test doesn’t directly lead to conversion, the improvements you make should eventually trickle down to that final step, no matter which device it takes place on.

Just don’t forget to study your desktop analytics while running mobile-first A/B tests. While test results might not show you what you were hoping to see, looking at the overall picture might.

(ra, yk, il)

Welcome back, Readers! It’s February, and I don’t think I have a single pink or chocolate-themed site anywhere in the mix. Ah well…

I really shouldn’t have typed that. Now I want to either eat some peanut-butter and chocolate goodies, or base a design on that color scheme. I probably will.

Anyway, we’ve got a generally mixed bag of portfolios for you to check out, with a number of aggressively monochromatic designs in there. 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.

Rob Weychert

Rob Weychert’s portfolio may not be new as such, but I just found it… and probably should have found it sooner. He used to be a designer at Happy Cog, and is now at ProPublica, so you should expect earthy tones and fantastic typography. He sells his expertise mostly through his client list and his extensive blog, using the “go look at my work, it’s super famous” approach to marketing.

Well, it works.

Platform: Static Site (as far as I can tell)

Transatlantic Film Orchestra

The Transatlantic Film Orchestra do exactly what you think they do. Music for video. And on their website, they do it right: no music plays when you load the site. All you get is a calm, dark, and monochromatic one-page portfolio.

I do particularly like the implementation of the audio players, though. The Morse code, the grainy photos, it all works.

Platform: WordPress

Ramon Gilabert

Ramon Gilabert’s portfolio brings us a calming and classic minimalist design combined with some beautifully-used SVG graphics. Mind you, it’s a little confusing when you click on the “social” link in the navigation, as the social links are practically hidden at the bottom, on the right, and on their side. Otherwise, it’s a beautiful and charming design.

Platform: Static Site

Charlie Gray

Charlie gray’s portfolio is full of cinematic-looking photography and Hollywood celebrities, so this layout that feels like a cross between a magazine layout and a PowerPoint is actually right on the money. I’d almost be disappointed if a site like this wasn’t loaded down with a bit too much JS.

In the end, it’s the images that sell everything anyway.

Platform: WordPress

Jordy van den Nieuwendijk

This portfolio is pretty much an art gallery, and it embraces the theme with a full-screen slideshow on the home page, lots of white space, and monospaced type. It’s a classic approach and it hold up well in this case.

Platform: Static Site

Atelier Florian Markl

Atelier Florian Markl has taken the inherent “blockiness” of web design and absolutely run with it. The theme of the day is rectangles and bold colors. You might have a hard time seeing anything, but once your eyes adjust to the glare, you won’t forget this highly modernist design in a hurry.

Platform: Joomla

Nathan Mudaliar

Nathan Mudaliar’s copywriting portfolio may not be the fanciest out there, but it is a master class in showcasing your work creatively. There’s a sort of conversational bit of UI where he showcases his work in different “voices”, interactive examples of his copywriting techniques, and more.

It’s a bit hard sell, perhaps, but you can’t argue with results.

Platform: Static site

WebinWord

WebinWord know how to to stick to a theme. This minimal-ish but highly animated site manages to use the shape of their logo mark all over just about every page. And weirdly enough, it works.

Platform: WordPress

Okalpha

Okalpha goes right for bright colors and pseudo-3D graphics to catch your attention. Honestly, they’re using the same colors and shapes people have been using on us since we were toddlers, so why wouldn’t it work? Slightly kid-ish or not, I think it works.

Platform: Custom CMS (Probably)

Makoto Hirao

Makoto Hirao’s portfolio is ticking a lot of boxes for me, including great type, good use of imagery, and a horizontal home page layout that I actually really like, and that feels intuitive.

My only real criticism would the the usual one about JS dependence.

Platform: Custom CMS

Lydia Amaruch

Lydia Amaruch brings us a beautiful grid-themed portfolio (I am, as always, a sucker for this look) combined with some fantastic illustrations, and decidedly modernist layout. Some bits are weirdly low-contrast, but it’s a darned pretty site overall.

Platform: Static Site

The Sweetshop

The Sweetshop, being a video production company, naturally puts a lot of video front and center with the dark layout you’d expect. But even so, their typography game is surprisingly strong, and there’s not a serif in sight. Even their press releases look pretty.

Platform: WordPress

Noughts & Ones

Noughts and Ones is another agency that’s sticking to their theme, with their branding being a big part of their site’s aesthetic. Other than that, it’s pretty classic minimalism. I personally adore their footer.

Is that a weird thing to say?

Platform: Squarespace

Margaux Leroy

If I had to describe Margaux Leryo’s portfolio—and I do, that’s my job—I’d call it a fusion of ‘90s era futurist design with more modern trends. It’s dark, it’s sleek, and some of the text might be a little too small and low-contrast.

Why did we think text would be that small in the future anyway? Did we think everyone would have augmented eyes?

Anyway, flaws aside, it looks fantastic.

Platform: Static Site (as far as I know)

Julia Kostreva

Julia Kostreva’s portfolio keeps it simple with some pseudo-asymmetry and soft tones. As a branding designer, she lets that branding work do, well, most of the work. And it works.

Platform: Squarespace

Baibakov Art Projects

Baibakov Art Projects takes the monochromatic to another level, and the animations are only sometimes in the way. It’s tall, dark, and elegant, like the work it features. Fantastic use of asymmetry, too.

Platform: Static Site

Kolaps

Kolaps has a decidedly modernist design that feels at once very “business-friendly” and quite eye-catching. It’s classic minimalism come back again with a touch of sci-fi futurism and particle effects.

Platform: Custom CMS (I think)

Betty Montarou

Betty Montarou’s portfolio is kept dead simple with a sort of “click to collage” method of showing off her work. It keeps the whole experience down to about two pages, and only shows off the very best of what she does.

Platform: Static Site

Jordan Sowers

Jordan Sower’s portfolio is another artsy one that sort of mimics the art gallery aesthetic a little. Still, it’s pretty. It’s interesting in that it functions as a portfolio and a store at the same time, but the store is kept almost hidden unless you actually click a link to buy something. It’s a store without the hard sell, and so it’s free to be artistic in its own right.

Platform: Static Site

Heller

And finishing off our list we have another monochromatic design with Heller. It’s modern, it’s pretty, and it has an interesting approach to the collage patterns we see everywhere. This one is definitely going for a futurist feel, even as it’s grounded in the trends of yester-month.

I like the horizontal swipe-in animation they use for images. I mean, if you’re going to animate everything, why not give it that Star Wars^TM feel?

Platform: Static Site

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

Source

In this article, we are going to talk about building Single page applications using AngularJS.

Let us first discuss the concept of Single Page Application. The visitors on websites are not patient enough now. They want everything to work speedily. They are willing to waste their time on a website that loads slowly. So there are many ways you can use in order to improve the loading speed of your website. Most companies are now opting for single page web application to speed up the site loading and also improve the overall user experience.

What are single page applications?

A Single Page Application or SPA is a type of website or web application which that can dynamically reload particular page elements depending on the interactions of the users. It helps in avoiding the loading of new pages from a specific server. This is what helps in enhancing the speed and overall user experience. SPA try to offer the same kind of experience as a desktop application. Some of the most popular single page applications users include WhatsApp Web, Flickr, Gmail etc.

Important Features of single-page applications

If you don’t have enough exposure on how to develop single page web applications using AngularJS, you will, first of all, have to get used to some of the most important features of a Single Page Application. The page is not exactly made to refresh or reload. In place of that, it simply adjusts itself according to the requests of the user. It then performs accordingly.

Let’s take a look at some of the critical features of a Single Page Application. This will be really helpful for you if you are planning to learn about single page web application development.

Well-organized Routing

An efficient SPA must be able to track the current state and location of a user. It should be done during the process of navigation using JavaScript routers. This can either be done by the HTML5 History API usage or by using the Hashtag technique.

No Round Trips on the Server Side

A strong SPA must be capable of restructuring any portion of the User Interface. It should be done without the need of an entire server-side trip in order to recover an HTML page. This is usually achieved with the help of a Separation of Concerns design theory. It is a theory that implies the segregation of data from the presentation of data.

Flexibility and Performance

A well-functioning SPA must be able to transmit the entire UI to the client. It is said to be efficient for the overall network performance. When you increase the execution from the client side and then reduce the offline processing, the UI will have an effect on the entire network. The highlight of this feature is the flexibility it offers to the UI. It allows the developer to rewrite the application front end without even once disturbing the server.

What is AngularJS?

AngularJS is a powerful JavaScript-based framework. The official definition goes as mentioned below:

“AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. Moreover, it all happens within the browser, making it an ideal partner with any server technology.”

While using AngularJS, the developers are given an opportunity to write client-side applications. It can be done with the help of JavaScript in the MVC format. These applications are made to work across multiple browsers. AngularJS is used for creating web applications which offer great performance and are also easy to maintain.

Core features of AngularJS

• Data Binding: The automatic integration of data between the view elements and the model.

• Scopes: This works as lubrication between controller and view.

• Controllers: A JavaScript function that links to a specific Scope is a controller.

• Services: The services feature helps in arranging and sharing code through the application.

• Templates: Templates includes attributes and elements that belong to the AngularJS family.

• Directives: Directives serve as markers for DOM elements including attributes, CSS, and the like.

Why you must build Single page applications with the help of AngularJS?

1. Quick Performance

When you develop a SPA with AngularJS framework it loads quickly. The component router delivers automatic splitting of codes which makes it possible.

2. Cross-Platform Compliant

An AngularJS framework allows a SPA to work on every platform.

3. Support for UI

When you develop SPAs using AngularJS, it offers an excellent user experience.

4. Easy to Maintain

If you prefer AngularJS for developing a SPA, the maintenance would be much easier in the future.

5. Offers Flexibility

The development of SPAs becomes easier, once you are used to AngularJS. You can build animation timelines and complicated choreographies, using AngularJS framework. It can be done by making use of the minimum number of codes. So you can develop interactive and user-friendly web applications that offer amazing flexibility.

Conclusion.

AngularJS is a really great option for building SPA applications because of the number of features that make the entire process possible. In the near future, we will witness a lot of website building that is being dynamically powered by JavaScript. AngularJS has the capability of handling the development of web applications, right from wireframing to development and testing. If you are looking to build a single page web application and you are not sure how to make use of AngularJS properly, you can either hire an AngularJS developer or get in touch with an AngularJS development company for getting more information on this.

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Top Logo Design Trends in 2019

Meet the Chameleon Menu

Top 12 Web-Based Color Tools for Web Designers

Netflix Rolls Out Brand New Ident for all its Original Material

5 Reasons no One Visits your Website (and How to Change that)

An Introduction to CSS Exclusions: The Future of Complex Web Layout

Linked: Plagiarism Never Gets Old

Nintendo & Designing Humanly

Welcome to the Bold and Blocky Instagram Era of Book Covers

Life Without Google (Fonts)

Figma Fonts Playground System

Hands-on with the New Gmail for Android (and iOS)

Constraint Layout (for Designers)

Some Interesting Ways to Choose Color Palettes

Why are You not Designing your Day-to-day Experience?

CodyHouse Typography Editor

Sketch 53

Can’t Unsee

Apple is Removing ‘Do not Track’ from Safari

Leveraging Mental Models in Product Design

The End of the Celebrity Designer

The 7 Deadly Sins of User Research

Web Design 3.0: When your Web Design Really Matters

Why Isn’t the Internet More Fun and Weird?

How to Rebrand a Fashion Label

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

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

Source

Howdy folks! ? I’m Simon Owen, and over the years, I’ve loved being a part of and learning from the dotfiles community. I spend a lot of time teaching developers and running workshops. In those sessions, demonstrating how I set up my development environment is often one of things that folks appreciated the most.

Dotfiles are a key part of my development environment. Haven’t heard of them? Well, even if you have, it’s a good idea to walk through what they are and the benefits of using them.

Last year, I set myself a goal to create a screencast series. If you like this article and want to find out more, please subscribe to the mailing list and get the download link. If you really like it, you can also ? donate here! ?

A dot-what-file?

If you’re hearing about dotfiles for the first time, it’s totally fine to be confused about what they are and what they do. I recall that it took me a considerable amount of time before I realized a dotfile is simply a file that has a dot in front of the file name!

There are two common examples of dotfiles. First, the ones you might already be familiar with are those often found at the root of many open source projects — for example, .editorconfig contains code editor preferences to help maintain consistent coding styles for a project. You may also have seen .stylelintrc and .eslintrc floating around, which set CSS and JavaScript rules, respectively.

Second (and the ones we’re looking at today), are dotfiles that can live at the root level of a user directory (i.e. /Users/ ). One such dotfile is .aliases, which contains custom named commands that can speed up work in the Terminal. Another is .bash_prompt, which is used to change the $ in Terminal to something a little more fun. In my case, I set it so this dude pops up to make me smile when things get tough:

༼ つ ◕_◕ ༽つ

Hopefully, you’re already starting to get a good sense of how useful dotfiles can be. They’re sort of like hidden gems (literally, since they’re hidden from views by default) that unlock superpowers for your machine to help with development. We’re talking about automation, optimizations, and efficient workflows, among other things.

First, I want to give props to the dotfiles community

Before we dig into dotfiles, it’s worth calling out how great the community behind them is. When I first forked Paul Irish’s dotfile repo, there was a lot going on in there I didn’t understand. Mathias Bynens and Paul Irish helped me immensely by answering questions about the code and it was their willingness to help that served as one of the reasons I became drawn to both the concept and the community.

Sometimes, I’ll post something to the community that I’d like to automate, but can’t figure it out for the life of me. And, without fail, I’ll get a helpful reply. Case in point: Eric Czarny wrote an app for me to automate my Spectacle settings and Mathias also contributed a code snippet. How cool is that?!

Then there are things like macOS updates. The dotfiles community is often on top of this and provide useful advice on GitHub comments regarding anything that no longer works or other useful information. You can then amend your dotfiles accordingly, such as adding the following code that increases the sound quality for Bluetooth headphones/headsets:

defaults write com.apple.BluetoothAudioAgent "Apple Bitpool Min (editable)" -int 40

Digging into dotfiles

The code example above might look a bit familiar to you. It’s along the same lines as this often-used one to show hidden files:

defaults write com.apple.finder AppleShowAllFiles -bool true

…or this one to add spaces to the dock:

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock

These commands can be pasted directly into the Terminal. As you might expect, something like -bool true will change a boolean value from false to true and reset the command for later use.

If you’e like me and have a lot of these commands, then this is where the .macos (previously .osx) dotfile becomes especially useful. Instead of copying and pasting each command individually, we can automate and run all of them in one go.

Let’s walk through some examples

There are so many awesome things we can do in dotfiles. Here are some practical use cases that I rely on for my day-to-day work.

Setting aliases for default commands (.aliases)

Navigating between directories in the Terminal can be cumbersome and it’s easy to get lost in cd madness.

We can replace the standard “change directory” (cd) command with a custom command in the .aliases dotfile. For example, use this alias to ditch the cd prefix altogether when using the command cd .. to move up a directory in favor of .. by itself.

alias ..="cd .."

Sure, it’s only dropping two letters, but how much easier is that to remember?

We can do the same thing to make shortcuts to certain directories:

alias dl="cd ~/Downloads"

Or, create aliases for shorthand command tasks:

alias hs="hexo serve"

Oh, here’s another one! List only directories:

alias lsd="ls -lF ${colorflag} | grep --color=never '^d'"

Make a custom bash prompt for a personal touch to the Terminal (.bash_prompt)

I referenced this a little earlier, but here’s how I turned my bash prompt ($) into a little dude that’s way more fun to look at it. This is done directly in the .bash_prompt dotfile.

PS1="༼ つ ◕_◕ ༽つ"

Create Git shortcuts to speed up commits (.gitconfig)

We can make it a little more efficient to commit all changes at once in the .gitconfig dotfile. Using ca is a lot more concise than !git add -A && git commit -av .

ca = !git add -A && git commit -av

Another handy shortcut: find commits by commit message.

fm = "!f() { git log --pretty=format:'%C(yellow)%h  %Cblue%ad  %Creset%s%Cgreen  [%cn] %Cred%d' --decorate --date=short --grep=$1; }; f"

Automate common Homebrew tasks (brew.sh)

Use Homebrew for package management? Although not strictly a dotfile (it doesn’t have a dot before the file name), Homebrew gives us the brew.sh shell script file. This file automates the installation and management of Apps and Tools:

brew install git
brew install tree
brew cask install google-chrome
brew cask install iterm2
brew cask install sublime-text

Protect your Git credentials (.extra)

Hide information you don’t want to share publicly in one file in a private repo and bring it in for you alone. For example, a good idea for this file is anything that’s specific to you, such as your Git credentials. This will prevent people from cloning, running your dotfiles, then committing as you!

# Git credentials
# Not in the repository, to prevent people from accidentally committing under my name
GIT_AUTHOR_NAME="Simon Owen"
GIT_COMMITTER_NAME="$GIT_AUTHOR_NAME"
git config --global user.name "$GIT_AUTHOR_NAME"
GIT_AUTHOR_EMAIL="<ADD-YOUR-EMAIL-HERE>"
GIT_COMMITTER_EMAIL="$GIT_AUTHOR_EMAIL"
git config --global user.email "$GIT_AUTHOR_EMAIL"

Write custom functions for tasks (.functions)

Dotfiles are more than shortcuts and aliases. We can also make custom functions in .functions that do more advanced lifting. For example, create a new directory and change directory to it:

function mkd() {
  mkdir -p "$@" && cd "$_";
}

Or, we can open a given location in Finder with a one-letter command (o):

function o() {
  if [ $#-eq 0 ]; then
    open .;
  else
    open "$@";
  fi;
}

Specify your $PATH and keep private (.path)

$PATH allows the running of executable files. Instead of navigating to each path manually in Terminal, here we can set the file paths so they can run the executable files directly. It might be the case that this file contains sensitive information. As such, this file is often kept in a private repo.

Here’s an example adding ~/utils to the $PATH:

export PATH="$HOME/utils:$PATH"

Force Vim to use a particular theme (.vimrc)

Editor config files are great for ensuring consistent formatting across projects, but we can also tell a Vim editor to use a specific theme in a .vimrc file:

" Use the Solarized Dark theme
set background=dark
colorscheme solarized
let g:solarized_termtrans=1

Bonus: Helpful Terminal recipes for macOS

OK, so here’s a little bit of a bonus for Mac users that isn’t related to dotfiles, but are things we can do in the Terminal to give macOS superpowers to do pretty awesome things that make day-to-day use a little easier and more pleasant.

First off, we can show hidden files by default in the Finder so dotfiles are visible all the time by typing this into the Terminal:

defaults write com.apple.finder AppleShowAllFiles -bool true

Find the way that scrollbars toggle on and off in Finder jarring? Let’s make them visible at all times:

defaults write NSGlobalDomain AppleShowScrollBars -string "Always"

By default, macOS checks for software updates once per week. But maybe we want to check once a day or at some other interval:

defaults write com.apple.SoftwareUpdate ScheduleFrequency -int 1

You know how holding down on a keyboard key repeats that character? Well, it repeats at a determined speed that we can supercharge to blazingly fast:

defaults write NSGlobalDomain KeyRepeat -int 0

Some people love the way macOS includes a box shadow when taking a screenshot of a window. Others don’t. Here’s how to turn it off:

defaults write com.apple.screencapture disable-shadow -bool true

And, in this example, we can automate the size of icons in the Dock:

defaults write com.apple.dock tilesize -int 36

This is only the tip of the iceberg! In my screencast series I go over more than one hundred of them.

Conclusion

Web development is increasingly more complicated as time goes on. We all have ways of making our development workflow a little easier and comfortable based on personal preferences.

You may be a seasoned developer and aware of such things as Node, npm, and Git but still find yourself stuck in a Terminal window with a bunch of errors. Or, you might be starting out and find these, and other tools, complex and tough to grasp.

Either way, hopefully knowing more about dotfiles and what they’re capable of doing gives you a new weapon in your arsenal to make your development environment tailored to you, speed up your workflow and give your machine added superpowers!

As a reminder, my screencast series will give you more tips and tricks, plus a good idea of how to get your development environment set up. This is the first in the series. Going forwards, I’m going to look at expanding on it, so please let me know if there’s anything else you’d like me to cover!

The post Using Dotfiles for Managing Development and Many Other Magical Things appeared first on CSS-Tricks.

New JavaScript Features That Will Change How You Write Regex

Faraz Kelhini

2019-02-08T13:00:32+01:002019-02-08T12:17:32+00:00

There’s a good reason the majority of programming languages support regular expressions: they are extremely powerful tools for manipulating text. Text processing tasks that require dozens of lines of code can often be accomplished with a single line of regular expression code. While the built-in functions in most languages are usually sufficient to perform search and replace operations on strings, more complex operations — such as validating text inputs — often require the use of regular expressions.

Regular expressions have been part of the JavaScript language since the third edition of the ECMAScript standard, which was introduced in 1999. ECMAScript 2018 (or ES2018 for short) is the ninth edition of the standard and further improves the text processing capability of JavaScript by introducing four new features:

• Lookbehind assertions
• Named capture groups
• s (dotAll) Flag
• Unicode property escapes

These new features are explained in detail in the subsections that follow.

Debugging JavaScript

console.log can tell you a lot about your app, but it can’t truly debug your code. For that, you need a full-fledged JavaScript debugger. ?

Lookbehind Assertions

The ability to match a sequence of characters based on what follows or precedes it enables you to discard potentially undesired matches. This is especially important when you need to process a large string and the chance of undesired matches is high. Fortunately, most regular expression flavors provide the lookbehind and lookahead assertions for this purpose.

Prior to ES2018, only lookahead assertions were available in JavaScript. A lookahead allows you to assert that a pattern is immediately followed by another pattern.

There are two versions of lookahead assertions: positive and negative. The syntax for a positive lookahead is (?=...). For example, the regex /Item(?= 10)/ matches Item only when it is followed, with an intervening space, by number 10:

const re = /Item(?= 10)/;

console.log(re.exec('Item'));
// → null

console.log(re.exec('Item5'));
// → null

console.log(re.exec('Item 5'));
// → null

console.log(re.exec('Item 10'));
// → ["Item", index: 0, input: "Item 10", groups: undefined]

This code uses the exec() method to search for a match in a string. If a match is found, exec() returns an array whose first element is the matched string. The index property of the array holds the index of the matched string, and the input property holds the entire string that the search performed on. Finally, if named capture groups are used in the regular expression, they are placed on the groups property. In this case, groups has a value of undefined because there is no named capture group.

The construct for a negative lookahead is (?!...). A negative lookahead asserts that a pattern is not followed by a specific pattern. For example, the pattern /Red(?!head)/ matches Red only if it not followed by head:

const re = /Red(?!head)/;

console.log(re.exec('Redhead'));
// → null

console.log(re.exec('Redberry'));
// → ["Red", index: 0, input: "Redberry", groups: undefined]

console.log(re.exec('Redjay'));
// → ["Red", index: 0, input: "Redjay", groups: undefined]

console.log(re.exec('Red'));
// → ["Red", index: 0, input: "Red", groups: undefined]

ES2018 complements lookahead assertions by bringing lookbehind assertions to JavaScript. Denoted by (?<=...), a lookbehind assertion allows you to match a pattern only if it is preceded by another pattern.

Let’s suppose you need to retrieve the price of a product in euro without capturing the euro symbol. With a lookbehind, this task becomes a lot simpler:

const re = /(?<=€)d+(.d*)?/;

console.log(re.exec('199'));
// → null

console.log(re.exec('$199'));
// → null

console.log(re.exec('€199'));
// → ["199", undefined, index: 1, input: "€199", groups: undefined]

Note: Lookahead and lookbehind assertions are often referred to as “lookarounds”.

The negative version of lookbehind is denoted by (?<!...) and enables you to match a pattern that is not preceded by the pattern specified within the lookbehind. For example, the regular expression /(?<!d{3}) meters/ matches the word “meters” if three digits do not come before it:

const re = /(?<!d{3}) meters/;

console.log(re.exec('10 meters'));
// → [" meters", index: 2, input: "10 meters", groups: undefined]

console.log(re.exec('100 meters'));    
// → null

As with lookaheads, you can use several lookbehinds (negative or positive) in succession to create a more complex pattern. Here’s an example:

const re = /(?<=d{2})(?<!35) meters/;

console.log(re.exec('35 meters'));
// → null

console.log(re.exec('meters'));
// → null

console.log(re.exec('4 meters'));
// → null

console.log(re.exec('14 meters'));
// → ["meters", index: 2, input: "14 meters", groups: undefined]

This regex matches a string containing meters only if it is immediately preceded by any two digits other than 35. The positive lookbehind ensures that the pattern is preceded by two digits, and then the negative lookbehind ensures that the digits are not 35.

Named Capture Groups

You can group a part of a regular expression by encapsulating the characters in parentheses. This allows you to restrict alternation to a part of the pattern or apply a quantifier on the whole group. Furthermore, you can extract the matched value by parentheses for further processing.

The following code gives an example of how to find a file name with .jpg extension in a string and then extract the file name:

const re = /(w+).jpg/;
const str = 'File name: cat.jpg';
const match = re.exec(str);
const fileName = match[1];

// The second element in the resulting array holds the portion of the string that parentheses matched
console.log(match);
// → ["cat.jpg", "cat", index: 11, input: "File name: cat.jpg", groups: undefined]

console.log(fileName);
// → cat

In more complex patterns, referencing a group using a number just makes the already cryptic regular expression syntax more confusing. For example, suppose you want to match a date. Since the position of day and month is swapped in some regions, it’s not clear which group refers to the month and which group refers to the day:

const re = /(d{4})-(d{2})-(d{2})/;
const match = re.exec('2020-03-04');

console.log(match[0]);    // → 2020-03-04
console.log(match[1]);    // → 2020
console.log(match[2]);    // → 03
console.log(match[3]);    // → 04

ES2018’s solution to this problem is named capture groups, which use a more expressive syntax in the form of (?...):

const re = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const match = re.exec('2020-03-04');

console.log(match.groups);          // → {year: "2020", month: "03", day: "04"}
console.log(match.groups.year);     // → 2020
console.log(match.groups.month);    // → 03
console.log(match.groups.day);      // → 04

Because the resulting object may contain a property with the same name as a named group, all named groups are defined under a separate object called groups.

A similar construct exists in many new and traditional programming languages. Python, for example, uses the (?P) syntax for named groups. Not surprisingly, Perl supports named groups with syntax identical to JavaScript (JavaScript has imitated its regular expression syntax from Perl). Java also uses the same syntax as Perl.

In addition to being able to access a named group through the groups object, you can access a group using a numbered reference — similar to a regular capture group:

const re = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const match = re.exec('2020-03-04');

console.log(match[0]);    // → 2020-03-04
console.log(match[1]);    // → 2020
console.log(match[2]);    // → 03
console.log(match[3]);    // → 04

The new syntax also works well with destructuring assignment:

const re = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const [match, year, month, day] = re.exec('2020-03-04');

console.log(match);    // → 2020-03-04
console.log(year);     // → 2020
console.log(month);    // → 03
console.log(day);      // → 04

The groups object is always created, even if no named group exists in a regular expression:

const re = /d+/;
const match = re.exec('123');

console.log('groups' in match);    // → true

If an optional named group does not participate in the match, the groups object will still have a property for that named group but the property will have a value of undefined:

const re = /d+(?<ordinal>st|nd|rd|th)?/;

let match = re.exec('2nd');

console.log('ordinal' in match.groups);    // → true
console.log(match.groups.ordinal);         // → nd

match = re.exec('2');

console.log('ordinal' in match.groups);    // → true
console.log(match.groups.ordinal);         // → undefined

You can refer to a regular captured group later in the pattern with a backreference in the form of 1. For example, the following code uses a capture group that matches two letters in a row, then recalls it later in the pattern:

console.log(/(ww)1/.test('abab'));    // → true

// if the last two letters are not the same 
// as the first two, the match will fail
console.log(/(ww)1/.test('abcd'));    // → false

To recall a named capture group later in the pattern, you can use the k syntax. Here is an example:

const re = /b(?<dup>w+)s+k<dup>b/;

const match = re.exec("I'm not lazy, I'm on on energy saving mode");        

console.log(match.index);    // → 18
console.log(match[0]);       // → on on

This regular expression finds consecutive duplicate words in a sentence. If you prefer, you can also recall a named capture group using a numbered back reference:

const re = /b(?<dup>w+)s+1b/;

const match = re.exec("I'm not lazy, I'm on on energy saving mode");        

console.log(match.index);    // → 18
console.log(match[0]);       // → on on 

It’s also possible to use a numbered back reference and a named backreference at the same time:

const re = /(?<digit>d):1:k<digit>/;

const match = re.exec('5:5:5');        

console.log(match[0]);    // → 5:5:5

Similar to numbered capture groups, named capture groups can be inserted into the replacement value of the replace() method. To do that, you will need to use the $ construct. For example:

const str = 'War & Peace';

console.log(str.replace(/(War) & (Peace)/, '$2 & $1'));    
// → Peace & War

console.log(str.replace(/(?<War>War) & (?<Peace>Peace)/, '$<Peace> & $<War>'));    
// → Peace & War

If you want to use a function to perform the replacement, you can reference the named groups the same way you would reference numbered groups. The value of the first capture group will be available as the second argument to the function, and the value of the second capture group will be available as the third argument:

const str = 'War & Peace';

const result = str.replace(/(?<War>War) & (?<Peace>Peace)/, function(match, group1, group2, offset, string) {
    return group2 + ' & ' + group1;
});

console.log(result);    // → Peace & War

s (dotAll) Flag

By default, the dot (.) metacharacter in a regex pattern matches any character with the exception of line break characters, including line feed (n) and carriage return (r):

console.log(/./.test('n'));    // → false
console.log(/./.test('r'));    // → false

Despite this shortcoming, JavaScript developers could still match all characters by using two opposite shorthand character classes like [wW], which instructs the regex engine to match a character that’s a word character (w) or a non-word character (W):

console.log(/[wW]/.test('n'));    // → true
console.log(/[wW]/.test('r'));    // → true

ES2018 aims to fix this problem by introducing the s (dotAll) flag. When this flag is set, it changes the behavior of the dot (.) metacharacter to match line break characters as well:

console.log(/./s.test('n'));    // → true
console.log(/./s.test('r'));    // → true

The s flag can be used on per-regex basis and thus does not break existing patterns that rely on the old behavior of the dot metacharacter. Besides JavaScript, the s flag is available in a number of other languages such as Perl and PHP.

Recommended reading: An Abridged Cartoon Introduction To WebAssembly

Unicode Property Escapes

Among the new features introduced in ES2015 was Unicode awareness. However, shorthand character classes were still unable to match Unicode characters, even if the u flag was set.

Consider the following example:

const str = '𝟠';

console.log(/d/.test(str));     // → false
console.log(/d/u.test(str));    // → false

? is considered a digit, but d can only match ASCII [0-9], so the test() method returns false. Because changing the behavior of shorthand character classes would break existing regular expression patterns, it was decided to introduce a new type of escape sequence.

In ES2018, Unicode property escapes, denoted by p{...}, are available in regular expressions when the u flag is set. Now to match any Unicode number, you can simply use p{Number}, as shown below:

const str = '𝟠';
console.log(/p{Number}/u.test(str));     // → true

And to match any Unicode alphabetic character, you can use p{Alphabetic}:

const str = '漢';

console.log(/p{Alphabetic}/u.test(str));     // → true

// the w shorthand cannot match 漢
console.log(/w/u.test(str));    // → false

P{...} is the negated version of p{...} and matches any character that p{...} does not:

console.log(/P{Number}/u.test('𝟠'));    // → false
console.log(/P{Number}/u.test('漢'));    // → true

console.log(/P{Alphabetic}/u.test('𝟠'));    // → true
console.log(/P{Alphabetic}/u.test('漢'));    // → false

A full list of supported properties is available on the current specification proposal.

Note that using an unsupported property causes a SyntaxError:

console.log(/p{undefined}/u.test('漢'));    // → SyntaxError

Compatibility Table

Desktop Browsers

	Chrome	Firefox	Safari	Edge
Lookbehind Assertions	62	X	X	X
Named Capture Groups	64	X	11.1	X
`s` (`dotAll`) Flag	62	X	11.1	X
Unicode Property Escapes	64	X	11.1	X

Mobile Browsers

	ChromeFor Android	FirefoxFor Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
Lookbehind Assertions	62	X	X	X	8.2	62
Named Capture Groups	64	X	11.3	X	X	64
`s` (`dotAll`) Flag	62	X	11.3	X	8.2	62
Unicode Property Escapes	64	X	11.3	X	X	64

Node.js

• 8.3.0 (requires –harmony runtime flag)
• 8.10.0 (support for s (dotAll) flag and lookbehind assertions)
• 10.0.0 (full support)

Wrapping Up

ES2018 continues the work of previous editions of ECMAScript by making regular expressions more useful. New features include lookbehind assertion, named capture groups, s (dotAll) flag, and Unicode property escapes. Lookbehind assertion allows you to match a pattern only if it is preceded by another pattern. Named capture groups use a more expressive syntax compared to regular capture groups. The s (dotAll) flag changes the behavior of the dot (.) metacharacter to match line break characters. Finally, Unicode property escapes provide a new type of escape sequence in regular expressions.

When building complicated patterns, it’s often helpful to use a regular-expressions tester. A good tester provides an interface to test a regular expression against a string and displays every step taken by the engine, which can be especially useful when trying to understand patterns written by others. It can also detect syntax errors that may occur within your regex pattern. Regex101 and RegexBuddy are two popular regex testers worth checking out.

Do you have some other tools to recommend? Share them in the comments!

(dm, il)

I recently began reading The 4-Hour Workweek by Tim Ferriss and have been blown away by what I’ve learned so far.

Regardless of what your ultimate career goal is—to actively build websites for clients or to turn your business into a thriving digital agency—there are ways in which you can work less and accomplish more. I’m about halfway through the book and I’ve already shaved an hour off of each workday just by using the tips in the book.

Today, I’m going to share a bunch of these tips to help you improve your mindset as well as workflow.

How to Work Less and Accomplish More

Ferriss says that people are willing to live a stressful, unhappy, or unfulfilled existence now because they believe it’ll pay off in retirement when they can finally kick back, relax, and enjoy the fruits of their labor.

He then poses the following question: Why wait decades to claim your reward for working so hard?

Instead, why not find a way to make enough money now to fund the kind of life you want to lead? The kind of life that will make you happy while still being successful? Here are some of the tips from The 4-Hour Workweek that should be of great use to web designers trying to live a more fulfilling life:

1. Set Your Costs Based on Value and Success

There’s a question I see a lot of across web design and WordPress blogs and forums: “How much should I charge for my services?”

To answer this question, take two points under consideration:

What is the true value of your service? In other words, when you build a website for a client, how much new business and revenue are they going to generate from your well-designed website? Your project rates should directly correlate to their outcomes, not on the number of hours you work.

How much does the life you want to live cost? Ferriss has developed what he calls the Dreamline Exercise. You can download a sample of it as well as a worksheet to use from this list of tools.

In this exercise, you’re asked to choose the things that will make you the happiest professionally and personally. Then, assign monetary values to them so you know how much you have to earn to live that life. And, finally, create an action plan for making them a reality.

With the value of your service and the value of your life calculated, you can set a commensurate rate for your services.

2. Stop Wasting Time

There are a number of ways in which freelancers and small business owners waste time. It’s not their fault really. When a business is brand new, you do what you can to get new clients, get the work done, rinse and repeat. But this is when you start to accumulate bad business practices, unimportant tasks, and unhealthy client relationships.

Ferriss says we need to be prepared to remove the waste from our lives. Here are some ways to do that:

• Review your processes and remove unimportant and inessential tasks.
• Remove time-consuming tasks from your plate or find a smarter way to handle them.
• Stop multitasking; it only prolongs each of the tasks you’re working on.
• Get rid of “bad” clients. Clients that abuse you, take you for granted, that suck precious hours out of your workday. Start by identifying who your least profitable customers are and evaluate the rest, one by one.
• Delete unnecessary email subscriptions. Every second you spend distracted by them keeps you from living the life you want.
• Delete unnecessary tools or tools that slow down your workflow.
• Dedicate one or two times a day to check email.
• Set a specific time frame once a week when you can schedule or attend meetings.

If you stop wasting time on distractions and other time wasters, you’ll have more time to dedicate to things that are more meaningful to you.

3. Leverage Your Strengths

For many freelancers and small business owners, they break out on their own so they can work for themselves. The assumption is that if you don’t have to report to someone else, you have total control over everything. But is that always such a good idea?

Ferriss suggests that this mindset is flawed. While there’s nothing wrong in wanting to work for yourself, don’t confuse this with working by yourself. When you assume responsibility over every single task, you put the success of your business and your own personal happiness on the line.

Instead, what you need to do is leverage your strengths. Ask yourself

“What specifically am I good at?”

Focus on honing those strengths and delegating the rest. As Ferriss explains, this isn’t about being lazy or unaccountable. If your handling of things like the business’s accounting or copywriting for client websites leads to mediocre results, it’ll cost you more in the long run.

Find ways to automate your process. Templates are a good place to start. So is professional software built for a specific purpose.

Then, hire team members that fill in the gaps. An assistant to handle incoming quote requests. A maintenance service to manage ongoing support for your clients’ sites. A project manager to serve as the go-to person who interacts with clients on a daily basis.

Stop being the reason you don’t earn enough money to live the life you want.

4. Rest Up!

I hear people say this all the time: “I want to retire early.”

But as Ferriss explains, that’s not really feasible. You’d have to earn millions of dollars a year and save most of it along the way in order to make that a reality. Rather than burn yourself out trying to do the impossible, start living life to the fullest now.

This requires careful planning, but it’s definitely doable. I already detailed many of these tips when I talked about how to take a stress-free vacation. Just remember not to think of a vacation as a time when you lose money. Breaks from work give you time to clear your head and relax, which, in turn, allow you to come back to your business feeling renewed and inspired.

Wrapping Up

All that said, you should, of course, still be saving money for retirement. I’m not telling you to make frivolous choices in the pursuit of a better life. But stop telling yourself that now is not the time to enjoy any of it.

There are ways in which you can work smarter and be more effective with the time you put towards your work. In doing so, you’ll find that you don’t have to work as much and actually have free time to devote to the things, activites, and people that make you happy.

Featured image via DepositPhotos.

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

Source

An irresistible HTML element deep dive from Ire Aderinokun, this time on the element for abbreviations. You can kinda just use it (JUI) and it works fine, but if you’re hoping to make a tooltip for them (which works on touchscreens as well), then it’s much more complicated.

The end result is leaving the semantic HTML alone and progressively enhancing with ~50 lines of JavaScript that adds interactive wrapper elements and event handlers.

I feel like this is the perfect sort of thing to be made into a web component that could/should be widely distributed for use. Maybe a component or something. Can you have web components extend other native HTML elements though? If not, I guess it’s kinda falling back to what is essentially a , so maybe that’s not ideal.

Dare I say it, this is also the kind of thing where React can excel. For example, I use Reach Router, and by default, when creating links (s that turn into s), they get the proper aria-current attribute when it’s the current page. That’s good accessibility you’re getting for free because the library was good enough to get that detail right. As much as libraries like React get pointed at for problematic accessibility, there is a lot of potential for accessibility improvements through abstraction. Sort of like the way Brad Frost has been enforcing accessibility best practices in React components.

Direct Link to Article — Permalink

The post Revisiting the abbr element appeared first on CSS-Tricks.