DEV Community: hohooio823

My 100 Days : Build websites using spreadsheets

hohooio823 — Sun, 05 Jul 2020 00:30:32 +0000

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

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 .

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

My 100 Days : The challenge

hohooio823 — Sun, 05 Jul 2020 00:16:46 +0000

What challenge did i do? Check out the live version and the source code of Tic Tac Toe .

The story:

I’m already doing the 100 days challenge , With the goal of getting a job , in the same time to get the best out of myself and to do the best i can do . My first project is done , and now it is time for the second project which i wanted to be a challenge .

The challenge :

The challenge was making the project afap with a deadline of a week . got the idea of making a tic tac toe since it seems a cool thing to make , and it has many parts and logic (means that it is good for showing the ability ) .

The game:

The stack :

For building the game i used react js and bootsrap .

The logic :

first there is a square which is the big array every array inside is a row and every element inside is a column, it looks like this :

[['','',''],['','',''],['','','']]

When you play your turn , it looks like this e.g :

[['x','',''],['','',''],['','','']]

There is a function that detects the winner , the winner counter increase and a notification of who won is shown .

Single Player mode :

i used math.random() to generate two number between 0 and 2 , the first number represents the row and the second represents the column . it checks if the element is empty if not it generates two numbers again .

The results :

Made it in 5 days , it has two modes : single player and multi player . it shows you the winner and it has a counter for every player and for how many times each one of them won .
Follow me on twitter

My 100 Days : First side project

hohooio823 — Sat, 20 Jun 2020 21:03:56 +0000

Search by video , my first side project . Part of my 100 days journey towards getting a job

My 100 Days : from Scratch into getting a job

hohooio823 ・ May 22 ・ 1 min read

#100daysofcode #job #javascript #career

Check out the live version and the source code

The idea :

Search by video is a search engine that takes video and return results . I got the idea when i was looking for something similar but all i found was a reddit replies suggesting taking screenshots and using them in google’s image reverse searching . But , for me that wasn’t practical nor efficient . So i decided to build my own automated , practical, efficient version .

The stack :

Mern stack , and Heroku for the deployment .

What’s happening behind the scene ?

1- Uploading the video to the server:

You got two options :
1- Paste the direct link to the video and press search button . The link gets sent to the server as post request . Then , i used node download helper to download the video using that link.

2-Upload the video from your own device : you press choose file and then you select the video and then the video gets sent as formData . on the server side , i used express file upload.

Then the video gets checked to make sure that the uploaded file is a video , and to make sure that the video’s size isn’t more than 200 mb. if not the file gets deleted .

2- Generating the screenshots :

For this i used ffmpeg ( used the ffmpeg buildpack on heroku) , and the node fluent ffmpeg .

Where count is how many screenshots you take , the higher count number is the more accuracy you get . Size is the image size and it is set to 960 * 540 because of the performance , also the better size the better results.

3- Uploading the screenshots:

Now it uploads the screenshots to imgur api . Using axios , formData and bluebird’s asynchronous map function and then it returns the links out of the response to the links array , which get returned as well.
To keep things clean it deletes the uploaded video after the screenshots are generated , and deletes the screenshots after they are uploaded using fs.unlink() .

4- Scraping google’s search results :

It works like this : if you put a link of an image after “https://images.google.com/searchbyimage?image_url=” it’ll reverse search it . What i did was i mapped the list of images links from imgur using blue bird’s asynchronous map function to get the html pages using axios , then i used cheerio to retrieve the links from the search results.

5-Sorting the links:

It sorts the links based on their occurrence . So , It basically gets the ones which repeat the most to the top , and the ones which repeat the least to the bottom . Finally , the results (list of links) are sent back to the front end.

6- Showing the results :

And now it’s time to show the results , for this i used react tiny link . A component that embed links .

7- Done !

The Issues :

1-Heroku:

Since i’m on the free plan of Heroku I've got into some problems and had me on limits : The performance : wasn’t as i wanted and could’ve been much better if i wasn’t on the free plan
Heroku request timeout : this was a nightmare to me since my app takes a long time to process . solved it but it wasn’t as clean as i wanted.

2-External modules and Asynchronous:

My webapp must work on asynchronous process . unfortunately , some of the external modules aren’t asynchronous . solved it as well by adding setTimeOut to a promise but this just didn’t seem clean to me , Im pretty sure there is a better way to have a cleaner solution for this . I will keep thinking about it, though the current workaround is good enough for my use case. Do share in the comments if you can think of a way

The Lesson:

I’ve faced a lot of struggle and obstacles through out building this project , but that’s what taught me the joy of hardwork . this experience taught me that whenever you run into an issue all you need is to have some faith in your self and your abilities , to wait when you start telling yourself that you are done and you need to leave it behind , and to see the problem from another side.

if you’ve reached this point help me with a follow on twitter

My 100 Days : from Scratch into getting a job

hohooio823 — Fri, 22 May 2020 04:55:05 +0000

For the next 100 days i’ll be coding everyday until i finish my side projects and start applying for jobs .

background :

I was intrested in tech for ever . So last year , i decided to start building my stack and my skills . I’ve Self-learned html , css , js , react js , node js , express js , mysql and mongodb . But the thing i didn’t have was side projects , side projects that are the key player for landing a job . Therefore , i’ll be building side projects for the 100 days to come .

Why 100 days ?

1- I think that 100 days will be enough for me to finish the projects.

2- To keep my self accounted and see my progress .

3- Get some recognition that might help me land a job.

What Projects ?

My plan is to make three projects :

First, The video reverse search engine :

Have you ever used google images reverse search engine , they don’t have one for videos so i’ll be building it.

Second, a multiplayer Tic Tac Toe:

It seemed cool in my mind , so yeah will be building that too.

Third ???

Haven’t planned this yet . What do you suggest?

How ???

1-I’ll be coding daily for 100 days.

2- I’ll be posting my daily progress on twitter. Follow me

3- i’ll be posting blogs here to main progress.