RU EN
← Other projects

proteinanalyse

Development Diary

About the project

The initial thought was quite utilitarian: make something small, clear, and immediately useful in bioinformatics. A set of simple tools that can actually be used — GC calculator, reverse complement, ORF finder, DNA to protein translation, protein mass calculation, etc. Such tools already exist, but often they were made ten years ago, look heavy and are sometimes inconvenient. Wanted to make something light, fast, and clean that just works in the browser.

There was a feeling that you can gather an audience of biologists and students if you give them free and convenient tools. This is an "entry point": and if the site helps, then a pool of users who are already used to the style can form.

Read more

Current implementation at: https://proteinanalysis.pages.dev

Table of Contents

Stage 1: Initial Concept (MVP)

What was needed

Initial task - create a simple single-page sequence analyzer.

Solution

Created index.html with basic functionality:

  • Auto-detection of sequence type (DNA/Protein)
  • Basic analysis for both types
  • Minimalist design

Pros

  • Fast implementation
  • Easy to use
  • One file - easy to deploy

Cons

  • Limited SEO opportunities (only one page)
  • No specialized tools
  • Hard to rank for different keywords

Gotchas

  • One page = one set of keywords
  • Hard to compete with more specialized tools

What was done

  • Created index.html with basic functionality
  • Implemented sequence type auto-detection
  • Added basic analysis for DNA and Protein sequences
← Previous stage: Stage 1: Initial Concept (MVP)

Stage 2: Transition to Multi-page Architecture

What was needed

Realization that for SEO we need separate pages for different keywords.

Solution

Split functionality into 6 specialized pages:

  • /index.html - main page (general analyzer)
  • /dna-gc-calculator.html - GC calculator
  • /reverse-complement.html - reverse complementary sequence
  • /orf-finder.html - ORF finder
  • /protein-mw-calculator.html - protein molecular weight
  • /sequence-translation.html - DNA translation

Why this solution

  • Each page optimized for specific keywords
  • Users search for specific tools ("GC calculator", "ORF finder")
  • More pages = more ranking opportunities
  • Internal links improve SEO

Pros

  • ✅ Better SEO coverage (6 pages instead of 1)
  • ✅ Specialization for specific queries
  • ✅ Internal linking
  • ✅ Users find exactly what they're looking for

Cons

  • ❌ More files to maintain
  • ❌ Code duplication (if not using shared components)

Gotchas

  • Had to solve code duplication problem
  • Important to maintain design consistency

What was done

  • Created 6 specialized pages
  • Set up navigation between pages
Navigation menu between pages (EN)
Navigation menu between pages (EN)
← Previous stage: Stage 2: Transition to Multi-page Architecture

Stage 3: Creating Common Function Library

What was needed

Code was duplicated between pages (functions for GC%, reverse complement, translation, etc.)

Solution

Created common.js with common functions:

  • cleanSequence() - sequence cleaning
  • computeGC() - GC% calculation
  • reverseComplement() - reverse complementary sequence
  • translateDNA() - DNA translation
  • findORF() - ORF finding
  • computeMW() - molecular weight
  • And others...

Why this solution

  • DRY principle (Don't Repeat Yourself)
  • Easier maintenance - changes in one place
  • Smaller code size
  • Result consistency

Pros

  • ✅ No code duplication
  • ✅ Easy maintenance
  • ✅ Function consistency
  • ✅ Can reuse in future

Cons

  • ❌ All pages depend on one file
  • ❌ Need to load common.js even if using one function

Gotchas

  • Important not to overload common.js with unnecessary code
  • Need to maintain compatibility between pages

What was done

  • Created common.js with common functions
  • All pages use common library
  • Eliminated code duplication between pages
← Previous stage: Stage 3: Creating Common Function Library

Stage 4: Unified Style and Navigation

What was needed

Each page could have its own style, no navigation between pages.

Solution

  • Created unified styles.css for all pages
  • Added getNavigation() function to common.js
  • Navigation menu on each page

Why this solution

  • Unified design = professional look
  • Navigation improves UX and SEO (internal links)
  • Users can easily switch between tools

Pros

  • ✅ Professional appearance
  • ✅ Improved navigation
  • ✅ Internal links for SEO
  • ✅ Better UX

Cons

  • ❌ If need to change design - change everywhere
  • ❌ Navigation adds some HTML to each page

Gotchas

  • Need to make navigation responsive for mobile
  • Important not to overload pages with unnecessary elements

What was done

  • Created unified styles.css for all pages
  • Added getNavigation() function to common.js
  • Navigation menu on each page
Navigation menu on page (EN)
Navigation menu on page (EN)
← Previous stage: Stage 4: Unified Style and Navigation

Stage 5: SEO Optimization for Each Page

What was needed

Pages were functional but not optimized for search engines.

Solution

For each page added:

  • Unique <title> with keywords
  • <h1> with main keyword
  • Meta description and keywords
  • 150-200 words SEO text with synonyms and internal links
  • Schema markup (JSON-LD)

Why this solution

  • Each page should rank for its own keywords
  • SEO text shows page relevance
  • Internal links distribute "weight" between pages
  • Schema markup helps search engines understand structure

Pros

  • ✅ Better ranking in search engines
  • ✅ Each page optimized for its queries
  • ✅ More opportunities for organic traffic
  • ✅ Professional approach to SEO

Cons

  • ❌ More text on page (but this is good for SEO)
  • ❌ Need to maintain SEO text relevance

Gotchas

  • Important not to over-optimize (keyword stuffing)
  • SEO text should be natural and useful
  • Need to balance between SEO and UX

What was done

  • Added unique <title> and <h1> for each page
  • Added meta description and keywords
  • Added 150-200 words SEO text on each page
  • Added Schema markup (JSON-LD) for better structure understanding by search engines
← Previous stage: Stage 5: SEO Optimization for Each Page

Stage 6: Adding Sequence Examples

What was needed

Users had to manually enter sequences to understand how the tool works.

Solution

Added "Load Example" button on each page with preset examples:

  • Sequence Analyzer (index.html):
  • DNA example: ATGCGTACCTGACTGGAAGGCTTACGATGCTTGAAGACCTGA
  • Protein example: MKTFFVAGLVLAGALAAPALA
  • GC Calculator: GCGGATCCGTCGATGCGGCCGTTAGCGCGATCATGGCCGCA
  • Reverse Complement: ATGACCGTAAGCTTGGATCCGATTAAGC
  • ORF Finder: ATGAAACGTTTGACCTGAAGGTTCTACTGGAATAG
  • Protein MW Calculator: MQDRVKRPMNAFIVWSRDQRRKMALEN
  • DNA Translation: ATGGCTTCTGACCTGAAGGACATCGTGAACTGG

Why this solution

  • Users can immediately see how the tool works
  • No need to search for test sequences
  • Improves UX and lowers entry barrier

Pros

  • ✅ Improved UX
  • ✅ Quick understanding of functionality
  • ✅ No need to search for examples

Cons

  • ❌ Slightly more code on each page

Gotchas

  • Important to choose representative examples
  • Examples should demonstrate key functionality of each page

What was done

  • Added "Load Example" button on each page
  • Selected representative examples for each tool
Main page with DNA analysis example (EN)
Main page with DNA analysis example (EN)
GC calculator with sequence example (EN)
GC calculator with sequence example (EN)
Reverse complement with example (EN)
Reverse complement with example (EN)
ORF finder with detected ORF (EN)
ORF finder with detected ORF (EN)
Protein MW calculator with example (EN)
Protein MW calculator with example (EN)
DNA translation with translation example (EN)
DNA translation with translation example (EN)
← Previous stage: Stage 6: Adding Sequence Examples

Stage 7: Adding New Tools and Improving Navigation

What was needed

Site had 6 pages, but to increase organic traffic needed to add more specialized tools. Navigation with 11 buttons was overloaded.

Solution

  • Added 5 new specialized pages:
  • Codon Usage Calculator - codon usage frequency analysis
  • FASTA Validator - FASTA file format validation
  • RNA to Protein Translator - RNA sequence translation to proteins
  • Peptide Length Calculator - peptide length calculation
  • Amino Acid Composition Tool - amino acid composition analysis
  • Improved navigation:
  • Main 6 tools remained in main navigation
  • Additional 5 tools moved to "More Tools" dropdown menu
  • Added touch device support for mobile

Why this solution

  • More pages = more ranking opportunities in search engines
  • Each new page optimized for its keywords
  • Compact navigation improves UX
  • Dropdown menu allows keeping clean interface

Pros

  • ✅ Increased page count from 6 to 11 (+83%)
  • ✅ Each page has unique SEO meta and texts
  • ✅ Compact navigation doesn't overload interface
  • ✅ All tools remain accessible
  • ✅ Improved mobile device support

Cons

  • ❌ More pages to maintain
  • ❌ Need to update sitemap when adding new pages

Gotchas

  • Important to maintain design consistency on all new pages
  • Dropdown menu must work on all devices (desktop and mobile)
  • Need to solve problem with menu closing when moving cursor

What was done

  • Created 5 new HTML pages with full functionality
  • Added sequence examples on each page
  • Updated navigation in common.js with dropdown menu
  • Added CSS styles for dropdown menu
  • Implemented touch device support
  • Updated sitemap.xml (now 11 pages)
  • All new pages added to Google Search Console verification