Web Development

← Back So I’ve implemented nextjs on this blog. You shouldn’t feel anything different of course, as its an internal change. I thought nextjs was going to create static HTML files for all, but it turns out it didn’t. (But it can do if we want to). This means that: SEO friendly doesn’t necessarily mean you have to have HTML files I think nextjs still uses js and some other things, but somehow they achieve SEO. Maybe I’ll have a look later, or maybe not as i don’t realy need it. It’s good enough to know that these thing exist. ...

← Back Next.js Solves lots of problems regarding static sites generation. Pages all pages reside under /pages/ dir. pages/index.js is associated with the / route. pages/posts/first-post.js is associated with the /posts/first-post route. Static generation Your contents or paths depend on external data. > Your contents depend on external data. function Blog({ posts }) { // Render posts... } // This function gets called at build time export async function getStaticProps() { // Call an external API endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // By returning { props: { posts } }, the Blog component // will receive `posts` as a prop at build time return { props: { posts, }, } } export default Blog > Your paths depend on external data. First, prepare a special file under a path, pages/posts/[id].js. Here, [].js is special structure. Then, similarly, add a function at the bottom: ...

← Back Project Description Refactor the codes for InkyFingerz, using modern tools, especially template engine and static site generator. Project Objective In the end, the project will have: Much less reptition in terms of developer experience. For example, the developer won’t have to copy and paste Header and Footer for each of the three pages. The output should be roughly the same as current version. For example, there will be separte files for each page (static!). Technology I’ll use 11ty for the static site generator, and use liquidjs for template engine. 11ty is compatible with a dozen template engines including Nunjucks, liquidjs, Mustache, ejs, pug and more. I’ve used ejs and pug before, like, I’ve had a go at them. So it won’t make much difference even if I learnt a new one. On the website, 11ty shows supported features for each engine, and liquidjs and nunjucks had the most supported features. I won’t need most of them, but still! I chose liquidjs because it is actively being maintained, whereas nunjucks had its lastest release 2 years ago. ...

← Back I talked about lack of high level planning before in SPA and SEO - can we make peace? post. High level planning is extremely important. With high level planning, we can achieve: A much shorter development time: I don’t have to wait until the problem arises after all the coding. A better product: well planned product vs. a toy! The problem is that coding is fun, so whenever I have an idea I have this urge to just get my IDE up and start creating something. Well, it’s definitely much, much, much better than not creating anything, (no product vs. a toy) and I think it’s a good way to get used to programming and all when you’re a beginner. In fact, when you’re just starting programming, maybe you know too little to plan anything good. But now I should be moving on from the beginner phase, so it has almost no benefits, but a lot of harms. ...

← Back After my blog came into a shape, a question came to me: how do I get my blog to be not just searchable on Google, but also provide meaningful meta-data? Few days ago, I did manage to submit my webpage to Google, so now the world’s most popular search engine does have my data. It was a simple process, all I had to do was to verify that this address (*.jshji.com) was mine. This is what Google’s search result shows currently: ...