[React] The π-th Alpaca's Dev Scribble Project
[React] The π-th Alpaca's Dev Scribble Project
A development blog I built myself to put the React I ended up self-teaching to meaningful use. I developed it using NextJS for a static blog. I use Typescript, and the design is rendered using a CSS-in-CSS approach via SCSS. When I bought a Raspberry Pi, I also applied the domain itcode.dev, which I purchased at the same time to build a server. I use the subdomain blog, as in blog.itcode.dev.
@RWBwritten at 2021-10-25 17:37:30
The π-th Alpaca's Dev Scribble Project
🖼️ @material-ui/core
🖼️ @material-ui/icons
🖼️ katex
🖼️ next
🖼️ next-pwa
🖼️ prismjs
🖼️ react
🖼️ react-cookie
🖼️ react-dom
🖼️ recoil
🖼️ @types/katex
🖼️ @types/marked
🖼️ @types/prismjs
🖼️ @types/react
🖼️ @typescript-eslint/eslint-plugin
🖼️ @typescript-eslint/parser
🖼️ @zeit/next-sass
🖼️ eslint
🖼️ eslint-config-next
🖼️ eslint-plugin-unused-imports
🖼️ gray-matter
🖼️ marked
🖼️ node-sass
🖼️ typescript
🖼️ xml-formatter
A development blog I built myself to put the React I ended up self-teaching to meaningful use.
I developed it using NextJS for a static blog. I use Typescript, and the design is rendered using a CSS-in-CSS approach via SCSS.
When I bought a Raspberry Pi, I also applied the domain itcode.dev, which I purchased at the same time to build a server. I use the subdomain blog, as in blog.itcode.dev.
Using a blog I built myself let me feel a real attachment to running it, and since I built it myself, it's nice that it lets me show off a bit of my chops as a developer in my own way.
- [Now] Presenting it to you...
- [2021.10.08] Feature improvements
- Fixed an issue where the screener would stay fixed on the first video when the screener was a video
- Optimized the amount of asynchronous data on the index page
- [2021.09.28] Feature improvements
- Added Hits to the footer for a blog visitor counting feature
- Optimized the Posts and Projects lists to hold only the minimum data needed for rendering
- Changed list components so they no longer require the full dataset
- Defined default images for content items and meta
- [2021.09.27] Feature improvements
- Changed how Hits displays URLs
- Optimized content list data so it holds only the minimum required data
- [2021.09.25] Feature improvements
- Improved the screener to handle images and videos respectively
- Added a post view count feature using Hits
- [2021.09.20] Changed the screener image to be video-based (GIF to WEBM)
- [2021.09.18] Design improvements
- Fixed an issue with the category title position on mobile screens
- Improved the SEO script to generate a separate SEO file for posts ending with the .html extension
- Improved readability of some UI elements
- [2021.09.15] Design improvements
- Changed the design for indicating new content
- Improved the category UI
- [2021.09.14] Design improvements
- Changed the screener text size
- Reduced the content item text size
- Adjusted category images so they look more intuitive
- Increased the number of items per row in categories (desktop, mobile)
- Renamed the blog to "The π-th Alpaca's Dev Scribble"
- Fixed an issue where the screener image did not change when navigating pages
- [2021.09.06] Feature improvements
- Improved the loading screen design, changed it to display with Fade In/Out
- Changed the Heading tag color according to theme
- Applied ServiceWorker
- [2021.09.06] Changed header color in dark mode
- [2021.09.03] Feature improvements
- Improved the content title UI
- Added an ALL item to show all items among category entries
- [2021.08.30] Feature improvements
- Applied custom domain blog.itcode.dev
- Applied the replaced domain across the project
- Added a build version generation script
- Improved link tags to open in a new window when clicked
- [2021.08.26] Feature improvements
- Fixed a category collapse bug
- Rolled back WEBP to GIF due to image quality issues
- Fixed a design error on the index page
- [2021.08.24] Style improvements
- Added a Footer SEO button
- Changed the header color
- [2021.08.20] Registered with Daum Webmaster Tools
- [2021.08.19] Size optimization
- Switched GIF to WEBP to reduce size
- Subsetted fonts to reduce size
- [2021.08.17] Added a feature to highlight posts published within the past week
- [2021.08.13] Improved PrismJS style
- Improved code design and colors
- Added LaTex recognition logic
- [2021.08.11] Improved code block design
- Overall appearance improvements
- Display the language in use
- Display the number of code lines
- Added highlighting on mouse hover
- Added a copy button
- [2021.08.05] UI refresh
- Changed the category height
- Moved the mobile theme UI switch into the Sidebar
- Added a feature to save the theme via cookies
- [2021.07.31] Added a loading component shown during page navigation
- [2021.07.26] Improved the mobile menu
- Replaced the existing BottomNavigator with a Sidebar
- [2021.07.25] Deployed the revamped blog
- Applied Typescript
- Refactored to SCSS to remove FOUC using CSS-in-CSS rendering
- Overhauled the blog design
- Broke components down further
- Established the file structure
- [2021.06.07] Registered Google Analytics
- [2021.05.27] Developed an SEO generation script
- A JavaScript-based generation script
- Generates Sitemap, RSS
- [2021.05.20] Applied the Utterances comment plugin
- Replaced the previously used Disqus due to advertising issues
- [2021.05.18] Added markdown CSS
- [2021.05.10] Started developing the dev blog
- Tested and deployed NextJS and GatsbyJS
- Adopted NextJS
- Used CSS-in-JS rendering with JavaScript and Material-UI
- Developed blog components
- Aimed for responsiveness between web/mobile
- [2020.08.13] Deployed the dev blog
- Jekyll-based blog
- Applied Moon Theme
# NextJS# React# Typescript# SCSS
