DEV Community: caelinsutch

An Introduction to the Top Project Management Methodologies

caelinsutch — Tue, 15 Sep 2020 23:04:18 +0000

Every project manager knows that there is never such a thing as a “one size fits all” methodology for leading teams. However, picking the right method is crucial to effectively getting the job done right.

According to the Project Management Institute (PMI), a methodology is defined as a system of practices, techniques, procedures, and rules used by those who work in a discipline. Lean practices, Kanban, and Six Sigma are project management methodologies examples.

These methodologies are processes that help project managers effectively keep track of deliverables, monitor team performance, and manage issues that arise during the development process.

There are many project management methodologies, each with their unique strengths and weaknesses. You should select a methodology based on the project you’re working on and your team dynamic.

As a reminder, there’s no such thing as the “right” software management methodology, just the one that works best for your team. These are also not hard set rules, adapt them to fit your team and workflow best, project management tools are about making your team more productive, not boxing them into a specific process.

Agile

Agile is the most popular project management workflow right now. Agile is best suited for projects that are incremental and iterative. Demands and solutions aren’t necessarily set out in stone, they’re constantly adapting based on internal or external feedback.

Agile was originally created for software development teams to ship iterative software and avoid large releases or deployments. Agile is made up of four fundamental values and twelve principles.

Values

Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan # Principles
Customer satisfaction through early and continuous software delivery
Accommodate changing requirements throughout the development process
Frequent delivery of working software
Collaboration between the business stakeholders and developers throughout the project
Support, trust, and motivate the people involved
Enable face-to-face interactions
Working software is the primary measure of progress
Agile processes to support a consistent development pace
Attention to technical detail and design enhances agility
Simplicity
Self-organizing teams encourage great architectures, requirements, and designs
Regular reflections on how to become more effective

Agile uses six main deliverables to track progress and create the product which are the product vision statement, product roadmap, product backlog, release plan, Sprint backlog, and increment. With these features, Agile places a focus on collaboration, flexibility, continuous improvement, and high quality results.

Best Suited For: Projects that require flexibility and have a high level of uncertainty. For example: a new project that’s being developed by the team.

As a side note, Agile itself can be broken down into several sub methodologies, such as Kanban or Scrum.

Scrum

Scrum is a subset of Agile that is comprised of five values: commitment, courage, focus, openness, and respect. Its goal is to develop, deliver, and sustain complex products through collaboration, accountability, and iterative progress. Scrum focuses on timed results in “sprint” events and uses several metrics and charts to track team progress over time.

Scrum has several team roles:

Product Owner: Product expert that is the voice of the customer and communicates stakeholder information above.
Development Team: Developers, programmers, designers, and other professionals.
Scrum Master: Organized servant-leader who ensures Scrum is executed properly.

Scrum also relies on several key events that differentiate it from other Agile methods:

Sprint: Iterative time segments in which a set goal is accomplished. These time frames are short (under one month) and consistent.
Sprint Planning: A time when the scrum team gets together to plan the sprint
Daily Scrum: 15 minute daily meetings to discuss previous achievements and expectations for the day/
Sprint Review: Informal meeting to review results of the last sprint and discuss feedback
Sprint Retrospective: A meeting where the scrum team discusses the proceedings of the last sprint and establishes improvements for the next sprint.
Product Backlog: A place where all requirements are listed in order of priority.
Sprint backlog: A list of all tasks to be completed in coming sprints.

Best Suited For: Projects that consist of small teams who need a flexible approach on a time schedule to deliver a product.

Kanban

Kanban is another popular agile framework that focuses on early releases with collaborative and self-managing teams. Developed at Toyota factories, it’s a visual method that relies on on painting a picture of the development process to easily identify bottlenecks in the process.

Kanban consists of 6 general practices:

Visualization
Limiting work in progress
Flow management
Making policies explicit
Using feedback loops
Collaborative or experimental evolution

The Kanban process is extremely visible, consisting of three main components:

Kanban Boards: Visual representations of the development process. These can be physical or digital.
Kanban Cards: Each card depicts a task or assignment for the team.
Kanban Swimlanes: Horizontally flowing lanes that allow you to categorize cards into groups (such as Todo, Doing, or Done) Best Suited For: Smaller teams who need a flexible approach to delivering a product or service.

Lean

Lean methodology promotes maximizing customer value while reducing waste. It stems from the Japanese manufacturing industry, its values are based on the assumption that “as waste is eliminated, quality improves while the production time and cost are reduced.”

It identifies three types of waste: Muda, Mura, and Muri, also known as the three M’s.

Muda

Muda is about getting rid of waste that refers to an activity or process that doesn’t add value. The seven original wastes are:

Transport: The movement of product between operations and locations.
Inventory: The work in progress (WIP) and stocks of finished goods and raw materials that a company holds.
Motion: The physical movement of a person or machine whilst conducting an operation.
Waiting: The act of waiting for a machine to finish, for a product to arrive, or any other cause.
Overproduction: Over producing product beyond what the customer has ordered.
Over-processing: Conducting operations beyond those that customer requires.
Defects: Product rejects and reworks within your processes.

Mura

Mura is about reducing waste in the workflow process at the scheduling and operations phase. For example, when publishing a magazine, if an editor spends too much time editing an article, it means that the design team will have less time to create the spread before the publishing deadline comes. Therefore, you would reduce the editing time and ensure every department’s timeframe spent on the article is the same.

Muri

Muri is about eliminating or reducing mental stress on workers. It refers to business managers and employers putting too much stress on employees due to disorganization and lack of tools.

Instead of implementing new processes, Lean is about adhering to structured principles. The five main principles are; specify value by the customer, identify steps in the value stream, make product flow continuously, allow customers pull value from the next upstream activity, and manage towards removing unnecessary steps.

Best Suited For: Business that want to transform their whole business process with a structured set of principles.

Waterfall

One of the more traditional project management methodologies, waterfall is a linear and sequential project management process. Originating in manufacturing and engineering firms, waterfall sacrifices flexibility for stability in later stages of development.

The methodology consists of six stages:

System and software requirements
Analysis
Design
Coding
Testing
Operations

Waterfall stresses the importance of documentation in each step. The idea is that any worker should be able to walk in at any step of the progress and instantly be integrated into the work process.

Best Suited For: Larger projects that require more structure due to cost or manufacturing constraints or have little risks involved with the development process.

Six Sigma

Introduced by Motorola engineers, Six Sigma is a project management technique that seeks to reduce errors by identifying what isn’t working and removing it from the process.

It uses empirical quality management methods to ensure minimal errors are encountered, and the expertise of area specialists.

There are two major methodologies of Six Sigma carried out by Six Sigma Green Belts and Six Sigma Black Belts, and are supervised by Six Sigma Master Black Belts. They are DMAIC which is used for improving business processes, and DMADV which is more for creating new processes, products or services. The letters stand for:

Define the problem and the project goals
Measure in detail the various aspects of the current process
Analyze data to, among other things, find the root defects in a process
Improve the process
Control how the process is done in the future

Define the project goals
Measure critical components of the process and the product capabilities
Analyze the data and develop various designs for the process, eventually picking the best one
Design and test details of the process
Verify the design by running simulations and a pilot program, and then handing over the process to the client

Best Suited For: Large companies that want to use data and statistics to improve quality and efficiency.

PMI/PMBOK

PMI stands for the Project Management Institute which is a not-for-profit membership association, project management certification, and standards organization. The PMI produces the PMBOK, which is a guide that details a set of standards that characterize project management. As a side note, this isn’t really a methanols, but rather a set of guidelines that helps you pick and execute PM methodologies better.

PMBOK stands for the Project Management Body of Knowledge and is a set of standard terminology and guidelines for project management. It states that there are five process groups that are prevalent in almost every project. They are;

Initiating: Defining the start of a new project or new phase of an existing project.
Planning: Where the scope of the project, objectives, and how the objectives will be achieved.
Executing: Actually doing the work defined in the project management plan.
Monitoring and Controlling: When you need to track, review, and regulate the progress and performance.
Closing: Concluding all activities across all Process Groups to formally close the project or phrase.

The guide also includes best practices, conventions, and techniques that are “industry standard”. They regularly update their guide to ensure it’s using best practices set by the industry.

Best suited for: Because it’s more of a reference guide than an actual project management methodology, you can’t implement PMI/PMBOK to a project. However, it can be used for when you want to weigh in on the best practices for your project.

Conclusion

Hopefully, one of the project management methods described above will fit your team. This is a simplified guide to help you take the first steps in selecting a project management method, not a comprehensive guide of each one. Remember that none of these may work too, and that’s perfectly fine. Project management isn’t about implementing a cool buzz-wordy method, but instead of implementing systems and guidelines that make your team more productive.

Keep in Touch

There's a lot of content out there, I appreciate you reading mine. I'm a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here

I’d also love to connect with you on Linkedin or Twitter!

15 Things I Wished I Learned Earlier as a Software Developer

caelinsutch — Sun, 06 Sep 2020 16:26:06 +0000

Software development is a constant learning experience, but there are certain habits and tips that I wished I internalized earlier. Hopefully, these will be of help to any learning software developer to help you save time, frustration, and effort in the long run.

Habits are not a finish line to be crossed, they are a lifestyle to be lived

James Clear

Lessons

You’ll never know everything about anything.

Programming, algorithms, frameworks, libraries, they’re all too vast for any one person to understand the whole system. Swallow your ego and accept that you don’t know most of the things out there.

Learn how to use Git, properly.

The worst programmers are the ones who don’t actually know how to use git and don’t ask for help, messing up the git tree and causing hours of unnecessary work. Don’t be that guy, learn git.

Learn shortcuts in your IDE.

You’ll be surprised how much time you can save if you’re effective in your IDE. That means knowing where all the menu items are and shortcuts to the most common ones to spend less time having to click around and more time coding.

Stay physically active.

Coding is a very sedentary activity. Staying physically active, whether walking around for half an hour a day to going to the gym will do wonders for your productivity.

Plan before coding.

I see too many experienced developers rush head first into programming without doing the proper preparation to ensure that they aren’t wasting time. Yes, I understand that we’re software developers because we love coding, but some nice flowcharts, feature requirements, and other preparations can be done that’ll make the programming that much easier and faster.

For the love of God use a Linter

Style consistency is a big deal in any software application where you’re working with others. Using a linter is a great way to ensure that you write code that follows the latest and greatest standards.

Contribute to Open Source

I’ve written an entire article on why contributing to open source is good, but simply put it gets your name out there, gives you experience working on large projects, and hopefully makes you feel good about giving back to the community.

Stop binge watching tutorials and start coding

I’ve fallen into this trap many times myself, of constantly watching tutorial after tutorial but never taking the step of creating something. That chasm is one that has to be jumped, and once jumped, will make you feel so much better.

If you have time, blog!

Blogging is a great way to practice technical writing, get your name out there, and make people happy with great articles!

Create your developer portfolio

If you’re trying to get hired, or show off your skills to friends, a portfolio is essential. This is a fun weekend project that will make your life so much easier when trying to show others your developer talents.

Try to learn something new everyday!

Don’t ignore the power of compound habits. Think of how much more knowledge you’ll have in a year if you commit right now to learning something new daily!

Don’t take code critique personally

This is one that I struggle with myself, but when someone is criticizing your code, it’s not a personal attack. Have the matureness to step away and view what you’ve created from an unbiased view. It’ll help you write better and faster code as a developer.

Don’t compare yourself to those around you

Imposter syndrome is a big problem in the software developer community. Don’t make it worse by comparing your skills and talents to others. Everyone has unique experiences. Recognize that your path has led you to where you are today, and appreciate that!

Don’t be afraid to say No

Don’t overcommit yourself and be firm in your dedication to a singular focus. Don’t be afraid to turn down offers to work more, or on different projects, and prioritize yourself above your work.

Learn basic Devops

Devops, though often considered boring, is critical to building any kind of application. Take some time and learn the basics of how devops works so you can leverage it effectively for your next project.

Conclusion

Commit to learning these tips and you’ll see your value and productivity as a software developer drastically increase.

Keep in Touch

Feel free to reach out and connect with me on Linkedin or Twitter.

Some of the best shortcuts when writing Javascript and Typescript

caelinsutch — Fri, 04 Sep 2020 07:51:24 +0000

Everyone knows that Javascript and Typescript have several weird and hidden features that allow you to shorten the amount of code you write. To preface this article, I’d like to impose upon you an important tidbit of information, short and efficient code doesn’t always equal good code. As always, you should be prioritizing readability over implementing a bunch of fancy features.

That being said, these features can help you save tons of space and used properly are easily understandable to anyone else who’s reading your code. Let’s go over some of these shorthand features so that you can use and understand them in your code.

1. The Ternary Operator

This is probably the most well known shorthand Javascript function, the shortened “if else” statement. By using this operator, you can remove a lot of the if else boilerplate and turn four lines into one!

let v = true;

// Traditional approach
if (v) {
    console.log('True');
} else {
    console.log('False');
}

// Ternary Operator
v ? console.log('True') : console.log('False');

The structure is as follows: <conditional expression> ? <true case> : <false case?. Pretty simple, right? This is a great way to do one line if else operations and is especially useful when combined with other shorthand operators.

2. Typescript’s Constructor Shorthand

This one is particularly for Typescript (Sorry vanilla JS users), but is a great feature when building classes.

Normally in a class you have to list all your class variables then reassign them in your constructor, which takes tons of lines of code. But if your class is relatively simple (you’re just assigning parameters to private variables), Typescript has a great way to cut the amount of code you write.

// Normal way
class Location {
    private _latitude: string;
    private _longitude: string;

    constructor(latitude: string, longitude: string) {
        this._latitude = latitude;
        this._longitude = longitude;
    }
}

// Shorthand in TypeScript
class Location {
    constructor(
        private _latitude: string,
        private _longitude: string
    ) {}
}

On larger classes with tons of properties, this can be a real life saver!

3. Nullish Operator

Often misunderstood, the nullish operator lets you easily evaluate an expression and check if it’s null, and return a default value if it is null.

function nullish(value1, value2) {
    // If value1 is null returns 'default'
    let v1 = value1 ?? 'default';
    return v1 + value2;
}

myFn("this has no") //returns "this has no default"
myFn("this has no", 0) //returns "this has no 0"

Actually, technically it checks for null or undefined, but the name is close enough. This is a great way to check if values exist or not.

4. Object Property Assignment

ES6 simplified the process of assigning values to objects. If values are assigned to variables named exactly as the object’s properties, you won’t have to repeat the name!

let name: string = "Caelin";
let age: number = 18;

interface User {
    name: string;
    age: number;
}

// Old way (manual assignment)
let user1: User = {
    name: name,
    age: age,
}

// New way!
let user2: User = {
    name,
    age,
}

As shown above, the new way is considerably simpler and DRYer than the old way!

5. Arrow/Lambda Functions

If you’ve seen a lot of these operators: => thrown around everywhere, they’re arrow functions. These allow you to save a return statement since any lamda function will have a default return.

You’ll seen them often used in array operators as such:

let arr = [1, 2, 3, 4, 5];

// Long way
arr.map(function (n) {
    return n*2;
})

// Short way
arr.map(n => n*2);

As you can see, it makes the code considerably more readable and shorter.

6.. Default Parameter Values

ES6 now allows you to specify default parameter values on functions! Before, you’d have to rely on OR’s lazy evaluation, which worked but was a suboptimal solution.

// Assigns 'c' a default value
function defaultParams(a, b, c="c") {
    return a + b + c;
}

Fun tip, if you want to make a required parameter, do the following:

const requiredParam = _ => throw new Error('Required Parameter!');

// Create a default parameter d
function defaultParamRequired(a, b, c="c", d=requiredParam()) {
    // Logic
}

Now, if this function is ran without passing a default parameter d in, it’ll throw an error! Pretty cool trick right?

7. Destructuring and Spread Operators

I literally wrote a whole article on spread operators, but spread and destructing operations are great ways to take advantage of object and arrays!

Destructuring

It’s quite common to want to access an objets parameters individually (to modify or read them) without accessing the original object. Normally, this would require a line for each object parameter, which can get quite long on larger objects. Object destructuring allows us to cut that into one line!

const user = {
    name: 'Caelin',
    age: 18,
}

// Normal method
const name = user.name;
const age = user.age;

// Destructuring method
const {name, age} = user;

This syntax is great for object parameters and import statements to reduce the amount of lines when dealing with complex objects.

Spreading

Spread operators make it easier to combine objects and arrays by expanding them.


const arr1 = [1,2,3,4]
const arr2 = [5,6,7]

const finalArr = [...arr1, ...arr2] // [1,2,3,4,5,6,7]

const partialObj1 = {
  name: "fernando"
}
const partialObj2 = {
  age:37
}

const fullObj = { ...partialObj1, ...partialObj2 } // {name: "fernando", age: 37}

Conclusion

These are just a few of the many Javascript and Typescript shortcuts that can save you time and make your code cleaner. Remember, this is not simply about making code more efficient or reducing lines, it’s about making code that’s cleaner and easier to read for the next developer.

Did I miss something? Be sure to comment it down below!

Keep in Touch

Feel free to reach out and connect with me on Linkedin or Twitter.

Do These Four Things Habitually to Become a Better Programmer

caelinsutch — Sat, 15 Aug 2020 00:29:59 +0000

Becoming a better programmer is far more than learning the next framework, or memorizing more algorithms. It’s all the small behaviors that make up your daily day that may not obviously make your work better, but in the long term build healthy habits that not only help you, but the rest of the developers on your team.

Let’s talk about four things that you should habitually be doing to become a better developer.

Clean up Your Code

Although it may be hard to articulate in words, every developer knows what stinky code smells like. It’s the type of code that you look at, and it makes you internally cringe.

The small stuff like variable names, function names, complicated syntax to do a simple functions, can all build up a stink and make code impossible to work with.

Thankfully, this is an easy problem to fix. When I encounter bad code, I change one small thing at a time, testing (which we’ll go into) after each change, and continuing that process until the code is all nice and clean.

This is a practice that never really stops. As a software developer, you’ll constantly be learning new things. Practices that were considered “Best Practice” 5 years ago aren’t today. Code does rot over time, so going back through stuff and fixing code as you come across with will help maintain a code base for a long time.

Document, Document, Document

If working with a team of developers it’s always a good practice to use JSDoc style documentation on all your code.

For example, lets look at this function header in TypeScript:

/**
* Creates a new dog for the kennel.
* @param eyeColor {EyeColor} - The color of the dogs eyes
* @param dogLength {number} - The length of the dog in meters. Accepts a maximum value of 3
* @param dogBreed {DogBreed} - The breed of the dog being created. 
* @returns Dog - the newly created dog :)
**/
function createNewDog(eyeColor: EyeColor, dogLength: number, dogBreed: DogBreed): Dog;

You’ll notice that the function name and all parameter names make sense. You probably wouldn’t event need the JSDocs because they’re named appropriately. The JSDocs are clear and use the proper annotations. This code is something that any developer can look at and almost instantly understand. Even better, those JSDocs are helpful for autocomplete features in most IDE’s (if this was JS or another language), making it easier for other developers to use your code.

All Hail Simple Code

Yes, you may be able to incorporate all these fancy functions to accomplish a task with less lines of code, but it will be completely unreadable for other devs. In JavaScript, ES6 array functions, such as .map, .filter, and others can make it really easy to create an awesome one liner that fulfills your needs. However, unless it’s easy for any other dev to look at and understand, don’t write it.

Over-engineering code, or adding fancy extra features for no reason, adds complexity for no good reason. Over-engineering code can lead to code that’s so generic, it’s disconnected from the task that it’s actually made for. This is all that extra abstracted functionality that’s developed just in case someone wants to create a dog with four eyes, or 8 legs, or a 10 meter long dog. All those cases are generally ridiculous (unless your code is in some sort of horror game) and shouldn’t be implemented.

Properly Architect Your Code

This is the number one problem I see with newbie devs. They don’t take the proper time to plan out code, and instead dive right into writing code, which can lead to more mistakes, over engineering, and unfocused development.

Of course, as a dev I understand the urge to just start developing, because that’s why we program, but planning is still important.

Taking the time to make a nice flowchart, requirements list, and other planning documentation doesn’t just help you figure out what you’re writing, but also helps future devs understand the thought process behind the code.

Ask yourself:

How is this code structured?
Why is this code developed?
How will I know when this code is done?

If you can provide well thought out answers to all these questions, you know that you’ve planned properly for your code.

Conclusion

Practicing doing the four above things every day will lead to drastically better code over time. Equipped with these tools, your future self will love you and your teammates will love you.

Keep in Touch

There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running companies. You can signup for my newsletter here

Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.

Top 10 React Component Libraries

caelinsutch — Sun, 02 Aug 2020 18:01:05 +0000

React is one of the most popular frontend frameworks for developers to create Single Page Applications (SPAs). The React community has developed a multitude of component libraries to help accelerate development.

In this post, we’ll take a look at some of the best React component libraries around in 2020.

Photo by Ferenc Almasi on Unsplash

Ant Design

Ant Design is a set of enterprise-class UI designed for web applications.

It provides over 50 customizable components that can be used to craft beautiful applications, such as cards, buttons, various layout helpers, navbars, and more.

Ant Design recently beat material UI to become the most popular React UI library on GitHub with over 56k stars. It’s used in tons of applications, spanning a multitude of industries, so it’s well supported.

Every aspect of Ant Design is completely thought-out down to the smallest detail. It’s built based on a design system created by the makers.

It is specially created for internal desktop applications and is based on several principles and unitary specifications. With Ant Design, you can easily create a consistent “look” across all components of your application.

There’s also a mobile version of Ant Design for React Native, you can read about it here.

Material UI

Material UI is a group of components designed around the Google Material spec. With all the necessary components to create a killer React application, Material UI provides an easy way to integrate the Google Material style system into your application.

MaterialUI has an active set of maintainers and a strong community behind it. It currently has over 54k stars on GitHub, making it one of the most popular component libraries out there.

Even better, the components are completely independent of each other and only inject the styles they need to display, which is better for performance.

If you’re looking to build a lightweight, consistent, and clean interface quickly, Material UI is a good choice for you.

You can learn more about Material UI here.

React Bootstrap

You’re probably familiar with the popular Bootstrap library. React Bootstrap is a remake of Bootstrap for React, replacing styles with components.

If you’re coming from a web dev background, you’ll probably feel comfortable working with React Bootstrap due to familiarity.

It has gained popularity over the years and now has over 18k stars on GitHub and over 500k downloads on NPM weekly.

It’s by far the best way to get started with Bootstrap in React.

Blueprint UI

Blueprint UI is another React component library. It’s optimized for building data dense applications that need to be supported on all platforms. It’s not a mobile first toolkit, but rather designed for desktop applications.

With over 16k stars on Github, it’s well supported and very popular with developers. If your application needs to display large amounts of data, BlueprintUI is probably a good fit.

To get an overview of how it works and the components it offers, you can check it out on CodeSandbox here.

Semantic UI React

Semantic UI React is the official React integration for Semantic UI. It’s jQuery free and uses a declarative API approach that makes it cleaner and simpler to use.

Semantic UI React has 11.5k stars on Github, so while not as popular as some of the other frameworks, is well supported by Semantic.

If you’re looking to build apps with React and want to ensure 100 percent Semantic-friendly code, you should definitely check it out.

Rebass

Rebass is a very lightweight library to create theme-able components based on the Styled System library.

Rebass is a primitive component library, meaning it’s default stylistically unopinionated (you inject your own style), and focuses on only primitive components (such as buttons, layout components, etc.)

If you don’t want to rely completely on component libraries and intend to extend an already existing one during development, you should definitely check out Rebass.

It’s rapidly gaining popularity. The project currently has over 6k stars on GitHub.

Fluent UI

If you’ve used Microsoft products, you’ve used Fluent UI. Fluent UI is a set of UI components built from Microsofts design language.

The UI library offers compatibility with Desktop, Android, and iOS devices and is used by sites such as Office 365, OneNote, Azure DevOps, and other Microsoft products.

It’s packed with a lot of prebuilt components that makes it easy to prototype applications extremely quickly.

The library has 9k stars on Github and is well supported by Microsoft.

Evergreen

Evergreen UI is a component library designed by Segment. It’s an open sourced project that has components for all essential web functionality.

One of the best things is they explain all design decisions.

Evergreen’s design is light, simple, and intuitive. You can use it to get started building elegant user interfaces pretty quickly.

Evergreen has almost 10k stars on Github.

Chakra UI

Chakra UI is a simple and modular component library with all the necessary web building blocks.

It’s designed with accessibility specs in mind, complying with WAI-ARIA.

All the components are easily theme-able, as all values can be referenced throughout the application.

It’s also very easy to compose new components by putting all the building blocks together.

It has almost 9k stars on Github, and is rapidly gaining popularity within the React developer community.

Grommet

Grommet is a React framework that provides accessible, modular, responsive, and theme-able components in a tidy package.

Grommet provides support for W3c’s WCAG 2.1 spec out of the box, so it’s already accessible for everyone.

Grommet has powerful theming tools that make it easy to customize any aspect of each component.

Grommet is used by a multitude of large companies, such as Netflix, Github, and Uber, and has almost 7k stars on Github.

Conclusion

Choosing a React component library is no easy task as there’s no one size fits all solution. I recommend carefully looking at your needs, preferred developer style, and looking at each framework to see which one appeals the most to you.

In the end, the best framework is the one that works for you.

Keep in Touch

Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.

The Best and Essential Frontend Tools

caelinsutch — Sun, 02 Aug 2020 00:22:31 +0000

The internet is chock full of various programming tools to help the modern developer make things faster and with a higher quality than ever before. If you’ve come across this article, you probably already know quite a lot about the programming fundamentals, like HTML, CSS, and JS, but let’s talk about some of the tools that make coding a true joy.

Getting to know the tools of the trade can make your job easier and keep you on top of the skills you need to remain relevant.

In this article, we’ll break down some of the tools that are essential to success as a developer, along with a recommendation of my favorite tools, all well tested and proven. Even better, all of these tools are completely free. Excited? Let’s get started!

1. A Solid Code Editor

A code editor serves as the centerpiece of a developers life. When you’re spending all day in your code editor, you want to make sure that it’s the best one available, configured perfectly for your needs.

Of course, all editors provide the basic functionality needed to write, edit, and save code, but the good ones go above and beyond with features like autocomplete, visual themes, and extensive plugin libraries.

Atom IDE

Best Free Option

My favorite free editor is Atom, which is supported by Github. Atom is an open sourced editor that is chocked full of features and has a healthy plugin library to add even more features.

Atom is also fully customizable with CSS, so you can fiddle and customize the theme to your liking. Quite a few ready-to-go themes are available as well.

Since it was created by the team at Github, it also has fantastic Git and Github support, making using these tools even easier!

Jetbrain’s Webstorm

Best Paid Option

If you can afford it (or you’re a student), the Jetbrains line of code IDE’s are fantastic. WebStorm is their web developer IDE, and features like IntelliSense (autocomplete), huge plugin library, amazing support, and insane functionality make it my favorite IDE to use.

Plus, if you code backend in Java, Python, Go, or any other language Jetbrains probably has an IDE that supports that language that is similar to WebStorm, meaning you only have to learn one IDE!

Git

2. Version Control

Version control is without a doubt critical if you work on a team, but even if you’re working on your own, using version control is a great way to stay organized and keep your code history in case something breaks (as it often does).

By far the most popular Version Control System (VCS), and my recommendation, is Git. Git is a distributed version control system, which you probably know from the popular online code repository management system Github.

Git boasts a number of features, such as a powerful CLI, “safe” history keeping, and easy-to-use functionality.

HTML5 Boilerplate

3. Frontend Boilerplate

While each site you create as a front-end developer is unique, you don’t have to do all your coding from scratch. Boilerplates are code templates you can use to kick off your development process. These sets of HTML, CSS, and JavaScript files help you spend less time doing the routine work of setting up your site files while feeling confident that your site follows modern best practices.

I use HTML5 Boilerplate, a powerful boilerplate that comes with analytics, icons, modernizr, normalize.css, and a ton of other goodies that make it really easy to create a new website.

HTML5 Boilerplate was created by hundreds of developers from around the world, and is always kept up to date with the latest best practices.

4. Frontend Assets

Now that you have your awesome boilerplate site setup, you need some assets to make that site look stunning. By selecting nice icons, fonts, and other design assets, you can make a boring site look incredible.

While there are literally thousands of front-end assets available, there’s a few I particularly recommend. When looking at frontend assets, you want a high degree of customizability and ease of use.

Google Fonts

Any good design starts with a good font, and Google Font has you covered. With hundreds of free fonts available, you’ll always be covered regardless of what style your website is.

Font Awesome

Now you need some killer icons. Look no further than one of the biggest icon libraries around, Font Awesome. They use SVG supported icons, meaning they look great at any resolution, and offer a high degree of customizability for all their fonts.

Undraw

If you’re looking for some beautiful illustrations for your website, UnDraw has you covered, with hundreds of customizable and free website SVG illustrations.

And finally, you probably want some awesome photos. For that, I always turn to Unsplash, which has tons of royalty free photos that you can use.

Chrome Dev Tools

5. Developer Tools

As you build your site, you’ll want to make edits “live” in the browser to either the HTML or CSS, as well as see what code is affecting which parts of the site.

Dev tools are a function built into modern web browsers that let you see the code behind each section of a site right in the browser with just a few clicks. (Hint: dev tools also let you peek at the code behind any website so they’re also a great way to learn a thing or two from other developers.)

Chrome is the current industry leader in web browsers, so I recommend their developer tools for their simplicity and ease-of-use. Plus, they have Lighthouse built in, making it easier to analyze your site performence.

Vercel

6. Deployment Options

Now that you want to deploy your site, you’ll need a provider to host it to the web. Whether you’re building a static site or a complex web application in React or Angular, I recommend using Vercel to make it really easy to host your site. They integrate easily into the Github workflow, and support every popular framework.

Even better, you can host your website completely free through their platform! Another great choice is Netlify, who I also use for some projects.

Conclusion

Hopefully with all these tools, your developer experience will become way better and easier than before. Todays technology and services makes it easier than ever to build awesome websites. I’m looking forward to seeing the amazing things you’ll be creating!

Keep in Touch

Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.

10 Habits to Improve your Life

caelinsutch — Sun, 02 Aug 2020 00:21:46 +0000

It’s common knowledge that habits can be incredibly powerful to changing your life. Entire books have been written about it, such as Atomic Habits by James Clear.

The fact is, the discipline, focus, and consistency that comes with habits can drastically change your life for the better if implemented right. There are tons of healthy habits to adopt, but it’s best to focus on building one habit at a time, and slowly building up your inventory of habits. Before you know it, you’ll be crushing it every single day!

Photo by Matt Ragland on Unsplash

Lets take a look at some of the most essential habits to create:

Create a Morning Ritual

Photo by Jake Givens on Unsplash

Research shows that your morning attitude affects your entire day! If you can establish a good morning routine that puts you in an energized, happy, and focused mood, that feeling will rub off on your entire day.

Believe it or not, your feelings rub off on your entire life. You can’t ignore or fight your feelings, so make those feelings good ones!

From the Antidote: Happiness for People Who Can’t Stand Positive Thinking:

…when experimental subjects are told of an unhappy event, but then instructed to try not to feel sad about it, they end up feeling worse than people who are informed of the event, but given no instructions about how to feel. In another study, when patients who were suffering from panic disorders listened to relaxation tapes, their hearts beat faster than patients who listened to audiobooks with no explicitly ‘relaxing’ content. Bereaved people who make the most effort to avoid feeling grief, research suggests, take the longest to recover from their loss.

A good morning ritual can make your feelings right and leave you feeling happy, and a happy life means a more productive workday.

There is of course lots of research on what good morning rituals are, and that is out of the scope of this article, but activities like running, a hearty breakfast, meditation, or morning reading can do wonders for your mood.

Having a structured start to your day can also help you eliminate stress, anxiety, and mental fatigue.

Read Everyday

A reader lives a thousand lives before he dies … the man who never reads only lives one

- George RR Martin

Photo by Jaredd Craig on Unsplash

Reading books is a great way to gain more knowledge, increase creativity, and relax. Immersion reading can also increase your productivity and have a calming affect similar to meditation.

Whether it’s fiction or nonfiction, taking the time to read a little everyday (I generally read before I got to bed) has a powerful and cumulative affect.

I generally enjoy nonfiction books, because they are pertinent to what I’m working on, struggling with, and give actionable advice to overcome challenges I face either personally or professionally.

Looking for a good list of books to start off with? I recommend Abe’s list of Nonfiction.

Focus on Single Tasking

The fastest and most effective way to do anything is to put your whole heart and mind behind a singular focus.

The human brain isn’t built to multi task, you end up simply switching between tasks very quickly, which can break the focused and concentrated work that is super effective.

While there’s no harm in occasionally multi tasking, constantly switching between tasks can harm your productivity.

Instead of trying to do multiple things at once, create al list of everything you have to do today and start tackling each one individually. You’ll probably find that you can complete the items faster and with higher quality than if you tried to do multiple things at once.

Make Time to Exercise

Photo by Fitsum Admasu on Unsplash

Whether it’s a walk, jog, or full gym workout, taking the time for physical exercise has been scientifically proven to pump up creativity and enhance your cognitive skills. If you’re still not convinced, exercise can also boost your mood by increasing the production of Endorphins, the chemicals that control your mood.

It’ll also increase your energy to make you feel more awake at work. Being on top of your workout game has a multitude of effects from the physical affects of decreasing risk for a variety of diseases to improving your mental health.

Getting in the habit of working out on a regular schedule can have dramatic affects!

Go on Social Media Less

Post Less, Do More, Compare Less, Reflect More, Flex Less, Accomplish More

While I’m not recommending a complete break from social media (as there is a lot of value that can be gained from it), I do recommend actively thinking about what you’re spending the time looking at and how much time you’re on social media daily.

Studies have shown that social media use is directly related to depression, and can also increase the clutter and stress in your mind. The average person spends at least 2 hours a day on social media. If you cut out one of those hours, you’ll have an extra 7 hours per week!

Making the commitment to limit your social media use every day will free up time for more gratifying and productive actives, like meditation, reflection, and reconnecting with the people and world around you.

Tend to Your Spiritual Needs

Photo by Greg Rakozy on Unsplash

While this may be controversial, I believe that humans are inherently spiritual beings. Whether you believe in a religion or not, taking time to reflect on the bigger questions in life that extend beyond our physical reality can actually increase your mental health. Religious or spiritual beliefs are proven to help people cope with stressful life circumstances.

Conclusion

Focusing on establishing these baseline habits will help your life become happier and more productive. I recommend focusing on one at a time, and committing yourself fully to that habit.

I usually write down a habit that I’m trying to implement every two weeks, and try to commit to it every single day. A habit tracker, whether physically or digitally, can help you remain focused and committed.

If you can nail down each of these habits, I guarantee you you’ll find yourself more satisfied with the life you’re living.

Keep in Touch

Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.

The Best and Essential Frontend Tools

caelinsutch — Fri, 31 Jul 2020 03:09:15 +0000

Getting to know the tools of the trade can make your job easier and keep you on top of the skills you need to remain relevant.

1. A Solid Code Editor

Best Free Option

My favorite free editor is Atom, which is supported by Github. Atom is an open sourced editor that is chocked full of features and has a healthy plugin library to add even more features.

Atom is also fully customizable with CSS, so you can fiddle and customize the theme to your liking. Quite a few ready-to-go themes are available as well.

Since it was created by the team at Github, it also has fantastic Git and Github support, making using these tools even easier!

Best Paid Option

Plus, if you code backend in Java, Python, Go, or any other language Jetbrains probably has an IDE that supports that language that is similar to WebStorm, meaning you only have to learn one IDE!

2. Version Control

Git boasts a number of features, such as a powerful CLI, “safe” history keeping, and easy-to-use functionality.

3. Frontend Boilerplate

I use HTML5 Boilerplate, a powerful boilerplate that comes with analytics, icons, modernizr, normalize.css, and a ton of other goodies that make it really easy to create a new website.

HTML5 Boilerplate was created by hundreds of developers from around the world, and is always kept up to date with the latest best practices.

4. Frontend Assets

Any good design starts with a good font, and Google Font has you covered. With hundreds of free fonts available, you’ll always be covered regardless of what style your website is.

If you’re looking for some beautiful illustrations for your website, UnDraw has you covered, with hundreds of customizable and free website SVG illustrations.

And finally, you probably want some awesome photos. For that, I always turn to Unsplash, which has tons of royalty free photos that you can use.

5. Developer Tools

As you build your site, you’ll want to make edits “live” in the browser to either the HTML or CSS, as well as see what code is affecting which parts of the site.

6. Deployment Options

Even better, you can host your website completely free through their platform! Another great choice is Netlify, who I also use for some projects.

Conclusion

Keep in Touch

Feel free to reach out and connect with me (I love meeting new people!) on Linkedin or Twitter.

Why Deno is Awesome

caelinsutch — Wed, 29 Jul 2020 19:28:15 +0000

You’ve probably heard of Deno, the supposed legendary new Javascript runtime that allegedly solves many of the inherent problems with node. Created by Ryan Dahl, the maker of NodeJS, Deno includes various features that make developers lives simpler.

Like most JS developers, the first thing that I thought when hearing about another JS framework was fear and a preparation for a painful process of learning a new technology, but Deno has been surprisingly awesome for developing modern and fast JavaScript code.

Lets take a look at why Deno is so attractive to developers in 2020.

Reliance on Modern JS Import Syntax

Back when node was created in 2009, the module import syntax relied on the require method. Modern Javascript uses the the import syntax. For example, lets take a look at this code snippet:

// Traditional JS Method
const module = require('module');

// ES6 Module Method
import { module } from 'module';

If you work with modern frameworks like React or Angular, you’re probably using the ES6 module syntax. Deno uses the ES6 module syntax by default.

Why ES6 Module Import Syntax is Better

With import, you can selectively load in modules from a package, saving memory
With require, loading is synchronous (meaning it happens in the process foreground), with import loading is asynchronous, which drastically improves performance when importing modules.

Decentralized Packages

With NodeJS, you’re probably used to using NPM to keep track of and load modules using a package.json. Whenever you want to use an external package, you have to first install the package:

npm i package

Then import it:

const moment = require("moment")

Whenever someone wants to run your package locally, they would have to install all the packages separately. If you’re running multiple projects on your machine that rely on the same packages, there’s no easy way to share packages between projects, so duplicate packages will be installed on your machine, wasting space.

In Deno, packages are imported from a URL:

import { moment } from 'https://deno.land/x/moment/moment.ts.'

Deno automatically caches packages on your machine after installation, so packages are only installed once.

Native TypeScript

If you don’t know what TypeScript is, you probably should do some reading on it here. Normally, in Node getting TypeScript to work is a multistep process. You’d have to install typescript, update the package.json, tsconfig.json, and make sure your modules have @types supported.

With Deno, TypeScript support is natively baked in!

Top Level Await

In Node, the await keyword can only be used in async functions:

const getData = async () => {
    const data = await fetch('https://google.com');
    const result = await data.json();
}

With Deno, you can use await anywhere, including top level code, so you don’t have to declare an async function before using await!

// No Async Needed!
const data = await fetch('https://google.com');
const result = await data.json();

This is a drastic improvement that makes code simpler and easier to write!

Access to the Browser API

Using the Browser API, which includes access to methods like fetch, normally isn’t accessible by default, you have to install an NPM package.

Deno automatically has access to the Browser API, so you can call fetch without importing any other packages.

This makes code significantly simpler, and eliminates having to import additional modules.

Deno’s Future

Deno has many other advantages besides these, far more than can be covered in this article.

Combined, all these features make it easier to write clean, modern, and fast JavaScript code. As a React and Angular developer, the modern features and native TypeScript support of Deno are naturally appealing.

Will Deno ever replace NodeJS? Probably not anytime soon. NodeJS is quite entrenched in the market, but more and more JavaScript developers are switching to Deno for their next project.

Keep in Touch

Feel free to reach out and connect with me on Linkedin or Twitter.

Introduction to Low Code

caelinsutch — Tue, 28 Jul 2020 01:29:35 +0000

Low code is an industry practice for software development that's taking the industry by storm.

The market for low-code platforms was 4.3 billion in 2017. It is predicted to grow to more than$27 billion by 2022.

What is Low Code?

Simply put, Low Code is a software development methodology that focuses on UI first, relying on prebuilt frameworks and tools to reduce the amount of code written. Companies like Caspio are building tools that make it incredibly easy to turn data into a working application.

Low code has been in practice since 2011, and the market is maturing fast. Low code solves a few key problems:

Time to Product

Low code can drastically reduce the time it takes to go from an idea to a working concept. This ties into the Agile development process, and makes it easier to iterate through ideas. This works great for non technical founders who want to illustrate to investors or Alpha users the value of a product.

Easy to Pivot

The ability to make drastic shifts as you are proving out your business model is essential. Startups and new products experience massive swings during the ideation phase. For larger companies, this can also make it easier to A&B test larger applications, and see what really sticks for customers.

Decreasing Technical Debt

Larger software applications can rely on the Low Code technique to outsource time intensive features that would be hard to build and maintain for smaller companies. For example, real time server communications and other generic software tasks can be accomplished using a pre built solution, saving time and money.

Democratize Programming

Traditionally difficult and time consuming tasks that require a large team of developers can be done easier with Low Code.

Current Issues

As with all things, there are quite a few problems that the Low Code industry needs to solve.

Artificial Intelligence/Machine Learning: Low-code leverages AI currently by assisting users with suggestions, Google AI capabilities, and chatbots. Any modern technology stack should be able to implement AI and ML.

Increased Functionality: Currently, Low Code platforms have a limit to how complex applications can be made. In the future, making more functionality easier to use will further increase the value of "Low Code" companies.

Single Platform Lock In: Once you've developed on a low code platform, it can be time consuming and difficult to transfer to a different company. Making it easier to migrate data between platforms will increase adoption for companies cautious of entrusting all their data with a single provider.

Security: As with most new tech, security for Low Code platforms can be difficult to implement, leaving gaping security flaws for applications. Inexperienced users can easily create an application that leaks user information.

Community Support: Having a larger support community of employees and other customers will make new developers more open to developing on these platforms.

Looking to the Future

By 2024, low-code application development will be responsible for more than 65% of application development activity. As platforms simplify, more and more people will be empowered to solve problems around them with low-code solutions.

Keep in Touch

Feel free to reach out and connect with me on Linkedin or Twitter.

How AI and ML will affect Web Development

caelinsutch — Mon, 13 Jul 2020 19:35:16 +0000

Recent developments in the fields of Artificial Intelligence (AI) and Machine Learning (ML) have transformed industries, from robotics to autonomous cars. It goes without saying that the continued development of these technologies will drastically transform all industries.

For web developers, the impact of AI and ML may initially seem murky. However, the prevalence of web development firms across the globe and the increasing complexity of web applications points towards the emergence of AI and ML to create smarter and more customized applications for users.

By using AI, developers have the opportunity to drastically transform how applications react to the individual needs of users, from chatbots, marketing, and creating customized experiences for individual users.

What is AI?

At this point, you've probably heard the term AI so many times that it has turned meaningless, relegated to the category of buzz words that often have no real world application.

However, this is far from the case. AI is already used in countless applications, like Smartphones, voice search, Roombas, and many more commonly seen products.

In this article, we'll be talking mainly about Machine Learning (ML), which is a subcategory of AI that involves training an algorithm to solve a specific problem, much like you train a dog to sit.

If we look at voice search for example, it would take years to develop an application that will recognize and parse words from audio using a traditional algorithmic approach (by parsing the voice file for various tones and using a search/match algorithm) but is relatively easy by using AI.

AI in Web Development

The core concepts of AI, such as neural networks, rely on complex mathematics that is out of the scope of this article. However, industry leaders, such as Google and Facebook, have developed and open sourced libraries and API's that abstract many of the complex work behind Ai and ML algorithms to make it easier to integrate these powerful tools into any application.

Lets look at some examples of how AI and ML is currently integrated with the web:

Customization of User Experiences

Facebook, one of the most popular social networking sites in the world, uses AI to create customized user experiences for each individual users. The default feed is a machine created set of curated content that was designed and optimized to fit your needs based off of your previous in-app behavior.

By using AI, Facebook can create and customize an interface specifically to fit your needs as a user

Digital Marketing Optimization

Digital marketing, specifically in the field of analyzing customer behavior, uses AI to process large amounts of data to make informed decisions based on customer needs. This helps companies make smarter decisions on building features, fixing bugs, and optimizing applications for user engagement and happiness.

Resources to Explore

If you're interested in exploring how AI can be applied to your application, I recommend reading about the libraries below that abstract many of the complex algorithms behind AI.

TensorFlow.js - One of the most popular ML and AI libraries
ml5.js - High level interface for TensorFlow
ConvNetjs - Deep learning models in browser

Conclusion

AI can be a powerful tool for improving an applications value and increasing customer satisfaction. Interested in hearing more? Signup for my newsletter that covers AI and ML news.

Story Driven Development

caelinsutch — Wed, 08 Jul 2020 04:25:01 +0000

At Bytes Robotics we use the Story Driven development process to drive feature development and requirement gathering. Stories read different than traditional business documents. Rather than taking a removed third party perspective, you’re transported into the world of the user, feeling what they feel, understanding what they believe, and more importantly, realize and recognize future flaws based on what they know.

These of course can’t be drawn out novels documenting the tales of the software, but it’s important to cast formulaic and dry business requirements into a semblance of a story. Stories are written in the present tense, imagine your software once it’s complete, what will the user be seeing and doing?

Lets take a look at an example story for an ecommerce website:

As a user

I can click a button

So that I can complete a purchase

This isn’t quite the story you’re looking for. It’s dry, requirements-esque, and still raises some fundamental questions:

Does the user want to make a purchase?
Does a user want to click a button?
How can the user most effectively conduct a transaction

As a user I can purchase an item.

This is too general. How is the user purchasing an item? With one click? Is there a summary screen?

As a user I can review the list of items I want to purchase, then confirm those choices before purchasing.

The above story is a bit better, it presents the idea that the user wants to confirm his/her choices, and says what the user wants without explicitly going to how and what. However, this is still too broad. What does the user want to review in terms of information? What kind of options do we provide? All these questions should be answered.

As a user I am presented with photos of the items, prices, quantities, and options before agreeing to enter the purchasing process. I can see my total spending, and be able to remove items, modify quantities, and see how that affects my total cost.

Here we start getting into the process visually and provide the reason why we want all these features, to see the total cost.

As a user I can to see the total amount I will be spending with a breakdown of what composes that cost. I want to be able to modify items in my list to achieve the optimum cost for me.

Hmm, we’re still missing something, who the “user” is. Adding personas to our story adds a way to differentiate between a variety of users. A 60 year old grandmother from Alabama will want a vastly different experience than a 20 year old tech entrepreneur in silicon valley. There is no single, magical user, but instead real people with their own unique experiences. By modeling real people, we can understand that features in software can be and are interpreted differently by different users.

Nicole, a young women in silicon valley, can quickly purchase the item she is looking at now.

John, a grandpa in the Midwest, can carefully analyze the total cost of his purchase and adjust it to fit his budget by modifying quantities and types of items/

William wants to review items like John, but add additional confirmation of cost after selecting a payment method to easily sync up the transaction with his bank account.

Story telling is important for developing applications that are designed around users. At Bytes Robotics, we do this in a round table discussion, where developers, product owners, and executives gather around to hear the different aspects of the story that make our product unique and effective.

The other part is feedback. During our discussion, anyone can comment or suggest changes or modifications to a story. We can also take the stories that we’ve developed and back them up with real world data from customers.

By focusing on story driven narratives, we can bring our product into peoples real lives, and have the opportunity to build rich, engaging, and useful applications that add long term value to the customer.