Archive for month: September, 2021

Original Source: https://www.webdesignerdepot.com/2021/09/7-tips-for-transforming-cx-with-live-chat/

Not so long ago, customers only had a couple of ways to interact with brands. 

If you had an issue with a product or service, you could reach out through the customer service phone number or send an email. Occasionally, sites would introduce dedicated forms on their website that allowed consumers to send support tickets straight to the service desk – but that was it.

The problem with this kind of service was all the waiting. 

Send an email or ticket, and you have no idea when the company is going to get back to you. Customers end up refreshing their inbox all day, waiting for a response. Call the company, and 9 times out of 10, you’ll be placed on hold. You can’t exactly do much when you’re stuck listening to hold music, so customers are gradually getting more frustrated as they wait for a response. 

Fortunately, the evolving digital age has introduced a new solution: live chat.

Transforming Your CX With Live Chat

Live chat is a quick and convenient way for your customers to contact your business and get a response immediately. The result is happier clients, better customer satisfaction scores, and even opportunities for bigger sales. 

More than 41% of customers say they expect to see live chat on a site. 

Even if you don’t have an agent on hand to answer a chat message immediately, you can create an automated system that notifies your customer when someone is available. That means they can go and do other things while they’re waiting for a response. Live chat solutions with bots can even allow your customers to fix problems for themselves. That’s pretty convenient!

Widgets equipped with answers to commonly asked questions can automatically deal with customer queries or help them find solutions to their problems before passing them over to an agent. This means that your customer gets a solution faster, and your agents don’t have as much pressure to deal with. It’s a win-win – as long as you get it right. 

Unfortunately, a lot of companies don’t know how to implement live chat experiences correctly. 

Kayako’s study into 400 customers found that 47% couldn’t remember the last time they’d had a positive experience through a live chat tool.  

How to Upgrade Live Chat CX

The evidence shows that customers love the idea of live chat, but the reality of how businesses implement this technology isn’t always ideal. 

However, since 86% of customers say they’re willing to spend more on a better customer experience, it’s worth figuring out what separates a good live chat interaction from a bad one. 

1. Set Expectations Instantly

Setting the right expectations is crucial if you want to generate better satisfaction for your customers at a later date. When customers know what to expect from your live chat strategy, they can also make more informed decisions about which support channels they’re going to use, and whether they want to hang around for someone to answer their messages. 

The first thing you should do is showcase your agent’s availability. In this example from Help Scout, you can see whether the team is active, online, and ready to talk. The company also sets expectations for how quickly you can get an email response if you don’t want to chat.

Other ways to set expectations include:

Showing your opening hours: List when team members are usually available to answer questions if you’re not currently online. 
Topics: Offer your customers some topics that they can ask about or use the welcome message on your chat tool to direct your customers to an FAQ page. 
Restrictions: If there’s anything you can’t deal with over live chat, like changing a customer’s password, let them know in advance so they don’t waste time.

2. Leverage Pre-Chat Forms

Pre-chat forms are some of the most important parts of the live chat experience. They ask your customer to explain their issue to your chatbot so that they can be directed towards the right agent. Using these forms correctly ensures that your agent has all the information they need to solve a problem fast. 

You can even set up automated systems that direct customers to different agents and teams based on their needs. For instance, the live chat app on Outgrow.co gives customers the option to fill out different forms depending on whether they want answers to a question, a demo, or something else.

The button you click on dictates which professional you’ll get through to. Although filling out a form can seem like an extra friction point for your customer at first, it helps to streamline the customer journey. After all, if you can direct the customer to the right agent the first time, there are fewer chances that they’ll need to explain their issue to various different people. 

Here are a few things you can ask for in the live chat form to make it more effective:

The customer’s name: This will help to personalize the conversation. It could also be an opportunity to track down any background information you have about an existing customer and the orders that they may want to speak to you about.
An email address: Having an email address will allow you to bring up a customer’s record on your CRM. It also means that you can send any information that the customer needs to their email inbox at the end of the conversation.
A brief explanation: Ask your customers to share what they’re reaching out to you about and use keywords in their message to assign the chat to the right agent or professional. You could even add a drop-down menu of topics for them to choose from. 

Remember, don’t ask for too much information straight away, or you’ll risk your clients feeling that the service experience is too complicated. 

3. Make Sure It Works Everywhere

We’ve reached the point now where every customer expects a brand’s website to be responsive on any device. Most web-building templates automatically work on mobile tablets and smartphones. Additionally, it’s becoming increasingly easy for companies to transform their website and online store experiences into dedicated apps too. 

However, while most businesses know that their site needs to be responsive, they often forget about the mobile element when it comes to live chat. If your live chat function is only available on the web browser version of your website, then this is going to end up making your mobile customers pretty unhappy. They don’t want to have to stop browsing on their phone just to connect with you. 

Ideally, you’ll want to create a separate component for your mobile app where your customers can easily access the same live chat functions they’d have on your browser-based site.

If you’re just offering live chat through a mobile version of your website, make sure that it’s easy for your customer to click into the chat section and send messages without accidentally ending up on a different tab or page. It might also be worth setting up functions that allow your chat app to send push notifications to your customer’s phone whenever they get a new message. 

Being able to put their smartphone down or switch to another app while they wait for a response will provide a much more intuitive experience for your audience. 

4. Make Sure You Support All the Right Languages

You’d think that this CX tip for live chat would be obvious, but it’s shocking how many companies fail to offer support for all the languages that their customers might use. If you’re selling your products throughout the world, and you know you have customers in China, then it doesn’t make much sense to only offer live chat in English. 

Some of the available live chat apps on the market today come with features that allow you to automatically translate languages when your agents are talking to foreign customers. For instance, LiveChat currently supports 45 languages. 

If you’re creating your own chat app from scratch, then you’re going to need to work with your developer or designer to make sure that the right languages are supported. Remember, you don’t have to cover everything, but at least make sure that you can connect with the most common groups of customers in your CRM. 

Ensure that if you are using multiple languages, your customers know how to switch to their preferred option too. Usually, the best way to do this is with a drop-down menu. You could also use little flag icons of the countries that you support. 

5. Find Ways to Reduce First Response Time

Speed is probably one of the biggest advantages of live chat, and the main reason that customers like it so much. According to the CMO council, fast response time is the number one thing that a customer looks at when measuring satisfaction. 

While you might not be able to have someone on-hand to answer your customers 24/7, you can improve the way they perceive your load times in a variety of ways. For instance, start by making it clear when your people are online to talk to your customers. Setting expectations on when you’ll be available to immediately respond should help to avoid frustration.

Keep all chats in the same place for agents: Having a combined contact center solution on the back-end makes responding to queries much easier for your agents. If they can see all of your brand’s live chat, social, and email conversations in one place, they don’t have to waste time jumping between different platforms and tabs. 
Set routing queues: Use an automated system to send every message you get to the most appropriate agent available. You can intelligently route conversations based on the issues that your customers have or the things they want to discuss. It’s also worth ensuring that your system prioritizes routing conversations to the first agent available. 
Send notifications: Make sure that you set your live chat system up to send push notifications to agents when a new message is waiting. It’s also with notifying your customer when they have a response, just in case they’ve switched to another tab. 

The notifications you send to your agents could come with access to a customer’s CRM file, so that your agent can go into a conversation with the context they need. Agents that instantly get context on a conversation don’t have to waste as much time tracking down the right information. Giving your agents context also means that they don’t have to ask repetitive questions, which could annoy your customer. 

6. Make the Chat Experience On-Brand

Every company wants to give their customer a slick experience with live chat. The solution you build needs to be easy to use, and responsive across every device. However, it also needs to be something that your customer associates with your brand. 

Companies generally have a lot of options for how a live chat window can look. You can adjust the appearance to suit your brand by picking specific colors, tweaking button shapes, and even changing the available fonts. 

Working the visual elements of your brand into the design of the live chat experience is the best way to make your customers feel comfortable and confident that they’re dealing with your company. For instance, Hubspot uses matching colors, rounded edges on chat bubbles, and even a fun illustration to make their chat experience more “branded.”

Remember, when you’re creating a Live Chat experience that’s “on brand”, it’s also a good idea to think about things like voice and tone. Infusing live chat with the unique personality of your brand will make the experience more memorable. 

If you usually stick with informal language and use a lot of slang, then it makes sense to continue that in live chat – even when you’re sending automated messages. To make sure your brand identity really shines through:

Write scripts for your automated messages in your brand’s tone of voice
Write guidance scripts for employees that highlight your tone for agents
Provide training on brand tone of voice for your support team
Encourage support agents to connect with customers on a personal level
Remember to set guidelines on how to use things like gifs, slang, and emojis too!

7. Make a Checklist For Security and Tech Issues

One of the most significant things that will affect the experience your customer has with your live chat service, is technical and security issues. Choose the right developer or designer to help with your app, and the risk of problems dwindle. You can also address the issue of having to constantly maintain, check, and update your live chat experience by using a pre-existing solution, like Intercom.

No matter how you choose to approach live chat, these are the things you’ll need to check for most:

Page load times: Page load times are crucial for user experience and SEO, so you should be taking them seriously already. Check your web chat software isn’t dragging down the performance of your page or causing unnecessary problems.
Cross-channel conversations: If your website has various subdomains, make sure that moving through these in chat won’t mean you lose the session. Customers don’t want to have to repeat themselves!
Functionality with browsers: Your chat app needs to work just as well on every browser and operating system – including mobile devices. 
Data management: Under things like GDPR, you need to ensure that you’re controlling user information safely. Ensure you have a DPA in place, and make sure that your web channel doesn’t affect any PCI-DSS compliance systems you have in place. Your chat solution may need to automatically mask credit card information, for instance.

Time to Enhance Your Live Chat Strategy

Ultimately, whether you like it or not, your customers love live chat technology, and they’re not going to stop looking for it on your website. Today’s consumers expect you to serve their interests by delivering customer support on the channels that they choose. Unfortunately, most companies just aren’t living up to expectations.

Following the tips above could help you to transform the way that you interact with your clients and improve your chances of better satisfaction overall.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post 7 Tips for Transforming CX with Live Chat first appeared on Webdesigner Depot.

Original Source: https://smashingmagazine.com/2021/09/css-head-tag/

There are plenty of ways to detect performance bottlenecks and audit CSS. We can look into common performance bottlenecks and the complexity of stylesheets, the way we load assets, and the order in which it happens.

One helpful way to spot common problems easily is to use some sort of a performance diagnostics CSS — a dedicated stylesheet that highlights potential problems and errors.

Today, during his talk at Webexpo Prague 2021, Harry Roberts, a web performance consultant and front-end engineer, introduced a little helper that helps him spot common performance bottlenecks easily. And that is mostly related to the order of how assets are loaded in the <head>.

As Harry says,

“I spend a lot of my time looking through clients’ <head> tags to ensure everything in there is in the best possible shape it can be. There are a lot of complex and often conflicting rules that constitute ‘good’ <head> tags, and cross-referencing everything can soon grow unwieldy, so to make my life easier, I developed ct.css — a quick and dirty way of seeing inside of your <head>.”

ct.css is a little diagnostic snippet, named after Computed Tomography (CT) scans, that exposes potential performance issues in your page’s <head> tags, and will disappear as soon as you’ve fixed them.

Harry has put all the insights he’s learned from his performance work to a perfect <head> order, and the tool exposes some of the issues that often result from a suboptimal arrangement of <head> tags.

With the bookmarklet in the browser’s toolbar, browse to a website of your choice, click or activate the bookmarklet, and the tool highlights useful pointers for you to double-check when working around performance bottlenecks. Just a little helper to make your work a bit easier, and find all those hidden issues faster.

If you just want to play with the snippet, you can get it at csswizardry.com/ct. Happy debugging, everyone!

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/0i8s4kwicYs/izanami-elvis-manga-illustrations

Izanami & Elvis — Manga Illustrations

AoiroStudio09.21.21

I haven’t always been a fan of Manga but as of late…yes! Why this series of illustrations really caught my attention by Christophe Starace. Christophe is an art director, illustrator, and motion designer currently based in London, United Kingdom, titled ‘Izanami & Elvis’, we follow his work through some character design and lovely scenes into play. I love how these illustrations are filled with drawing lines that completely stylize the mood and atmosphere. Make sure to follow Chris and check out more of his work. Hope you like it!

For more on Christophe Starace: christophestarace.com

 

Links

Behance
Instagram

Original Source: https://smashingmagazine.com/2021/09/mouseless-development-environment/

Once upon a time, in the magical land of Software development, there was a young developer, your humble servant, discovering Linux for the first time. Suddenly, I had access to the Linux shell, a tool offering many ways to automate everything I didn’t want to do again and again.

But Ubuntu wasn’t without drawbacks. I was often the victim of display bugs and crashes, and it was getting slower and slower as time passed.

One day, something terrible happened: I had to update Ubuntu to its next major version. Everything crashed. I couldn’t start my system anymore. I had no idea how I could solve the problems I was facing because I had no idea how Linux was working under the hood. Ubuntu was abstracting all the nitty-gritty for me not to care about it.

I had to reinstall everything manually — Ubuntu and all my tools. The worst part was reconfiguring everything. All and all, it took me days to get back to the system I had before the crash. But I didn’t know any other alternative, so I kept using Ubuntu for years. During this time, I’ve never managed to update it to its next major version without the need to reinstall everything manually, again and again.

My life as a developer changed again when my company hired two great developers. They knew a lot about Linux and the different distributions I could use. They guided me, showed me the tools which solved all the problems I had with Ubuntu. These tools improved my workflow drastically; they showed me how practical it was for a developer to keep the hands on the keyboard as much as possible.

This happened six years ago. I still use the same development environment today. I use the keyboard 92.8% of the time to manage all my tools, using keystrokes that make sense and which are easy to remember. I can reinstall my whole system with a bunch of scripts I’ve written, including all the tools I use and their configurations.

Today, I’d like to share with you these tools so that you too can increase your efficiency and your comfort in your daily job. They work well together — shaping what I call my Mouseless Development Environment. More precisely, we’ll discuss:

Why using the Linux shell can be very powerful when working with plain text (including code);
Why using the dreaded Arch Linux;
The advantage of a tiling window manager;
How to have a great terminal experience with URxvt, tmux, and tmuxp;
Why Vim can become your best friend.

Note: The tools I advocate in this article work on Linux-based systems. You can also use them with macOS except for i3. For Windows, the easiest way is to use the Windows Linux Subsystem (WSL) to install and use them.

I would have never discovered this new way of working without trying these tools. That’s why I encourage you to install them, experiment with them, and see by yourself if you fall in love as I did.

Mouseless With The Shell

As a developer, it’s almost impossible to avoid using a shell. This is a powerful tool that can simplify your workflow by automating away all the boring tasks.

The Benefits Of The Shell

Before speaking about the benefits of using the shell and the terminal, let’s explain briefly what’s the difference between these two ideas.

The terminal is a graphical interface that allows you to interact with the shell. On Linux, this shell is often Bash, but it can be another one too, e.h. Zsh. The shell is an interpreter. You can feed it with commands and it will execute them to perform some actions. It will also, sometimes, give you an output back. The terms “command-line” and “shell” are synonyms.

If we would compare the Mouseless Development Environment to the solar system, the shell would be the sun and everything else would turn around it. It’s because the shell is really powerful: it allows you to run many small programs which work very well together. They’re called CLIs (Command-Line Interfaces).

The big advantage of these tools: they are very simple and limited in isolation, but you can chain them for powerful results. For example, you can use altogether the CLIs “history”, “sort”, “uniq” and “head” to display the CLIs you use the most and the frequency of their use.

There are many CLIs available out there. First, because the Linux shell is around for a long time; developers had time to develop many tools and make them reliable. Second, because it’s easier to develop CLIs than GUIs (Graphical User Interfaces). Designing and implementing these graphical interfaces takes a lot more work. CLIs have only textual interfaces, which are easier to develop, to change, and to maintain.

It’s also why CLIs are fast: no need to mess up with the display and other graphical elements. It was one of my main problems with Ubuntu: its desktop environment, Unity, was quite heavy, slow, and buggy. At least in my experience. Using more GUIs on top made things worse.

Another big advantage of the command-line: you can write shell scripts to automate all the boring tasks you repeat day after day. For example, if you need to resize images to the same size very often, you can write a script for that. If you often search in some specific type of files, you can automate that too. The sky’s the limit.

CLIs have drawbacks, too. It’s a bit more daunting to use for beginners, but there are ways to get quickly what you need even if you don’t know how to use a specific CLI.

Finally, if you have some tasks to do on remote servers, you’ll often end up using the shell. They don’t have any graphical interface most of the time, so you won’t have any choice. In these cases, it’s necessary to know your way around the command-line.

A Mouseless Approach

Because the shell has a textual interface, your hands stay on your keyboard when you use it. This is something I never really considered during my first years as a developer, but it’s a big advantage.

In my experience, avoiding the hundreds of hand movements between the keyboard and the mouse saves a lot of cognitive energy. I was shocked to discover how comfortable it was when I really tried to stick to my keyboard. As a bonus, I feel like a hacker using solely my keyboard with my shell, even if I only write my shopping list! How great is that?

I have to admit, I was very skeptical about this “mouseless” idea before trying it. With the tools I describe below, I didn’t have to change all my habits from one day to another: you can use the mouse with them, too. But they really shine when they’re managed with the keyboard.

Even if it was never really proved, I also believe that staying on the keyboard makes us more efficient. As the book The Pragmatic Programmer pointed out:

“Using only keystrokes for common editing operations is more efficient than mouse or menu-driven commands because your hands never leave the keyboard.”

That being said, efficiency is not the main goal here. I love staying on my keyboard and using all these tools because I can entirely focus on the tasks at hand. It motivates me to start working and get my tasks done.

The Bedrock: Arch Linux

At the beginning of my mouseless journey, one of my new friends advised me to use Arch Linux instead of Ubuntu. Again, skepticism was creeping, doubts were invading my poor brain. Arch Linux? This horrible Linux distribution you need to install and configure entirely manually? This unstable system became a joke for many?

Sometimes, stereotypes have nothing to do with reality, and Arch Linux is the perfect example for this idea. I’ve used Windows (from 98 to 7), macOS, and I tried other Linux distributions too. My conclusion, without doubt: Arch Linux is the most stable of all.

That being said, Arch Linux it’s not a requirement for a Mouseless Development Environment. You can use all the other tools described in this article with other Linux distributions, too. You can also use them with macOS (except i3), or Windows if you have the Windows Subsystem for Linux (WSL). But, before you do so, let me tell you why you should seriously consider Arch Linux.

A Rolling Release System

Arch Linux has a rolling release system. It means that you need to update your whole system often, weekly or bi-weekly. To come back to Ubuntu, it has a long-term support system: you only need to update it a couple of times a year, or even less if you want to.

Many developers think that a rolling release system makes your development environment unstable, which explain partly the reputation of Arch Linux. But I never had a problem in six years of daily use, and my friends using it either. On another side, the advantages of a rolling system are great:

All the applications I use are constantly up-to-date. No need to compile them manually to have the most recent version when needed.
Updating your system often means that less changes will be introduced at once. As a result, there are less chances for crashes, too.

I told you my experience with Ubuntu and the crashes I had when updating it. I never had any problem with Arch Linux.

Everything You Need

Additionally, the repositories of Arch Linux are huge. It’s very likely that you’ll find every tool you need in there. If you don’t, you can look at the AUR (Arch User Repositories), where there is everything else. The AUR is not an official repository, so there could be some security problems with the applications found there. Again, I never had any problem with them, but it’s possible. As long as you stick to the official repositories and you don’t install everything and anything from the AUR, you won’t have any problem.

A Learning Opportunity

Let’s also mention that Arch Linux is a very minimal distribution. It doesn’t impose many useless applications when you install it. Speaking of which, you need to install the whole distribution manually using the shell. The task can feel daunting but, on the other side, you’ll learn a lot from the experience.

As I mentioned at the beginning of this article, knowing a minimum of how Linux-based systems work under the hood can help you when your system is behaving weirdly, or when it crashes. It’s not as complex as it might seem and, if you’re a developer, I would argue that it’s mandatory. The Web, your phone, or your Raspberry Pie run on Linux nowadays.

Last but not least, the Arch Wiki is the best place you can find for anything Linux-related. It helped me a lot over the years, even when I was using Ubuntu. It’s a great place for troubleshooting your system and finding new tools.

Managing Your Windows With i3

Now that we reviewed why Arch Linux can be a solid bedrock for your Mouseless Development Environment, let’s see what we can add on top.

But first, a bit of theory. Operating systems have often three layers, more or less coupled with each other:

The kernel, which directly dabbles with the hardware of your computer;
The shell, an interface for you, or some applications, to interact with the kernel;
A display layer on top, like a desktop manager or a tiling windows manager.

Gnome or Unity are both desktop managers for Linux-based systems. They manage your windows and many other things, like your status bar or your application launcher. Tiling windows managers are an alternative to desktop managers, and they’re often smaller and more focused on manipulating windows.

The tiling window manager i3 is indeed very light: I’m using it right now on a ten-year-old computer (Lenovo x220) and it doesn’t slow down. It’s also simple to use, the documentation is great, and most importantly, you can manage your windows with your keyboard only (if you want to).

The basics of i3 are simple: you can open windows in different workspaces representing an entire screen. It’s very similar to the virtual desktops many Linux desktop managers have. Then, when you open your favorite applications, the screen will be automatically shared depending on the number of windows on the screen.

For example, if you open Firefox, its window will take 100% of the screen. If you open three instances of Firefox, each of them will take 33% of the screen.

You can also change the layout of the windows. Instead of having all the window visible on the screen, you can stack them on each other and go through them with a simple keystroke. If you need some “normal” floating windows, you can configure them too.

The goal of i3 is to simplify the management of all your windows. Instead of using your mouse to move them and resize them each time you open new ones, you can use keystrokes to do the same operation only when you need to.

Does it look too complicated? I was efficient with i3 two days after trying it. I’m no genius; if I could do it, you can do it, too.

The cherry on the cake: like every tool described in this article, you can customize i3 and its keystrokes as your heart’s content.

The only drawback of i3: it’s not available for macOS. But there are great alternatives, like the tiling windows manager Amethyst or Divvy.

Level Up Your Terminal With URxvt, tmux, And tmuxp

The terminal is the interface giving you access to the shell. Even if the shell is the real deal, we can make it easier to use with a couple of tools.

The Path of Simplicity With URxvt

I like simplicity, and that’s partly why I love the development environment I describe in this article. Speaking of which, URxvt is one of the simplest terminals you can find. It’s also fast and reliable. In six years, I never saw it crashing or even slowing down. It does what it’s supposed to do: allowing you to use the shell. No more, no less.

The Terminal Multiplexer With tmux

Even if I like the simplicity of URxvt, I also like having a good terminal multiplexer I can rely upon, like tmux.

What’s a terminal multiplexer? It lets you open sessions containing multiple shells. These sessions are persisted in the background: even if your terminal crashes or if you close it by accident, your shells won’t disappear. You can recover them in another terminal whenever you want (as if nothing happened).

This is useful on your local computer, but it’s even better on a remote server. You can, for example, connect to a server via SSH, run a script, close your SSH connection and your terminal on your local machine, and go home. Because your shell is still running on your server thanks to tmux, your script will still run, too.

That’s not all: tmux is a bit of a jack-of-all-trades, in a good sense. You can use it to open multiple windows containing multiple panes in one terminal. You can think of a window as the entire terminal, and a pane as a shell taking a percentage of the window.

Does it remind you of i3? It follows the same principles, but it can only create new shells. That’s why many users who are happy with i3 don’t see any point in using tmux. Personally, I like to use both.

As always, you can manipulate tmux’s windows and panes with your keyboard, and you can configure tmux itself following your craziest wishes.

tmuxp

Let’s imagine that you want to use tmux for the disrupting application you’re developing right now. You need first to open a terminal. Then, you need to create as many tmux’s windows as you need and divide these windows with the panes you want.

Remember: A pane represents a shell. In each of these shells, you can then run all the CLIs you need for a specific project: for example, running a docker container, or displaying some logs.

But you can also automate all of that, and it’s where the real power of tmux — in the context of a development environment — really shines. Using another CLI called tmuxp, you can write down in a YAML configuration file what windows, panes, and whatever command you want. Then, you can load this configuration and create automatically your customized tmux session.

I have one of these configuration files for each of my projects. It saves me a lot of time and energy. As I was saying above, this is one of the major benefits of using the shell.

Editor Plus Shell Equals IDE

Since the shell is so powerful, why not have an editor directly running in it? Why not use Vim?

Like Arch Linux, Vim has the reputation to be hard to learn. It’s more subtle: it’s pretty easy to be productive with it, but it takes a long time to master. If you run Linux and you have Vim installed, you can learn the basics in 20 minutes by running vimtutor in your shell.

Vim offers many functionalities which can be extended further with countless plugins. Additionally, you can directly interact with your shell using Vim, using whatever CLI you want directly in your editor. It will transform Vim into a full-blown IDE.

Vim has another big advantage: you can use it to develop in many programming languages. I don’t like to switch between different IDEs each time I need to program in PHP, Golang, or Clojure. The interface is different, I need to configure each of these editors separately, and I can’t really save the configurations somewhere to use it again when I reinstall these tools.

With Vim, I can code in any language I want while staying in the same editor. Like VS Code, you can use LSPs (Language Server Providers) to enable auto-completion, linting, and automatic refactoring for the most common programming languages (and even more esoteric ones).

Vim is also fast. It doesn’t require many resources to run. I often have 6 or 7 instances of the editor open at all times on my old computer — without any problems. In comparison, I used IntelliJ IDEs for years and, when I was opening two of them, my whole system was beginning to slow down. It’s really practical when I work on different projects at the same time, like a bunch of microservices, for example.

Should I add that Vim is highly configurable? Instead of having many functionalities directly in your IDE (including some you’ll never use), you can choose what you exactly need and discard what you don’t.

A Set Of Coherent Keystrokes

If Arch Linux is the bedrock of my Mouseless Development Environment, then i3, Zsh, tmux, and Vim are the workbenches for my creative needs. It gives me a level of comfort I’ve never experienced with any other tools.

But you might wonder why you should use all these new tools and their keystrokes when you can already use the shortcuts for the tools you already know?

Well, the shortcuts of most applications out there are often meaningless. It’s a soup of keys that have no relations with each other. As a result, they are hard to remember, and they can be quite different from one tool to another.

The tools I describe in this article are meant to fit nicely with each other. You can almost use the same keystroke for each of them. Only one key will differ, for the system to know what tool you want to act on. It makes the different keystrokes way easier to remember.

Additionally, Vim was designed to have keystrokes that make sense by creating a simple language that you can rely upon. For example, in order to delete a word, you can hit daw. To delete a paragraph, it’s dap. Since many CLIs are based on Vim’s keystrokes, learning Vim will open the door to many other CLIs.

Installing Automatically Your Mouseless Development Environment

Installing Arch Linux manually is good to learn a lot about Linux-based systems, but it gets old when you need to do it each time you want to install your system on a new computer. That’s why I’ve created my own scripts to install my whole Mouseless Development Environment. They install Arch Linux as well as all of the tools I use with their configurations. When I need to use a new computer, I can simply run these scripts, and voila!

Are You Ready To Be A Mouseless Developer?

Because of the flexibility, I have with my development environment, I can also switch tools easily. For example, if I don’t want to use tmux anymore, I can replace it with another terminal multiplexer. If I don’t like i3’s status bar or my application launcher, I can replace them, too.

As you might have guessed, configuring this kind of system needs some time, motivation and effort. That’s why I wrote a book called “Building Your Mouseless Development Environment”. It describes in detail how to configure all the tools, how to create scripts to install the whole system with one command, and how to customize everything for your personal needs. If you don’t know much about the Linux shell, it lets you build a custom project to get familiar with it.

If you’re interested, you’ll find a sample of the book here as well as its entire table of content.

I think the best way to find out if you’d like this kind of system is simply to try it. I can guarantee you one thing: you’ll learn a lot along the way!

Further Reading on Smashing Magazine

“I Used The Web For A Day With Just A Keyboard,” Chris Ashton
“A Complete Guide To Mechanical Keyboards,” Ben Frain
“Making A Strong Case For Accessibility,” Todd Libby
“Accessibility In Chrome DevTools,” Umar Hansa

Original Source: http://feedproxy.google.com/~r/tympanus/~3/lnouPhIqwi4/

Inspirational Website of the Week: Miti Navi

Beautiful shapes with modern and elegant typography make this site a true masterpiece.

Get inspired

Our Sponsor
Translate designs to developer-friendly code with Anima

Use Anima to translate designs into developer-friendly React, Vue & HTML code. As in, code you can actually work with.

Learn more

Developer Decisions For Building Flexible Components

In this article, Michelle Barker walks us through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors.

Read it

Building a split-button component

A foundational overview of how to build an accessible split-button component. By Adam Argyle.

Read it

My Room in 3D

Bruno Simon finished his amazing room in 3D, a fantastic demo of a blend of technologies.

Check it out

YT-DLP

A youtube-dl fork based on the now inactive youtube-dlc. The main focus of this project is adding new features and patches while also keeping up to date with the original project.

Check it out

Roadroller: Flattens Your JavaScript Demo

Roadroller is a heavyweight JavaScript packer designed for large demos of at least 10 KB in size, like js13kGames. Depending on the input it can provide up to 15% additional compression compared to Zopfli.

Check it out

Practice / 3.js

An amazing particle experiment by Toshiya Marukubo (smartphone not supported).

Check it out

Using the platform

Elise Hein shows how important it is to “know the platform” and be able to develop web apps without frameworks or build tools.

Read it

Learning in the Open

Michelle Barker’s article on how learning by doing is the most effective way to learn anything.

Read it

Pollen

Pollen is a TailwindCSS-inspired library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems.

Check it out

HTML checkboxes Webcam filter

Bryan Braun made this fun webcam filter out of HTML checkboxes.

Check it out

Bundling non-JavaScript resources

Learn how to import and bundle various types of assets from JavaScript in this article by Ingvar Stepanyan.

Read it

Monkey Island Tribute, a WebGL Experience

A beautiful WebGL experience by Sébastien Lempens.

Check it out

Warmth

A wonderful Three.js sketch made by Ryohei Ukon.

Check it out

SVGOMG

Jake Archibald released a new version of this great tool powered by SVGO v2.5.0.

Check it out

Houdini.how

A super-cool CSS Houdini worklet made by George Francis.

Check it out

58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics

Marco Saric investigates how much data is missing from Google Analytics due to adblockers and privacy-friendly browsers.

Check it out

Madbox

Madbox is a mobile gaming company and for their new website they collaborated with Bruno Simon. There’s also this awesome little game that you can play in the browser.

Check it out

From Our Blog
Inspirational Websites Roundup #29

A new collection of the best web designs and creative websites from the past couple of weeks.

Check it out

The post Collective #678 appeared first on Codrops.