|
|
|
% Options for packages loaded elsewhere
|
|
|
|
\PassOptionsToPackage{unicode}{hyperref}
|
|
|
|
\PassOptionsToPackage{hyphens}{url}
|
|
|
|
|
|
|
|
\documentclass[
|
|
|
|
]{article}
|
|
|
|
\usepackage{amsmath,amssymb}
|
|
|
|
\usepackage{titlesec}
|
|
|
|
\usepackage{titling}
|
|
|
|
\usepackage{lmodern}
|
|
|
|
\usepackage{xcolor}
|
|
|
|
\usepackage{iftex}
|
|
|
|
\usepackage[margin=1in]{geometry}
|
|
|
|
\ifPDFTeX
|
|
|
|
\usepackage[T1]{fontenc}
|
|
|
|
\usepackage[utf8]{inputenc}
|
|
|
|
\usepackage{textcomp} % provide euro and other symbols
|
|
|
|
\else % if luatex or xetex
|
|
|
|
\usepackage{unicode-math}
|
|
|
|
\defaultfontfeatures{Scale=MatchLowercase}
|
|
|
|
\defaultfontfeatures[\rmfamily]{Ligatures=TeX,Scale=1}
|
|
|
|
\fi
|
|
|
|
% Use upquote if available, for straight quotes in verbatim environments
|
|
|
|
\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
|
|
|
|
\IfFileExists{microtype.sty}{% use microtype if available
|
|
|
|
\usepackage[]{microtype}
|
|
|
|
\UseMicrotypeSet[protrusion]{basicmath} % disable protrusion for tt fonts
|
|
|
|
}{}
|
|
|
|
\makeatletter
|
|
|
|
\@ifundefined{KOMAClassName}{% if non-KOMA class
|
|
|
|
\IfFileExists{parskip.sty}{%
|
|
|
|
\usepackage{parskip}
|
|
|
|
}{% else
|
|
|
|
\setlength{\parindent}{0pt}
|
|
|
|
\setlength{\parskip}{1pt plus 2pt minus 1pt}}
|
|
|
|
}{% if KOMA class
|
|
|
|
\KOMAoptions{parskip=half}}
|
|
|
|
\makeatother
|
|
|
|
\definecolor{myblue}{RGB}{24, 102, 201}
|
|
|
|
\titleformat{\section}
|
|
|
|
{\huge\bfseries\color{myblue}}
|
|
|
|
{}
|
|
|
|
{0em}
|
|
|
|
{}[\titlerule]
|
|
|
|
|
|
|
|
\titleformat{\subsection}
|
|
|
|
{\Large\bfseries}
|
|
|
|
{}
|
|
|
|
{0em}
|
|
|
|
{}
|
|
|
|
|
|
|
|
\titleformat{\subsubsection}[runin]
|
|
|
|
{\bfseries}
|
|
|
|
{}
|
|
|
|
{0em}
|
|
|
|
{}[:]
|
|
|
|
|
|
|
|
\titlespacing{\subsubsection}
|
|
|
|
{0em}{0.75em}{0.5em}
|
|
|
|
|
|
|
|
\titlespacing{\subsection}
|
|
|
|
{0em}{1em}{0.65em}
|
|
|
|
|
|
|
|
\titlespacing{\maketitle}
|
|
|
|
{0em}{0em}{0em}
|
|
|
|
\renewcommand{\maketitle}{
|
|
|
|
\begin{center}
|
|
|
|
{\huge\bfseries \theauthor}\\
|
|
|
|
\vspace{.35em}
|
|
|
|
\href{https://sufyaan.me/svg}{sufyaan.me/svg}
|
|
|
|
\end{center}
|
|
|
|
}
|
|
|
|
\usepackage{color}
|
|
|
|
\usepackage{fancyvrb}
|
|
|
|
\newcommand{\VerbBar}{|}
|
|
|
|
\newcommand{\VERB}{\Verb[commandchars=\\\{\}]}
|
|
|
|
\DefineVerbatimEnvironment{Highlighting}{Verbatim}{commandchars=\\\{\}}
|
|
|
|
% Add ',fontsize=\small' for more characters per line
|
|
|
|
\newenvironment{Shaded}{}{}
|
|
|
|
\newcommand{\AlertTok}[1]{\textcolor[rgb]{1.00,0.00,0.00}{\textbf{#1}}}
|
|
|
|
\newcommand{\AnnotationTok}[1]{\textcolor[rgb]{0.38,0.63,0.69}{\textbf{\textit{#1}}}}
|
|
|
|
\newcommand{\AttributeTok}[1]{\textcolor[rgb]{0.49,0.56,0.16}{#1}}
|
|
|
|
\newcommand{\BaseNTok}[1]{\textcolor[rgb]{0.25,0.63,0.44}{#1}}
|
|
|
|
\newcommand{\BuiltInTok}[1]{\textcolor[rgb]{0.00,0.50,0.00}{#1}}
|
|
|
|
\newcommand{\CharTok}[1]{\textcolor[rgb]{0.25,0.44,0.63}{#1}}
|
|
|
|
\newcommand{\CommentTok}[1]{\textcolor[rgb]{0.38,0.63,0.69}{\textit{#1}}}
|
|
|
|
\newcommand{\CommentVarTok}[1]{\textcolor[rgb]{0.38,0.63,0.69}{\textbf{\textit{#1}}}}
|
|
|
|
\newcommand{\ConstantTok}[1]{\textcolor[rgb]{0.53,0.00,0.00}{#1}}
|
|
|
|
\newcommand{\ControlFlowTok}[1]{\textcolor[rgb]{0.00,0.44,0.13}{\textbf{#1}}}
|
|
|
|
\newcommand{\DataTypeTok}[1]{\textcolor[rgb]{0.56,0.13,0.00}{#1}}
|
|
|
|
\newcommand{\DecValTok}[1]{\textcolor[rgb]{0.25,0.63,0.44}{#1}}
|
|
|
|
\newcommand{\DocumentationTok}[1]{\textcolor[rgb]{0.73,0.13,0.13}{\textit{#1}}}
|
|
|
|
\newcommand{\ErrorTok}[1]{\textcolor[rgb]{1.00,0.00,0.00}{\textbf{#1}}}
|
|
|
|
\newcommand{\ExtensionTok}[1]{#1}
|
|
|
|
\newcommand{\FloatTok}[1]{\textcolor[rgb]{0.25,0.63,0.44}{#1}}
|
|
|
|
\newcommand{\FunctionTok}[1]{\textcolor[rgb]{0.02,0.16,0.49}{#1}}
|
|
|
|
\newcommand{\ImportTok}[1]{\textcolor[rgb]{0.00,0.50,0.00}{\textbf{#1}}}
|
|
|
|
\newcommand{\InformationTok}[1]{\textcolor[rgb]{0.38,0.63,0.69}{\textbf{\textit{#1}}}}
|
|
|
|
\newcommand{\KeywordTok}[1]{\textcolor[rgb]{0.00,0.44,0.13}{\textbf{#1}}}
|
|
|
|
\newcommand{\NormalTok}[1]{#1}
|
|
|
|
\newcommand{\OperatorTok}[1]{\textcolor[rgb]{0.40,0.40,0.40}{#1}}
|
|
|
|
\newcommand{\OtherTok}[1]{\textcolor[rgb]{0.00,0.44,0.13}{#1}}
|
|
|
|
\newcommand{\PreprocessorTok}[1]{\textcolor[rgb]{0.74,0.48,0.00}{#1}}
|
|
|
|
\newcommand{\RegionMarkerTok}[1]{#1}
|
|
|
|
\newcommand{\SpecialCharTok}[1]{\textcolor[rgb]{0.25,0.44,0.63}{#1}}
|
|
|
|
\newcommand{\SpecialStringTok}[1]{\textcolor[rgb]{0.73,0.40,0.53}{#1}}
|
|
|
|
\newcommand{\StringTok}[1]{\textcolor[rgb]{0.25,0.44,0.63}{#1}}
|
|
|
|
\newcommand{\VariableTok}[1]{\textcolor[rgb]{0.10,0.09,0.49}{#1}}
|
|
|
|
\newcommand{\VerbatimStringTok}[1]{\textcolor[rgb]{0.25,0.44,0.63}{#1}}
|
|
|
|
\newcommand{\WarningTok}[1]{\textcolor[rgb]{0.38,0.63,0.69}{\textbf{\textit{#1}}}}
|
|
|
|
\setlength{\emergencystretch}{3em} % prevent overfull lines
|
|
|
|
\providecommand{\tightlist}{%
|
|
|
|
\setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
|
|
|
|
\setcounter{secnumdepth}{-\maxdimen} % remove section numbering
|
|
|
|
\ifLuaTeX
|
|
|
|
\usepackage[bidi=basic]{babel}
|
|
|
|
\else
|
|
|
|
\usepackage[bidi=default]{babel}
|
|
|
|
\fi
|
|
|
|
\babelprovide[main,import]{english}
|
|
|
|
% get rid of language-specific shorthands (see #6817):
|
|
|
|
\let\LanguageShortHands\languageshorthands
|
|
|
|
\def\languageshorthands#1{}
|
|
|
|
\ifLuaTeX
|
|
|
|
\usepackage{selnolig} % disable illegal ligatures
|
|
|
|
\fi
|
|
|
|
\IfFileExists{bookmark.sty}{\usepackage{bookmark}}{\usepackage{hyperref}}
|
|
|
|
\IfFileExists{xurl.sty}{\usepackage{xurl}}{} % add URL line breaks if available
|
|
|
|
\urlstyle{same} % disable monospaced font for URLs
|
|
|
|
\hypersetup{
|
|
|
|
pdftitle={(POST) Switching To SVGs},
|
|
|
|
pdflang={en},
|
|
|
|
colorlinks=true,
|
|
|
|
linkcolor=blue,
|
|
|
|
filecolor=blue,
|
|
|
|
urlcolor=blue,
|
|
|
|
pdfcreator={LaTeX via pandoc}}
|
|
|
|
|
|
|
|
\title{Sufyaan's Website}
|
|
|
|
\author{Sufyaan's Website}
|
|
|
|
\date{}
|
|
|
|
|
|
|
|
\begin{document}
|
|
|
|
\maketitle
|
|
|
|
|
|
|
|
\section[Switching To SVGs]{Switching To SVGs}\label{why-i-use-terminal-apps}
|
|
|
|
|
|
|
|
\textbf{6 August 2023}
|
|
|
|
|
|
|
|
|
|
|
|
\textbf{Category: }Software
|
|
|
|
|
|
|
|
Debloating my website has been an educational experience to say the
|
|
|
|
least. There were so many small things which seemed insignificant at
|
|
|
|
first but made a massive difference to the speed of my website. Most of
|
|
|
|
these changes have had little to no impact on the look and feel of my
|
|
|
|
website but have reduced the size and improved the efficiency by a lot.
|
|
|
|
|
|
|
|
One of these changes was definitely moving away from Font Awesome. I did
|
|
|
|
not think much of the icons on my website as they were already too many
|
|
|
|
in size for me to switch every single one to another library. However,
|
|
|
|
\href{https://odysee.com/@ericnmurphy:9/web-icons-with-no-external-libraries!:c}{after
|
|
|
|
watching this video from Eric Murphy,} I thought about it. Then, I still
|
|
|
|
said no because there were way too many icons on my website.
|
|
|
|
|
|
|
|
Then, I did a GTMetrix scan of my website and saw that my icons and
|
|
|
|
fonts were taking up 90\% of my website\textquotesingle s initial load
|
|
|
|
resources. That forced me to take on the challenge to change every
|
|
|
|
single icon to SVGs. It was much easier than expected.
|
|
|
|
|
|
|
|
Now, my website is much more leaner than before. I am happy on how this
|
|
|
|
change turned out.
|
|
|
|
|
|
|
|
\end{document}
|