In today’s world of technology, it is important to stay up-to-date on the latest programming languages. One language that has been growing in popularity over the past few years is Node.js. Node.js is built on the Chrome V8 JavaScript engine for running server applications. According to The Sass Way, Node.js “uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.”
Whether you’re familiar with other programming languages and want to get familiar with this one, or you’re brand new to the world of programming altogether — we’ve got you covered.
In this article, we will give you a quick introduction and provide some tips for getting started. Let’s go!
What is Node.js?
Node.js is a JavaScript runtime environment that allows you to run server-side code. It is built on the V8 JavaScript engine, which is the same engine that powers Google Chrome. As mentioned earlier, it is a highly efficient platform that employs an event-driven, non-blocking I/O model. In addition, it has a large community of open-source modules and libraries that can be used to extend its functionality.
Why Use Node.js?
There are a few reasons why you might want to use Node.js for your next project. Let’s discuss those now.
It’s fast: The V8 JavaScript engine compiles and executes code quickly.
It’s scalable: It can handle a large number of concurrent connections with ease. And it has a large network of open-source modules and libraries for extending its baseline functionality.
It’s easy to get started: You can use it on your local machine without the need for a lot of setup.
But if you’re scratching your head as to how to put it to use, we’ve outlined that as well.
Practical Ways to Use Node.js
If you’re just getting started with Node.js, here are some practical ways that you can use it.
Create a basic web server: You can use it to create a simple web server that responds to requests from clients. This is a great way to get started with learning how to use the platform.
Build a CLI tool: It can be used to create command-line tools and utilities.
Create a web app: You can use it to create a web application that stores data in a database and serves content to users.
Build a desktop app: You can use it to build cross-platform desktop applications using tools like Electron.
These are just a few examples of how you can use Node.js. As you can see, it is a versatile platform that can be used for a variety of purposes.
Getting Started with Node.js
Now, we’ll walk you through the steps of setting up a development environment and creating your first program.
Step 1: Install Node.js
The first thing you need to do is install Node.js on your computer. You can do this by going to the website and downloading the appropriate installer for your operating system.
Step 2: Create a Node.js Program
Once it is installed, you can create a program in any text editor. We will use the built-in Node.js REPL (Read-Eval-Print-Loop) environment to run our program.
To launch the REPL, open your terminal or command prompt and type node. This will start the REPL environment where you can type JavaScript code and get immediate results.
Try typing the following code into the REPL:
console.log('Hello, world!');
You should see the output Hello, world printed to the console.
To exit the REPL, type .exit.
Step 3: Run Your Program
Now that you’ve written a Node.js program, you can run it using the node command.
To do this, open your terminal or command prompt and navigate to the directory where your program is saved. Then, type node filename.js, replacing “filename.js” with the name of your program.
For example, if your program is saved in a file called hello.js, you would type node hello.js to run it.
You should see the output of your program printed to the console.
And that’s it! You’ve successfully created and run your first Node.js program.
Get Started with Node.js Today
With this newfound knowledge about Node.js, why not give it a try? After all, it would just be yet another tool in your programming toolbox.
I recently had a request from a WordPress client for a star rating widget of sorts, so I thought I would share the solution I came up with using Advanced Custom Fields (ACF) and CSS. There are no images involved – just pure CSS plus Unicode stars and a handy range slider on the back end so the client can easily enter a rating anywhere from 0 to 5 in steps of 0.1. Thanks to a nice example I found on CodePen (seen below), the front end elements were easy and simple, utilizing CSS custom properties and variables in a compact code. Connecting this to ACF so the client could easily edit their ratings brought it all together in a quick solution that I have not seen elsewhere, thus the idea to make it available here in case anyone else is looking for something similar. Ready to dig in?
As you can see from the above CodePen, there is not much involved, yet it is a cleverly coded idea. This is taken from a great tutorial over on CSS Tricks, called “Five Methods for Five-Star Ratings”. The HTML below utilizes a custom CSS property (--rating) and makes no calls to the server while maintaining accessibility.
<div class="stars" style="--rating: 2.3;" aria-label="Rating of this product is 2.3 out of 5."></div>
The property is actually a conversion from a value to a percentage that’s handled in CSS using the calc() function:
--percent: calc(var(--rating) / 5 * 100%);
Then the filling of the stars based on the rating/percentage is done using a linear-gradient background that creates hard color stops at the percentage points that are designated.
In the CodePen example, the author uses CSS variables for the star size, color, and background. You can go this route if you want to be able to change those elements easily, or you can just code them in yourself if you have no plans to change them down the road.
Once the stars code is done, we can now make it work with the ACF range slider.
ACF Range Field
I’m assuming you are already familiar with Advanced Custom Fields, since you arrived at this article with it in the title. If not, you can learn more about the plugin here.
For our use case, we want to create a Range field so the client can select a range from 0 to 5 in steps of 0.1, enabling them to set the star rating at 4.7, for example.
In the WordPress backend, navigate to Custom Fields > Add New to create a new field group, then give it a title and click the button labeled Add Field to create the new field. Add the Field Label (we’re using “Stars” in our example), select the Range field type, set the Maximum Value to 5, and the Step Size to 0.1. You can make any other edits you see fit, but these are the minimum to get this working the way we want it to work.
After saving your changes, you can now edit whatever page, post, or template PHP file in which you want to show the star rating by entering the following code:
<?php
$stars = get_field('stars');
if($stars) echo '<div class="stars" style="--rating: '. $stars .'" aria-label="Rating of this product is '. $stars .' out of 5."></div>';
?>
This code replaces the HTML we were originally using, and now it will show the rating that is set on the backend when the Range field is updated. Pretty simple, right?
For reference, here’s the complete CSS that will make the magic happen (derived from the SCSS in the CodePen).
When I first started freelancing many years ago, I found myself working at all hours of the day (and night), trying to stay on top of everything and keep my clients happy. It took me a while to learn the dramatic differences between working for an agency and working for my own clients. If only someone had brought up the idea of training your clients to work with you in the way that YOU want to work, rather than going to extravagant lengths to fit into each individual client’s requirements and desires.
Which is why I am writing this. Whether you are new to freelancing or have been doing it for years, you will always need to understand the importance of training your clients if you want to maintain your sanity and run a successful business. The old adage that the customer is always right is incorrect, at least in the freelancing context. While you need to keep your clients satisfied, you simply cannot let them determine your processes, the hours of your availability, and other important elements that impact how you produce quality products.
In this article, we’ll take a look at some of the important tips for training your clients that I have learned over the years, and how taking these steps will positively and significantly impact your freelance business.
The Freelance Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets All starting at only $16.50 per month
Communicate, Communicate, and Then Communicate Some More
The primary tool in training your clients is clear and constant communication. Making sure you communicate everything about how you operate to clients before they have even hired you is key to starting the work relationship off on the right foot. It is also important that everything you have communicated is in writing as well, so you have something to go back to should the need arise to show your clients that you have discussed something previously. So if you communicate via phone, video chat, or some other unwritten method, you should always follow up with a written recap via email for both your records and your client’s.
In order to be sure we have a mutual understanding, I often employ the “drive-thru” method of communication, in which I ask the client to repeat back to me their understanding of what I’ve said to make sure we are on the same page, especially on important points we must agree upon.
In my book, there is no such thing as over communication (unless, of course, you take it to the extreme of annoying your clients). Making sure your clients are always in the loop of what and how things are going will ensure you control the process and keep them satisfied along the way. It should also keep them from feeling like they have to check in with you.
Establish Your Business Hours
Early on in my freelancing years I learned that most clients hiring freelancers expected them to be available at all times, day and night. I would receive emails or phone calls from clients at odd hours and on weekends, with follow-ups (sometimes frustrated or annoyed) if I did not respond within what they deemed was a timely manner. The best way I learned to keep this from happening was to make sure all clients had a clear understanding of when I would be working and available, and when I would not.
Establishing your business hours and communicating them to your client will easily be one of the most important things you can do in training your clients to work with you. Make sure they understand that if they try to communicate with you on the weekend, they will not receive a response until Monday morning, for example. Explain up front the exact hours that you work in order to avoid any confusion or cause any frustration on their end. Help them to understand you are just like any other business in regards to times you are “open” and “closed”.
Define Your Process
In opening discussions with a potential client, I’ve learned to make sure they understand the process I will be taking them through, step by step, start to finish. For example, I tell a web design client exactly how the mockup phase of the project will go, and an estimate of how long it will take, followed by the same in regards to the development phase. I explain the payment requirements. I do everything I can to make sure they have complete clarity about a process they either have never had experience with before, or, if they have, is likely different than their previous experience in some ways.
This step ties in with the first one – communication. In fact, all three steps are closely linked. Establishing and keeping lines of communication open throughout your project will always benefit you and your client. Controlling those lines of communication will allow you to steer your clients and their projects toward successful completion.
Start Implementing These Steps Today
If you aren’t already, you can easily start using the tips I’ve shared right away.in your freelance business. Whether it’s web design, graphic design, writing – whatever your business is – you and your clients will greatly benefit. Start training your clients and I am confident you will see the improvements immediately.
For more articles and tips on freelancing, be sure to check out our collection here.
Unless you’ve been through the process before, understanding how to hire a web designer can be an intimidating task. There are so many things about the process that most people unfamiliar with it do not know, nor should they be expected to consider. Although there are industry standards, almost every web designer has their own unique perspective or preference on how things should be done. This can leave you frozen like a deer in the headlights if you are not properly equipped with the right knowledge, questions, and desired answers.
Fortunately we have put together a list of recommendations and suggestions that should assist you in making a more informed decision when you are looking to hire a web designer. While not exhaustive, these tips should ease your fears of making the mistakes often made throughout this process and steer you in the right direction before you begin.
Your Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Understand The Differences Between A Web Designer and A Web Developer
In years past, the term “web designer” has been defined several ways, but primarily as someone who not only designs but also builds (develops or codes) a website. In more recent years there has been a line drawn between web designers, who are actually responsible for creating the look and style of the website, or how it appears in your browser, and web developers, who are responsible for writing the code that brings that design to life, makes it look the way it was designed, and creates the functionality and user experience. There are still plenty of qualified people who perform both tasks – design and development – but it’s important to know what you are getting when you hire someone, so starting with the correct terminology is critical.
Seldom are you going to want someone to only design or only develop your website. You will want both. So you will need to make sure the candidates you are considering are going to deliver in both departments. Many agencies who offer design and development services have separate departments or employees responsible for each of the two, while freelancers often provide both services from one person. Keep in mind that it is somewhat unusual – but not impossible – to find a single person who is highly talented in both areas. This may make their services more affordable, but you could find yourself sacrificing quality for the lower price.
Define Your Website’s Goals
As with any project, it is important to possess a clear understanding of what you want your website to accomplish before you hire a web designer. Are you trying to create an online shop that sells and ships products? Do you have an offline (brick and mortar) business that just needs an online presence where people can find you in search engines, learn more about your business, and contact you? Do you want to allow visitors to your website to book appointments for services you offer? These are just some of the questions you should answer for yourself so that when your potential web designer asks you have the answers already prepared.
We recommend coming up with a single primary goal of the website, then a subset list of smaller goals that will support and aid in the achievement of the primary goal. For example:
PRIMARY GOAL: to create an online presence for my business that will be easily found in search engines so that potential customers can get their questions answered about what we offer before they contact us.
Home page that correctly represents the branding and culture of our business
About page that tells the story of who we are and what we do
Services page that clearly explains the services we offer
Contact information prominently displayed throughout the site
Map with location and driving directions
Contact form that can be submitted online and sent to me via email
In most cases, as you make this list you will find that the ideas for what you want to be included in your site will come to you rather quickly, and you can continue to add to the list as more ideas develop over time. Having these goals as a starting point will help in the next steps you take to hire a web designer.
Research Other Websites You Like (Or Don’t Like) In A Variety Of Industries
One of the most common questions web designers ask is regarding what other websites or elements of other websites you like or don’t like. It is a great idea to keep a running list of some of your favorite and least favorite websites you come across when browsing the internet. Be specific and include what or why you like or don’t like them. This can be anything from colors, style, functionality, usability, large fonts, navigation, etc.
People who are looking to hire a web designer often answer this question with a list of their competitors’ websites. While this is helpful, it is important to look outside of your own industry. There are a multitude of websites that have nothing in common with what you are trying to accomplish but still may have elements that would work well in your context.
You can also find inspiration and ideas by looking at websites that showcase web designs, such as design blogs or awards websites. Here are some examples of these:
Obviously, awards sites like these showcase the best of the best, and your budget may not allow this kind of quality work, but why not see what the best are doing and communicate to your potential hire the things you’ve seen that really capture what you want your website to do or how you want it to look?
Understand and Determine Your Preferred Framework
Do you want to be able to easily edit the content (text, images, etc.) on your website at any given time once it’s live? Then you will probably want to utilize a content management system (CMS), such as WordPress. Would you rather pay for someone to update your website whenever you need to make changes? Then you may be able to go without a CMS, possibly saving some money on the design and development of it, but probably paying more over time with each edit that arises.
Knowing or at least having a minimal understanding of which you prefer could narrow the field in which you are looking. If you decide to use a CMS, you will also want to decide if you would prefer to hire a web designer who will design and develop something unique and completely custom for you, or if you are fine potentially paying less to hire someone who will just purchase a theme (or skin) for the CMS and make adjustments to it so it looks and functions as desired. Be forewarned: there are plenty of freelancers and agencies that perform the latter service while charging as much or even more than a custom website would cost. Be sure to ask potential candidates which path they will be taking with your project.
Treat Your Search Like What It Is: You Are Hiring An Employee
Don’t make the mistake of bypassing what should be the obvious: when you hire a web designer you hire an employee. The process should resemble this exactly. Ask for resumes, examples of work, references, and all of the other fun items included in a typical hiring process. If posting your project on job boards, be specific about what you need for your website as well as expected qualifications of the right hire. Take them through the interview process and make sure you are confident in your final decision. If possible, seek recommendations for web designers from friends, colleagues, on social media, or any other outlet you deem trustworthy.
Some Other Quick Considerations
As previously stated, the points above are not exhaustive for your quest to hire a web designer, but they will prove helpful. Here are some other considerations you should note in your search. We hope these recommendations will help make the process easier for everyone involved!
Have a realistic idea of your budget for the project and be transparent about it up front. Be prepared to be quoted dependent on the size of the project, its requirements, and the quality of your web designer’s work.
Know your timeline or deadline and communicate it clearly, ensuring that potential candidates will be able to commit to completing your project in the time desired.
Prepare your content as much in advance as possible. Have all text, headings, images, etc. ready to hand over to your web designer. This will enable the project to move along smoothly and also give them the ability to better estimate the time involved.
Ask potential candidates to provide a detailed, step by step explanation of their process. This will enable you to better know what to expect, as well as determine if they are the right fit for you.
Every year we see new web design trends emerge, and every year experts and pontificators alike come up with their predictions of what we will see. While some web designers and developers may choose to buck these trends or try …
