DEV Community: Craig Dennis

3 Tips To Help Get Your Project Developed Right

Craig Dennis — Sun, 07 Feb 2021 18:37:39 +0000

After all that hard work, they had to start again. It had been a couple of weeks since we had given the brief to the developers. And we thought that it was detailed enough.

How we were so wrong.

It was like asking someone to paint the Mona Lisa but we were given this.

It was back to the drawing board.

The first time that this happened, I knew I had to do something about it. It was such a waste of time and resources for both my company and the developers.

It was clear that what we wanted and how it was interpreted was completely different.

If you've had similar experiences hopefully this article will help you get your project done right the first time.

Spend time working out what you want

This is one of the most critical parts of when you are scoping out a project. Knowing what you want.

Leaving the developer with little to work from will influence them to make their own decisions which could result in an end goal being completely different.

Creating a brief and creating mock-ups will narrow down your ideas of what you want and make it clear from the beginning what is being aimed for.

Create a brief

Creating a clear brief is a must. Creating it as detailed as you can is a second must.

To start, write out what are the problems you are trying to solve. You can treat this as your north star. When you are working out what is needed in your project, you can relate to your north star and ask the question "Is this needed?"

Another benefit of having the problem/s you want solving written down is that when you pass the brief to the developers they may be able to see another angle on how to solve your problems.

Another tip when it comes to writing a brief is to picture the actions and the pages that would be required.

For example, if you were looking at developing a calendar system for your project the actions that would be required would be to add, save and edit. The pages that the user would access could be a calendar page and an edit page.

Having a list of actions and pages will help prevent anything getting missed.

Mock-Up to Save Time

Think of a red cat with a purple hat with blue boots. Now take a second and go draw this. Go on, I will wait for you.

V
V
V
V
V
V
V
V
V
V
V
V
V

Nice and simple right.

Here is my attempt. If your cat looked anything like this then we must be drawing twins lost at birth and we must get in touch.

Most likely, your cat looks nothing like mine. This is how easy ideas can get lost in translation. With no guidance, 20 hours of work later and could end up with something you did not imagine.

This is why mockups are an important tool to use. It reduces wasted time when two creative minds don't link up. It also allows the developer to receive feedback so they know where they went wrong and how to turn in the right direction.

"Here's a quick mock-up of how I picture your brief. You like? No? You want pink, big fat fonts and a hamburger. No problem!"

With a brief and mockups, you can make sure from the beginning everyone knows what is expected.

Small Bites

The two most common workflows when working on projects is the Waterflow Method and Agile Method.

Waterflow

Waterflow methods tend to work where you scope what you want and when it is done you get handed the finished result. At the end, this sometimes can be the only time you get to see what has been worked on.

As per our cat drawing example, it is easy to see how this can be a problem.

Agile

The agile method works differently, where a project is broken up into smaller projects and worked on in sprints. Sprints usually last for about two weeks.

The benefits are that you get to see what has been worked on allowing you to provide feedback faster avoiding any misunderstandings.

What can be useful is taking your brief and breaking it out into bite-sized chunks. I sometimes take what the minimum required is to get the project in a working state and call that V1 then break the rest into different versions depending on there importance.

Going back to the calendar example. We could have this list of features.

Add appointments
Add to calendar function
Edit appointments
Send confirmation emails
Send reminder emails
Add appointment tags

Which we can break down into different versions.

Add appointments
Edit appointments

Send confirmation emails
Add to calendar function

Send reminder emails
Add appointment tags

From the different version, it is quicker to get something that works and to provide feedback if things have gone somewhat off course.

Make Time To Test

Customer: "Can you let me know how you are getting on with our work, please? It has been two weeks and we have heard nothing"

Developer: "I don't know how to put this, but we are waiting on you to test it...?"

Sometimes the best person to test what has been developed is you. With the type of work that I deal with having the domain knowledge allows for more thorough testing than what is carried out by the developers.

This is why you should set aside some time yourself to test before anything is pushed live.

This also means that managing your time becomes important. You don't want to be the bottleneck that is preventing the project from going live. Making sure that you liaise with the developers and plan when you need to be available will prevent a you from being the bottleneck.

Summary

If you keep these three things in mind it should help you bring your projects out on time without any massive course corrections. I don't think it is possible to hand someone a brief and they get it right first time. If this has happened to you then you are one of the lucky ones.

There is always going to be something that doesn't go to plan, but if you can try and make it as clear as possible to what you want by creating a brief and using mock-ups, by working on small bites and making sure that you are free to test then you are well on your way to keep things on track.

Flexbox: Axes

Craig Dennis — Fri, 18 Sep 2020 05:26:59 +0000

Photo by Jason Abdilla on Unsplash

One thing that is useful to have in mind when using Flexbox is what axis are you working on. Depending on the direction you are flexing can change the axis will make a difference to the axes.

The reason to know about axes is that some of the flex container properties effect flex items on different axes. This will help you achieve the end result better as you have a better understanding on how it works.

Main Axis

The main axis is decided by which flex-direction you have chosen. You have the options of the following;

row
row-reverse
column
column-reverse

Row is the default option when you just apply display:flex to a container. This would make the main axis go from left to right.

Row reverse would do the opposite, the main axis would go from right to left.

As you may have guessed it, column makes the main axis go from top to bottom and column-reverse goes from bottom to top.

Cross Axis

You should think of the cross axis as the opposite of the main axis. Where the flex direction is set to row the main axis is left to right so the cross axis is top to bottom.

Where the flex direction is set to column, the main axis is top to bottom where the cross axis is left to right.

Start and End Lines

It is also useful to know where the start and end lines are on the axes as when you start align and justifying content this will help you position your flex items easier.

The start and end lines change in relation to which flex-direction has been set.

Picture a container box, with two flex items inside it. Then have a guess at the below question, mentally, or draw it out if it helps you, where the start or end line would be.

Questions

1) Where would the start line on the main axis, if the flex-direction was set to row-reverse?

2) Where would the end line on the cross axis, if the flex-direction was set to column?

Answers

1) The main axis would be going from left to right, and the start line would be on the right hand side.

2) With the flex direction being set to column, the main axis would go from top to bottom, so the cross axis would go from left to right, and the end line would be on the right hand side.

This diagram may help you in understand further what we explained above.

Taken from the official W3 documentation

I have recently released a FREE book on flexbox called Flexbox Answered: answers to the most common flexbox questions which can help answer some more question on flexbox that you might have.

You can download a copy free on my website craigdennis.me

Flexbox: Flex Containers and Flex Items

Craig Dennis — Wed, 16 Sep 2020 06:08:34 +0000

Photo by chuttersnap on Unsplash

Flexbox has been a godsend to me. It upped my CSS game and allowed me greater control over positioning things on the websites.

The first thing that you need to understand to start using flexbox is what flex containers and flex items are.

Understanding these is the foundation of using flexbox.

To help picture how containers and items work think of it like this.

If we take a room in your house.

In the room we place different types of furniture; we have a chest of drawers, a sideboard and a wardrobe.

And in these pieces of furniture, we have different items; in one we have pants and sock, another we have all our clothes and the other we have midnight snacks.

The furniture, we can place in different parts of the room. And in the furniture, the items are arranged in the manner of which we have placed them in there.

This is similar to how flexbox works on a webpage.

The room in this example is the webpage. The furniture are the different components that make up the webpage; such as the navbar, a gallery or a features section.

And the objects in the furniture are the items that make up the components.

So a navbar could be made up with a company logo and an unordered list with links.

A gallery could be made up of 5 images.

And a features section could be made up of different cards and within them could be a header text and body text.

Taking this thinking and applying it into the flexbox world, knowing how flex containers and flex items behave with each other will help you understand flexbox.

It is all about upstanding what set of items do you want to have control of, to arrange, and taking them and putting them into a container so you have the power of flexbox to hand.

Let's take the navbar example to put this into context. This is the result that we are aiming for. A navbar with a logo on the left and links on the right for navigation.

In this example, the room is the webpage. The furniture that we are putting in this room is the navbar (which will be what we are using for our container). And the items are the logo and the nav links.

We want to control the positioning on the logo and the nav links (the items) within the navbar (the container).

To simply do this we turn the navbar into a flexbox container by applying display: flex in this CSS of the navbar.

nav {
  display: flex;
}

This then gives us the power to apply the different properties of flexbox on the flex-container to arrange the items within the container.

In the navbar example, we have applied the align-items property to align the items within the navbar to centre and the justify-content property to apply space between the items.

We have added some other CSS style to make it look prettier and we have even created another flex-container on the unordered list so the list items are under the control of flexbox as well.

nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}

I hope this introduction to flex-container and flex-items helps with your outstanding with using flexbox.

I have recently released a FREE book on flexbox called Flexbox Answered: answers to the most common flexbox questions which can help answer some more question on flexbox that you might have.

You can download a copy free on my website www.craigdennis.me

Full Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Navbar</title>
  </head>
  <body>
    <nav>
        <div>MY LOGO</div>
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
    </nav>
  </body>
</html>

nav {
  background-color: #2a2a2a;
  color: white;
  display: flex;
  font-size: 1.5em; 
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-left: 1em;
}

The 6 Steps To Create A Website - Step 1

Craig Dennis — Fri, 31 Jul 2020 05:34:43 +0000

The One Goal

Creating a website can be just as easy as putting some HTML and CSS together, writing some words and adding some images.

I have done this before. Started by coding with putting no thought into what I was doing.

This makes things both easy and hard.

It makes it easy as you have no restrictions and you can do whatever you like when you like.

It makes it hard because sometimes you get lost in what you are doing and can spend hours not knowing which direction you are going. You have pieces of the website that look totally different from each other because you were following your creative juices.

Making a website does not have to be hard.

All you need is a little direction.

Some steps to help you along your way so you can see if you are making the right choice and you can check in with progress that you are making.

It starts with just one thing.

Why?

What is the purpose of the website?

What is its main goal?

This is your lodestone.

When you are making a decision be it from choosing text or images you can check against the goal of the website and ask "Is this helping achieve the goal?"

If the answer is yes, go mad.

If the answer is no, then you need to review what it was you were about to do.

Looking for the goal can be as easy as asking the person you are making the site for.

If they don't have an answer then going for capturing emails is a sensible option.

Should I have more than one goal?

No. One goal only.

Don't start thinking you can plaster loads of call to actions on the home page.

Two problems for this is that the person visiting the website will get confused on what they are actually supposed to do and it will make it hard to measure on how well the website is doing for the result you are trying to achieve.

You could break it down to have a goal per page of the website. But be careful you aren't watering down your intent.

Start with one goal. Define it. Write it down. Keep it in mind when creating and keep it in mind when you are making decisions.

4 Simple Ways To Improve Your Developer Skills

Craig Dennis — Tue, 14 Jul 2020 18:19:38 +0000

Learn

So profound this one.

But I think it is important to remind yourself that you are always on a learning journey throughout life.

The difference is that some people let life decide the lessons you learn rather than making the choice yourself on what to learn

Doing nothing is easy.

There is a saying I’ve heard;

“Easy choices, hard life. Hard choices, easy life.”

This can apply to all aspects of your life. And I relate this to the journey of learning.

The easy choice is to live with the knowledge that you know and will get you by in your job, your relationships, your life.

But where is your growth?

I believe we owe it to ourselves to try and become the best version of ourselves that we possibly can be.

And “doing nothing” is not a task in the life of someone wanting to achieve greatness.

I believe that you should always be learning.

It is the grooming of your mind for further knowledge. It’s to take aspects of your life, more than just your coding abilities and hone them to be as sharp as possible.

And you cannot say there is a shortage of things to learn or shortage of material to learn from, especially these days.

If you DO say there is not a lot to learn then either you are a master of everything, an alien or you haven’t heard of Udemy.

The programming world is evolving in such a fast rate that there is always something new to learn.

New frameworks, new languages, new coding principles.

You can do a deep dive on a certain subject, learning everything there is to know and becoming a master, you can go wide and learn about a lot of different things or pick out something you like the look of and make a little side project with it at the weekends.

It can feel overwhelming at first with the number of new technologies. The new trends that you are unsure to learn or not because they may be obsolete in a few months.

But it is all about the mindset. If you are going in with “I’m going to learn this new framework so I gets all the monies to buy myself that yacht that I want” then you will be disappointed if you take the time to learn something and it doesn’t take off.

Or, if you think “this looks interesting, I wonder what I can make to showcase my skills, make something that can help people or be able to show off what it is capable of”.

Then you will not be disappointed.

It doesn’t need to be the latest framework everyone is getting the hots for that you learn. It could be as simple as going back to the basics.

I find that going back through material that you have already learnt before as a beginner allows you to absorb things that you may have missed on your first time around, as you see it from a different viewpoint now you have more experience.

So keep on learning.

It is something that you can choose to not bother with but where do you think that will take you in life.

We aren’t in the world where you can download information straight into your brain…yet. Even experts began life as a complete noob but it was their choice to learn that made them who they are today.

Take Action

Make a list of the things that you want to learn or maybe relearn. Choose the one that you have the most interest in and start searching for a learning resource. Start with Google and Youtube. You are sure to find some free resources.

Projects

Are you a follower or a do-er?

Followers are those type of people that coding along to tutorials and the only thing that they have in their portfolios are imitations of courses that they were following.

You certainly can learn via this method however it limits you. When you have been punished for 2 hours the lessons that you learn sure stick with you for longer.

Do-ers are the people that learn a principle and get stuck in the deep end creating something. It could be a massive project. It could be something that you insert into a current project that is in progress. All that matters is that you aren’t coding along and you are figuring it out as you go.

I think tutorials are good for you to learn some complex stuff as the teacher has already spent the time working out how things will connect together and ran into problems and how to solve them.

This, however, is the kind of thing that you want to be doing yourself.

It allows you to have those ah-ha moments where you truly understand what you are doing.

Try and make a project for something you are interested in.

Make something that will solve a problem that you have.

At the start, it might take a while for an idea to come along, but it’s like when you buy a new car you start seeing the same model everywhere.

This is what will happen with projects.

The more that you consciously think about ideas to make the more will pop into your mind at random moments.

Take Action

Start making a list of projects that you can make. It might be something that will help you in life. It could be something that you have been inspired by a video or book that you have read. Ask your family and friends if there is anything in their lives that would help them.
Create a list in a note-taking app that you use and start planning your next project to get stuck in!

Mentor

Sensei. Please teach me the way of the warrior coder.

Mentors are the helping hand in those times of need. They are there for those times when clumps of your hair lay next to your keyboard from countless hours trying to fix a bug or implement a new feature.

There are certain problems that Google cannot find the answer you want.

Instead of giving in and closing your project and turning to work on the other 20 + unfinished projects, you have started, you can reach out to your mentor and ask for them to help.

Not only are mentors good for helping on certain parts of your code but they can help with other things. Their experience is the key to what makes a good mentor. Having been in the same position before you, they are able to share insights for their own experience which can help you along your way. From applying for jobs, working with software, general recommendations and working with a team. Getting the right mentor is a sure way of levelling up your skills.

There are websites where you can find yourself a mentor or you could reach out to people in the community and see if they are willing to help you.

Being able to offer something in return to a mentor-to-be is a sure way of sealing the deal for them to help you. It could be money, it could be helping out on a project that they are doing or it might be a skill that you have that could make their life easier.

Editing videos, creating graphics, proofreading articles. All could be useful to a mentor-to-be.

Another tip, don’t harass them!

If they don’t answer your message in 10 minutes. Sending another message every 5 minutes until they answer is just going to make you look like an ass.

Respect the fact that they are willing to help, especially if they are offering their help for free.

And asking questions of your mentor that you can easily find from the top results of a google search is a big no-no.

If you do reach out to people for mentorship and they say no, don’t go on the attack. People have lives and you should respect that. Just politely tell them thanks and move on.

Take Action

Start by looking at what areas of your skills you want to improve. Next, find someone that is ahead of you in their journey. Twitter is an awesome place to start as there are some kind people that would be willing to help.

Remember to start with what you can do to add value. Make a list of what you can offer and lead with that!

Teach

Seven hours later, countless stack overflow answers you have managed to combine advice from multiple sources and figure out your bug/feature/project.

That code then reminds hidden from the whole wide world.

Unless you have some super-secret code that will allow you to print money (DM if you do ;) ) why are you keeping that to yourself?

Share it with the world. Soothe others pain by creating a tutorial or article and post it for all to see. This is a perfect way to share what you have learnt with more people.

There are benefits in teaching.

Firstly, it allows you the opportunity to have a sense of goodwill, knowing that your hard work will help someone else who is stuck in a similar situation that you were in.

Secondary, when you come to teach something you are learning twice. Going through a problem or an idea with the purpose of teaching it will make you go deeper into the why allowing you to get more clarity to make it as clear and simple as you can.

There are other ways of teaching rather than just one on one. You could make blog posts or Youtube videos. This has the same effect, allow you to take your knowledge and make it accessible to more people.

I have seen people that from their content have got themselves noticed and companies have reached out to offer them a job. This may not happen to everyone but if your goal is just to help one person then you will always be a winner.

Take Action

Learnt something new recently? Had a major breakthrough on a project? Then share! It could be a short 5-minute video. A blog post. Even a social media post. Just collect your thoughts and put it out there!

That’s a wrap!

I hope that you can take away something from the words that I have written, even if it is just the smallest of things.

Follow me on Twitter (@craigthatcodes) for similar content to this, tips and tricks that I learn and want to share with you, as well as pictures of dogs, food and whatever is happening in my life.