index.json

[{"categories":"","content":"This article was meant to be published last year, but here we go. I will update this post as time goes by, sharing more things I learn and discover.\nIn early of 2023, I discovered Hugo, a Static Site Generator. Additionally, I learned about Tailwindcss. I don\u0026rsquo;t have a lot of experience when it comes to developing websites. I have made websites with plain HTML, CSS, and even Bootstrap, but they were mostly for fun projects that I didn\u0026rsquo;t finish and eventually abandoned. This website is probably the only one I took seriously and actually completed.\nBelow are a few things I learned when creating this site.\nOptimization Reducing the overall size and bandwidth usage is crucial for performance. If you look the web today, you\u0026rsquo;ll notice that it\u0026rsquo;s often bloated with unnecessary analytics, and ads.\nHugo Hugo provides a convenient way to minify CSS, JS, JSON, HTML, SVG, or XML resources using resources.Minify. Here\u0026rsquo;s an example in Go HTML template:\n{{ $css := resources.Get \u0026#34;css/main.css\u0026#34; }} {{ $style := $css | resources.Minify }} Additionally, you can minify the final HTML output to /public by running the following command:\nhugo --minify Tailwind CSS Tailwind CSS is incredibly performance-focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. To minify Tailwind CSS, you can use the following command:\nnpx tailwindcss -o build.css --minify Images Images are the biggest oversight, I\u0026rsquo;ve seen some site display uncompressed images (including me previously LOL) that can be several megabytes in size. As a result, this can significantly slow down and negatively impact its performance.\nSize Them Correctly Ensure that your images are appropriately sized. If the max-width of your website is 960px, there\u0026rsquo;s no need to serve images with a width larger than that. Similarly, if it\u0026rsquo;s a thumbnail, use a thumbnail-sized image.\nServe Them in Modern Formats The WebP image format is widely supported by modern browsers and can significantly reduce the file size of JPEG or PNG images without a noticeable loss in quality.\nAVIF offers even better compression but since it\u0026rsquo;s relatively new, it\u0026rsquo;s not supported by Hugo. For sake of simplicity i will use WebP.\nLazy Load Them Take advantage of the lazy loading feature in HTML, which loads images as the user scrolls down the page and they come into view. This can improve the loading speed of pages with numerous images.\nSet the Correct Width and Height Always specify the width and height attributes for images to prevent content from shifting when the image loads, ensuring a smoother user experience. Learn more.\nSet the altText. Add descriptive alt text to your images, not only for users who rely on screen readers but also to enhance your search engine ranking. Additionally, it serves as a fallback when the image fails to load. Writing a brief sentence describing the image is a small but worthwhile effort.\nHugo image proccessing To implement into hugo, create file /layouts/_default/render-image.html1:\n{{ $src := .Page.Resources.GetMatch (printf \u0026#34;%s\u0026#34; (.Destination | safeURL)) }} {{ if $src }} \u0026lt;figure\u0026gt; {{ $data := newScratch }} {{ if gt $src.Width 1100 }} {{ $data.Set \u0026#34;webp\u0026#34; ($src.Resize \u0026#34;960x webp q90\u0026#34;) }} {{ $data.Set \u0026#34;fallback\u0026#34; ($src.Resize \u0026#34;960x q90\u0026#34;) }} {{ else }} {{ $data.Set \u0026#34;webp\u0026#34; ($src.Resize (printf \u0026#34;%dx%d webp q90\u0026#34; $src.Width $src.Height)) }} {{ $data.Set \u0026#34;fallback\u0026#34; ($src.Resize (printf \u0026#34;%dx%d q90\u0026#34; $src.Width $src.Height)) }} {{ end }} {{ $webp := $data.Get \u0026#34;webp\u0026#34; }} {{ $fallback := $data.Get \u0026#34;fallback\u0026#34; }} \u0026lt;a href=\u0026#34;{{ $src.RelPermalink }}\u0026#34;\u0026gt; \u0026lt;picture\u0026gt; \u0026lt;source srcset=\u0026#34;{{ $webp.RelPermalink }}\u0026#34; type=\u0026#34;image/webp\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;{{ $fallback.RelPermalink }}\u0026#34; alt=\u0026#34;{{ .Text }}\u0026#34; loading=\u0026#34;lazy\u0026#34; decoding=\u0026#34;async\u0026#34; width=\u0026#34;{{ $src.Width }}\u0026#34; height=\u0026#34;{{ $src.Height }}\u0026#34; /\u0026gt; \u0026lt;/picture\u0026gt; \u0026lt;/a\u0026gt; {{ with .Title }}\u0026lt;figcaption\u0026gt;- {{ . | markdownify }}\u0026lt;/figcaption\u0026gt;{{ end }} \u0026lt;/figure\u0026gt; {{end}} Make sure to keep your images in the same directory as the post for this to work.\nIf the image is wider than 960px, it will resize it to 960px. Otherwise, it will keep the image size the same and just convert it to WebP. (It will also optimize the fallback image for browsers that don’t support WebP.)'\nWrap the image in a link to the original, unoptimized version of the image. So you can see the original images.\nUse like normally in your markdown:\n![Red Fox](fox.jpg \u0026#34;Photo by Ray Hennessy on Unsplash.\u0026#34;) - Photo by Ray Hennessy on Unsplash. This image is only 48 KB, compared to the original 188 KB (1920 x 1277)\nFonts To further optimize your website, use WOFF and WOFF2 font formats to reduce file size. You can use site like fontsquirrel.com/tools/webfont-generator to generate webfont for you. If its say file is corrupted you can use site like glyphrstudio.com/online/ \u0026amp; And export it.\nImages optimization reference: ericmurphy.xyz/blog/images/.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","href":"https://r4sso.github.io/2024/02/site-dev-what-i-learned/","title":"Site dev: What I Learned"},{"categories":"","content":"Todo Optimize images (Convert to WebP) Reduce fonts file size Fix need to refresh to change comment theme (For the future)\nGallery - If i have a lot of photo to share :) Changelog (10-11-2023)\nAdd Guestbook Optimize Table Of Content (Remove unnecessary JS) (03-10-2023)\n[thumb] Add support for (.gif and external url) Minify javascript Active navbar Fix need to refresh to change comment theme. (01-10-2023)\nNavbar mobile fix. Optimization (Performance, Size, SEO) Javascript error fix. (29-09-2023)\nImages Optimization (28-09-2023)\nSearch fix. Notes/Categories styling. Simplified featured.html. Add recent posts to home. Folder structure. (27-09-2023)\nIosevka fonts added. Head title order. New front matter if comment:false disable giscus. Comment moved inside article. Seperator removed from navbar. avatar added in /about \u0026amp; styling change. ","href":"https://r4sso.github.io/notes/dev-todo/","title":"Changelog: Site Development"},{"categories":"projects","content":"Yes, this piece of junk is my home server :V\nI don\u0026rsquo;t know exactly what this board is called, it was taken from all-in-one PC from an old ticketing machine a few years ago. Even though it isn\u0026rsquo;t that powerful, it has served me well for years.\nHardware CPU: Intel Celeron J1800 (2) @ 2.58 GHz RAM: 4GB DDR3L 1333Mhz Storage: 32GB mSATA Software I tried a couple of different operating systems, but Alpine Linux is the most suitable for my use and this machine. It\u0026rsquo;s small, simple, and secure.\nAll the applications I self-hosted are containerized using docker.\nPortainer - Web UI for managing Docker Containers AdGuard Home - Network-wide Ad \u0026amp; Tracker blocking DNS server Unbound - Validating, recursive, caching DNS resolver. Homepage - A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations. FreshRSS - Self-hosted RSS and Atom feed aggregator. Calibre-Web - Web app for browsing, reading and downloading eBooks stored in a Calibre database CyberChef - The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis Syncthing - Open Source Continuous File Synchronization ","href":"https://r4sso.github.io/2023/08/my-janky-home-server/","title":"My Janky Home Server"},{"categories":"","content":"Create a new repository on the command line echo \u0026#34;# Something\u0026#34; \u0026gt;\u0026gt; README.md git init git add README.md git commit -m \u0026#34;first commit\u0026#34; git branch -M main git remote add origin https://github.com/[username]/[repo].git git push -u origin main Push an existing repository from the command line git remote add origin https://github.com/[username]/[repo].git git branch -M main git push -u origin main Common Problem Notes to troubleshoot\nContributions not showing on profile Make sure your config is match\nEmail:\ngit config --global user.email Name:\ngit config --global user.name ","href":"https://r4sso.github.io/notes/git/","title":"Git"},{"categories":"Guides","content":"What is pihole? Pi-hole is a Linux network-level advertisement and Internet tracker blocking application which acts as a DNS sinkhole and optionally a DHCP server, intended for use on a private network.It works by intercepting DNS requests made by devices on your network and blocking requests to domains you provide on the adlist such as (.eg.,advertisements/tracking/phishing domains.)\nWhat is unbound? Unbound is a validating, recursive, caching DNS resolver. It is designed to resolve domain names by starting from the root DNS servers and recursively traversing the DNS hierarchy until it obtains the final IP address associated with a domain.\nThere are many ways to deploy Pi-hole and Unbound on Alpine Linux, but the easiest way is to use Docker with Docker Compose. In this article, I\u0026rsquo;ll be using the official Pi-hole image. If you\u0026rsquo;re interested in a bundled image that already includes Unbound, you can check out the repository at github.com/chriscrowe/docker-pihole-unbound\nEnable community repository Use editor of your choice \u0026amp; uncomment community repository in /etc/apk/repositories\n#/media/cdrom/apks https://ap.edge.kernel.org/alpine/v3.17/main https://ap.edge.kernel.org/alpine/v3.17/community Install docker + docker-compose apk update apk add docker docker-cli-compose Create docker-compose.yaml The configuration below uses macvlan network driver. This allows you to assign different IP addresses and set your own without using the same IP as the host machine.\nIf you want to change the IP address, ensure that you set the FTLCONF_LOCAL_IPV4 to match your IP of your Pi-hole you just set, and change PIHOLE_DNS_ to your unbound IP (.e.g, 192.168.0.6#53).\nMake sure to use the # symbol to specify the ports.\nPlease refer to the documentation for more details: github.com/pi-hole/docker-pi-hole\nversion: \u0026#34;3\u0026#34; # More info at https://github.com/pi-hole/docker-pi-hole/ and https://docs.pi-hole.net/ services: pihole: container_name: pihole image: pihole/pihole:latest # For DHCP it is recommended to remove these ports and instead add: network_mode: \u0026#34;host\u0026#34; ports: - \u0026#34;53:53/tcp\u0026#34; - \u0026#34;53:53/udp\u0026#34; - \u0026#34;67:67/udp\u0026#34; # Only required if you are using Pi-hole as your DHCP server - \u0026#34;80:80/tcp\u0026#34; environment: TZ: \u0026#39;Asia/Singapore\u0026#39; WEBPASSWORD: \u0026#39;\u0026#39; # set a secure password here or it will be random FTLCONF_LOCAL_IPV4: 192.168.0.5 PIHOLE_DNS_: \u0026#39;192.168.0.6#53\u0026#39; DNSSEC: true RATE_LIMIT: 1/3600 # Volumes store your data between container upgrades volumes: - \u0026#39;./etc-pihole:/etc/pihole\u0026#39; - \u0026#39;./etc-dnsmasq.d:/etc/dnsmasq.d\u0026#39; # https://github.com/pi-hole/docker-pi-hole#note-on-capabilities cap_add: - NET_ADMIN # Required if you are using Pi-hole as your DHCP server, else not needed networks: home: ipv4_address: 192.168.0.5 restart: unless-stopped unbound: container_name: unbound image: mvance/unbound:latest ports: - \u0026#34;53:53/tcp\u0026#34; - \u0026#34;53:53/udp\u0026#34; networks: home: ipv4_address: 192.168.0.6 restart: always networks: home: driver: macvlan driver_opts: parent: eth0 ipam: config: - subnet: 192.168.0.0/24 gateway: 192.168.0.1 ip_range: 192.168.0.5/30 # 192.168.0.5 and 192.168.0.6 The IP addresses set above are as follows:\nPi-hole: 192.168.0.5 Unbound: 192.168.0.6 Start the Docker container:\ndocker-compose up -d http://[your_pihole_ip]/admin\n","href":"https://r4sso.github.io/2023/07/deploy-pihole--unbound-on-alpine/","title":"Deploy pihole + unbound on alpine"},{"categories":"","content":"Clean pkg cache List packages\nls /var/cache/pacman/pkg/ | less Remove all pkg except those installed\nsudo pacman -Sc Remove all files\nsudo pacman -Scc Or with yay\nyay -Scc Remove unused packages List unused\npacman -Qtdq Remove unused\nsudo pacman -R $(pacman -Qtdq) Journal logs sudo journalctl --vacuum-time=2d This will remove log older than 2 days, you can change accordingly. Clear journal log older than x day/month/year sudo journalctl --vacuum-size=100M Restrict logs to a certain size Clean home cache cache is located in ~/.cache ","href":"https://r4sso.github.io/notes/arch-cleanup/","title":"Arch Linux: Cleanup"},{"categories":"","content":"Useful tools for Pentest | CTF\nForensics Summary\nTitle - tools name Description - what the tools for CTF - Usefulness for CTF Title Description CTF exiftool meta information reader/writer Clues / flags strings Useful for finding clues foremost Recover files based on their headers, footers, and internal data structures data carving steghide ","href":"https://r4sso.github.io/notes/tools/","title":"Tools"},{"categories":"","content":"Collection of links.\nTitle Description GTFOBins A curated list of Unix binaries that can be exploited by an attacker to bypass local security restrictions CyberChef A s1imple, intuitive web app for carrying out all manner of \u0026ldquo;cyber\u0026rdquo; operations within a web browser. Payloads All The Things A list of useful payloads and bypass for Web Application Security and Pentest/CTF Books Title Description Anna’s Archive Non-profit, open-source search engine for “shadow libraries”. ","href":"https://r4sso.github.io/notes/links/","title":"links"},{"categories":"","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus feugiat ante justo, ut efficitur quam lacinia in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam tincidunt, leo in accumsan vestibulum, urna quam cursus risus, ac venenatis ante purus ac dolor. Nullam tempus lorem ac gravida venenatis. Etiam consectetur luctus magna ac consectetur. Nulla vel felis tempus, ultrices lorem a, aliquam magna. Donec velit libero, hendrerit in egestas vel, pretium nec nisi. Quisque in dolor est. Sed dignissim malesuada elit, eu tristique nunc ultrices id.\nConfig To enable globally, set in config.toml :\n[params] tableOfContents = true set toc to false in fronmatter do disable individually\nFrontmatter \u0026amp; Markdown Feature frontmatter Description Disable Comments comment:false Disable comments on a specific post or page. Disable Table of Contents toc:false Disable the table of contents for a specific post or page. Enable Math math:true Enable math rendering for a specific post or page. Add Thumbnail to Post thumb:\u0026quot;image.jpg\u0026quot; (local images only) Add a thumbnail image to a post. External images are not processed. Image Add images to post:\n![images](images.jpg \u0026#34;alt text here\u0026#34;) Images uploaded locally will be converted into .webp format and also have a .jpg fallback. Mathematical notation. To enable KaTex globally set the parameter math to true in a project\u0026rsquo;s configuration To enable KaTex on a per page basis include the parameter math: true in content files Note: Use the online reference of Supported TeX Functions\nExamples Inline Math:\n$ (\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…) $\n$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$,\n$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$\nBlock math:\n$$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\nThe following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\n# H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution Tiam, ad mint andaepu dandae nostion secatur sequo quae.\nNote that you can use Markdown syntax within a blockquote.\nBlockquote with attribution Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code Code Blocks Code block with backticks \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; List Types Ordered List First item Second item Third item Unordered List List item Another item And another item Nested list Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL+ALT+Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nYoutube Test The above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","href":"https://r4sso.github.io/2021/01/first-init-syntax/","title":"First init: Syntax"}]