First entry

My first blog post (mostly tests)

Welcome to my first blog site

Sup. I'm Fitzypop, and I've never written an actual blog site before. Okay, I didn't write the structure of this blog myself, and used a Template off github, but everything after that initial template is all my work.

If this was a serious blog, I would have gone with a mkdocs. Or maybe hugo, or some other template / markdown based system. But I'm more interseted in writing and maintaining a Deno website. Writing a site with deno is interesting too me. There's alittle more challenge, maintaning my own site, system, content, and learning TypeScript for real.

My current plan is to take this template blog site, and add new features as I encounter more question around Deno, Fresh, or other web development concepts.

MVP

  • Fix markdown render
    • Looks like gfm doesn't support checklists?
  • Learn Tailwind
  • Restyle header
  • Social Links and Icons
    • Github Icon
    • Linkdin Icon
  • Server Side image for Posts?
  • SEO ?
  • ???
  • PROFIT $ !

Updated - 2/6/23

I'm really liking tailwind. Styling react components has always been an awkward or painfull experience, too me. It's soooo nice to just write a couple css class shortcuts and have all the grunt work autogenerated.

Dev tools have really come along way, even from back in 2016 when I started coding seriously.

Tailwind

My initial thoughts on tailwind was probably similar to a lot of devs:

  • 'How do you write generic styles?'
    Don't. Write and reuse components. If really necessary, write wrapper components.
  • 'You gotta compile it'
    Yeah? Samething applies to most bleeding edge js technology.
    Use Deno + Fresh
  • 'I can't remember all the new keywords, shortcuts and functions'
    Neithes can I. But there are plenty of tailwind cheatsheets online.
    There's probably an offline version you can download too.

At my day job, we're not using tailwind. I'm actually not entirely sure what we're using, but it's not as seemless as tailwind. However, my team is using vite, react, and typescript. It might not be too hard to add tw to vite config. I'll have to check later.

Header Restyling

I have no idea what the original developers of the blog template were thinking, but they used relative and absolute positions for the headers.

Fuck that. I turned it into flex row and columns. I probably could leverage css grid better, but that gives me something else too work on and still have a better solution to the original.

Now I gotta figure out how to back port it too my new fresh-blog template ...

I found a couple svg icons and altered them to my liking. I don't remember whom's gist page I found them on, but whoever you are, I salute you and I'm sorry I lost that source.

Anyway, I added a "currentColor" tw tag, and this allows for both light and dark mode icon themes. For more details, see the source for this blog below.

Conclusion

Deno and Fresh is great. I think it could have a real chance of over taking the nodejs community soon.

Twind, a tailwind alternative, is simple as hell to start using in Fresh.

I should have wrote a blog or portfolio website years ago. But, I'm grateful I got to work with such awesome technology. Deno and Fresh is the future. Or, at the very least, my future in web development.