JAM-stack website project plan

Fast, scalable websites with cart and social reach, step-by-step

                       

Overview

• Design decisions
• Accounts
• Development environment
  • Site Design
  • Site Logo
  • Navigation
• Social
• Subscription capture
• Photo processing
  • Portfolio Spreadsheet
  • Tags
• Shopping cart
• Contact
• About
• Exhibits
• Gallery
• Portfolio page
• SEO
• Features
• Monitization
• Performance
• Maintenance
• Campaign
• Websites Liked
• Website advice specifically to artists
• TODO:
• References
• More on front-end software development

Here are the sequence of specific steps to build a website using (what Mathias Biilmann of static hosting service Netlify calls) coined a “JAM stack” – a set of software to create websites that are fast, scalable, and simple to work with. JAM stands for JavaScript, APIs, and Markup. JavaScript on the site makes calls to API (Application Programming Interfaces) web services in the cloud to manage subscription forms and email campaigns. Content for the site is written in semi-technical markup language text stored on GitHub.com.

See Redpoint’s JAMstack Ecocystem.

We have here a way for artists to manage and display their portfolio of photos in file folders distributed across the internet for fast retrieval anywhere in the world.

We want the photos to show up in a list or table on a web page visitors obtain by typing in a topic on their web browser.

The Portfolio listing is used to select files for processes such as identifying file sizes plus compression and watermarking of each photo.

The program may also load the portfolio file into a database for other programs to access online.

Metadata, such as a description about each work in the portfolio, are usually entered by hand or via audio recording.

The portfolio file is in .csv (comma separated values) format which is text that can be edited by any text editor. Many prefer to edit such files locally using a spreadsheet program such as Microsoft Excel. And storing files in GitHub allows us to go back to each complete version at various points in time. Complete copies of a repository are obtained from GitHub.

What’s amazing about GitHub is that it not only hosts websites for free, it runs a program called Jekyll that applies colors and fonts and layouts specified in templates to each topic.

We like to use the Jekyll program because it generates an index.html file for each topic. It puts all the files for a website within a _site folder published to the internet.

The file for a topic can contain text which replace variables defined in the main section of that page.

Before it does all that, we have a parser program that can generate a file for each item in the portfolio, or create a text file which replaces the {include} tag in a topic file.

Coding in web pages interact with a form processing API on a server to handle both generic portfolio data and data specific to each visitor

A publisher program can match the interests of those who register with Tags describing each portfolio item when it sends out emails, Instagram, Twitter, or other social network messages, on a schedule.

So here you have it, a way to create a website that allows local editing, have versioned backups, speed from pre-distributed static files, and audience interaction from social media attraction.

Phil Hawksworth (@philhawksworth) sums up JAM’s architecture this way:

• A consumable page of content at every URL without the need for JavaScript to display things in the browser
• A valid, bookmark-able entry point to the site at every URL
• Client-side rendering with JavaScript as an enhancement for reduced data over the wire and rapid (and perhaps fancy) page transition
• Simple server-side architecture which could be served from any static web server
• Content management through a CMS outside of a development environment

Others:

• https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

• https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/

---

This project plan is structured by groups of tasks, in rough priority order.

Design decisions

1. Contact details (phone, email, facebook, twitter, instagram)
2. Work agreement (contract)

3. Copyrights, license

   Accounts

4. Setup email account

5. Setup Twitter account using email

6. Setup Github organization and github.io repo holding website
7. Setup Github account for each contributor

8. In Github grant permission to each contributor

9. Get an AWS account with a credit card: Keith[1 hr]

10. Create an AWS worker account. Keith+Wilson[1 hr]

    Development environment

    Out of scope:

    • Install git (use online GitHub)
    • Install repo viewer

    Site Design

11. Look through other websites to identify what’s to like
12. Pre-defined theme?
13. Scheme of color, fonts, layout
14. Theme in GitHub

15. Style Guide: A simple style guide is extremely beneficial for any website owner, points to consider include:

    • Font Styles
    • Image Sizes
    • Tone of Voice
    • Colors
    • Imagery Style
    • Layout
      
      

    Site Logo

16. Custom icon (10x10 favico.ico/png) appearing on browser tabs

    SEE: http://www.uxbrainstorm.org/thoughts-on-logo-creation/

17. Mobile app icons for Android & Apple Touch

18. Windows 10 desktop tile images

    Navigation

19. Top of page menu text (sections)

20. FontAwesome icon for each section

    Out of scope:

    • Visual site map
    • Breadcrumb trail

    Social

21. Facebook account setup in _config.yml
22. Twitter setup in _config.yml

23. Position social buttons (always visible on left side of page)

    Out of scope:

    • GitHub
    • Google
    • LinkedIn

    • Instagram

    • Visitor comments using Disqus
    • ICS (contacts) file with logo

    Subscription capture

24. Setup AWS account for EmailOctopus
25. Setup EmailOctopus account
26. Setup AWS permissions for EmailOctopus

27. Position subscription form (always visible on right side of page)

28. Error messages in form
29. Pop-up subscription offer form

30. CAPTCHA in form

31. Commenting buttons to create a post on Twitter, Facebook, Google+, etc.

    Out of scope:

    • Photo auto-rotator takes the same sized photo and displays them one after another.

    Photo processing

32. Create an IAM sign-in URL on https://console.aws.amazon.com/iam/home/
33. Create <a target=”_blank” href=”http://docs.aws.amazon.com/STS/latest/UsingSTS/CreatingSAML.html” AWS Security Token Service (STS) SAML 2.0 tokens</a> with associated key policies defining permissions. for developers to access EC2 files. Wilson+Keith[1 hr]
34. Setup Watch for billing levels.

35. Review Amazon Trusted Advisor Wilson+Keith[.5 hr]

36. Transfer original photos (tiff) to S3. Gail[4 hrs] 81 files

37. DONE Extract from previous site a .csv file listing attributes of each picture file. Wilson[2 hrs.]

    Portfolio Spreadsheet

    NOTE: The spreadsheet contains one line for each work:

    • _Category of work (Acrylics, Watercolor, MixedMedia)
    • Full sized file name

    • Width & height of picture

    • Thumbnail file name (with path assumed)

    • Width & height of thumbnail

    • _Year of creation (when done)
    • _Size of file (KB)
    • _Media (C)
    • _Width of actual piece

    • _Height of actual piece

    • _Note = comments about the picture (This makes a huge difference)
    • _Tags describe the work (for use in mouse-over and publicity)
      
      
38. DONE Correct typos from previous site. WILSON[2 hrs]

39. DONE Sample from the .csv file. WILSON[2 hrs]

40. DONE Parse .csv file to generate .md files. A Python program? WILSON[3 hrs]

    To do on each picture:

41. Identify width, height, size of each picture file [4 hrs] (for 80 works)

42. Comments about the creation of each. This helps a lot to increase sales.

    Tags

43. Hash tag each. This helps a lot to increase interest.

    • color: #blue #green #BlackAndWhite
    • subject: #vinyard #bridge #lake #river #portrait
    • objects in subject: #tractor #grapes #flowers #fruit #trees
    • social grouping: #rap #moms #teen #farmer
    • subject location: #nyc #brooklyn #italy #amalfi
    • artist location: #seattle #northwest
    • art media: #graffiti
    • art medium: #spraycan #acrylic #watercolor #graphite
    • art tool brand: #nikon #nike
    • adjectives: #beautiful #amazing #fantastic #sunny #bright
    • emotion: #peaceful #sad #happy #thrilled #exhilirated #strong
      
      

44. See the popularity of tags at http://www.google.co.uk/AdWords

45. Size it in 3 different types of screens (mobile, tablet, desktop)

46. Crop picture for Instagram squares (use instasize app, Gramblr)

47. Compress to make smaller
48. Visible Watermark
49. Invisible Watermark

50. Put the file in a “CDN” around on the web.

    Shopping cart

51. Review the Snipcart demo workflow and identify desired customizations and changes in stock UI elements.

    PROTIP: Shopping cart construction comes before many other website construction activities because its use may place design innovations and limitations to other parts of the site in order for the whole site to remain consistent in look and feel. For example, Snipcart uses Jekyll collections.

52. Sign-in to your GitHub account and visit website to fork it. Notice it is on branch gh-pages.

53. View the site on your github

54. Register an account at Snipcart and verify email. Keith[1 hr]
55. Integrate Snipcart into site based on GitHub.
56. Get TEST api_key and add in _config.yml with other account data. Keith[1 hr]
57. Code head.html for layout productdetails. Wilson[1 hr]

58. Create a program to generate a md file for each “product” (work of art) in the Portfolio.csv file. Wilson[2 hrs]

    NOTE: A complete checkout is possible from a public URL, not from a local instance.

59. After testing, review Dashboard

    Contact

60. Contact text
61. Contact photo

62. Contact audio/video

    About

63. Author statement text
64. Author photo

65. Author audio/video

    Exhibits

66. Exhibits text
67. Exhibits photo

68. Exhibits audio/video

    Gallery

69. Gallery index photos (3) cropped, compressed, positioned

70. Gallery index page with links

71. Add https://github.com/patrickkunka/mixitup. Ayush[2 hr]

72. Add Google map. Ayush[2 hr]

    Portfolio page

73. Add &LT;div & change CSS to remove underlines. Ayush[1 hr]

74. Adjust CSS to vertically center pictures. Ayush[1 hr]

    SEO

75. Google Analytics JavaScript
76. Google search ownership file
77. Bing search site ownership file
78. robots.txt file to specify folders and files desired private
79. SSL certificate for better ranking

80. Google PageSpeed for better ranking

    Generated by Jekyll:

    • Site RSS XML file for Google Search to discover http://webdesign.tutsplus.com/articles/general/all-you-need-to-know-about-xml-sitemaps/

    Features

81. Add search field (and custom response page)

82. Get Google Maps API key

83. Map in Exhibits page using Google Maps or other API

    Out of scope:

    • Infinte scrolling
    • Lookup location based on IP
    • Confirm identity simply, such as clicking a pre-agreed image
    • Time-appropriate greeting based on visitor’s local time zone
    • Personalized greeting based on personalization data stored in browser during previous session
    • Store history of browser version, OS, etc.
    • Cookie policy verification (for EU visitors)
    • Display most popular post on anonymous landing

    Monitization

    Out of scope:

    • Google ads
    • Shop (screen savers, mugs, t-shirts, etc.)

    Performance

84. Setup Gemfile
85. Setup Grunt/Gulp task runners

86. Minify HTML, CSS, and JavaScript files

    Done by Jekyll:

    • Asychronous update of a section rather than entire form (submit)
    • Google AMP coding

    Maintenance

87. Backups

88. Recovery from backup

    Campaign

89. Load emails
90. Announce new site

91. Launch party

92. Item of the week/month

Websites Liked

• http://www.currier.org/
• http://sgnhs.org/
• http://www.wellesley.edu/DavisMuseum/davismenu.html
• https://adelmanfineart.com/
• http://www.irisscottfineart.com/

Paid pre-designed websites :

• https://www.squarespace.com/commerce

Website advice specifically to artists

• http://theabundantartist.com/15-ways-to-sell-your-art-online/

TODO:

• Make this page into a form where people can check what they want, save it, send it to others, etc. like this.

https://jamstack.training Tamas Piros offers free

• Introduction to the JAMstack - Learn the fundamentals of the JAMstack.
• Create a Blog Using the JAMstack - Create, manage and publish your own blog using 11ty and NetlifyCMS.
• Create an E-Commerce App with Gatsby - How to utilise the JAMstack when building e-commerce websites

References

JAMstack e-commerce panel discussion

Phil Hawsworth of Netlify has a 3-hour YouTube course his slack announced the 8-video Headless Commerce Summit Sep 3, 2020. @jamstackconf

More on front-end software development

This is one of several topics:

1. UI Design Systems
2. Text Editors
3. Markdown text for GitHub from HTML

4. 508 Accessibility

5. gRPC (g___ Remote Procedure Call)

6. HTTP/2 Transition Project Plan

7. Front-end UI creation options
8. Docusaurus static website generator
9. Static websites
10. JAM Stack Website Project Plan
11. Jekyll Site Development

12. Gatsby app generator

13. Website styles
14. Website Styling

15. VueJs front-end framework

16. Protractor to automate testing of Angular and other web pages

17. Email from website
18. Search within Hyde format Jekyll websites

19. Windows Tile Pin Picture to Website Feed

20. Data Visualization using Tableau

---