Actually, it’s critical to:

• Being found on search engines when potential customers are looking for products or services you offer.
• Converting that search engine traffic into happy customers who make purchases, come back time and time again, and — if you’re lucky — even refer you to others!
• And perhaps most importantly of all, a well-executed website is critical to helping you stay sane and productive when you have approximately 4,873 business-related tasks to attend to.

So whether you are creating a new website, updating your current one, or looking for help with maintenance or a troublesome bug, hiring a developer who knows what the heck they’re doing can save you a lot of time and brain cells and ensure your site runs smoothly.

Which is exactly why we created this article that’ll guide you through how to hire web developers for any size and type of website project.

Keep reading if you want to dive deep into how to outline your project, identify the type of developer you need, determine your budget, find and hire developers, and more.

Step 1: Determine The Scope Of Your Project

In the tech world, “scope” refers to the boundaries you set around a project to ensure it meets your needs without endlessly expanding beyond your budget or planned timeline.

Knowing your scope will help you choose the right web developer and budget appropriately. It’ll also help you communicate exactly what you need, which helps build a more positive working relationship with the developer.

There are various elements to consider when figuring out and shaping the scope of a web project.

What Does The Project Entail?

Before you even begin to reach out to professionals, one of the biggest things to consider is whether the project relates to the website’s design, coding and functionality, or both.

Here’s how to break it down:

• Design projects: These are normally tied to branding and user experience. Perhaps you need guidance on a homepage layout, a new logo, updated colors to improve website accessibility, or refreshed web-safe fonts.
• Coding and functionality projects: These typically relate to your website’s features and the way they function. Maybe you want to integrate chat, build a more phone-friendly flow, or create a way less time-consuming way to add new products to your online store on the back end.

Sometimes, projects require both design work and coding. Your new homepage layout, for example, might need new code to embed videos or collapse and expand text.

It all depends on how it needs to be built to hit your goals or how it was already built in the case of a redesign.

Dates And Deliverables

Once you define the project’s parameters and have a better idea of the kind of talent you’re looking for (more on specific developer types in the next step) it’s time to put the second-biggest piece of the scope into place: deliverables and their delivery dates.

It starts with thinking of the goals you want to achieve with your web project. Let’s say it’s a redesign to make your website more modern, mobile-friendly, and fast. What big chunks of work must be delivered for this to feel complete?

At least an initial wireframe (like a blueprint) that shows the new map of your website, a design layout that helps imagine what it’ll eventually look like, a speed test comparing the new site to the old, and a final walkthrough of your new website on desktop and mobile devices.

Each of these deliverables should have a due date attached so that you and your development partner can stay on track and on the same page. We recommend working closely with your chosen partner to ensure your deliverables are detailed enough and each due date is realistic.

Custom Build Or Start With Store-Bought?

We wanted to quickly address that, yes, you can absolutely build and maintain a website on your own using a website builder or a WordPress theme and plugins.

And that has its upsides — you get to do it on your own schedule, learn the ins and outs of your website, and it’s typically the approach that will cost you the least in cash (but not in time). The only limiting factors could be your availability and skill level.

On the flip side, working with a developer also has many advantages, especially for business owners.

You’ll likely be able to pull off more advanced website functionality, rest assured that everything will function as it should, and cut down on your own workload. The biggest downsides are typically the time required to find the right person and the cost.

If you find yourself on the fence between DIY-ing vs. hiring out for your website project, now’s the time to weigh both options before moving forward.

Related: Learn To Code With These (Mostly Free) Resources

Breaking: Can I Use AI Instead Of A Web Developer?

Another important consideration not to skip over here in step one — artificial intelligence (AI)!

AI is so rampant in the development world that you may wonder: Can AI replace developers, and more importantly, can I use it to fully create or redesign my website?

At the time of this writing, no. AI isn’t at the point where you can rely on it to build a working website from scratch. Today, AI is mostly useful for automating simple development tasks, bug detection, and code optimization.

It’s a good helper but isn’t precise enough to generate thoughtful, creative code solutions. While it is getting better all the time, many AI tools can barely create fully correct and working code!

At this point, you should only use AI in tandem with a skilled developer and consider that, unless you have pretty sharp dev chops, you won’t be able to use it on its own to create a functional website.

Learn more: Will AI Replace Developers? Examining The Future Of Coding

Step 2: Decide Which Kind Of Developer Is Best

With the scope of your project in hand, you can start searching for a skilled web developer that fits your needs. Let’s compare and look at what each type of developer has to offer.

Graphic Designer Vs. Web Designer Vs. Developer

Whether you’ve determined that your project is purely visual work or that it’s all about functionality, you already know who to hire.

As we touched on earlier, some projects include a little bit of both design and development work.

You can handle these projects in a few ways:

• Hire a designer and a developer (straightforward).
• Work with an agency that offers both services (more on that in step four).
• Find a single individual who bridges the gap.

That individual may be a web designer. Graphic designers typically excel at branding and in the marketing and print space. That said, web designers are also skilled at creating visuals, but they’re typically trained in additional things like CSS, HTML, user experience, and speed optimization.

That means they consider accessibility for screen readers, SEO-friendly website structures, and what your website will look like on different screens and systems.

If the technical details of your projects aren’t particularly deep, a graphic designer may be a good fit for your project vs. a web developer.

Because this is somewhat of a gray area in the web development world, we recommend being very clear about your project scope when reaching out to web designers so that they can accurately assess if they have the best skillset for your project.

Front-End Vs. Back-End Developers

The front end of your website is the visible part the reader interacts with. The back end is the part you use to upload new content, conduct security updates, and more. Sometimes, these are also called client side (front end) and server side (back end).

These two parts of your website are built with different programming languages, so many developers specialize in one or the other.

Before speaking to developers, you’ll want to work out if this is a front-end or back-end project — or both. If you aren’t quite sure yet, rest assured the development details of your project will solidify with each development candidate you talk to.

Full-Stack Developer

Let’s say the project involves your site’s front and back end. You have two options: work with two developers or hire a full-stack developer.

A full-stack developer can work on both ends of the website because they are proficient in all the main languages and frameworks. We’ll show you what to expect as far as pricing and how to ensure a dev’s full-stack skills are up to snuff in the next few steps.

It’s an excellent idea to work with a full-stack developer when you are planning a completely new website build because they can advise you on the bigger picture.

Freelancer Vs. Full-Time Employee

Depending on the complexity and duration of your project, you might find it best to work with a freelancer or hire a full-time web developer. Both options have pros and cons, but working out what’s best for you or your company shouldn’t be too hard.

For one-off projects with no maintenance required, a freelance website developer will likely suit your needs best. Similarly, if only minimal maintenance is required, you can usually retain an agency or freelancer to help you keep your website running smoothly and your costs low.

However, if you think you’ll need regular, time-consuming website maintenance or updates, hiring a full-time employee may be better. At the time of this writing, the average full-stack web developer runs over $123,000/year.

Yes, it’s a hefty investment. But it means you’ll have someone on deck who’s already up to speed on your needs and ready to act if something goes wrong. If you’re running a larger business or have a complex website critical to your cash flow, keeping someone in-house may actually be a money and stress saver.

An interesting combination approach would be to bring on an independent contractor full-time just for the project’s duration. This works well when the project is unusually large or urgent, but you don’t foresee significant long-term maintenance.

You benefit from having a dedicated web developer on the team while you need them most, and they benefit from guaranteed pay for the duration of the project. In many cases, it’s a win-win agreement!

Step 3: Figure Out Web Dev Costs & Define Your Budget

You’ve identified your goals and who to work with to reach them. Now, let’s talk about what you should be working with — aka, moolah.

Freelance web designers normally charge by the project or the hour, though some use day rates. Whatever the unit of measure, we recommend researching rates to get at least a loose estimate of the timeline or project cost upfront before you begin.

A professional web developer’s hourly rate can vary dramatically based on their skills and experience. According to Upwork, the rates for full-stack developers, who tend to be the most senior, currently sit at around $55/hour. Typical front-end devs may run about $25/hour and back-end devs about $30/hour.

Although we trust these data-backed estimates, based on our own experience, we find them a little low.

Expect to spend more, especially if hiring within the U.S. After all, many freelance web developers on Upwork’s platform charge over $100/hour (and we don’t blame them; it’s hard work!)

And be warned: These numbers can change and rise significantly based on location, experience, and how quickly you want your project completed. Often, you can get a discount if you sign up for a retainer through a freelancer, which means you agree to pay for a set number of hours per week or month.

If full-time is more your jam, remember that a full-stack dev comes in over $123,000/year, front end can cost around $113,000/year, and back end close to $160,000/year.

That said, if you prefer to think of expenses in project terms, data suggests that the cost of developing a lightweight website can range from $3,000 to $8,000, a more robust website from $10,000 to $16,000, and a functional e-commerce website from $20,000 to $40,000.

Whether you’re on the higher or lower end of the spectrum depends on the number of pages, depth of features, level of customization, timeline, and, of course, who you hire (e.g., freelancer, agency, etc.).

We don’t intend to overwhelm you with these numbers. We just want to help you understand the costs associated with web development so you can go into the next step — finally, it’s time to source developers! — with a realistic budget in mind.

Step 4: Consider Various Sources For Hiring Web Developers

There are lots of places where you can hire professional developers online. The best option for you will depend on your priorities and the time you can devote to finding the right fit.

Here are some of the best places to begin your search.

Access Complete, White-Glove Web Development With DreamHost

Not to brag — OK, maybe just a little — but at DreamHost, you can access decades of development experience in just minutes.

When you partner with our professional web development team on either an on-demand or retainer basis, you get:

• A dedicated project manager making sure your development needs are accurately translated and met.
• Access to specialists, including web designers, WordPress developers, page speed optimizers, database pros, security authorities, and more.
• A truly easy-to-follow process for requesting changes — most of which we can turn around in just 72 hours.
• Top-quality code and exceptional implementation.

Working with DreamHost offers the best of several worlds. Tap into a breadth of services that usually only agencies can provide, timely turnaround you can usually only get from full-time workers, and pricing similar to hiring a freelancer.

Visit our pro web development services page today and tell us about the dream our development team can help you bring to life. 

Hire An Agency

If you prefer to stay pretty hands-off and need lots of design and development support, an agency is a good place to access a full team of digital experts (including experienced developers) who can fully handle your website project.

Unlike individual website developers, agencies don’t tend to be on the freelance platforms we’ll cover next, so you usually have to find them by searching online or via word of mouth.

Turn To Freelance Marketplaces And Forums

Want to get in the weeds finding the just-right freelancer for your job? There are lots of online platforms that will empower you to do just that:

• Freelancer marketplaces: Such as Freelancer, PeoplePerHour, Guru, and lemon.io (which puts a unique “matching” spin on the hiring process).
• Social media forums: For example, Discord servers where freelance web developers hang out, such as Devs For Hire & Jobs, subreddits like r/hireaprogrammer or r/freelance_forhire, and boards like Hacker News — which sometimes has threads inviting freelancers to introduce themselves and people who post freelance gigs.

Figuring out the best language to describe the job’s requirements and keeping up with notifications across these resources can take some work. However, these outlets are the best way to contact devs — both new and exceptional talent.

Ask For Recommendations

If you’ve been poking around all of the above sources and are still unsure who to work with, try asking your professional network, friends, and even LinkedIn contacts for recommendations.

You’ll get a shortlist of developers who impressed people you know, and you’ll also be able to ask questions about their working style and view their previous work.

Step 5: Assess Your Web Development Candidates

You’ve done a lot of work until now, so it’s worth taking your time in this last step to decide if the people you’re interested in fit the job.

You want to work with someone within your budget who understands the vision for your website and is equipped with the soft skills and technical capabilities to provide quality service.

Here are several factors to consider when making the final call.

Technical Requirements

If you aren’t familiar with development languages, ensuring any freelancer you’re talking to has the chops to complete your project can be tough.

However, if you just get familiar with the basics, you can weed out folks who don’t have the experience you’re looking for and make sure you’re only talking to professionals — who will usually point you in the right direction if they’re not quite the right fit.

Currently, a basic rule for front-end developers is that they should understand CSS and HTML and be able to work in popular front-end languages, which include JavaScript, Elm, and TypeScript. Front-end devs are also typically familiar with best practices for website accessibility and SEO.

Back-end developers should be familiar with at least JavaScript, Python, and Ruby. Bear in mind that some back-end developers describe themselves by the programming languages they specialize in (e.g., PHP developers or Ruby developers). If you’re looking for a back-end developer online and know what language you need, try searching based on that.

Full-stack developers should also know CSS and HTML as they’re foundational to development, as well as JavaScript, TypeScript, and Python.

If you’re more familiar with the content management system (CMS) where you want to host your website, such as WordPress or Shopify, you may also want to seek out developers who highlight their skills within these specific platforms.

And remember: the languages that are in vogue for each type of developer change over time. So, it may be wise to brush up on which code languages are popular when you start your technical proficiency audit of a candidate.

Related: How To Hire A Developer To Create A Custom WordPress Theme

Response Time

It’s not just a website developer’s technical skills that matter. Response time is also important, especially if you are bringing them on at the creative planning stage or to fix bugs.

Pay attention to how quickly the developer responds when you first contact them and then negotiate the details. While freelancers generally don’t reply as quickly as employees, you want to ensure they can respond within a timeframe that makes sense for your project timeline.

Communication Skills

Good communication isn’t only about quick response times. After interviewing each candidate, ask yourself:

• Did they seem to understand what you want and clarify and confirm as needed?
• When negotiating, were they direct and professional?
• Did they explain what you can expect, and were they transparent about their ability to commit to timelines, their pricing, and their willingness to communicate any potential complications?
• Did they tell you what they will need from you to complete the work?
• Were they flexible and willing to adapt?
• When you expressed preferences or uncertainty, did they listen?

You’re hiring a web developer, not a marketing manager, but communication skills are still critical. They will help the project run smoothly and ensure there are no unpleasant surprises due to miscommunication.

Experience

Yes, a more experienced web developer typically has higher rates. However, they might cost less than you think because they tend to work more efficiently and produce cleaner, better code than inexperienced developers.

Experience comes down to more than just the number of years or projects. Pay attention to the type of work the developer has previously taken on and the companies they have worked with. Ideally, they will have experience in your niche and with clients like yourself, making executing your website project much more efficient and pleasant.

Previous Projects

Looking at the work a web developer has done previously will give you an idea of their skill, style, and preferences.

Most professional website developers will have an online portfolio, but you can also ask to see samples similar to your project.

Typically, developers carefully curate their portfolios to show only their most impressive work. So, if you let them know what you are looking for, you might be surprised by how many extra samples they can show you.

Don’t be afraid to ask if you have any questions about their previous projects, but remember that some details may be confidential.

Customer Ratings And Testimonials

There is no better way to see what a developer is like to work with than by reading customer ratings and testimonials. Most developers will have some on their websites, and many freelancing platforms feature customer reviews.

When reading reviews, especially public ones, try to read between the lines. Someone else’s ideal developer might not be a good fit for you. However, paying attention to what reviewers praise will give you an idea of their work quality and communication style.

What Are You Waiting For? Let’s Get Your Website Started!

Working with a developer can get and keep your website looking professional and running smoothly.

Whether starting from scratch with a business website, boosting security measures, or modernizing your accessibility and mobile features, a developer can help you achieve your goals quickly and easily. Meaning you can focus on the business you love instead of the code that makes it all tick.

There are plenty of options for bringing a developer into the fold. You can hire a full-on agency, or you can source an individual from a freelancer marketplace or social media.

Either way, part of this process should include carefully vetting their billing structure, technical expertise, experience, communication style, and availability to make sure they align with your needs.

Don’t have the time to do all that? Consider DreamHost’s web development services instead.

Access our comprehensive team of professional developers and designers by simply submitting your request here. We’ll provide an estimate, and with your approval, we’ll quickly get to work safely implementing the changes — working with you along the way to ensure you’re happy with every decision we make.

You Dream It, We Code It

Tap into 20+ years of coding expertise when you opt for our Web Development service. Just let us know what you want for your site — we take it from there.

Learn More

The post Hire A Web Developer With These 5 Steps appeared first on Website Guides, Tips & Knowledge.

You’ve probably heard people talk about ChatGPT and other new AI chatbots. They converse on various topics shockingly well. And yes, they can solve many coding problems, too.

But is AI an existential threat to developers’ careers? Or will it become just another tool to augment programmers’ capabilities?

In this guide, we’ll examine the realities of AI’s current abilities in software development, where the technology still falls short, and how you can future-proof your skills in this fast-changing landscape.

ChatGPT And LLMs: Understanding AI Technology

Chatbots like ChatGPT aren’t “thinking” programs. They don’t understand language or coding. They predict intelligent-sounding responses by finding patterns in giant piles of online text data.

Programmers call them “large language models” (LLMs), a fancy word for a text predictor on steroids.

To put the “large” into perspective, ChatGPT was trained on a 570GB to 45TB dataset of text snippets spanning internet forums, books, and online writing, and a lot of information was pulled right from Reddit.

This huge body of text data allows ChatGPT to generate passages, answer questions, and even write code based on text prompts. Its knowledge comes entirely from these pre-existing texts, not through true comprehension of the world.

So, while ChatGPT seems adept at conversing, its intelligence has limitations.

• It can only maintain context for up to a few thousand words.
• It has no real-world experience.
• It cannot reason or make intuitive leaps.
• It has a hard time understanding complex code.

Yet, this technology keeps advancing rapidly. So, how do ChatGPT and other LLMs perform on coding tasks today?

Can ChatGPT Write Functional Code?

ChatGPT can produce running code in JavaScript, Python, SQL, Bash, and other languages when prompted appropriately. It’s a novice coder, but you can keep prompting it to correct errors to get working code.

For simple coding problems, ChatGPT provides impressive versatility and allows you to save time creating basic code that you’d otherwise manually do. In these cases, LLMs definitely save time for coders.

However, its code is often inefficient or overlooks edge cases because it does not have the full context of the problem. In fact, ChatGPT sometimes even cautions that its sample code requires thorough review before application.

So, we know for sure that LLMs aren’t there yet. But we can only imagine how good they will be because advanced LLMs are just one year old (ChatGPT was launched on November 30, 2022).

“If AI keeps progressing at this pace, in the next 30 years, the majority of the human race is in trouble when it comes to jobs, not just programmers,” said one Reddit user in the /r/learnprogramming/ subreddit.

Development Tasks That AI Can Handle

While ChatGPT cannot fill a senior developer’s shoes, it offers straightforward utility in making coders more efficient. Let’s look at how ChatGPT can augment you as a coder and remove the regular more laborious processes.

Automating Repetitive Tasks

For seasoned developers, writing CRUD apps, simple scripts, and backend boilerplate code ranks among the most tedious aspects of the job.

With AI, you can eliminate this drudgery through automated code generation. Rather than manually coding basic user registration systems repeatedly, an AI model could instantly produce functioning prototypes tailored to each project’s database schema.

AI’s utility for repetitive coding will only grow as higher-level abstractions continue entering common use through frameworks like React and Django.

Natural Language Processing

Product managers often compose specs in everyday prose like “Users should be able to update their saved payment info.” Programming such loosely defined behaviors leaves ample room for misalignment with stakeholders’ expectations.

With powerful LLMs like ChatGPT 4, AI can help interpret free-form client requests to frame thorough technical requirements.

Using client documents and conversations, LLMs can help translate requests to executable semantics for coders. LLMs can help surface ambiguities to address upfront rather than mid-project as you optimize your prompts.

Detecting Bugs

AI models trained on volumes of open-source code can also excel at reviewing software for defects. Researchers at Microsoft have built specialized neural networks to spot bugs, achieving higher accuracy than human coders in some testing.

Source

As a programmer, you could employ this AI coworker to quickly analyze commits for faulty logic, deprecation errors from outdated dependencies, and even security flaws. Rather than manually poring over thousands of lines, you’ll get annotated suggestions on what needs fixing.

Predicting Issues

Beyond reactive bug finding, sufficiently advanced AI can predict issues before they emerge based on the code you’re writing. It can do so by continually checking the code and identifying if it could fail at any point through execution.

Or, for libraries and frameworks with many downstream dependents, AI companions may spot upcoming breaking changes before releases. This helps you smooth transitions and minimize disruptions proactively without additional resource usage.

Better Project And Timeline Estimation

Speaking of resource use, people chronically underestimate how long software projects will take. We either tend to be too optimistic or forget about risks. This causes projects to end up going over budget and over timeline.

AI tools are starting to help by looking at data from past projects to see how long similar ones took. For example, CloudBees takes context from across your toolchains and makes sense of it for you. It can then use the information to estimate software delivery timelines.

Of course, AI cannot predict everything that can go wrong, but considering the amount of data it analyzes before estimating timelines, it can be a great starting point. Over time, as the tools get more data, the estimates should improve.

Optimizing Your Code

It’s great to have a second pair of eyes for your code. It can help you identify issues with code logic, find better and simpler ways to get the same output, and even optimize for speed.

While programmers continually invest effort into refining systems for speed and efficiency, tweaking code through trial and error becomes tedious.

LLMs can provide optimization suggestions to help you quickly optimize and refactor code.

Rather than blind guesswork, you’ll have AI readily pinpointing low-hanging fruit to target for maximum gains. It may advise splitting monoliths into microservices, adding indexes for costly queries, or upgrading frameworks for modern best practices.

The Limitations Of AI Tools In Development

Should developers feel threatened by AI’s utility in automating rote coding and supplemental development tasks?

Current technology has proven inadequate even for moderately complex programming jobs. As such, core aspects of the developer workflow seem destined to stay human-driven for the foreseeable future.

Poor Quality Code

Code produced entirely by ChatGPT or similar models tends to suffer from subtle flaws. While usable, the code does not consider the variety of edge cases you may know, and without logical reasoning, it relies solely upon what you ask it to do.

Here’s an experiment done by a GitHub user. You can see that ChatGPT does a great job explaining and breaking down a problem:

But then goes out to give only partially correct code where it skips the logic for setting the answer to 0 when n is 1.

To make sure all the edge cases are taken care of, the code needed us to add this if condition, as you can see in the screenshot below.

So, the code created with ChatGPT generally results in unstable apps that break in production due to unhandled exceptions.

Until AI radically advances, generated code will remain too shoddy for most real-world applications without heavy oversight and editing.

Potential Security Risks

Alongside stability issues, code written by language models introduces alarming security risks. Since AI cannot always consider edge cases, your code may open up to exploitable bugs and security risks.

For instance, if you’re developing a web app and do not adequately clean user inputs, hackers can exploit those to gain access to your database through SQL injections and XSS attacks.

Can’t Solve Novel Problems

To displace human programmers rather than assist them, AI needs to tackle new problems. Today’s models merely associate prompts with solutions encountered during training. In an independent study, the researchers found that ChatGPT failed in 52% of the coding questions by providing partial or incorrect code.

However, users still picked ChatGPT’s response 39.34% of the time due to its overall comprehensiveness.

Only when models can deduce reasonable solutions and think beyond the basic steps, like people, can they drive development alone. Until then, their value remains confined to accelerating known tasks rather than trailblazing.

AI Has Zero Understanding

Existing AI has no proper comprehension of code or abstract reasoning ability–they simply recognize patterns in the input prompts and provide relevant “sounding” outputs. Without contextual understanding, its solutions often ignore critical constraints or make irrational choices no engineer would.

Consider the analogy of a medical bot trained to diagnose patients by matching symptoms to recorded illnesses. It would perform decently recommending common treatments but could catastrophically prescribe chemotherapy for a mole on the leg just because superficially similar language appeared linking the two.

Engineering, on the other hand, hinges on human rationality and judgment to make coherent designs. So, until better AI is achieved, developers can benefit from AI to augment their existing coding workflows.

The Future Role Of AI In Programming

Though AI currently has major limitations, the pace of growth in this space is phenomenal. AI went from incomprehensible writing to flawless English prose indistinguishable from human-written text within just one year.

In the near future, AI could replace a beginner coder by handling basic coding tasks automatically. In fact, according to OpenAI’s internal evaluations, GPT-4 significantly beats its previous versions on all evaluations, including coding-related tasks.

“It will be a tool in the developer’s kit that will make their job both faster and easier, while at the same time introducing a level of complexity and opacity which will undoubtedly cause new problems,” says Lawjarp2, a Reddit user.

The nature of programming is already evolving, as we see it with GitHub Copilot, Amazon’s CodeWhisperer, and many more.

Coding will transform from manual typing to working synergistically with generative AI systems — with people providing context, vision, oversight, and troubleshooting.

This hybrid model allows AI to handle tedious coding busywork while developers focus on high-level system architecture, complex problem-solving, creativity, and preventing issues.

So, while tasks shift, software builders aren’t getting replaced entirely. The profession, however, will look radically different in several years.

How To Future-Proof Your Career In Code

Rather than panic about the AI takeover, aspiring and current developers should recognize language models for what they are: assistants rather than replacements. Here are tips to keep your skills relevant:

Learn Prompt Engineering

Maximizing the usefulness of ChatGPT and GitHub Copilot hinges on effective prompt composition. Unfortunately, prompt engineering is currently more of an art than science.

But expecting engineers to hand-code everything as previous generations did does not make sense anymore. It’s better to let new developers leverage new tools at hand.

Veteran coders should spend time experimenting with language models using different inputs and build intuition for what works. Remember, every LLM has a unique style, and it’s good to understand them, considering they’re becoming part of daily workflows.

Hone Your Problem-Solving Skills

Human creativity and intuition remain indispensable since software development tackles open-ended problems. Not just mechanically translating tech specs into code.

No amount of raw coding speed can substitute for devising insightful solutions or crafting simple architectures in complex environments. So focus on the know-how, creativity, and in-depth understanding of your industry while offloading rote work to AI counterparts.

Learn To Empathize With Users

Remember that code gets written to serve people’s wants and needs. As AI grows more capable of assuming lower-level programming duties, developers should double down on the strengths machines lack, namely empathy.

Prioritize roles like product managers or UX designers that stress understanding audiences and building for humans. Bring user-first thinking to the forefront even while collaborating with AI coders on implementation details.

Study Machine Learning

For those excited to push boundaries, exploring machine learning offers insight into the latest AI advances with widespread applications. Neural networks now underpin solutions from image processing to predictive analytics.

Grasping how models function, train, and interface with software systems can also help you open up new possibilities in your career. Consider supplementing computer science fundamentals with data science and ML coursework.

FAQ

Will AI replace programmers in 5 years?

No. In five years, AI will likely handle more repetitive coding tasks but not fully replace human judgment and oversight for creating complex software systems. Developers may see their roles shift with AI assistants but will still architect solutions and constraints.

Will AI ever replace developers?

Complete replacement seems unlikely even with advanced future AI, given software’s ever-evolving demands and the creativity intrinsic to solving novel problems. Simple coding eventually gets commoditized, but not high-value strategic thinking. Developers who learn to leverage AI rather than compete against it effectively will remain employed.

At the end of the day, don’t dread the machine takeover. Welcome the AI teammates who will enhance productivity beyond any engineer or algorithm alone can achieve. Software development moves too fast for any single change to dominate forever. And especially in the context of tech, adaptability is the most crucial skill.

So rather than worrying whether code gets written by biological or silicon hands in the long run, cultivate versatility no matter what tools emerge.

What’s your take on AI coding assistants?

The winds of change are undoubtedly speeding up in software engineering. As AI rapidly evolves, what we once considered the domain of human cognition can now be outsourced to machines.

Will we allow anxiety about the future to paralyze progress? Or will we actively reimagine our roles while benefiting from this technology’s exponential power?

The most formidable competitors are usually the ones who adopt the latest tech swiftly rather than fighting change. But the key remains judiciously balancing human ingenuity and machine intelligence as complementary forces rather than opposing camps.

And so, as software continues eating the world, programmers would do well to set aside dread in favor of confidently working on more complex and challenging projects.

The post Will AI Replace Developers? Examining The Future of Coding appeared first on Website Guides, Tips & Knowledge.

CDEs shift key development processes like writing code, executing builds, running tests, and deploying applications into the cloud, providing flexibility, efficiency, and simplicity for engineers. This allows developers to collaborate better and release higher-quality software faster without the environment being an obstacle.

Let’s explore what exactly CDEs are, the benefits, options worth evaluating, simple steps to configure your first cloud dev environment, and tips to optimize usage long-term.

What Is A Cloud Development Environment?

A cloud development environment is a centralized platform for software development teams to collaborate, build, test, and deploy applications.

Since a sizable percentage of organizations moved to primarily cloud-based development environments between 2020 and 2022 alone, we figure it’s important you have all the details in case you’re also considering the switch.

A CDE brings the entire development lifecycle into one integrated cloud workspace, moving away from developers having fragmented toolchains and dependencies across individuals and devices. Core components like the integrated development environment (IDE), runtime, infrastructure configurations, dependencies, collaboration tools, testing frameworks, and pipelines are bundled together and accessible through cloud browsers.

Compared to traditional development environments, cloud environments are hosted on the cloud and accessed from the web browser or an app. All computationally heavy processes – like compiling code, running automated tests, or building containers – happen in the cloud. Developers only use their local devices as thin clients to access the cloud workspace, reducing overall hardware costs.

A cloud development platform also offers prebuilt templates to spin up development environments for specific app stacks quickly or give more control for advanced custom configurations if needed. With this, you can have consistent environments across teams.

In many ways, CDEs represent the next evolution of software development – one centered firmly in the cloud. It taps into the fundamental capabilities of cloud computing while allowing the controlled flexibility of local environments.

Let’s understand a little more about how CDEs differ from local environments and the benefits and limitations of this setup.

How Is Cloud Development Different From Local?

Developing cloud applications differs from traditional setups where code lives are isolated on developers’ devices.

At a high level, cloud environments allow engineers to collaborate in real-time on a remotely hosted, consistent toolkit.

This approach solves many headaches teams face when configuring, accessing, and syncing development environments across locations and devices.

What Are The Benefits Of Cloud Development?

Now that you understand the basics of cloud dev environments and how they differ from traditional setups, let’s look at the main benefits of a CDE.

Improved Security

You minimize attack surfaces by consolidating development into regulated cloud platforms like AWS or Azure.

All sensitive credentials, company IP, and personal data stay protected compared to developer laptops that get lost or compromised.

Cloud infrastructures also provide security capabilities like encryption, access controls, and compliance frameworks that are cost-prohibitive for individual engineers to implement alone.

Collaboration

Locally developed code sits in isolated branches and forks until review time. Cloud IDEs enable Google Docs-style real-time editing and commenting for code since the environment is now shared.

Team progress can be visualized right from the beginning, and anyone with the required access can see the code even while it is being worked on, depending on how the environment is configured.

Improved Productivity And Onboarding

On traditional setups with decentralized development on local devices, onboarding new developers can be difficult and time-consuming. You need to configure new machines from scratch before the developer can start working.

Developers also waste a lot of time troubleshooting environment, dependency, and configuration issues unrelated to writing code. A 2023 survey shows over 50% of developers’ time goes into maintenance, configuration, and operational tasks.

However, CDEs handle these complexities centrally, allowing devs to focus on building products instead of fighting environments. They optimize workflows by allocating tools in one cloud-based IDE. Paired with templated developer environments, automated infrastructure management, and fast test execution, it can seriously boost developer productivity.

Scalability

Running resource-heavy build and test processes locally will slow down machines and limit how much parallelization can happen.

However, software teams using CDEs can scale faster without procuring additional hardware.

Spinning up new cloud development environments takes minutes, allowing faster team expansions.

For instance, if you temporarily need high computing for testing application performance under heavy load, you can increase the resources for your cloud instance without overspending. Many cloud dev environments automatically scale up or down based on the system load.

Avoids Configuration Drift

On local setups, developers must manually install all the required components like editors, language packages, frameworks, and databases on their local machines. Configuring these localized toolchains is complex and time-consuming.

The components also get fragmented across developer devices over time. This is termed configuration drift, which usually leads to the dreaded “works on my machine” bugs.

On the other hand, cloud development platforms handle setup and hosting in a centralized location. Engineers access the remote environment through a web browser without configuring local tools. All team members use the same fully packaged, up-to-date toolset in the cloud.

While there are numerous upsides, cloud development environments also have drawbacks.

What Are The Downsides Of Using A CDE?

Adopting any new technology brings both progress and peril. Here are a few potential downsides of leveraging a CDE:

• Complex initial setup: Building a CDE requires significant cloud and DevOps expertise plus intricate integrations with numerous services like SSO, security controls, UI, collaboration tools, etc. If you do not have the required resources, it may be an excellent idea to upskill or hire new people before implementing a CDE.
• Vendor dependencies: Opting for managed CDE solutions often leads to vendor lock-ins. And if you need to migrate platforms down the line, you may have difficulty doing so.
• Steep learning curve: Adopting cloud-based workflows compels teams to learn new concepts, practices, and tools. This can be time-consuming in the beginning.
• Connectivity reliance: Developers are disconnected when internet access goes down. Also, response latency is much higher with CDEs than local environments, which hampers user experience. Local environments sidestep these concerns.
• Ongoing overheads: The cloud infrastructure, robust CI/CD pipelines, automation capabilities, and security safeguards – all have associated recurring maintenance overheads like cost, upgrades, troubleshooting, etc. The more features offered, the higher the operational load. For instance, AWS is known for being very expensive.

How To Set Up Your Cloud Development Environment

If you are convinced that cloud development environments are for your organization, let’s look at a quick overview of how to set up your own CDE.

Step 1: Choose A CDE Provider

There are a variety of cloud dev environments to evaluate like:

• Gitpod – Browser-based CDE integrating with GitHub code repositories
• AWS Cloud9 – Fully managed cloud IDE tightly coupled with AWS services
• Microsoft Visual Studio Online – Cloud version of Visual Studio IDE hooking into Azure

Take the time to compare options across criteria like language support, collaboration, security, integrations, pricing, and learning resources. Sign up for trial accounts and set up a dev environment wherever available. And try to find solutions with open-source community support to avoid getting stuck when problems arise.

Step 2: Set Up A Cloud Account

Once you’ve selected a platform, create an account with the corresponding cloud provider if you don’t already have one. For example, Gitpod relies on GitHub, while solutions like AWS Cloud9 require an AWS account.

During the initial cloud account setup, navigate the dashboard to locate where you can access the various computing, storage, networking, and other services available through the platform. Spending time on this during the trials will help you understand how easy or difficult it will be for company-wide adoption.

Step 3: Create Your First Virtual Machine

With an account created, set up the initial development environment or “dev box” within your chosen CDE platform. Most CDEs offer preconfigured templates that launch virtual machines or development containers in minutes, with all essential tools like code editors and terminals.

Start with official images the CDE vendor provides for popular languages like Node.js, Python, or Java if templated configurations exist. While essential, these prepared environments allow first-time users to experience cloud development quickly. You can then build your custom environments using that as the base image.

Step 4: Configure Security And Networking

Before allowing widespread team usage, consider defining security guardrails and networking rules around the new CDE deployment. Consider:

• Requiring multi-factor authentication to access environments
• Restricting permissions to create/delete cloud resources
• Enabling encrypted storage for sensitive artifacts
• Isolating team development in private cloud networks
• Logging user actions and infrastructure changes

In later stages, you may need to implement secrets management, infrastructure security scanning, and more into CDE pipelines to improve the security of your shared environments.

Step 5: Install Your Favorite Dev Tools

Now that basic environments and environment variables are set up and secured for team usage, customize them further by installing additional development tools. For setting up a development environment, some obvious next steps would be to install coding editors, compilers, databases, web servers, and other software to create a programming toolbox.

All CDEs allow you to customize the toolchains on your server. Use the native package manager on Linux to install all the tools. For Windows, download installers from the internet directly to the cloud instance.

Throughout the process, remember to document all the steps taken, commands run, and tools configured so it’s easy to recreate the environments in the future. You want this documentation to be the single source of truth (SSOT) for your CDEs.

Step 6: Build, Test And Deploy

Finally, start testing the cloud development environment to code, build, test, and deploy applications with cloud-powered workflows. Learn how to snapshot persistent states across machines for continuity or reproduce issues.

Improve team productivity by configuring automatic version control and triggering automated builds and tests when code is committed.

As development in the cloud matures, regularly refine and optimize the environment, balancing standardization with customization. CDEs should become a natural move for your developers instead of being a restrictive environment they are forced to use.

Tips On Using Cloud Development Environments

Beyond the initial setup, here are five tips for getting additional benefits from cloud development environments over time.

Connect To Other Cloud Services

CDE platforms offer tight integrations with complementary cloud services managed by the same vendor. For example, AWS Cloud9 keypair authentication improves security with Amazon EC2 infrastructure.

Explore ways cloud services like serverless databases, storage, messaging, and APIs can streamline builds. Review relevant architecture diagrams detailing how offerings intersect and then selectively incorporate them. When in doubt, survey your dev team members and ask what toolchains they’d like to add or remove.

Embrace Automation

Find ways to apply infrastructure-as-code techniques and CDE configuration as much as possible. Use Dockerfiles, Terraform, Ansible, or other approaches to templatize environments and streamline provisioning for your developers so they can work within security guardrails.

The earlier you automate environment configurations, the faster it will be for you to deploy fresh dev environments and create easily portable environments.

Keep An Eye On Usage

The variable cost model of cloud computing can lead to sticker shock from unoptimized development. Continuously monitor environment usage with tools like AWS Cost Explorer, identifying waste from idle resources, bloated permissions, or regional misconfigurations.

Integrate cloud cost visibility into existing dashboards, focusing on spending anomalies as environments scale. Also, define tight budgets that cap monthly development infrastructure expenses without blocking productivity.

Only Migrate The Data You Need

When transitioning long-standing projects to CDEs, evaluate if caches, file repositories, or local databases require cloud migration. See if development needs can be met through symbolic links to original on-premises locations instead.

Data transfers can be expensive and often become why companies pay high monthly fees to cloud providers. So, make sure you are cherry-picking the most critical data.

Follow The Shared Responsibility Model

All major cloud providers adhere to a Shared Responsibility Model dictating ownership of security controls between customer and vendor. Take the time to understand boundaries around the entity responsible for securing various environment layers.

For example, Amazon secures lower-level cloud infrastructure, but customers must appropriately configure identities, permissions, encryption, and network security layers. Analyze and then uphold your side of the shared responsibility bargain.

Unlock Better App Hosting With DreamHost

So you’ve created the next big thing using your slick new CDE. Congrats! But now you need somewhere to host your web app so real users can access it outside your development environment. Setting up and managing your hosting servers is a pain, especially at scale. Instead, let the specialists at DreamHost handle all that for you!

Their optimized, managed hosting services are made for taking web apps global. We’re talking automatic scaling for traffic spikes, 99.9% guaranteed uptime, and one-click staging.

And the beauty is it pairs perfectly with cloud-based development workflows. You develop rapidly in the cloud, and DreamHost makes deployment completely straightforward.

So, if you’re looking for a proven hosting home for your web application, try DreamHost!

The post Cloud Development Environments: Everything You Need To Know appeared first on Website Guides, Tips & Knowledge.

Lines and lines of HTML, CSS, and JavaScript synthesize to construct the experiences we mindlessly scroll and tap through daily.

What if you could peek behind the curtain?

The ability to inspect website code lives directly inside your browser. Today’s popular browsers like Chrome, Firefox, and Safari contain built-in developer tools with the Inspect Element feature that helps you play around with the front-end technologies of any web page.

This guide will teach you how to access and use the Inspect Element feature in all three browsers. We’ll also discuss what we can achieve using these browsers’ developer tools and how Inspect Element helps.

Let’s dive right in!

What Is Inspect Element?

Inspect Element is a utility, usually found within your browser’s developer tools, that lets you view and manipulate the code — HTML, CSS, and JavaScript — that constructs any webpage.

When you open Inspect Element, it shows you various code segments that build the website.

You can highlight page sections to reveal the corresponding source code. Alternatively, clicking on a line of the original source code will highlight its matching visual element on the rendered page. This linking of front-end code and design lets you understand how websites are built.

Nerd Note: Inspect Element allows digital marketers to see how specific changes will affect the appearance of a web page without making any changes to the live site. This can help test new CTA buttons, drop-down menus, color schemes, and other design elements. You can even see if your website is responsive on different devices.

You can tweak text content, colors, fonts, layouts, animations, and more, to preview changes. The webpage remains unaltered externally, and refreshing returns your local view to the original state.

Who Is It For?

While Inspect Element is primarily considered a web developer tool, its practical uses span beyond coding. Here’s how various roles can benefit:

• Developers: Debug layout issues, test code edit, and improve site performance.
• Designers: Visualize new style ideas and preview designs across devices.
• Marketers: Check SEO data, export icons/images, and modify text locally.
• Writers: Anonymize screenshots and locally edit articles.
• Support: Identify problems for documentation.
• Students: Learn the implementation of web technologies.

Essentially, anyone involved with websites whether it’s building, designing, running, writing about, or just using them, can discover new perspectives through inspection.

Let’s look at exactly why you should start inspecting elements on the web.

Why Inspect Websites?

Let’s explore the key functions of the Inspect Element feature to understand how websites are constructed.

1. Debug And Fix Problems

Finding and fixing bugs is a massive use case for inspection tools. Developers can dive into the code to troubleshoot when a website appears broken to determine if it’s an issue with styling, layout, responsiveness, etc.

Elements causing errors on the page are visually displayed in the inspector, allowing developers to narrow down the issue code quickly.

Since values can be tweaked live to non-destructively test fixes, it becomes easy to find the fix.

Inspection tools also provide access to the Console panel. This allows for more advanced debugging and running custom JavaScript to see how the page reacts.

So when tackling front-end and back-end website bugs, Inspect Element gives the power to unravel where problems originate.

2. Understand Web Development

For new developers still learning HTML, CSS, or JavaScript, inspector tools greatly assist the learning process. Inspect Element lets you see professional implementations of what you’re trying to achieve on your website. Ultimately, helping improve your implementation.

You can also test how changing elements and content in HTML impacts the page.

For example, adjusting margin values to observe spacing shifts or targeted nested elements using CSS descendant selectors. The real-world context also sticks better than reading through textbook examples.

Plus, seeing how expert web developers structure and optimize sites provides a blueprint for coding your pages. The ability to experiment coupled with viewable source code from popular sites facilitates rapid growth.

3. Test Designs and Content

Web designers frequently use inspector tools to mock up style changes quickly. Testing variations — like new fonts, resized elements, color palettes, etc. — can be done instantly without affecting production code.

For example, compare typefaces to determine ideal readability or change the button colors to see what they look like. With Inspect Element tools, you can do that right within your browser instead of making the changes in an external device like Photoshop or Figma.

Similarly, for writers and marketers, modifying text locally helps preview content and layout adjustments. From testing paragraph widths to inspecting metadata, easy editing without needing access to Content Management System (CMS) backends is valuable.

4. View SEO Data

Browser developer tools provide vital insights when considering a web page’s SEO and social meta. Examining meta tags — descriptions, titles, open graph tags — most crucially influences how links appear in SERPs and when shared.

For example, most social networks read the og:title og:description. All this information is in a website’s <head> elements.

5. Check Performance

Inspect Element tools also cater to web performance audits for improving overall site speed and loading behavior. In Chrome, the Network tab will give you a load timeline, which includes how long each element took.

When inspecting pages, you can view total download times and resource requests and break this data into individual elements. Find out which images, fonts, or JavaScript files drag down performance. Then, address the issues directly: compress assets, implement caches, and defer nonessential scripts.

Network inspection also allows throttling to mimic slow connections on mobile or poor wifi. Discover usability flaws by measuring loading times across simulated connections. Are pages still functional on 3G? Do some files block rendering? This information can help you improve your overall website page speed.

6. And More

This just scratches the surface of what’s possible through Inspect Element. We’ve mainly focused on use cases for developers, but designers, writers, and marketers can accomplish many goals discussed prior without coding expertise. You’ll also find analyzing accessibility and security vulnerabilities often leverages inspection capabilities.

Now that you hopefully better understand all you can achieve by inspecting web pages, let’s quickly look at how these tools work before jumping into practical walkthroughs.

How Browser Developer Tools Work

The core of all major browser Inspect Element interfaces revolves around the Document Object Model (DOM).

When a web page loads, the browser processes markup (HTML), presentation (CSS), and logic (JavaScript) to construct a DOM instance.

The DOM essentially represents the page structure as a tree of parent-child node elements. Developers can instantly interact with this live representation using inspector tools to read, edit, and visualize corresponding changes.

So when you toggle CSS declarations on and off while inspecting, rewrite conditional logic, or hide specific HTML nodes, for example, the matching DOM nodes update in real-time. This is how alterations display live without actually changing any source files externally.

Behind the scenes, browsers apply changes made through inspection tools by temporarily overriding the default CSS and HTML. These modifications only exist for your browser and revert to normal once you refresh the page (or just close the tab and come back later).

Inspecting Elements In Google Chrome

As one of the world’s most popular browsers today, Google Chrome, accounting for over 70% of the browser market share, is equipped for nearly any inspection needed out of the box.

Pressing Ctrl+Shift+I (Windows) or Command+Option+I (Mac) instantly launches Chrome’s DevTools interface to analyze any available webpage or web app. You can also inspect specific elements on the page.

Let’s break down how to access Chrome’s Inspector, navigate page elements efficiently, and test joint manipulations – from editing text to simulating mobile devices, touchscreen devices, and more. You can use the phone icon on the top-left corner of the console window.

1. Open Developer Tools

Start by navigating Chrome (or any Chromium-based browser) to any webpage you want to inspect. Right-click anywhere on the page and select Inspect from the context menu.

Alternatively, use the above keyboard shortcut.

DevTools appears docked at the bottom of your browser window on larger screens as default. You can open it as a separate window or change docking locations, too — click on the three vertical dots in the upper-right corner of the Inspect Element window.

Wherever it renders, the first thing you’ll see is the main elements panel which shows all the HTML code.

Various other analysis tabs can be accessed across the top: Console, Sources, Network, etc.

Depending on where the Inspect element window opens, one portion will show the page source code starting with <html>. As you click on different things in the code, the right (or lower) side shows the styles, including fonts, colors, margins, paddings, etc.

This linking between code and appearance facilitates understanding and experimenting with changes. But before manipulating anything, let’s see how to target elements for inspection efficiently.

2. Find Elements To Inspect

As pages grow long and complex, scanning visually for the element you want and locating its code in dev tools can become tedious. Instead, use the node selection tool.

In Chrome DevTools, click the icon on the top-left corner (of the inspector window) that resembles the selector crossed with the cursor (or press Ctrl/Cmd+Shift+C).

Your mouse now toggles element selection mode. Hover over any visual entity on the page and notice how the inspector code automatically highlights its DOM node.

Now, clicking any element on the page will directly highlight the code that makes the element appear on the page. You can also see the styles right or below the HTML code. You can also use the search box or search tab to find elements. Alternatively, Ctrl+F (Windows) and Cmd+F (Mac) work too!

Let’s see what we can edit with the elements selected.

3. Interact With The DOM

The inspect element feature also provides a way of interacting with the Document Object Model (DOM) — the structured representation of page elements visible in the editor.

Developers can leverage the DOM to reshape content, style, and interactivity directly within Chrome DevTools.

Some common ways to manipulate elements include:

• Editing text by making content fields directly editable.
• Toggling CSS styles like colors and fonts to visually test styling changes in the CSS panel.
• Modifying component attributes like links and buttons to reshape functionality.
• Rearranging structural elements to prototype alternative layouts.

The DOM updates live with changes made in the inspector view. So any tweaks preview instantly in the browser, then reset upon refresh, making experiments low risk during development.

4. Test Responsiveness

Beyond editing individual elements, inspector tools also provide environments to test responsiveness across a variety of devices and viewports.

Chrome DevTools includes device mode simulation. You can select presets to emulate standard phone or tablet resolutions and touch capabilities. Or use the more advanced options to manually configure exact dimensions, pixel ratios, CPU throttling, and other metrics.

This allows rapid validation of aspects like:

• Layouts at various breakpoints.
• Touch target spacing for mobile users.
• Site performance on low-powered devices.
• Accessibility on different hardware.

The ability to preview pages on simulated mobile screens during development helps perfect responsiveness and progressive enhancement delivery. Testing across a wide spectrum of emulated devices ensures broad browser and device support.

Inspecting Elements In Firefox

Firefox provides its webpage inspection tools rivaling the functionality of Chrome DevTools. Access Firefox Inspector using the same Inspect Element shortcuts as Chrome: Ctrl+Shift+I (Windows) and Cmd+Opt+I (Mac).

You can also use the keyboard shortcut Ctrl+Shift+C (Windows) and Cmd+Opt+C (Mac) to open the inspect element panel, allowing you to click on an element on the page to jump to the code directly.

1. View DOM Attributes

When analyzing complex interfaces, focus states and dynamic effects rely on HTML attributes instead of CSS. Right-click any element within Inspector views and choose Show DOM Properties.

This displays all native attributes associated with the node. You can directly edit values here to modify component behavior through the Inspector rather than requiring code changes.

For example, adjusting the range slider min/max and step increments visually sets bounds, changing the checkbox/radio button names groups toggles, overwriting dataset properties hooks different remote data, and the list goes on and on.

2. Work Visually With Box Model Diagrams

Firefox eases inspection by showing the padding, borders, and margins right as you move your cursor around the website.

When clicking any node, the Inspector panel cycles between three states: geometry off, box model overlay only, and both overlay plus markup outlines.

This can be useful when you want to test if your spacing, padding, and margins have been appropriately applied to the elements.

It also makes it more straightforward to fix any issues since you can click through specific elements and see precisely what CSS styling is affecting them. Geometric analysis here can help beginners grasp spatial relationships faster.

3. Edit Colors With A Color Picker

Within Inspector, click any color swatch next to any property accepting colors like background, border, etc. It’ll show you a color slider, alpha setting, and a color picker to pull colors from your open page.

You no longer need to spend time guessing color codes or checking your design assets for the code being used. Pick it from existing elements or even images on the page.

Inspecting Elements in Safari

Safari offers the Webkit Inspector for inspecting pages on macOS systems primarily. However, you need to enable the development menu before accessing it.

Open Safari and click Safari from the Menu > Settings > Advanced. Check the box for “Show features for web developers.”

Now you can visit any website and right-click to see the “Inspect element” option available,

You can also use the keyboard shortcut, Cmd+Opt+C, to access the Inspect Element feature.

Timelines And Network Speed

Similar to most other browsers, Safari offers powerful timelines within the Safari Inspector. The resources list helps you instantly identify which files are causing rendering delays and what the reason could be. You can also see what scripts are blocking the page load.

3D View Of Website Layers

If you want to analyze the layers that make up the website, simply go to the Layers tab and you’ll be presented with a full 3D model of all the layers

Ways To Use Inspect Element

Now that we’ve set up inspector tools let’s discuss some practical ways they can be used. Here are just a few common usage examples:

Change Text Or Images

One helpful capability is modifying textual content or image assets directly within the editor. You can tweak headlines, swap logos, anonymize details, and more.

To edit any text or images, inspect the element you want to change first, then double-click within its bounds in the code editor to make the content editable.

Input anything you want, and press enter to make the changes live (temporarily).

Change Colors, Fonts, And Styling

When inspecting various elements like links, buttons, menus, or galleries — you’ll notice attributes that define associated behavior like href destination URLs, carousel view box data sources, and more.

Much like editing textual content and CSS properties and style sheets, these HTML-level traits can be manipulated directly within Inspector.

The DOM updates these changes on the spot. So you can immediately see how the changes reshape component functionality without coding:

• Modify the href of links and buttons to redirect clicks elsewhere temporarily.
• Adjust tab role and aria tags to test accessibility improvements.
• Swap thumbnail image src attributes while building galleries.

Change Element State

Beyond basic styling, Inspector tools also allow modifying interactive element states like hover, focus, and active. Right-click elements and use the Force state options (Google Chrome) to visualize how components appear during usage.

For example, toggle a button’s active state to ensure the pushed effect is visible to users. Check disabled field borders to see if they offer proper contrast. Validate menu links highlight appropriately on focus during keyboard navigation testing.

Hide Or Delete Items

Finally, bulk hiding or deletion of page elements is possible, too. It can help identify unnecessary code bloating page size, block elements from rendering correctly, or unexpectedly hide desired content from users.

To try this, simply highlight any element in the code and press delete to remove it from the rendered view instantly.

In the screenshot, we have deleted the DreamHost’s homepage heading from our view. You can do much more with Inspect Element as you explore it.

FAQs

Can you use Inspect Element on any website?

Yes, Inspect Element works universally across all modern websites. However, some websites render code on the server side and only push JavaScript objects to the front end. This is generally done to prevent web scrapers from pulling data, and it can become difficult for you to understand the site structure using Inspect Element.

Do changes made in Inspect Element save permanently?

No. Any edits made via inspector tools only temporarily render locally within your browser view. Refreshing reverts to the default external page content. Changes will not impact actual source files whatsoever.

Can other users see tweaks when inspecting websites?

Inspect Element edits cannot be viewed by other users browsing websites, even while signing into the same browser profile across multiple devices. Think of changes as exclusive to your machine only.

Are there other developer tools beyond Inspect Element?

Absolutely. As mentioned earlier, Console, Sources, Network, and other analysis tabs also prove invaluable during development. Plus, browser extensions extend DevTools capabilities even further.

Don’t Just View Websites, Interact With The Code

Playing around with the Inspect Element feature peels back the curtain on how websites work. Letting you peek at the HTML, CSS, and JavaScript underneath any page you click can easily help you understand why something looks and feels the way it does.

So, as you surf around, keep that Inspect Element tool handy. Let curiosity guide you as you click around to see what makes things appear as they do. Who knows, you might just pick up new methods to help the web become an even more accessible and fun place!

The post How To Inspect A Website In Any Browser [Chrome, Safari, Firefox] appeared first on Website Guides, Tips & Knowledge.

Yet, Linux has only a 2.68% desktop market share. Why this gap?

The core focus of Linux has never been its user interface. It was instead designed to give you complete control over your operating system through the command line.

That can make Linux seem intimidating to beginners — And the thousands of available commands only make this more difficult.

In this article, we cover the top 100 most useful Linux commands. Learning just a handful of these commands can help you boost your productivity as a Linux user. Let’s dive right in!

What Are Linux Commands?

Linux commands allow you to control your system from the command line interface (CLI) instead of using your mouse or trackpad. They are text instructions entered into the terminal to tell your system exactly what to do.

Commands you enter on the Linux terminal are case-sensitive and follow a syntax like “command -options arguments.” You can combine them for complex tasks using pipelines and redirection.

Some key things to know about Linux commands:

• They are case-sensitive; for example, “ls” and “LS” mean different things.
• They follow a specific syntax like “command -options arguments.”
• They can be combined for complex operations using pipelines and redirection.
• They give you fine-grained control over your system, which is hard to achieve with graphical interfaces.
• They allow you to automate tasks through shell scripts and batch processing.
• They can be used to access system resources like the file system, network, memory, and CPU.
• They form the basis of interaction with Linux servers and operating systems.

If you’re a programmer that’s just learning to code, you can start practicing your Linux commands without leaving Windows using the Windows Subsystem for Linux. This lets you run Linux from within Windows without dual booting and get the best of both operating systems.

Top 100 Most Useful Linux Commands

Now that you have a basic understanding of what Linux commands are, let’s dive into the top 100 most commonly used Linux commands.

We’ve organized them by category to cover areas like file management, system monitoring, network operations, user administration, and more.

File Management Commands In Linux

File management is a common task on the Linux command line. Here are essential file commands:

1. ls – List Directory Contents

The ls command is one of the most frequently used Linux commands. It lists the contents of a directory, showing all files and subdirectories contained inside.

Without any options or arguments, ls will display the contents of the current working directory. You can pass a path name to list files and folders in that location instead.

Syntax:

Some of the most useful ls options include:

• -l – Display results in long format, showing extra details like permissions, ownership, size, and modification date for each file and directory.
• -a – Show hidden files and directories that start with . in addition to non-hidden items.
• -R – Recursively list all subdirectory contents, descending into child folders indefinitely.
• -S – Sort results by file size, largest first.
• -t – Sort by timestamp, newest first.

Example:

This would list the contents of the “documents” folder in long format.

Example output:

This output shows a detailed list with permissions, size, owner, and timestamp for each file and directory. The long listing format given by the -l option provides helpful file information at a glance.

The ls command gives you flexible control over directory content listing. It’s one of the commands you’ll find yourself using constantly when working on Linux.

2. cd – Change Directory

The cd command is used to navigate between directories. It allows you to move the current working directory to a new location in the filesystem.

When you run the cd command by itself, it will return you to the home directory. You can also pass a specific path to change into. For example:

• cd /usr/local – Changes to the /usr/local directory.
• cd .. – Moves up one level to the parent directory.
• cd ~/pictures – Changes to the pictures folder in your home directory.

Syntax:

cd [directory]

Example:

cd /home/user/documents

This would change the working directory to the “documents” folder under /home/user. Using cd is essential for being able to access and work with files in different locations conveniently.

3. mkdir – Create A New Directory

The mkdir command allows you to create a new folder. You simply pass the name of the directory to create.

Syntax:

mkdir [options] <directory>

This will create a directory called “newproject” in the current working directory.

Some useful mkdir options:

• -p – Creates parent directories recursively as needed.
• -v – Verbose output showing created directories.

Example:

mkdir -v ~/project/code

This would create the “code” subdirectory under “project” in the user’s home folder, with verbose output showing the directory being created.

4. rmdir – Remove Directory

To delete an empty directory, use the rmdir command. Note that rmdir can only remove empty directories – we’ll need the rm command to delete non-empty ones.

Syntax:

rmdir [options] <directory>

Some options for rmdir include:

• -v – Verbose output when deleting directories.
• -p – Remove parent directories recursively as needed.

Example:

rmdir -v ~/project/code

This would delete the “code” subdirectory under “project” while showing verbose output.

5. touch – Create A New Empty File

The touch command is used to create a new empty file instantly. This is useful when you need an empty file to populate with data later.

The basic syntax of touch is:

touch [options] filename

Some useful options for touch include:

• -c – Do not create the file if it already exists. This avoids accidentally overwriting existing files.
• -m – Instead of creating a new file, update the timestamp on an existing file. This can be used to change the modified time.

For example:

touch /home/user/newfile.txt

The above command creates a new empty file called “newfile.txt” in the user’s /home/user directory. If newfile.txt already exists, it will update the access and modification times on the file instead.

6. cp – Copy Files And Directories

The cp command copies files or directories from one location to another. It requires passing a source path and a destination.

The basic syntax of cp is:

cp [options] source destination

Some useful cp options:

• -r – Copy directories recursively, descending into child directories to copy their contents as well. Necessary when copying directories.
• -i – Prompt before overwriting any existing files at the destination. It prevents accidentally overwriting data.
• -v – Display verbose output showing the details of each file as it is copied. Helpful to confirm exactly what was copied.

For example:

cp -r /home/user/documents /backups/

This would recursively copy the /home/user/documents directory and all its contents to the /backups/ directory. The -r option is needed to copy directories.

The cp command is one of the most frequently used file management utilities for copying files and directories in Linux. You’ll find yourself using this command quite often.

7. mv – Move Or Rename Files And Directories

The mv command is used to move files or directories to a different location or rename them. Unlike copy, the files from the source path are deleted after they’ve been moved to the destination.

You can also use the mv command to rename files since you simply need to change the source and destination paths to the old and new name.

The syntax of mv is:

mv [options] source destination

Useful mv options:

• -i – Prompt before overwriting any existing files at the destination location. This prevents accidentally overwriting data.
• -v – Produce verbose output showing each file or directory as it is moved. This is helpful for confirming exactly what was moved.

For example:

mv ~/folder1 /tmp/folder1

The above will move folder1 from the home (~) directory to the /tmp/ directory. Let’s look at another example of using the mv command for renaming files.

mv folder1 folder2

Here, “folder1” is renamed to “folder2.”

8. rm – Remove Files And Directories

The rm command deletes files and directories. Use caution because deleted files and directories cannot be recovered.

The syntax is:

rm [options] name

Useful rm options:

• -r – Recursively delete directories, including all contents inside them. This is necessary when deleting directories.
• -f – Force deletion and suppress all confirmation prompts. This is a dangerous command, as files cannot be recovered when they’re gone!
• -i – Prompt for confirmation before deleting each file or directory, which provides safety against accidental removal.

For example:

rm -rf temp

This recursively deletes the “temp” directory and all its contents without prompting (-f overrides confirmations).

Note: The rm command permanently erases files and folders, so use it with extreme care. If used with sudo privileges, you could also delete the root directory completely, and Linux would no longer function after restarting your computer. 

9. find – Search For Files In A Directory Hierarchy

The find command recursively searches directories for files matching given criteria.

The basic syntax of find is:

find [path] [criteria]

Some useful criteria options for find include:

• -type f – Search for only normal files, omitting directories.
• -mtime +30 – Search for files modified over 30 days ago.
• -user jane – Search for files belonging to user “jane.”

For example:

find . -type f -mtime +30

This will find all regular files over 30 days old under the current directory (denoted by the dot).

The find command allows searching for files based on all kinds of advanced conditions like name, size, permissions, timestamps, ownership, and more.

10. du – Estimate File Space Usage

The du command measures the file space usage for a given directory. When used without options, it displays disk usage for the current working directory.

The syntax for du is:

du [options] [path]

Useful du options:

• -h – Display file sizes in human-readable format like K for Kilobytes rather than a byte count. Much easier to parse.
• -s – Only show the total size for a directory, rather than listing each subdirectory and file. Good for summary.
• -a – Show individual file sizes in addition to totals. Helps identify large files.

For example:

du -sh pictures

This will print a human-readable size total for the “pictures” directory.

The du command is helpful for analyzing disk usage for a directory tree and identifying files consuming excessive space.

Search And Filter Commands In Linux

Now, let’s explore commands that allow you to search, filter, and manipulate text right from the Linux command line.

11. grep – Search Text Using Patterns

The grep command is used to search for text patterns within files or output. It prints any lines that match the given regular expression. grep is extremely powerful for searching, filtering, and pattern matching in Linux.

Here is the basic syntax:

grep [options] pattern [files]

For example:

grep -i "error" /var/log/syslog

This searches the syslog file for the word “error,” ignoring case sensitivity.

Some useful grep options:

• -i – Ignore case distinctions in patterns
• -R – Recursively search subdirectories
• -c – Print only a count of matching lines
• -v – Invert match, print non-matching lines

grep allows you to search files and output for keywords or patterns quickly. It’s invaluable for parsing logs, searching source code, matching regexes, and extracting data.

12. awk – Pattern Scanning And Processing Language

The awk command allows more advanced text processing based on specified patterns and actions. It operates on a line-by-line basis, splitting each line into fields.

awk syntax is:

awk 'pattern { action }' input-file

For example:

awk '/error/ {print $1}' /var/log/syslog

This prints the first field of any line containing “error.” awk can also use built-in variables like NR (number of records) and NF (number of fields).

Advanced awk capabilities include:

• Mathematical computations on fields
• Conditional statements
• Built-in functions for manipulating strings, numbers, and dates
• Output formatting control

This makes awk suitable for data extraction, reporting, and transforming text output. awk is extremely powerful since it is an independent programming language giving you a lot of control as a Linux command.

13. sed – Stream Editor For Filtering And Transforming Text

The sed command allows filtering and transformation of text. It can perform operations like search/replace, deletion, transposition, and more. However, unlike awk, sed was designed for editing lines on a per-line basis as per the instructions.

Here’s the basic syntax is:

sed options 'commands' input-file

For example:

sed 's/foo/bar/' file.txt

This replaces “foo” with “bar” in file.txt.

Some useful sed commands:

• s – Search and replace text
• /pattern/d – Delete lines matching a pattern
• 10,20d – Delete lines 10-20
• 1,3!d – Delete all except lines 1-3

sed is ideal for tasks like bulk find/replace, selective line deletion, and other text stream editing operations.

14. sort – Sort Lines Of Text Files

When you’re working with a lot of text or data or even large outputs from other commands, sorting it is a great way to make things manageable. The sort command will sort the lines of a text file alphabetically or numerically.

Basic sort syntax:

sort [options] [file]

Useful sort options:

• -n – Sort numerically instead of alphabetically
• -r – Reverse the sort order
• -k – Sort based on a specific field or column

For example:

sort -n grades.txt

This numerically sorts the contents of grades.txt. sort is handy for ordering the contents of files for more readable output or analysis.

15. uniq – Report Or Omit Repeated Lines

The uniq command filters duplicate adjacent lines from input. This is often used in conjunction with sort.

Basic syntax:

uniq [options] [input]

Options:

• -c – Prefix unique lines with count of occurrences.
• -d – Only show duplicated lines, not unique ones.

For example:

sort data.txt | uniq

This will remove any duplicated lines in data.txt after sorting. uniq gives you control over filtering repeated text.

16. diff – Compare Files Line By Line

The diff command compares two files line-by-line and prints the differences. It’s commonly used to show changes between versions of files.

Syntax:

diff [options] file1 file2

Options:

• -b – Ignore changes in whitespace.
• -B – Show differences inline, highlighting changes.
• -u – Output differences with three lines of context.

For example:

diff original.txt updated.txt

This will output the lines that differ between original.txt and updated.txt. diff is invaluable for comparing revisions of text files and source code.

17. wc – Print Line, Word, And Byte Counts

The wc (word count) command prints counts of lines, words, and bytes in a file.

Syntax:

wc [options] [file]

Options:

• -l – Print only the line count.
• -w – Print only the word count.
• -c – Print only the byte count.

For example:

wc report.txt

This command will print the number of lines, words, and bytes in report.txt.

Redirection Commands In Linux

Redirection commands are used to control input and output sources in Linux, allowing you to send and append output streams to files, take input from files, connect multiple commands, and split output to multiple destinations.

18. > – Redirect Standard Output

The > redirection operator redirects the standard output stream from the command to a file instead of printing to the terminal. Any existing contents of the file will be overwritten.

For example:

ls -l /home > homelist.txt

This will execute ls -l to list the contents of the /home directory.

Then, instead of printing that output to the terminal, the > symbol captures that standard output and writes it to homelist.txt, overwriting any existing file contents.

Redirecting standard output is helpful for saving command results to files for storage, debugging, or chaining commands together.

19. >> – Append Standard Output

The >> operator appends standard output from a command to a file without overwriting existing contents.

For example:

tail /var/log/syslog >> logfile.txt

This will append the last 10 lines of the syslog log file onto the end of logfile.txt. Unlike >, >> adds the output without erasing the current logfile.txt contents.

Appending is helpful in collecting command output in one place without losing existing data.

20. < – Redirect Standard Input

The < redirection operator feeds a file’s contents as standard input to a command, instead of taking input from the keyboard.

For example:

wc -l < myfile.txt

This sends the contents of myfile.txt as input to the wc command, which will count lines in that file instead of waiting for keyboard input.

Redirecting input is useful for batch-processing files and automating workflows.

21. | – Pipe Output To Another Command

The pipe | operator sends the output from one command as input to another command, chaining them together.

For example:

ls -l | less

This pipes the output of ls -l into the less command, which allows scrolling through the file listing.

Piping is commonly used to chain together commands where the output of one feeds the input of another. This allows building complex operations out of smaller single-purpose programs.

22. tee – Read From Standard Input And Write To Standard Output And Files

The tee command splits standard input into two streams.

It writes the input to standard output (shows the output of the main command) while also saving a copy to a file.

For example:

cat file.txt | tee copy.txt

This displays file.txt contents to the terminal while simultaneously writing it to copy.txt.

tee is unlike redirecting, where you don’t see the output until you open the file you’ve redirected the output to.

Archive Commands

Archiving commands allow you to bundle multiple files and directories into compressed archive files for easier portability and storage. Common archive formats in Linux include .tar, .gz, and .zip.

23. tar – Store And Extract Files From An Archive

The tar command helps you work with tape archive (.tar) files. It helps you bundle multiple files and directories into a single compressed .tar file.

Syntax:

tar [options] filename

Useful tar options:

• -c – Create a new .tar archive file.
• -x – Extract files from a .tar archive.
• -f – Specify archive filename rather than stdin/stdout.
• -v – Verbose output showing archived files.
• -z – Compress or uncompress archive with gzip.

For example:

tar -cvzf images.tar.gz /home/user/images

This creates a gzip-compressed tar archive called images.tar.gz containing the /home/user/images folder.

24. gzip – Compress Or Expand Files

The gzip command compresses files using LZ77 coding to reduce size for storage or transmission. With gzip, you work with .gz files.

Syntax:

gzip [options] filename

Useful gzip options:

• -c – Write output to stdout instead of file.
• -d – Decompress file instead of compressing.
• -r – Recursively compress directories.

For example:

gzip -cr documents/

The above command recursively compresses the documents folder and outputs to stdout.

25. gunzip – Decompress Files

The gunzip command is used for decompressing .gz files.

Syntax:

gunzip filename.gz

Example:

gunzip documents.tar.gz

The above command will extract the original uncompressed contents of documents.tar.gz.

26. zip – Package And Compress Files

The zip command creates .zip archived files containing compressed file contents.

Syntax:

zip [options] archive.zip filenames

Useful zip options:

• -r – Recursively zip a directory.
• -e – Encrypt contents with a password.

Example:

zip -re images.zip pictures

This encrypts and compresses the pictures folder into images.zip.

27. unzip – Extract Files From ZIP Archives

Similar to gunzip, the unzip command extracts and uncompresses files from .zip archives.

Syntax:

unzip archive.zip

Example:

unzip images.zip

The above example command extracts all files from images.zip in the current directory.

File Transfer Commands

File transfer commands allow you to move files between systems over a network. This is useful for copying files to remote servers or downloading content from the internet.

28. scp – Secure Copy Files Between Hosts

The scp (secure copy) command copies files between hosts over an SSH connection. All data transfer is encrypted for security.

scp syntax copies files from a source path to a destination defined as user@host:

scp source user@host:destination

For example:

scp image.jpg user@server:/uploads/

This securely copies image.jpg to the /uploads folder on server as user.

scp works like the cp command but for remote file transfer. It leverages SSH (Secure Shell) for data transfer, providing encryption to ensure that no sensitive data, such as passwords, are exposed over the network. Authentication is typically handled using SSH keys, though passwords can also be used. Files can be copied both to and from remote hosts.

29. rsync – Synchronize Files Between Hosts

The rsync tool synchronizes files between two locations while minimizing data transfer using delta encoding. This makes it faster to sync large directory trees.

rsync syntax syncs source to destination:

rsync [options] source destination

For example:

rsync -ahv ~/documents user@server:/backups/

The above example command recursively syncs the documents folder to server:/backups/, showing verbose, human-readable output.

Useful rsync options:

• -a – Archive mode syncs recursively and preserves permissions, times, etc.
• -h – Human-readable output.
• -v – Verbose output.

rsync is ideal for syncing files and folders to remote systems and keeping things decentrally backed up and secure.

30. sftp – Secure File Transfer Program

The sftp program provides interactive file transfers over SSH, similar to regular FTP but encrypted. It can transfer files to/from remote systems.

sftp connects to a host then accepts commands like:

sftp user@host

get remotefile localfile

put localfile remotefile

This retrieves remotefile from the server and copies localfile to the remote host.

sftp has an interactive shell for navigating remote file systems, transferring files and directories, and managing permissions and properties.

31. wget – Retrieve Files from the Web

The wget tool downloads files over HTTP, HTTPS, and FTP connections. It’s useful for retrieving web resources directly from the terminal.

For example:

wget https://example.com/file.iso

This downloads the file.iso image from the remote server.

Useful wget options:

• -c – Resume interrupted download.
• -r – Download recursively.
• -O – Save to specific filename.

wget is ideal for scripting automatic downloads and mirroring websites.

32. curl – Transfer Data From Or To A Server

The curl command transfers data to or from a network server using supported protocols. This includes REST, HTTP, FTP, and more.

For example:

curl -L https://example.com

The above command retrieves data from the HTTPS URL and outputs it.

Useful curl options:

• -o – Write output to file.
• -I – Show response headers only.
• -L – Follow redirects.

curl is designed to transfer data across networks programmatically.

File Permissions Commands

File permissions commands allow you to modify access rights for users. This includes setting read/write/execute permissions, changing ownership, and default file modes.

33. chmod – Change File Modes Or Access Permissions

The chmod command is used to change the access permissions or modes of files and directories. The permission modes represent who can read, write, or execute the file.

For example:

chmod 755 file.txt

There are three sets of permissions—owner, group, and public. Permissions are set using numeric modes from 0 to 7:

• 7 – read, write, and execute.
• 6 – read and write.
• 4 – read only.
• 0 – no permission.

This sets the owner permissions to 7 (rwx), group to 5 (r-x), and public to 5 (r-x). You can also reference users and groups symbolically:

chmod g+w file.txt

The g+w syntax adds group write permission to the file.

Setting proper file and directory permissions is crucial for Linux security and controlling access. chmod gives you flexible control to configure permissions precisely as needed.

34. chown – Change File Owner And Group

The chown command changes ownership of a file or directory. Ownership has two components—the user who is the owner, and the group it belongs to.

For example:

chown john:developers file.txt

The above example command will set the owner user to “john” and the owner group to “developers.”

Only the root superuser account can use chown to change file owners. It’s used to fix permission problems by modifying the owner and group as needed.

35. umask – Set Default File Permissions

The umask command controls the default permissions given to newly created files. It takes an octal mask as input, which subtracts from 666 for files and 777 for directories.

For example:

umask 007

New files will default to permissions 750 instead of 666, and new directories to 700 instead of 777.

Setting a umask lets you configure default file permissions rather than relying on system defaults. The umask command is useful for restricting permissions on new files without relying on someone going in and manually adding restrictions.

Process Management Commands

These commands allow you to view, monitor, and control processes running on your Linux system. This is useful for identifying resource usage and stopping misbehaving programs.

36. ps – Report A Snapshot Of Current Processes

The ps command displays a snapshot of currently running processes, including their PID, TTY, stat, start time, etc.

For example:

ps aux

This shows every process running as all users with additional details like CPU and memory usage.

Some useful ps options:

• aux – Show processes for all users
• --forest – Display tree of parent/child processes

ps gives you visibility into what’s currently running on your system.

37. top – Display Linux Processes

The top command shows real-time Linux process information, including PID, user, CPU %, memory usage, uptime, and more. Unlike ps, it updates the display dynamically to reflect current usage.

For example:

top -u mysql

The above command monitors processes just for the “mysql” user. It becomes quite helpful in identifying resource-intensive programs.

38. htop – Interactive Process Viewer

The htop command is an interactive process viewer replacing the top command. It shows system processes along with CPU/memory/swap usage graphs, allows sorting by columns, killing programs, and more.

Simply type in htop in the command line to view your processes.

htop has enhanced UI elements with colors, scrolling, and mouse support for easier navigation compared to top. Excellent for investigating processes.

39. kill – Send A Signal To A Process

The kill command sends a signal to a process to terminate or kill it. Signals allow graceful shutdown if the process handles them.

For example:

kill -15 12345

The above command sends the SIGTERM (15) signal to stop the process with PID 12345 gracefully.

40. pkill – Send A Signal To A Process Based On Name

The pkill command kills processes by name instead of PID. It can make things easier than finding the PID first.

For example:

pkill -9 firefox

This forcibly stops all Firefox processes with SIGKILL (9). pkill targets processes by matching name, user, and other criteria instead of the PID.

41. nohup – Run A Command Immune To Hangups

The nohup command runs processes immune to hangups, so they keep running if you log out or get disconnected.

For example:

nohup python script.py &

The above example command will launch script.py detached in the background and immune to hangups. nohup is generally used to start persistent background daemons and services.

Performance Monitoring Commands

These commands provide valuable system performance statistics to help analyze resource utilization, identify bottlenecks, and optimize efficiency.

42. vmstat – Report Virtual Memory Statistics

The vmstat command prints detailed reports on memory, swap, I/O, and CPU activity. This includes metrics like memory used/free, swap in/out, disk blocks read/written, and CPU time spent on processes/idle.

For example:

vmstat 5

Other useful vmstat options:

• -a – Show active and inactive memory
• -s – Display event counters and memory stats
• -S – Output in KB instead of blocks
• 5 – Output refreshed every 5 seconds.

The example above outputs memory and CPU data every 5 seconds until interrupted, which is useful for monitoring live system performance.

43. iostat – Report CPU And I/O Statistics

The iostat command monitors and displays CPU utilization and disk I/O metrics. This includes CPU load, IOPS, read/write throughput, and more.

For example:

iostat -d -p sda 5

Some iostat options:

• -c – Display CPU utilization info
• -t – Print timestamp for each report
• -x – Show extended stats like service times and wait counts
• -d – Show detailed stats per disk/partition instead of aggregate totals
• -p – Display stats for specific disk devices

This shows detailed per-device I/O stats for sda every 5 seconds.

iostat helps analyze disk subsystem performance and identify hardware bottlenecks.

44. free – Display Amount Of Free And Used Memory

The free command shows the total, used and free amounts of physical and swap memory on the system. This gives an overview of available memory.

For example:

free -h

Some options for the free command:

• -b – Display output in bytes
• -k – Show output in KB instead of default bytes
• -m – Show output in MB instead of bytes
• -h – Print statistics in human-readable format like GB, MB instead of bytes.

This prints memory statistics in human-readable format (GB, MB, etc). It’s useful when you want a quick overview of memory capacity.

45. df – Report File System Disk Space Usage

The df command displays disk space usage for file systems. It shows the filesystem name, total/used/available space, and capacity.

For example:

df -h

The above command will print the disk utilization in a human-readable format. You can also run it without arguments to get the same data in block sizes.

46. sar – Collect And Report System Activity

The sar tool collects and logs system activity information on CPU, memory, I/O, network, and more over time. This data can be analyzed to identify performance issues.

For example:

sar -u 5 60

This samples CPU usage every 5 seconds for a duration of 60 samples.

sar provides detailed historical system performance data not available in real-time tools.

User Management Commands

When using multi-user systems, you may need commands that help you manage users and groups for access control and permissions. Let’s cover those commands here.

47. useradd – Create A New User

The useradd command creates a new user account and home directory. It sets the new user’s UID, group, shell, and other defaults.

For example:

useradd -m john

Useful useradd options:

• -m – Create the user’s home directory.
• -g – Specify the primary group instead of the default.
• -s – Set the user’s login shell.

The above command will create a new user, “john,” with a generated UID and home folder created at /home/john.

48. usermod – Modify A User Account

The usermod command modifies the settings of an existing user account. This can change the username, home dir, shell, group, expiry date, etc.

For example:

usermod -aG developers john

With this command, you add a user john to an additional group—“developers.” The -a appends to the existing list of groups that the user is added to.

49. userdel – Delete A User Account

The userdel command deletes a user account, home directory, and mail spool.

For example:

userdel -rf john

Helpful userdel options:

• -r – Remove the user’s home directory and mail spool.
• -f – Force deletion even if the user is still logged in.

This forces the removal of user “john,” deleting associated files.

Specifying options like -r and -f with userdel ensures the user account is entirely deleted even if the user is logged in or has active processes.

50. groupadd – Add A Group

The groupadd command creates a new user group. Groups represent teams or roles for permissions purposes.

For example:

groupadd -r sysadmin

Useful groupadd options:

• -r – Create a system group used for core system functions.
• -g – Specify the new group’s GID instead of using next available.

The above command creates a new “sysadmin” group with system privileges. When creating new groups, the -r or -g help set them up correctly.

51. passwd – Update User’s Authentication Tokens

The passwd command sets or updates a user’s authentication password/tokens. This allows changing your login password.

For example:

passwd john

This prompts user “john” to enter a new password interactively. If you’ve lost the password for an account, you may want to login to Linux with sudo or su privileges and change the password using the same method.

Networking Commands

These commands are used for monitoring connections, troubleshooting network issues, routing, DNS lookups, and interface configuration.

52. ping – Send ICMP ECHO_REQUEST To Network Hosts

The ping command verifies connectivity to a remote host by sending ICMP echo request packets and listening for echo responses.

For example:

ping google.com
PING google.com (142.251.42.78): 56 data bytes
64 bytes from 142.251.42.78: icmp_seq=0 ttl=112 time=8.590 ms
64 bytes from 142.251.42.78: icmp_seq=1 ttl=112 time=12.486 ms
64 bytes from 142.251.42.78: icmp_seq=2 ttl=112 time=12.085 ms
64 bytes from 142.251.42.78: icmp_seq=3 ttl=112 time=10.866 ms
--- google.com ping statistics ---
4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 8.590/11.007/12.486/1.518 ms

Useful ping options:

• -c [count] – Limit packets sent.
• -i [interval] – Wait interval seconds between pings.

With the above command, you ping google.com and outputs round-trip stats indicating connectivity and latency. Generally, ping is used to check if a system you’re trying to connect to is alive and connected to the network.

53. ifconfig – Configure Network Interfaces

The ifconfig command displays and configures network interface settings, including IP address, netmask, broadcast, MTU, and hardware MAC address.

For example:

ifconfig
eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
inet 10.0.2.15  netmask 255.255.255.0  broadcast 10.0.2.255
inet6 fe80::a00:27ff:fe1e:ef1d  prefixlen 64  scopeid 0x20<link>
ether 08:00:27:1e:ef:1d  txqueuelen 1000  (Ethernet)
RX packets 23955654  bytes 16426961213 (15.3 GiB)
RX errors 0  dropped 0  overruns 0  frame 0
TX packets 12432322  bytes 8710937057 (8.1 GiB)
TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

Running ifconfig with no other arguments will give you a list of all the network interfaces available for use, along with IP and additional network information. ifconfig can also be used to set addresses, enable/disable interfaces, and change options.

54. netstat – Network Statistics

The netstat command shows you the network connections, routing tables, interface stats, masquerade connections, and multicast memberships.

For example:

netstat -pt tcp

This command will output all the active TCP connections and the processes using them.

55. ss – Socket Statistics

The ss command dumps socket statistical information similar to netstat. It can show open TCP and UDP sockets, send/receive buffer sizes, and more.

For example:

ss -t -a

This prints all open TCP sockets. More efficient than netstat.

56. traceroute – Trace Route To Host

The traceroute command prints the route packets take to a network host, showing each hop along the way and transit times. Useful for network debugging.

For example:

traceroute google.com

This traces the path to reach google.com and outputs each network hop.

57. dig - DNS Lookup

The dig command performs DNS lookups and returns information about DNS records for a domain.

For example:

dig google.com
; <<>> DiG 9.10.6 <<>> google.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 60290
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1
;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1280
;; QUESTION SECTION:
;google.com. IN A
;; ANSWER SECTION:
google.com. 220 IN A 142.251.42.78
;; Query time: 6 msec
;; SERVER: 2405:201:2:e17b::c0a8:1d01#53(2405:201:2:e17b::c0a8:1d01)
;; WHEN: Wed Nov 15 01:36:16 IST 2023
;; MSG SIZE  rcvd: 55

This queries DNS servers for records related to google.com and prints details.

58. nslookup – Query Internet Name Servers Interactively

The nslookup command queries DNS servers interactively to perform name resolution lookups or display DNS records.

It enters an interactive shell, allowing you to manually lookup hostnames, reverse IP addresses, find DNS record types, and more.

For example, some common nslookup usage. Type nslookup on your command line:

nslookup

Next, we’ll set Google’s 8.8.8.8 DNS server for lookups.

> server 8.8.8.8

Now, let’s query the A record of stackoverflow.com to find its IP address.

> set type=A
> stackoverflow.com
Server: 8.8.8.8
Address: 8.8.8.8#53
Non-authoritative answer:
Name: stackoverflow.com
Address: 104.18.32.7
Name: stackoverflow.com
Address: 172.64.155.249

Now, let’s find the MX records for github.com to see its mail servers.

> set type=MX
> github.com
Server: 8.8.8.8
Address: 8.8.8.8#53
Non-authoritative answer:
github.com mail exchanger = 1 aspmx.l.google.com.
github.com mail exchanger = 5 alt1.aspmx.l.google.com.
github.com mail exchanger = 5 alt2.aspmx.l.google.com.
github.com mail exchanger = 10 alt3.aspmx.l.google.com.
github.com mail exchanger = 10 alt4.aspmx.l.google.com.

The interactive queries make nslookup very useful for exploring DNS and troubleshooting name resolution issues.

59. iptables – IPv4 Packet Filtering And NAT

The iptables command allows configuring Linux netfilter firewall rules to filter and process network packets. It sets up policies and rules for how the system will handle different types of inbound and outbound connections and traffic.

For example:

iptables -A INPUT -s 192.168.1.10 -j DROP

The above command will block all input from IP 192.168.1.10.

iptables provides powerful control over the Linux kernel firewall to handle routing, NAT, packet filtering, and other traffic control. It is a critical tool for securing Linux servers.

60. ip – Manage Network Devices And Routing

The ip command allows managing and monitoring various network device related activities like assigning IP addresses, setting up subnets, displaying link details, and configuring routing options.

For example:

ip link show
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN mode DEFAULT group default qlen 1000
link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP mode DEFAULT group default qlen 1000
link/ether 08:00:27:8a:5c:04 brd ff:ff:ff:ff:ff:ff

The above command shows all the network interfaces, their status, and other information.

This command aims to replace ifconfig with more modern Linux network management. ip can control network devices, routing tables, and other network stack settings.

Package Management Commands

Package managers allow easy installation, update and removal of software on Linux distributions. Popular package managers include APT, YUM, DNF, Pacman, and Zypper.

61. apt – Debian/Ubuntu Package Manager

The apt command manages packages on Debian/Ubuntu systems using the APT repository. It allows installing, updating, and removing packages.

For example:

apt update

This command fetches the latest package versions and metadata from the repositories.

apt install nginx

You can install the nginx package from the configured APT repositories using the above command.

apt upgrade

And this command upgrades packages and dependencies to newer versions.

APT makes installing software easy by fetching packages from repositories.

62. pacman – Arch Linux Package Manager

pacman manages packages on Arch Linux from the Arch User Repository. It can install, upgrade, and remove packages.

For example:

pacman -S nmap

This installs the nmap package from the configured repositories.

pacman -Syu

This synchronizes with repositories and upgrades all packages.

pacman keeps Arch Linux up-to-date and allows easy management of packages.

63. dnf – Fedora Package Manager

dnf installs, updates, and removes packages on Fedora Linux distributions using RPM packages. It replaces Yum as the next-gen package manager.

For example:

dnf install util-linux

This installs the util-linux package.

dnf upgrade

This upgrades all installed packages to the latest versions.

dnf makes Fedora package management fast and efficient.

64. yum – Red Hat Package Manager

yum manages packages on RHEL and CentOS Linux distributions using RPM packages. It fetches from Yum repositories to install and update.

For example:

yum update

This updates all installed packages to the latest versions.

yum install httpd

The above command installs the Apache httpd package. yum has been the major package manager for keeping Red Hat distributions updated.

65. zypper – OpenSUSE Package Manager

zypper manages packages on SUSE/openSUSE Linux. It can add repositories, search, install, and upgrade packages.

For example:

zypper refresh

The refresh command for zypper refreshes repository metadata from added repositories.

zypper install python

This installs the Python package from configured repositories. zypper makes the package management experience effortless on SUSE/openSUSE systems.

66. flatpak – Flatpak Application Package Manager

The flatpak command helps you manage Flatpak applications and runtimes. flatpak allows sandboxed desktop application distribution across Linux.

For example:

flatpak install flathub org.libreoffice.LibreOffice

For instance, the above command will install LibreOffice from the Flathub repository.

flatpak run org.libreoffice.LibreOffice

And this one launches the sandboxed LibreOffice Flatpak application. flatpak provides a centralized cross-distro Linux application repository so you’re no longer limited to packages available with a specific distro’s package library.

67. appimage – AppImage Application Package Manager

AppImage packages are self-contained applications that run on most Linux distributions. The appimage command runs existing AppImages.

For example:

chmod +x myapp.AppImage
./myapp.AppImage

This allows running the AppImage binary file directly.

AppImages allow application deployment without system-wide installation. Think of them like small containers that include all the files to enable the app to run without too many external dependencies.

68. snap – Snappy Application Package Manager

The snap command manages snaps—containerized software packages. Snaps auto-update and work across Linux distributions similar to Flatpak.

For example:

snap install vlc

This simple command installs the VLC media player snap.

snap run vlc

Once installed, you can use snap to run packages that are installed via snap by using the above command. Snaps isolate apps from the base system for portability and allow cleaner installs.

System Information Commands

These commands allow you to view details about your Linux system hardware, kernel, distributions, hostname, uptime, and more.

69. uname – Print System Information

The uname command prints detailed information about the Linux system kernel, hardware architecture, hostname, and operating system. This includes version numbers and machine info.

For example:

uname -a
Linux hostname 5.4.0-48-generic x86_64 GNU/Linux

uname is useful for querying these core system details. Some options include:

• -a – Print all available system info
• -r – Print just the kernel release number

The above command printed extended system information, including kernel name/version, hardware architecture, hostname, and OS.

uname -r

This will print only the kernel release number. The uname command shows details about your Linux system’s core components.

70. hostname – Show Or Set The System’s Host Name

The hostname command prints or sets the hostname identifier for your Linux system on the network. With no arguments it displays the current hostname. Passing a name will update the hostname.

For example:

hostname
linuxserver

This prints linuxserver — the configured system hostname.

hostname UbuntuServer

hostnames identify systems on a network. hostname gets or configures the identifying name of your system on the network. The second command helps you change the local hostname to UbuntuServer.

71. uptime – How Long The System Has Been Running

The uptime command shows how long the Linux system has been running since it was last rebooted. It prints the uptime and current time.

Simply run the following command to get your system uptime data:

uptime
23:51:26 up 2 days, 4:12, 1 user, load average: 0.00, 0.01, 0.05

This prints the system uptime showing how long the system has been on since last boot.

72. whoami – Print Active User ID

The whoami command prints the effective username of the current user logged into the system. It displays the privilege level you are operating at.

Type the command in your terminal to get the ID:

whoami
john

This prints the effective username that the current user is logged in and operating as and is useful in scripts or diagnostics to identify what user account actions are being performed as.

73. id – Print Real And Effective User And Group IDs

The id command prints detailed user and group information about the effective IDs and names of the current user. This includes:

• Real user ID and name.
• Effective user ID and name.
• Real group ID and name.
• Effective group ID and name.

To use the id command, simply type: 

id
uid=1000(john) gid=1000(john) groups=1000(john),10(wheel),998(developers)

The id command prints the current user’s real and effective user and group IDs. id displays user and group details useful for determining file access permissions.

74. lscpu – Display CPU Architecture Information

The lscpu command shows detailed CPU architecture information, including:

• Number of CPU cores
• Number of sockets
• Model name
• Cache sizes
• CPU frequency
• Address sizes

To use the lscpu command, simply type: 

lscpu
Architecture:        x86_64
CPU op-mode(s):      32-bit, 64-bit
Byte Order:          Little Endian
CPU(s):              16
On-line CPU(s) list: 0-15

lscpu details the CPU architecture like the number of cores, sockets, model name, caches, and more.

75. lsblk – List Block Devices

The lsblk command lists information about all available block devices, including local disks, partitions, and logical volumes. The output includes device names, labels, sizes, and mount points.

lsblk
NAME    MAJ:MIN RM   SIZE RO TYPE  MOUNTPOINT
sda       8:0    0   1.8T  0 disk
|-sda1    8:1    0   512M  0 part  /boot
|-sda2    8:2    0    16M  0 part
`-sda5    8:5    0   1.8T  0 part
`-lvm1 254:0    0   1.8T  0 lvm   /

lsblk lists all the block devices, including disks, partitions, and logical volumes. Gives an overview of storage devices.

76. lsmod – Show The Status of Modules In The Linux Kernel

The lsmod command prints currently loaded kernel modules like device drivers. This includes networking, storage, and other hardware-related modules being used by the Linux kernel to interface with internal and external devices.

lsmod
Module                  Size  Used by
ipv6                  406206  27
evdev                   17700  0
crct10dif_pclmul       16384  1
crc32_pclmul           16384  0
ghash_clmulni_intel    16384  0
aesni_intel           399871  0
aes_x86_64             20274  1 aesni_intel

As you can see, it lists the currently loaded kernel modules like device drivers. In this case, it shows the use of networking, input, cryptographic and encryption modules.

77. dmesg – Print Or Control The Kernel Ring Buffer

The dmesg command dumps messages from the kernel ring buffer. This includes essential system events recorded by the kernel during start-up and operation.

dmesg | grep -i error
[   12.345678] Error receiving batched read response: -110
[   23.456789] tplink_mdio 0000:03:00.0: Direct firmware load for tplink-mdio/leap_p8_v1_0.bin failed with error -2
[   40.567890] iwlwifi 0000:09:00.0: Direct firmware load for iwlwifi-ty-a0-gf-a0-59.ucode failed with error -2

Grepping for “error” shows issues loading specific firmware. This prints buffered kernel log messages, including system events like start-up, errors, warnings etc.

System Administration Commands

System admin commands help you run programs as other users, shut down or reboot the system, and manage init systems and services.

78. sudo – Execute A Command As Another User

The sudo command allows you to run commands as another user, typically the superuser. After entering the sudo order, it will prompt you for your password to authenticate.

This provides elevated access for tasks like installing packages, editing system files, administering services etc.

For example:

sudo adduser bob
[sudo] password for john:

User ‘bob’ has been added to the system.

This uses sudo to create a new user, ‘bob’. Regular users typically cannot add users without sudo.

79. su – Change User ID Or Become Superuser

The su command allows you to switch to another user account including the superuser. You must provide the target user’s password to authenticate. This gives direct access to run commands in another user’s environment.

For example:

su bob
Password:
bob@linux:~$

After inputting bob’s password, this command switches the current user to the user ‘bob’. The shell prompt will reflect the new user.

80. shutdown – Shutdown Or Restart Linux

The shutdown command schedules a system power off, halt or reboot after a specified timer or immediately. It’s required to reboot or shutdown multi-user Linux systems safely.

For example:

shutdown -r now
Broadcast message from root@linux Fri 2023-01-20 18:12:37 CST:
The system is going down for reboot NOW!

This reboots the system instantly with a warning to users.

81. reboot – Reboot Or Restart System

The reboot command restarts the Linux operating system, logging all users off and safely rebooting the system. It synchronizes disks and brings the system down cleanly before restarting.

For example:

reboot
Restarting system.

This immediately reboots the OS. reboot is a simple alternative to shutdown -r.

82. systemctl – Control The systemd System And Service Manager

The systemctl command allows you to manage systemd services like starting, stopping, restarting, or reloading them. Systemd is the new init system used in most modern Linux distros, replacing SysV init.

For example:

systemctl start apache2
==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units ===
Authentication is required to start 'apache2.service'.
Authenticating as: User Name
Password:
==== AUTHENTICATION COMPLETE ===

This starts the apache2 service after authenticating.

83. service – Run A System V Init Script

The service command runs System V init scripts for controlling services. This allows starting, stopping, restarting, and reloading services managed under traditional SysV init.

For example:

service iptables start
[ ok ] Starting iptables (via systemctl): iptables.service.

The above command starts the iptables firewall service using its SysV init script.

Other Linux Commands To Try

84. mount – Mount or “attach” drives to the system.
85. umount – Umount or “remove” drives from the system.
86. xargs – Builds and executes commands provided through standard input.
87. alias – Create shortcuts for long or complex commands.
88. jobs – List programs currently running jobs in the background.
89. bg – Resume a stopped or paused background process.
90. killall – Terminate processes by program name rather than PID.
91. history – Display previously used commands within the current terminal session.
92. man – Access help manuals for commands right within the terminal.
93. screen – Manage multiple terminal sessions from a single window.
94. ssh – Establish secure encrypted connections to remote servers.
95. tcpdump – Capture network traffic based on specific criteria.
96. watch – Repeat a command at intervals and highlight output differences.
97. tmux – Terminal multiplexer for persistent sessions and splitting.
98. nc – Open TCP or UDP connections for testing and data transfer.
99. nmap – Host discovery, port scanning, and OS fingerprinting.
100. strace – Debug processes by tracing operating system signals and calls.

7 Key Tips For Using Linux Commands

1. Know your shell: Bash, zsh, fish? Different shells have unique features. Pick the one that suits your needs the best.
2. Master the core utils: ls, cat, grep, sed, awk, etc form the core of a Linux toolkit.
3. Stick with pipelines: Avoid excessive uses of temporary files. Pipe programs together cleverly.
4. Verify before overwriting: Always double check before overwriting files with > and >>.
5. Track your workflows: Document complex commands and workflows to reuse or share later.
6. Make your own tools: Write simple shell scripts and aliases for frequent tasks.
7. Start without sudo: Use a standard user account initially to understand permissions.

And remember to keep testing out new commands over virtual machines or VPS servers so they become second nature to you before you start using them on production servers.

Better Linux Hosting With DreamHost

After you master the essential Linux commands, you also need a hosting and server provider that gives you full control to take advantage of Linux’s power and flexibility.

That’s where DreamHost shines.

DreamHost’s optimized Linux infrastructure is perfect for running your apps, sites, and services:

• Fast web hosting on modern Linux servers.
• SSH shell access for command line control.
• Customizable PHP versions including PHP 8.0.
• Apache or NGINX web servers.
• Managed MySQL, PostgreSQL, Redis databases.
• 1-click installs of apps like WordPress and Drupal.
• SSD-accelerated NVMe storage for speed.
• Free Let’s Encrypt SSL auto-renewal.

DreamHost’s experts can help you get the most out of the Linux platform. Our servers are meticulously configured for security, performance, and reliability.

Launch your next project on a Linux hosting platform you can trust. Get started with robust, scalable hosting at DreamHost.com.

The post Top 100 Linux Commands (You Need To Know) appeared first on Website Guides, Tips & Knowledge.