DEV Community

hohooio823
hohooio823

Posted on

2 1

My 100 Days : Build websites using spreadsheets

SiteFromSheet my third side project , and part of my 100 days journey toward getting a job . check out live version and source code .
Alt Text

The idea :

You can try it yourself with this spreadsheet paste the link in my website.
Got inspired by Andrey Azimov’s sheet2site , and tried to build my own version . The idea basically is a no code tool which use google’s spreadsheets for building websites .

The stack :

Used express js and react js , and used tableTop to retrieve data from the spreadsheet .

How does it work :

1- The spreadsheet’s link gets sent to the backend .
2- Getting the data out of the spreadsheet using tableTop.

[ { tag: 'title',
    value: 'Home Page'} ]

3- Mapping the Data and returning elements e.g :

if(ele.tag==='image'){
elements= [...elements,`<img class='row' src=${ele.value} />`]
}
if(ele.tag==='title'){
elements= [...elements,`<h1 class='row' >${ele.value}</h1>`]
}

Previewing :

The elements array get sent to the front end , where is dangerouslySetInnerHTML to show the elements .
Alt Text

Downloading :

Creates an html file that includes html boilerplate + The elements , and sends the html file using res.sendFile .

How can you use it ?

You paste the link to your spreadsheet and choose between previewing and downloading . Check out The guide for more explanation .

What did i learn ?

For the last two months , I’ve been writing code every single day for like 12 hrs or probably more . This period teached me some lessons :
1 - You won’t succeed in programming if you don’t enjoy programming .
2 - You never stop learning .
3 - You never know enough .
4 - The best way of learning is doing .
5 - Daily process even if not significant , makes significant impact .
follow me on twitter

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • --last-failed: Zero in on just the tests that failed in your previous run
  • --only-changed: Test only the spec files you've modified in git
  • --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
  • --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
  • --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Practical examples included!

Watch Video 📹️

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Please show some love ❤️ or share a kind word in the comments if you found this useful!

Got it!