Archive for the ‘Others’ Category

Avoid These 5 Web Design Mistakes to Improve Conversion Rate

April 19th, 2019 No comments
Avoid These 5 Web Design Mistakes to Improve Conversion Rate

Are you one of those who strives to get the desired conversion rate out of your website and unable to figure out what’s wrong?

Well, your website’s design and optimization could be the actual culprit!

No matter whether you are relying on the top-notch marketing tactics; a glitch in the overall design and user experience could affect user engagement. It is mandatory for a developer to ensure adequate stability and design that contributes to better user engagement if one needs to generate organic leads.

Dive in here to get the detailed information regarding the biggest blunders that should be avoided to enhance the conversion rate of your website.

Hidden Navigation

There could be nothing worse than a website whose navigation isn’t easily visible to the users! We are currently in an era where time is everything and everyone demands services at a blink of an eye. This the common designing mistake that can annoy the users and would surely compel them to leave the website without a second thought.

What can be more frustrating when you are not able to find a menu on a website when you are expecting quick services? You would probably leave the page at once and would find some relevant website for your purpose. This may seem a minor issue from a user perspective but search engines recognize it instantly and enhance the bounce rate of the website.

The increased bounce rate won’t let your website rank in the top searches of any search engine like Google as per their protocols. One needs to ensure that users stay on their website along with the fact that there are adequate returning users. When you are trying to build your website, it is crucial for you to check the following aspects related to navigation:

  • Make sure it is visible on the landing page so that the user can navigate to the desired services or information without any hassle.
  • The navigation bar should be adequately highlighted so that the user can identify it quickly.
  • Make sure you provide the list of pages in the order of their decreasing preferences (for users). This means you have to put the pages in the front that are most likely to be searched by the users.

No Responsiveness

You just simply cannot imagine a website in 2019 without a responsive design. You have to update your facts regarding the users that are relying on smartphones and mobile devices such as tabs, which have now crossed 75 percent of the total internet users in the world! This simply implies that you should first choose a responsive design and then work on any other aspect.

It would be really tough for you to generate leads through a website that is solely designed by keeping in mind the desktop users. Imagine you get a reference or a company’s details that offer adequate services as required by you and open their website on your phone and get unaligned text and layout. Sounds annoying, isn’t it? Well, in this scenario, anyone would leave the website with a negative impact on their mind.

So, who’s responsible for this situation? Undeniably, a non-mobile-friendly website design! If you are not targeting the mobile audience, you would probably lag behind your competitors. As per the recent survey, the ones that are emphasizing more on the mobile-friendly design are able to generate organic leads and thus have a higher conversion rate as compared to the ones that don’t.

Here are the key points to consider while developing a responsive design:

  • Make sure to prefer a responsive theme if you are developing your website in WordPress, which would hardly require many efforts.
  • Do check your website on different devices once it is developed using the right optimizing strategies.
  • Ensure that the responsiveness of your website is stable when you alter the website with the integration of the plugin.

Wrong Positioning of Ads

One cannot deny the fact that advertisements are crucial for a blog or a website that is about to start a revenue model. But you have to give a pause to your cravings for the revenue and analyze the exact position to apply the advertisement to engage users.

Most of the users find these ads annoying, which is again a strong reason for them to leave the website. According to the Google Ads experts, the positioning of the Ads plays a major role in deciding the revenue as well as the user retention rate on a website. If you are not sure about the correct positioning of an advertisement on your website, it is strongly recommended to consult an expert for the same.

A lot of video tutorials are available online that can guide you appropriately when it comes to placing an advertisement on your website without annoying the users.

Inadequate Contact Information Form

What if your users aren’t able to fill the contact us form on your website? You probably won’t get leads and no one would ever wish to miss a client just because of this silly mistake! One need to understand that the more compact the contact us form would be, the more it would be easy for the user to fill the same.

Avoid adding unnecessary details for the users that eat a lot of time while they need to fill an inquiry form. The form should be simple and should only demand the necessary details such as contact number and email so that you can get back to them regarding their inquiries.

Apart from this, you should ensure that your contact form should be visible on every page of your website in a way that it can be easily accessed whenever the user wishes to.

Inadequate Use of Content

Last but undeniably not the least, the content on your website should be adequate enough to engage users with the ability to convey the message clearly. Most of the websites out there aren’t able to depict their services properly, which is perhaps the reason why you also need to focus on the quality and relevancy of the content.

You have to place the content that shouts loud about your services in a way that it satisfies the user that they are in the right place. This would lend a hand in getting organic leads without struggling and relying on worthless techniques. You can go through the tutorials regarding the utilization of the content for enhanced user engagement.

These are some common web designing mistakes that one should avoid so as to get the right conversion rate and increase their business revenues.

Categories: Others Tags:

Popular YouTube Video Trends To Boost Your Online Visibility

April 19th, 2019 No comments
Popular YouTube Video Trends To Boost Your Online Visibility

We are currently living in an era that is facing constant digitalization. Most consumers are brought towards brands solely through digital media and content.

One such form of digital content that is gaining great prominence is video. Surely content is king but static visuals and text-based content do not work anymore. If your intention is to provide value to your customers and strengthen your presence at the same time then you would have to rely on animated video content.

Social networking and video streaming platforms are aplenty but YouTube is leading the competition as of now. Various digital marketing techniques and platforms are available but YouTube has become an integral part of online advertising so marketers, strategists, and animators should know its value.

Understanding the popularity of YouTube

According to Statista, YouTube currently has over 1.5 million users on a global scale. That is surely not a minor number as this user count is expected to increase to 1.86 billion any time soon. This fact suggests how a video-streaming platform can easily become a core hub for digital marketing.

The expected gross revenue generated from YouTube in 2018 was 20.4 billion U.S. dollars. This conveys that YouTube can even become a lucrative source for revenue generation. If you are aiming to build an online presence for yourself then here are some major video trends that you can make the most out of on your YouTube channel.

Live Streaming

Some live-streaming platforms were solely meant for streaming video games and Twitch has been widely used for it. However, social media sites and apps now have the option of live streaming as well. Facebook Live focuses on a wide range of topics and content but YouTube still has more power over both these platforms. Some of the most viewed videos are already on YouTube but no one could comprehend that the Royal Wedding live stream could secure 11.2 million views. Since YouTube is all about subscription count and quality content, you might not gain views on live-streams if you are a business but it can still bring a significant and positive impression on your presence.

Viral Internet Challenges

Social media is filled with internet challenges on a monthly basis. Some challenges are made only for virality and are uploaded usually on YouTube. Most of these fun viral challenges are uploaded on YouTube and social media profiles but one can bring the depth of social wellness into these challenges as well. The ice bucket challenge, in particular, was meant for fundraising and it became a global phenomenon. Popular YouTubers, influencers, social workers and celebrities took part in this challenge and as a result, it became a huge success.

Training and eLearning Videos

Content on YouTube is not limited to only the entertainment domain. eLearning content has gained popularity on online platforms and YouTube has a major role in it. Since live action videos for learning purposes can be costly, you could resort to using an animated video explainer. This notion would bring more and more people towards your audience since animated videos are engaging and interesting to watch. With short length videos, less time would be consumed and a greater quantity of people would prefer viewing your content.

Unboxing Videos

Unboxing and haul videos are somewhat similar. Such video content has been around on YouTube for a while but now unboxing videos have taken a shift towards being lucrative for marketing purposes. As the name suggests, the camera’s focus is on the package or product that is going to be unboxed and then reviewed. It is more of a review video but the anticipation such content builds has made it famous among several YouTube users. Popular subscription-based boxes such as Loot Crate, Ipsy and Boxycharm are mainly a part of unboxing videos.

Shopping Videos

Shopping and haul videos are typically popular among bloggers and influencers. This trend of haul videos might not be relatively recent but such content is also a part of the trending videos on YouTube. While this specific content style can be opted by anyone, it is still on the rise amidst popular and emerging influential bloggers. Since female bloggers contribute to haul videos often, an approximate of 40% of people who view such content purchase the products and items displayed in the video. However, retail brands are now reaching out to YouTube influencers to highlight the products they are offering.

Gaming Channels

This domain is somewhat limited to a smaller audience but a few platforms already exist for streaming and uploading games. While both YouTube and Twitch have the option to monetize content, what visible benefit does it have for marketers and brands? The popularity of online games and console games will probably never decrease. If a brand or company wants to market electronic goods and products for gaming, they would certainly need someone to showcase the products online. That is exactly where the role of YouTube comes into play as that specific brand could reach out to its customer through the existing famous gaming channels.

Celebrity Channels

Quite a few Hollywood celebrities have joined YouTube recently. Each celebrity has a different focus on video content. Some make vlogs to connect with fans, while some showcase their product launches. These celebrities also resort to social media platforms but YouTube is a prominent platform for those who want to keep their focus on quality videos. However, how does it benefit marketers? Marketers are able to form an association with both online influencers and celebrities at once. If a business or marketer shares a viral post or video made by a celebrity then as a result, it would capture user attention on a greater scale.

Virtual Reality Videos

The application of virtual reality technology has spread among several different types of industries. From gaming videos to building shopping experiences, virtual reality can be found almost everywhere. However, nobody expected that VR technology would benefit the real estate business. Virtual reality videos and walkthroughs are being used for architectural visualization of the interior and exterior of properties. Since VR is more than 3D visuals, the viewers can interact and engage with the surroundings before making a purchase decision.


The upsurge in the fame of video content seems almost uncanny. The types of digital content are emerging slowly and YouTube has played a visible role in the notion of digital marketing done solely through videos. Innovational and interesting ideas for digital media and content are unceasing. No matter what medium or platform you have chosen, the video will always yield you the results you are looking to get.

The probability of securing a position in the top trending category on YouTube is not a far-off reality. Instead, if you make use of the right strategy and marketing approach, you will acquire visibility and recognition in no time. Now is not the time to fret but it is the moment to make the most out of YouTube.

Categories: Others Tags:

6 Tips for Posting Content Anonymously

April 19th, 2019 No comments

For one reason or another, you may find yourself wanting to publish things online anonymously. Now to some, the “A-word” conjures up images of hackers, Guy Fawkes masks, and people generally saying terrible things to each other on Twitter. There’s long been an ongoing debate about whether anonymity is something that should even be allowed on the Internet.

Yes. Yes it should. There’s no doubt that there are terrible people in the world; but anonymity is a powerful tool for good as well. Here are some of the more obvious examples:

  • Fighting the power: It sure would be nice if we lived in a world where everyone in every government had the people’s best interests at heart. We don’t, and they don’t. Ask Nelson Mandela, or any number of other great men and women throughout history who have fought for progress and human rights.
  • Exposing criminal activity: Whether you’re a crime blogger writing about the criminal underworld, or a whistleblower from some large corporation, exposing criminal activity is dangerous. People have died.
  • Adult content, and other “culturally offensive” themes: Something as simple as writing your own (very personal) memoirs can draw a lot of unwanted attention from those around you. Even if what you’re doing isn’t morally or ethically wrong by any reasonable standard, people aren’t always terribly understanding. And then, perhaps the people in your life would rather that their personal activities didn’t become public knowledge. Staying anonymous is a good way to avoid unnecessary drama, in cases like these.
  • Maybe it’s just work: One of my favorite blogs back in the day was Waiter Rant where a then-anonymous waiter told all of his juiciest stories. He stayed anonymous for the simple reason that his bosses didn’t want any extra drama at their restaurant. Besides, rude customers who might’ve just been having a really bad day don’t deserve the kind of hate the Internet can put out.
  • Not holding back: Webdesigner Depot runs a series of posts written anonymously called The Secret Designer. They’re anonymous, because they expose the underside of the web design industry that the writers don’t want to be associated with.

Now if any of this sounds familiar to long-time WDD readers, that may be because I addressed some of these points in The Ultimate Guide to Blogging some time back. I wanted to address the topic in a little bit more detail, and cover some more options we have for protecting our privacy. Here they are, in no particular order:

1. Paranoia

The most common security point of failure always has been, and always will be people. You could be uncovered by some random screw-up you make yourself, or you could be outed by trusting the wrong person. Even people who would never hurt you on purpose can give things away by accident.

More commonly, people who supposedly want to remain anonymous get caught because they can’t help but brag. If this is something you’re committed to doing, you need to change your entire outlook on life. You can’t be Hackerman by night, and turn it off by day. You need to get paranoid, without acting obviously paranoid; because someone probably is out to get you, but they can tell if you start acting too paranoid.

Sounds fun, right? [/sarcasm] How do you know when you’re paranoid enough? Let’s start with the realization that doing everything on this list alone isn’t enough to keep you perfectly safe. This is a basic beginner’s guide at best.

Oh, and remember to avoid actually writing any identifying information in your actual content if you can help it. Just sayin’.

2. Avoid Big Platforms

Don’t use Google for e-mail, sign-ins, or anything else. Ditto Yahoo,, or basically any other major corporation. If they have a reputation for collecting your data and selling it, they’ll mostly likely sell it to the people you want to hide from.

The same goes for your publishing platform. Simply put, you want as much control over your data as possible. That means you shouldn’t give your data to Medium, Tumblr (which is owned by Yahoo), or even good old LiveJournal (yeah, that’s still a thing). The bigger corporations have a history of playing nice with other corporations, but they play especially nice with governments. They will not advocate for your privacy, or even for your life if you find yourself in that sort of situation.

Their PR teams might mutter something about human rights, but you’ll be human left-for-dead. (Sorry, I wanted to lighten the mood a bit.) In any case, most of these platforms probably don’t even want sensitive content associated with them, and will likely take it all down.

3. Hosting

So if you’re going to be buying hosting, here’s the criteria:

  • You want privacy nuts.
  • You want a hosting company that is willing to take the (legal) fight to whoever comes looking.
  • Ideally, it would be good if they believed in your cause, too. That will make them fight harder to protect your data.
  • You want your hosting to be in another country entirely. Distance is a good way of delaying people trying to track you down. It means less in this day of the Internet, but it still counts for something.

In general, these guys are pretty good options, and they’ve been around for some time:

It should be noted that secure hosting and adult-content-friendly hosting are not the same thing. If you need hosting for those racy memoirs or what-have-you-I’d-rather-not-know, you need to find a host that specifically allows you to host those things in their TOS.

4. Intermediaries

Now remember where I said to be careful who you trust? That still stands. Even so, you may find it incredibly helpful to find someone who can act as your intermediary. If you’re acting in a whistle-blower capacity, you might be able to find a foreign aid worker or activist to do things like help you buy hosting and domain names.

Having a third-party represent you can be indispensable to a smooth operation. But remember that if things are potentially life-threatening for you, it can also get hairy for them. You want someone either committed to your cause, or at least someone who is very, very far away.

If you’re just posting stuff that’s perfectly legal where you are, but still potentially embarrassing, you might use an attorney to handle these sorts of details for you. Attorneys are expensive, but that’s because their silence is worth it.

5. Location and Devices

Don’t write from home, if you can help it. If you’re going to write from home, at least don’t post things from home. Take your device to a separate network far away from where you live, do everything you can to mask your IP, and then post. Do this with different networks, preferably in places that forgo security cameras. This is the time to be most paranoid.

Purge your machine of your notes and rough drafts regularly, preferably right after you’ve posted. Secure your machine with a password only you know on the BIOS, and on the OS, and for God’s sake, use some form of Linux or UNIX-based operating system. Nothing you do will keep a dedicated person who has physical access to your device from breaking in, but you can delay them.

You might consider forgoing a laptop or phone altogether, and just have a USB drive with a Linux OS on it, and no persistent storage. That way, you can go to almost any computer, boot it up with the OS on your flash drive, write your post, and leave. No persistent storage means that your files will not be saved when you shut the computer down.

Now which OS should you use? You might try Tails.

6. Pay Your Taxes

No, really. Whether you’re exposing corruption in your own government, or just posting some artistic photos that conspicuously do not show your face, you need to live as legally and unobtrusively as you can in your day to day routine. It’s the best way to avoid unwanted attention. Remember, not even the Joker would mess with the IRS.

7. Extra Notes


VPN services have gotten traction, recently, as more and more privacy scandals hit the airwaves. Most of them, however, are not all they’re cracked up to be. Many keep logs of exactly which traffic goes where, and so they are a weak point if anyone wants to track you down.

That said, you should probably still use one. Just pick one that doesn’t keep logs, and allows you to pay with anonymous options like cryptocurrency. Here’s a list of some of the better privacy-oriented VPNs.


Using Tor to anonymize your browsing can help, but remember that the network has been compromised before. It’s perfectly fine to use it so long as you realize it’s just one extra layer of security, and not a guarantee of safety.

That’s just what everything on this list is: a layer of security that can, with time, be peeled back. The rest is up to you.

Featured image via DepositPhotos.

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


Categories: Designing, Others Tags:

Finding the right multipurpose WP Theme just got easier: here are the top 12 examples

April 19th, 2019 No comments

“Multipurpose”, “all-in-one”, and
“universal” tools and products. You
heard of them before. They have a reputation for doing some things well, and
other things not very well at all.

We bet you also proverbial “Jack of all
trades, master of none” saying applies. it no longer does so in the world of
multipurpose WordPress themes.

There are plenty of good ones out there.
Admittedly, each has its unique strengths and weaknesses. But as you narrow
your search to the best of the bunch, weaknesses are inconsequential.

Select one of these 12 multipurpose themes
for your next project and guess what will happen.

It will nail it!

They’re not only that good, they’re the

1. Be Theme

When you go down the list of features of any premier multipurpose theme, you’ll usually like what you see. It feels good to have a theme that can handle anything you throw at it.

Be Theme’s list of features never seems to
end. Its 40 or so core features make Be Theme the biggest WordPress theme of

The “key” features are naturally those you
have the most use for; but a key feature for every user is Be’s library of more
than 400 responsive, customizable pre-built websites. They cover 30+ different
business sectors, website types, and styles, and just about any business niche
you’re apt to get involved with.

Other features you’ll particularly like are
the new Header Builder, Muffin page builder, Options Panel, Layout Generator,
and Shortcode Generator. You’ll also have shortcodes and other design elements
and options galore to work with.

Download a pre-built website with a single
click, start building, and with Be Theme it’s not at all unusual to turn out a
fully-functioning website in as little as 4 hours.

2. Jupiter

Jupiter X is a total makeover of the popular Jupiter WordPress theme; the creation of Artbees, a member of the Power Elite Envato Hall of Fame. This new version is super-fast, powerful, scalable, and extremely developer friendly. With Jupiter, you can customize design and content elements that are normally difficult or impossible to customize in other themes.

Users can for example totally reinvent
their blog lists and portfolios, and the Shop Customize allows you to customize
online shop elements that in most other themes are simply off limits.

Headers and footers can be built from
scratch and you can customize every inch of your website using Jupiter X’s
powerful visual editor, and creating special forms, popups, and unique menu
styles is no problem at all.

Uncode – Creative Multiuse WordPress

Visit the Uncode website and you’ll be introduced to its website-building features. Nothing new here. Virtually every WordPress theme, multipurpose or not, does the same thing.

Where Uncode, one of the ThemeForest’s top
selling themes, is different from the rest is its showcase of user-built
websites. You can actually see what others have been able to accomplish using
Uncode, and you’ll be impressed – and perhaps inspired as well. We highly
recommend visiting the Uncode site for this reason alone.

Uncode’s advanced adaptive grid system,
adaptive images system, and more than 200 option-rich design modules should be
mentioned however, as should the hierarchical options feature that gives you
total control over your layouts and design content.

4. Brook – Creative Multipurpose WordPress Theme

More than 150 exquisite pre-made layouts. More than 35 pre-eminent homepage designs. Blend in a premium responsive drag&drop page builder, a slider creator, and a host of intuitive design elements, we have Brook.

This multi-purpose creative theme features
a WooCommerce shop, numerable custom shortcodes, mega menus, one-page
scrolling, parallax scrolling, and many more to be listed. You’re invited to
pay a visit to their website for a full understanding of what Brook could do.

5. Kalium

This developer-friendly theme offers an impressive array of theme options, blog, header, portfolio types (7 main types with options – 30 in all), shop items, a one-click demo content import and a premium page builders such as WPBakery Page Builder or Elementor. Kalium is extremely easy to use and offers endless possibilities. You should in fact be able to showcase your work as you’ve always wanted to the first time you use this theme.

6. TheGem – Creative
Multi-Purpose High-Performance WordPress Theme

TheGem lays claim to being the ultimate web design toolbox, and everything we’ve seen about it would seem to support that claim.

With its 150+ stunning demos pages, 50+
multi-purpose design concepts, flexible page layouts, and other design aids and
elements, TheGem is a great choice for startups looking for a way to let the
world know what they have to offer, and a great choice for other businesses,
large and small.

7. Bridge

This #1 bestselling ThemeForest creative theme’s open-ended customizability feature, coupled with the premier WP Bakery page builder makes it a great choice for creating a website for virtually any business niche.

Other plugins add to this software tool’s
overall value as does its library of more than 376 pre-made websites that in
themselves guarantee to get any project off to a fast, solid start.

Pofo – Creative
Portfolio, Blog and eCommerce WordPress Theme

Modern, crazy-fast, and search engine optimized pretty much describes Pofo. Its 150+ pre-built websites, ready-to-go home pages and 1-click demo pages give you all the website-building flexibility you need. Pofo really shines in three key areas – portfolios, blogs, and eCommerce applications.

multipurpose theme with its more than 200 layouts to work with deserves much
more than a casual glance.

9. KLEO – Pro Community Focused, Multi-Purpose BuddyPress Theme

One way to
describe Kleo would be to simply refer to it as an adventure. This professional
community-focused website gives you everything you need to create a happy
community of shoppers.

Blogs, portfolios, eCommerce, community
forums and eLearning features – you name it. Kleo is also compatible with most
plugins; extending your website-building capabilities even more.

10. Schema

This website theme gives you a little extra for your money. If you’re quite capable of building beautiful websites, but have trouble getting traffic, you can count on Schema to save the day. In addition to its selection of impressive website-building features,

Schema improves your page load times, has
clean code, and guides the search engines through your site element by element.

11. Movedo – We DO MOVE Your World

This 5-star top-rated theme contains a few surprises that you will not want to let pass by; if you feel your websites could profit from an extra dose of sparkle and pizzazz. MOVEDO is the website designer’s answer to a magic wand.

MOVEDO takes ordinary images and makes them
move and takes static images and makes them appear to move. Website users love
it, and you’ll have fun figuring out ways to entertain them.

12. Crocal – Premium WordPress Theme

Crocal is the new kid on the block, having joined the neighborhood last January. It performs like an established pro thanks to an absolutely amazing adaptive grid system.

Created by a #1 rated ThemeForest Elite
author, Crocal is Gutenberg compatible, WordPress and GDPR requirements
compliant, and eager to strut its stuff.


made your search for a better multipurpose WordPress theme a lot faster and
easier. You’re quite not done yet. You still need to find the one that will
best suit your needs. Or, the one that will take a little extra time and some
careful thought.

Don’t worry too much about struggling to
make the right decision. You really can’t make a wrong one with this group.

Read More at Finding the right multipurpose WP Theme just got easier: here are the top 12 examples

Categories: Designing, Others Tags:

Faking env() to Use it Now

April 18th, 2019 No comments

There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with “The Notch” but it has made it’s way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.

That spec doesn’t seem to suggest how we’ll actually set those env() values just yet. If you want them now, the easiest way to fake them would be using regular ol’ CSS custom properties and simply not change them.

But if you want that env() syntax though, there is a PostCSS plugin for emulating it. The way the plugin handles them is through a JavaScript file that declares them.

  importFrom: 'path/to/file.js' /* module.exports = {
    environmentVariables: {
      '--branding-padding': '20px',
      '--branding-small': '600px'
  } */

Having them start life as JavaScript is interesting, as it means we could perhaps have a single place to set variables that are accessible both to JavaScript and CSS.

That’s what Harry Nicholls covers more in his article, “Why you should use CSS env()” like some gotchas when dealing with units and such. But if you really needed a single source for unchangeable variables in both CSS and JavaScript, then I’d say this is a good way to go — and could potentially be ripped out once support for env() formally arrives.

The post Faking env() to Use it Now appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Creating Reusable Base Classes in TypeScript with a Real-Life Example

April 18th, 2019 No comments

Hey CSS-Tricksters! Bryan Hughes was kind enough to take a concept from an existing post he published on converting to TypeScript and take it a few couple steps further in this post to elaborate on creating reusable base classes. While this post doesn’t require reading the other one, it’s certainly worth checking it out because it covers the difficult task of rewriting a codebase and writing unit tests to help the process.

Johnny-Five is an IoT and robotics library for Node.js. Johnny-Five makes it easy to interact with hardware by taking a similar approach that jQuery took to the web a decade ago: it normalizes the differences between various hardware platforms. Also like jQuery, Johnny-Five provides higher-level abstractions that make it easier to work with the platform.

Johnny-Five supports a wide array of platforms via IO Plugins, from the Arduino family, to the Tessel, to the Raspberry Pi, and many more. Each IO Plugin implements a standardized interface for interacting with lower-level hardware peripherals. Raspi IO, which I first created five years ago, is the IO plugin that implements support for the Raspberry Pi.

Any time there are multiple implementations that conform to one thing, there is a chance to share code. IO Plugins are no exception, however, we have not shared any code between IO Plugins to date. We recently decided, as a group, that we wanted to change this. The timing was fortuitous since I was planning on rewriting Raspi IO in TypeScript anyways, so I agreed to take on this task.

The goals of a base class

For those who many not be familiar with using class-based inheritance to enable code sharing, let’s do a quick walk-through of what I mean when I say “creating a base class to reuse code.”

A base class provides structure and common code that other classes can extend. Let’s take a look at a simplified TypeScript example base class that we will extend later:

abstract class Automobile {
  private _speed: number = 0;
  private _direction: number = 0;
  public drive(speed: number): void {
    this._speed = speed;
  public turn(direction: number): void {
    if (direction > 90 || direction < -90) {
      throw new Error(`Invalid direction "${direction}"`);
    this._direction = direction;
  public abstract getNumDoors(): number;

Here, we have created a base class that we call Automobile. This provides some basic functionality shared between all types of automobiles, whether it’s a car, a pickup, etc. Notice how this class is marked as abstract, and how there is one abstract method called getNumDoors. This method is dependent on the specific type of automobile. By defining it as an abstract class, we are saying that we require another class to extend this class and implement this method. We can do so with this code:

class Sedan extends Automobile {
  public getNumDoors(): number {
    return 4;

const myCar = new Sedan();
myCar.getNumDoors(); // prints 4;     // sets _speed to 35
myCar.turn(20);      // sets _direction to 20

We’re extending the Automobile class to create a four-door sedan class. We can now call all methods on both classes, as if it were a single class.

For this project, we’ll create a base class called AbstractIO that any IO plugin author can then extend to implement a platform-specific IO Plugin.

Creating the Abstract IO base class

Abstract IO is the base class I created to implement the IO Plugin spec for use by all IO Plugin authors, and is available today on npm.

Each author has their own unique style, some preferring TypeScript and others preferring vanilla JavaScript. This means that, first and foremost, this base class must conform to the intersection of TypeScript best practices and JavaScript best practices. Finding the intersection of best practices isn’t always obvious though. To illustrate, let’s consider two parts of the IO Plugin spec: the MODES property and the digitalWrite method, both of which are required in IO Plugins.

The MODES property is an object, with each key having a human readable name for a given mode type, such as INPUT, and the value being the numerical constant associated with the mode type, such as 0. These numerical values show up in other places in the API, such as the pinMode method. In TypeScript, we would want to use an enum to represent these values, but JavaScript doesn’t support it. In JavaScript, the best practice is to define a series of constants and put them into an object “container.”

How do we resolve this apparent split between best practices? Create one using the other! We start by defining an enum in TypeScript and define each mode with an explicit initializer for each value:

export enum Mode {
 INPUT = 0,
 OUTPUT = 1,
 ANALOG = 2,
 PWM = 3,
 SERVO = 4,

Each value is carefully chosen to map explicitly to the MODES property as defined by the spec, which is implemented as part of the Abstract IO class with the following code:

public get MODES() {
 return {
   PWM: Mode.PWM,

With this, we have nice enums when we’re in TypeScript-land and can ignore the numerical values entirely. When we’re in pure JavaScript-land, we still have the MODES property we can pass around in typical JavaScript fashion so we don’t have to use numerical values directly.

But what about methods in the base class that derived classes must override? In the TypeScript world, we would use an abstract class, as we did in the example above. Cool! But what about the JavaScript side? Abstract methods are compiled out and don’t even exist in the output JavaScript, so we have nothing to ensure methods are overridden there. Another contradiction!

Unfortunately, I couldn’t come up with a way to respect both languages, so I defaulted to using the JavaScript approach: create a method in the base class that throws an exception:

public digitalWrite(pin: string | number, value: number): void {
 throw new Error(`digitalWrite is not supported by ${}`);

It’s not ideal because the TypeScript compiler doesn’t warn us if we don’t override the abstract base method. However, it does work in TypeScript (we still get the exception at runtime), as well as being a best practice for JavaScript.

Lessons learned

While working through the best way to design for both TypeScript and vanilla JavaScript, I determined that the best way to solve discrepancies is:

  1. Use a common best practice shared by each language
  2. If that doesn’t work, try to use the TypeScript best practice “internally” and map it to a separate vanilla JavaScript best practice “externally,” like we did for the MODES property.
  3. And if that approach doesn’t work, default to using the vanilla JavaScript best practice, like we did for the digitalWrite method, and ignore the TypeScript best practice.
  4. These steps worked well for creating Abstract IO, but these are simply what I discovered. If you have any better ideas I’d love to hear them in the comments!

    I discovered that abstract classes are not useful in vanilla JavaScript projects since JavaScript doesn’t have such a concept. This means that they are an anti-pattern here, even though abstract classes are a TypeScript best practice. TypeScript also doesn’t provide mechanisms to ensure type-safety when overriding methods, such as the override keyword in C#. The lesson here is that you should pretend that abstract classes don’t exist when targeting vanilla JavaScript users as well.

    I also learned that it’s really important to have a single source of truth for interfaces shared across modules. TypeScript uses duck typing as its core type system pattern, and is very useful inside any given TypeScript project. However, synchronizing types across separate modules using duck typing turned out to be more of a maintenance headache than exporting an interface from one module and importing it into another. I had to keep publishing little changes to modules until I got them aligned on their types, leading to excess version number churn.

    The final lesson I learned isn’t a new one: get feedback throughout the design process from library consumers. Knowing this going in, I set up two primary rounds of feedback. The first round was in person at the Johnny-Five collaborator’s summit where we brainstormed as a group. The second round was a pull request I opened against myself, despite being the only collaborator on Abstract IO with permission to merge pull requests. The pull request proved invaluable as we sifted through the details as a group. The code at the beginning of the PR bared little resemblance to the code when it was merged, which is good!

    Wrapping up

    Producing base classes destined to be consumed by both TypeScript and vanilla JavaScript users is a mostly straightforward process, but there are some gotchas. Since TypeScript is a superset of JavaScript, the two mostly share the same best practices. When differences in best practices do arise, a little creativity is required to find the best compromise.

    I managed to achieve my goals with Abstract IO, and implemented a base class that serves both TypeScript and vanilla JavaScript IO Plugin authors well. Turns out, it’s (mostly) possible to have your cake and eat it too!

    The post Creating Reusable Base Classes in TypeScript with a Real-Life Example appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

An Event Apart Boston is Coming. Save Now!

April 18th, 2019 No comments

(This is a sponsored post.)

An Event Apart Boston is almost here! We’re talking, like, less than a month away. If you’ve been holding off from registering, this might be your last chance because time and seating are both limited. Besides, we’re talking about three days of pure knowledge-dropping by an impressive lineup of speakers on a wide range of topics. Seriously, just look at the full schedule and prepare to be get stoked for a great time.

But, if a couple of weeks until show time is a little too tight for your liking, that’s where An Event Apart has you totally covered because there’s another one taking place in Washington D.C. this summer. And three more throughout the rest of the year in Chicago, Denver and San Francisco.

The reason an Event Apart is so near-and-dear to the CSS-Tricks family is that it scratches a common itch that we see come up around here often: how can we possibly stay on top of our careers as front-enders when our industry is changing at lightning speed and when we’re all-consumed trying to keep on top of our actual jobs? An Event Apart is our chance to take intention time away from the day-to-day and invest in our careers by learning from some of the best in the business, meeting folks who do what we do, and having those micro-interactions with others in the hallways that spark the interesting types of dialogues you just can’t get from Twitter.

Think about it: 17 speakers over three days covering everything from design systems and Progressive Web Apps to variable fonts and CSS Grid Layout. There’s so much to gain by attending. Just look at the awesome takeaways Chris got from An Event Apart Seattle in March.

And, to sweeten the pot, An Event Apart gave us a special discount code for CSS-Tricksters like yourself. Enter the AEACP at checkout to knock $100 off the price.

Hope to see you at one of the upcoming events!

Register Today

Direct Link to ArticlePermalink

The post An Event Apart Boston is Coming. Save Now! appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Why Don’t We Just Use Material Design?

April 18th, 2019 No comments

I work out of a small office in a co-working environment. Next to my dedicated space is a hot-desking area used primarily for video conferencing. Thanks to a bank of west-facing windows, an overenthusiastic heating policy, and unseasonably hot weather, meetings are often conducted with the doors open, and it’s then that I overhear some of the most engrossing insights into the minds of both clients and designers, that I’ve ever encountered.

Last week, as I munched on my lunch, I was eavesdropping on a meeting to determine the design direction of a fairly well known site (that will remain anonymous). The owner was connected from Australia, there were high-up members of the team connected from the US, and the UAE, and the design/dev team was about 10ft from me.

The conversation was increasingly heated, and centered around the fact that one of the design team had been removed from the project: such-and-such was a great person, and really dedicated, but her design style was all wrong; things had gone off the rails since such-and-such left; such-and-such did beautiful work, but it didn’t test well with users; and so forth.

Material Design…is seen as the standard to aspire to

The management team were clearly desperate to uncover a new design direction in which to take the service, and the design team were clearly desperate to accommodate them. After several hours of back and forth based on little (as far as I could hear) but subjective opinions, someone uttered a phrase that almost made me crash the meeting with subjectives of my own:

“Why don’t we just use Material Design?”

I’m not sure who said it, but it sounded like it was in the room. What followed was a cacophony of praise for Google’s design system: The designers admired it, the one developer I could identify loved it, the owner hadn’t heard of it but loved Google’s business model, the UX Lead—who until this point, I hadn’t heard contribute anything, said it was the “ultimate refinement of human-centered design”.

Five minutes later the meeting wrapped, a design direction chosen, a design team clutching a set of guidelines, a development team mentally mapping components. Leaving me, watching in horrified fascination as they filed back to their respective offices.

An Unhelpful Question

Material Design is astronomically popular. So popular in fact that I’ve spoken to numerous designers who refer to their work as “Material Design” when they have either never read the specification, or are ignoring it entirely.

Of course, there’s no reason that designers should implement Material Design. It’s simply an indication of its omnipresence that it is seen as the standard to aspire to.

The question posed in that meeting (Why don’t we just use Material Design?) reverses the design process in a way that epitomizes the problem with any design system. The question that should have been asked was: “Would employing Material Design solve some, or all, of our problems?”

If It’s Good Enough For Google

There’s an assumption that Material Design, as published by Google, is a magic bullet that addresses most, if not all, challenges in modern web design. I think that assumption probably stems from the fact that the Material Design specification is well written, and feels authoritative. I also think that assumption is false.

Material Design was initially intended as a solution to Google’s design problem—unifying a disparate group of services and apps, into a single brand identity and experience. It is now described as “a comprehensive guide for visual, motion, and interaction design across platforms and devices.” Which you have to admit, sounds pretty awesome.

when the insects take over the earth there will still be Google products about to receive their long-awaited Material Design upgrade

Just last week, there were reports in the design news that another Google product was about to receive its long-awaited Material Design upgrade. It doesn’t matter when you’re reading this, when the insects take over the earth there will still be Google products about to receive their long-awaited Material Design upgrade.

At the time of writing, it’s been five years since Google went public with Material Design. In that time, Google’s products have been constantly revised. Anything that hasn’t been updated in five years is probably at least mothballed— Google is far from shy when it comes to killing off projects.

If Google itself struggles to implement Material Design, and it has the get-out-of-jail-free card of writing (and rewriting) the specification with its own product demands front and center, how difficult is it to apply it to a third party site or app?

Don’t Even Get Me Started on That Floating Button

Probably the most controversial element of the Material Design specification is the floating call-to-action button that hovers in the bottom right of the screen, joyfully obscuring the single piece of content you are trying to access.

Material Design, means restructuring the architecture of your site

Design thinking is split on the floating action button, and anecdotally I’d say it’s roughly an even split. Some designers love the forced simplicity of a single call-to-action button imposing a primary action on a screen. Other designers object to an over-simplified user journey when natural experiences tend to be more nuanced.

In many cases implementing Material Design, means restructuring the architecture of your site or app. In other words, for the sake of an aesthetic your project needs to conform to Google’s preferred approach.

When all You’ve Got is Material Design, Everything Looks Like Gmail

There’s truth in the pop-wisdom that, when all you’ve got is a hammer, everything looks like a nail.

we’ll look for problems that don’t exist, in order to explain the solutions we have to hand

There are as many design approaches as there are designers and it would be preposterous of me to say “design is…” and expect it to be universally true. However, design, when done well, isn’t about putting a shiny polish on a project, design is inherent to what the project is, and to what it aims to become.

By framing a project in Material Design — or to any other design system — we are presented with a set of answers to which, as rational cause-and-effect minds, we will try to find questions. This means two things: firstly we’ll very likely distort our problems to fit those solutions because they’re the only solutions available that don’t break the specification; secondly we’ll look for problems that don’t exist, in order to explain the solutions we have to hand.

Why Don’t We Just Use Material Design?

Material Design is a design system, not the design system. Its failings are the failings of all design systems when applied to third party projects; namely that it is driven by a different, often undisclosed, set of priorities.

Of course, it’s entirely honest to confess that many designers dislike Material Design because it’s mind numbingly boring to implement someone else’s ideas. After all, we didn’t get into design to abandon creative thinking in favor of a paint-by numbers, one-size-fits-all approach.

Personal preference aside. We shouldn’t be using Material Design, because it puts the cart before the horse. It is a set of solutions to someone else’s set of problems. It may eventually work for Google, but it won’t work for you.

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


Categories: Designing, Others Tags:

Don’t Make These Beginner Designer’s Mistakes

April 18th, 2019 No comments
Designer's Mistakes

“The customer only cares about money and earnings, while the designer only cares about being able to publish a good job on Dribble or Behance.”

This is a concept that I saw represented in a viral video, produced by Pixelo showing the differences between the designer and the client. Things like “the customer wants bright colors at random, the designer chooses a well-considered palette”, etc.

As soon as I saw this part about money, though, I said to myself: is that really true?

Are there really so many designers who only think about their image return and not about improving their customers’ business?

Absolutely yes. Full.

And this led me to write this article in which I talk about what I think is the biggest mistake a freelancer designer can make when dealing with a client.

Why the biggest mistake?

Because if you ignore the side of the business in your work as a graphic designer, web designer and designer in general, you are ignoring half of your work.

Let’s start by first understanding what design is:

What is design?

But wait, are you serious? I’m a designer / studio design! Do you expect me not to know what design is?

Of course, we all know what design is.

True, design is planning. But what is missing in this definition is that design is planning… on commission.

Design is not art as an end in itself. Design, as well as graphics and communication, serves to sell! Excuse me if I write it so directly, but it helps those who have a business to make more money. Communicating better and therefore selling better.

I know this can be a “blow” for all those with the romantic idea of ??design as something artistic, abstract and maybe even a bit poetic.

Design = Business.

Design = Marketing

If you don’t understand this, or pretend you don’t understand it, you’ll always be a half designer. Or rather, you will be a designer who will not be able to help your client 100%.

Design = Business. Why is this so important to understand?

It is important to understand this if you want to succeed as a freelance designer. Because customers are always people or groups of people who relate to their company and only pay for the things that interest them.

The customer doesn’t care if the project comes out cool enough to be published on Behance.

The customer is only interested in how and how much you can help them improve their business. To make more money.

And rightly so.

This is an aspect that many designers do not understand. They don’t understand it when they ask for a €1000 logo for a local non-profit association, they don’t understand it when they create a project that is cool for them but doesn’t consider the client’s business needs and they don’t understand it when they complain because it does relate to the customers.

Want to be one of those freelancers?

If you’re reading this article up to this point, I’d say it’s not what you want to do, is it?

The solution to the problem: change your mentality

The best way to solve this problem of approach with the customer by the freelancer designer is to have a sudden change of mentality.

Such as? Try following these 2 practical tips:

1. Stop considering customers as piggy banks

Stop considering the customer as someone to get as much money as possible and then adios! Start looking at it as a resource. Start thinking long term about how you can extend your working relationship over time to help both.

Start thinking about how you can help your client in every aspect that competes for you in terms of communication or design. Even if they are small consultancies that go slightly beyond the contract you signed.

When I am commissioned to do a job (and accept it) I find myself very often talking to the client about future prospects and ideas that I’ve come up with. Even if they choose not to hire me in the future, at least I’ve shown that I’m willing to continue working with them, and it’s not just about the paycheck. It’s about helping them succeed.

I believe it is part of my job to help my client’s business in every possible way.

And this attitude has led me to have customers who come to me for all the jobs after the first one, creating a constant revenue stream and a solid working relationship.

2. Start thinking of yourself as a company and not as a freelancer

And by this I don’t mean that you go to interviews with customers and pretend to be the head of a company with 50 employees.

But it is certainly true that your freelancer business is not like an employee’s. Your business is actually a business.

You have to think about accounting, income, expenses, taxes, bills to pay and salaries (yours). All aspects that make you a business.

So why not have the same kind of attitude?

Why not develop long-term working relationships that allow your company to support itself? Why not develop products and activities for customers? Why not introduce yourself as the manager of your own company instead of as the freelancer who “you tell me what I have to do and I do it”?

In short: you too are a company, act as such!

Take care of your personal brand, build your bomb-proof portfolio, create your own blog with the most effective case studies you’ve worked on, networking at events and meetings, proposing yourself as the manager and not as the executor.


At the end of this article I hope I made you change your mind at least a little about the kind of attitude with which to approach the world of freelancer work and maybe give you some interesting and useful ideas for your career.

In summary: design is a business, the customer has a business and thinks only of that and how you can help them make more money. You are in business as a freelancer, which means you should take every opportunity to help your customer succeed.

Read More at Don’t Make These Beginner Designer’s Mistakes

Categories: Designing, Others Tags:

Clever code

April 17th, 2019 No comments

This week, Chris Ferdinandi examined a clever JavaScript snippet, one that’s written creatively with new syntax features, but is perhaps less readable and performant. It’s a quick read, but his callout of our industry’s fixation on cleverness is worth… calling out:

…we’ve become obsessed as an industry with brevity and clever code, and it results in code that’s sometimes less performant, and typically harder to read and make sense of for most people.

He made a similar argument late last month when he wrote about code readability, noting that brevity might look cool but ultimately leads to all sorts of issues in a codebase:

Often, web developers are obsessed with brevity. There’s this thing were developers will try to write the same function in the fewest number of characters possible.

Personally, I think brevity is pointless. Readability is a lot more important.

I entirely agree with Chris on this point, however, I think there is one important distinction to make and that’s the difference between code that’s intended as a prototype and code that’s intended for production. As Jeremy Keith argued a short while ago:

What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.

I agree with Chris that we should be writing code that is easy to read when we’re in production. I also think experimenting with code in this way is a good thing when it comes to prototypes. We shouldn’t ever shy away from playing with code and pushing things a little bit – so long as we’re not doing that in a giant web app with a a team of other developers working alongside us.

I’ve noticed that there are some folks that are doing genuinely ingenious things with Sass. I consistently sit back and think, “Wow, I’ve never seen anything like this before.” But when it comes to a production web app that has to be understood by hundreds of people at the same time, I don’t believe that this is the reaction we want when someone looks at the code.

As a result, I’ve been trying to write Sass code that is actually so simple that it almost looks dumb. One easy way to make code a lot simpler is to reduce the amount of nesting:

.element {
  .heading { ... }

This looks fine when there’s code inside — and it’s pretty easy to understand — but add a complex bit of design in the mix (say, using pseudo elements and media queries) and you suddenly have a rather complex set of rules in front of you. Creativity and cleverness can be harder to scan and identify one small part of the code that you’re looking for. Plus, in this example, we’ve unnecessarily made our .heading class a little bit more specific which might encourage us to override things in a hacky way elsewhere in the codebase.

We could write the following:

.element { ... }

.element-heading { ... }

I know this looks foolishly simple but the relationship between these two classes is easier to see and easier to extend in the future. Bundling all that code into a single nested class can get out of hand real fast. Even if it happens to look a lot cooler.

(As an aside, Andy Bell’s post on using the ampersand in Sass — and the resulting comments — is a great example of the clash between creativity and practicality.)

Anyway, the point I’m trying to make here is that CSS (and JavaScript for that matter) is a strange language because there are no definite rules you can make about it. It all really depends on the codebase and the project. But I think we can safely say that our code ought to be a lot more boring than our prototypes when it moves to production.

Continue to make prototypes that are wild and experimental or impossibly weird! Code quality be damned.

The post Clever code appeared first on CSS-Tricks.

Categories: Designing, Others Tags: