Creating a smooth workflow Coder Sitemap

A fully automatic device that solves everything with the push of a button.
My name is Komiyayama, a lazy coder who would love to create something like that.

During production: Where is the latest file?
・I wonder what the next page will be...
・I made the same parts as him...

When I think about things like that, I suddenly think of laziness.
I wish it could be solved with just a click.

It is very important to be efficient when coding.
Deciding the order and avoiding unnecessary production will have a significant impact on the actual production and subsequent updates.

At Coding Factory, we receive designs from a variety of clients and then code them, so we need to be flexible in responding to a variety of formats.

For example, we may receive multiple pieces of data or there may be version updates, so we need to constantly update the data we receive and keep track of the latest files.

In order to ensure consistent and uniform quality in our production, we use data to convert information into a format that makes it easy to code.

Collect necessary information

This is a key point for maintaining high productivity.

We use a site map in a spreadsheet (Excel) as a tool to compile data in line with the client's progress and to smoothly proceed with production.
This time, I would like to explain how the site maps we use on a daily basis are useful, and walk you through how to create them.

What is a sitemap?

A site map is a table that shows the page structure of a site, and is like a facility map of a building that shows what is where. It is like a blueprint of the entire site.

The pages on the site are displayed in a list format, with related information for each page displayed alongside.
When creating a site map, spreadsheet software such as Excel or a spreadsheet is often used.

Let's start with the simplest site map:

This is a sitemap that contains only the bare minimum information, listing page names, directory names, and URLs.
(It's made in a spreadsheet.)

This is a collection of page information such as the top page and introduction page. Categories, directories (hierarchies), and file names are organized in a table, making the page structure easy to understand.

If your sitemap is only going to be viewed by general users or clients, these elements alone will be sufficient.

Coder's Sitemap

Sitemaps used by coders will add coding information that addresses the "nitty gritty" points in order to "consolidate the necessary information" to the simple site map above.
Here, we will tell you about some common "itch spots" that coders face and their symptoms.

• Not sure which is the FIX design → Working with old data, time-consuming reference
• Is there no template page? → Duplicate production, parts that look the same but have different coding are created
• Not knowing the volume of production → Unexpected overtime and waiting time for collaboration
• Not knowing if page production is complete → Missing pages and losing time due to checking

In order to solve these problems, we need to organize and add elements...

This is the site map we will end up with. This is the site map we normally use.

The issues mentioned above as "itchy spots" can be resolved by referring to the elements below.

・I don't know which is the FIX design (see C. Design File )
→ The latest URL of the reference is attached to avoid any confusion.

・Is there a template page? (See D. Patterns )
→ Similar pages are grouped together, so duplication of parts is unlikely.

- I don't know how much production work will be involved (see F. Man-hours )
→ Schedule design is possible based on labor cost estimates.

・I can't tell if the page creation is complete (see I. Customer Information )
→ There are check items so you can see the overall progress of production.

Another major feature of Coder's Sitemap is that it does not omit page information .
All pages must be clearly visible to avoid missing anything during production.
Our goal is to create a situation where production staff can start production just by looking at the queue on-site.

Only when you can see all the pages at once can you produce a site with minimal waste. To achieve this, we create a site map in detail.

How to create a sitemap

A site map is not suddenly completed; it is built like a puzzle, with information being filled in as you go.

From here on, we will explain the steps to actually create a sitemap.

0. Preset: Enter site configuration information that is known in advance.

I will summarize the contents to reduce the time it takes to review materials in the future.
Information like design data, delivery timelines, whether JS or CMS is implemented, etc. are often part of separate documents or conversations and are easily spread.
As you enter all the required information for your page, you will be able to discover any missing information or pages at this stage.

• When working collaboratively, it often takes time to access data, so decide on an access URL for the design file.
• We will input the data you provide into the sitemap.

Page names, directory structures, etc. should be entered separately for each hierarchy.

One thing that happens often is that the URL changes.
When changes are made, it can be a pain to adjust multiple paths.
Therefore, we will set the verification URL using a spreadsheet formula on the sheet.
(The formula can be used in both Excel and Spreadsheets.)

This formula ensures that changing the directory value will automatically change the URL.
If you enter multiple URLs in the domain setting cell () as input rules, you can switch between the development environment and the local environment, making it more convenient to use. It's a great way to be lazy.

1. Input: Identify all design data and find the maximum production value

Figure out the maximum amount of coding required overall.
To do this, we will check and input each page one by one. It is an important and difficult task to compile all the information necessary for the site map from the design.
So, first fill in the information in D. Pattern , E. Special Notes , and F. Estimated Labor Hours .

D. Are common parts (modules) used in the patterns ?
We will check whether the parts are combined in the same configuration.
When coding, efficiency depends greatly on whether you can reuse the same parts smoothly.
In the case of identical parts, the work can be simplified to the point where production can be completed simply by replacing the text and images. In terms of operation and modification, the source code is unified, which has the advantage that subsequent maintenance, such as style corrections and mass replacement, is also easier.
*Similar pages, such as detailed pages for each category, are often grouped together.

E. Special Specific Information If the design includes parts that require specific implementation, such as videos, maps, or CMS, please indicate this here.

F. Estimated Man -hours for Coding Calculate the man-hours required for coding the page. Input the time it will take to implement common parts, assuming they will be reused. Implementing the appearance in CSS and implementing the behavior in JS can be separated into separate tasks, so we will calculate the man-hours separately here.

You can also understand the variations when using common parts.
It also eliminates the risk of having to completely reassemble parts.

2. Plan: Draw up an efficient production plan based on the collected data.

We consider the best production sequence based on the information extracted from the design.
We recommend prioritizing the creation of mass-produced pages that can be created "in large numbers" and "quickly."
The advantage of creating pages that can be mass-produced first is that the source code can be optimized before complex pages are created, and clients have more time to review a large number of pages.
Therefore, we sort and pick out pages with the most frequently occurring patterns and pages with the least amount of work required.

Use the filter function of your spreadsheet software to sort the table.
Using this procedure, you can create pages with many duplicate patterns and with little effort (quickly).

The pieces that were roughly cut from the top down and required the least amount of work were lined up.
By following these steps, you will be able to see which pages you need to create without having to think about it yourself.

Finally, once the provisional order has been decided, we will adjust delivery priorities and determine the order.
If multiple people are working on the project, they will refer to the pattern and divide up the work, being careful not to overlap production areas (making common parts).

Once the order of tasks has been decided, we will assign them to J. Coding, which is part of the specific coding production schedule.

3. Coding: Reduce checkbacks

Once you've reached this stage, all that's left to do is proceed with the actual coding following the production order.

We will enter the information that we have compiled so far for each page into each production page.

Once the page is complete, J. Coding items ・Browser validation ・Lint (validation check)
- We will verify the appearance and if there are no problems, we will mark it with an "o" and proceed with production and checking the progress.
In addition, by setting items that require special checking for each project (such as console checking), you can reduce the number of checkbacks during production.

summary

By " collecting necessary information " on the site map,
The small time-wasting mistakes that occurred each time during production have been eliminated, making the production flow more compact.

The site map serves as a blueprint for the production process to ensure efficient production.
This is very helpful when planning your coding.

As the saying goes, haste makes waste, so if you have a plan in place at the beginning, the rest of the process will go more smoothly.

To ensure accurate, high-quality coding, why not put some effort into creating a sitemap?

We have provided a sample sitemap for coders, which we introduced at the end, here for your own use.