Last week I released my side project: Code Line Daily.
It is a quite straightforward project: a new line of code would be introduced every day. The lines are mostly frontend, PHP, and WordPress code. Here’s how I build it!
To build this project, I have used Starter Project. It is a Gulp based boilerplate that I created last year. It has grown a lot, and for this project, I have introduced JSON data files.
Here is the basic JSON structure—an array of object items. gulp-data plugin is used to include, parse, and display the data on the homepage, archive, and author pages.
- var list = locals.data.list ? locals.data.list.filter(item => new Date(item.date) < new Date()) : ;
To display only current lines and not future ones, I have used
filter function with a date condition. That way, future lines won’t be displayed. Also, I have set up Zapier to trigger a new build every day in the morning.
- thisItem = list.slice(-1).pop()
To display only a single line on the homepage, I have extracted the last item from an array of lines.
To display the list of lines, I have reversed the array and then iterated over each item using
The website is hosted on Netlify and powered by Netlify CMS to make my life easier by being able to publish new lines right from the browser.
I have enjoyed building this project, and I have a few other ideas on how to reuse the code, but I would leave that for myself for now.
I have learned that I don’t need a classic page generator. I could use my Gulp-based generator. What is great about it is that it is packed with a lot of modern techniques and best practices, which saved me much time to develop this project.
If you have an exciting line of code to share, feel free to contribute to the website. Code Line Daily is an open-source project.