DEV Community: document10

My first internship experience and what I learned

document10 — Wed, 30 Jul 2025 13:48:08 +0000

A few weeks ago as of writing this, I started my first ever internship at a local company, and in this post I'll be sharing my experience during that period. I'm writing this because I think others could find this interesting, but also because a teacher from my college who I'm quite close to, kindly asked me to share my experience once I'm finished, so this is really just taking out two birds with one stone.

Background

As many of you know, I attend college at the Electrical Engineering and Computer Science college part of "Ştefan cel Mare" University of Suceava, and as of writing this I'm in my second year. One of the requirements of the curriculum was 'field practice', where we would work (as interns) at a company/organization, to familarize ourselves with the IT landscape as well as learn new things. There are a couple of restrictions imposed on this:

The total amount of hours worked must add up to exactly 90.
You can't work more than 6 hours per day, or during weekends or holidays.
The practice has to be done by September

This way, to complete the field practice in a time as short as possible, you'd need to work 6h/day, Monday to Friday, for three weeks. Of course, it is possible to spread out the practice over a longer time period, but I chose the former.

The field practice, or internship really, took place between the 7th and 25th of July, one week after exams were done, so I could recharge and also help my sister with joining university too (same as mine, but different field).

Looking for a company

In the past, the college would talk directly to companies so we would have practice spots already reseerved for us, but this year, since there's way more students than in previous years, we were left on our own. We would only get help in extreme cases where we failed to find a place to do field practice on our own.

In a way, it's somewhat understandable, since in the real world, nothing comes on a silver platter. Nonetheless, for many students, including myself, finding a company was a frustrating experience, especially since many of them just couldn't handle the insane number of applicants during this period.

So in early June, after hundreds of sent emails and CV, and many "we'll talk to you later" replies, I finally got a response from a company called Custom Code Factory, saying that they have open spots for July, and we'll talk futher at their office. That was a big relief, since finally the goose chase paid off.

First impressions

Of course, having known nothing about companies and internships besides what mass-media told me, I was expecting big company headquaters and a long drawn out interview. But oh BOY, was I wrong. It turns out this whole operation is orchestrated from an old grandma's attic, and the people there seem more like a family than a company.

We quickly got into talks about what sort of project I'll be working on, what expectations to have, and we also filled some documents, which were necessary for the university to acknowledge the practice period. I wish I would have taken some photos of the place, but they have some photos on their website too.

Starting the internship

July 7th was when I started the internship, and they've assigned me the project I'll be working on during those 3 weeks. As you may know, I already have experience with the basics of web (HTML,CSS,JS) and I've even worked with Node JS to build a Discord bot I later abandoned, but I wanted to learn more about those fancy web frameworks everyone is talking about.

The project would use Next JS and Google Maps' API to build an app. I chose to create an app that tracks the locations of cellular antennas on the map and shows various information about them. This was a project to fix a practical problem I faced, since I run out of signal frequently while travelling.

The app would store info about the antennas (generation, range, location, etc) as well as the operators that managed them.

The project was split into two main parts: the frontend, which is the main website users interact with, and the backend, that performs basic CRUD operations on the database. Let's talk about each of them in detail:

The frontend part

Building the frontend was straightforward. I started out with the basic Next JS template, where I was also familiarized with Tailwind CSS, then I added the map component using the React Google Maps API to place dummy markers on the map. Later I implemented a dashboard to edit the locations and the operators. Here's one of the pages, more screenshots for the final application are available here:

The backend part

The backend was where I encountered the most problems. The plan was first to create a dummy API route in Next JS that would simply operate with the antennas as objects in memory, then use an ORM to perform basic CRUD operations on the antennas and operators in a MySQL database (although I actually used MariaDB because of some changes related to my distro). The first part easy enough, but it was the second part that was quite frustrating.

The ORM that I used, TypeORM was a pain to set up, and a pain to use for the API. And between online answers and Copilot, finding solutions was particularly hard. In the meantime, I got some funny responses from AI like Thanks for sticking with it, we're getting close. or Thanks for sharing the code, that helps a lot. You're really close!.

So after hours of debugging and testing, I finally got the API to work, albeit, I was getting lots of errors which mainly had to do with TypeORM. Looking back, I should have used something like Prisma, which offers a much better experience. In fact, I used it in a different project I codedand it was so much easier.

document10 / deno-fresh-notes-app

Basic notes app made using Deno and Fresh

Deno Fresh Notes App

This is a notes app created using Deno and Fresh. The app implements various concepts of web apps:

Frontend created using Fresh, for lightning-fast load times
Backend REST API using Prisma for basic CRUD operations on a database and file downloads
Modern and responsive design using TailwindCSS
All written in Typescript for seamless development

Screenshots

Installation

Install dependencies

Make sure you have Deno installed and at its latest version.

git clone https://github.com/document10/deno-fresh-notes-app
cd deno-fresh-notes-app
deno install --allow-scripts

Configure database

Update prisma/schema.prisma and example.env according to your database and rename example.env to .env.

Migrate the database and generate the client:

deno run db-setup

You can also use this command to manually generate the client if the previous command failed to generate it or you changed your settings:

deno run db-client

Launch the server

deno run start

(Optional) Set up optimized build

deno

…

View on GitHub

I should also have used TypeScript for the project, but since I didn't know that fully either, I decided to just use normal JS.

The atmosphere at the company

Of course, I wasn't the only one doing internships there, and I got to meet other students doing various other projects. One of them was building some fancy AI training app, nicknamed 'Trainify', and we also got to review each others' apps and discuss our painpoints.

We also got to eat together with the whole staff of the company at lunch, and watch Desperate Housewives together (I wish I was joking). We talked about various aspects of our lives, and it was overall a chill and welcoming space. The people there were also helpful whenever I (or others) were stuck, so the project would always move forward.

Closing thoughts

This whole experience was great for me, as I got to learn about many frameworks I was hesitant to touch in the past, but also I made many friends. They also said they're willing to accept me for practice next year too, so at least that will got smoother next year.

The source code for the project is available on my Github, since they advised me to use source control anyways, but the code is such a mess, and the build process is kinda complicated. I'll probably update it later, but I could still see it being useful for learning about web development.

document10 / ccf-antenna

Proiect practica

Proiect practica CCF

View on GitHub

Big thanks to everyone who made it this far, as well as Custom Code Factory, for giving me an experience of a lifetime.

An autopsy on the CrowdStrike outage

document10 — Sat, 10 Aug 2024 19:45:55 +0000

July 19th was a stressful day for me. My parents were at the hospital dealing with an injury, and I was at home, waiting to see how it would go. To then hear that a massive global outage left millions computers unusable for sure left me with unease.

Thankfully, my parents returned home and the operation went successfully, but I was amongst the few that got a happy ending to their stories that day. Others were stuck at airports or hospitals, or couldn't get any work done because of their broken PCs.

The root cause of these problems was a software called CrowdStrike Falcon, which just so happened to push a faulty update that day, leaving many Windows computers in BSoD limbo. In this post, I decided to analyse the situation more carefully, and discuss the outage from multiple angles.

What caused the issue

CrowdStrike Falcon is marketed as the final form of an antivirus. It works as a kernel mode driver (running in ring 0), and monitoring everything that happens on the computer. Like any good antivirus, you need malware definitions so it can differentiate between malware and legitimate software, and the C00291*.sys files we were instructed to delete were just that.

These malware definitions need to be updated periodically, to ensure that systems are protected as soon as a new threat is discovered. In the case of Falcon, these updates happen automatically, without much user intervention. And it's one such update that caused an internal error, and therefore a crash.

The kicker is that because Falcon operates in kernel mode and loads with the system, its crash dragged down the entire operating system with it every time the system booted up. This is why you had to go into Safe mode to delete the files, because only critical drivers are loaded (albeit if you're using Bitlocker and haven't backed up the keys you're out of luck).

Not a developer issue

Some people on Twitter are speculating that this problem is caused by memory mismanagement. While that may be true, in reality the developer team behind CrowdStrike isn't at fault. Instead, CrowdStrike claims it's a QA issue, or in other words, the update slipped past many of the tests they implemented that could have prevented this issue. Quality assurance screwups are nothing new in the world of software, but with a company like CrowdStrike, whose software runs on millions of computers worldwide, small mistakes like this just can't happen.

I'm probably going on a tangent here, but this whole issue reminds me of Boeing, whose 737 Max not only crashed twice, and took many lives with it, but it also gave many people a near-death experience, after the plane door flew off. Of course, both companies operate in completely different sectors, but what they have in common is that in these sectors, even the smallest negligence can be catastrophic, and it's these small mistakes that proved costly for both companies, whether we're talking about money, lost time or human lives.

The damages are more than $5b, with 8.5 million computers affected in total, and the company's response with $10 giftcards (which didn't work anyways) only rubbed salt on the wound.

At the moment CrowdStrike claims that 97% of affected systems have recovered, but to think that hundreds of thousands of systems are still unoperational is quite unsettling.

Fun fact about CrowdStrike

As an added bonus, it turns out that the current CEO of CrowdStrike, George Kurtz was also McAfee's CTO during 2010, when that company was dealing with an outage of similar proportions, rendering many Windows XP computers broken.

Why Microsoft is also at fault

While the blame falls mostly at CrowdStrike, some are also pointing fingers at Microsoft, because they architected Windows in such a way that allowed for such outage. In response, Microsoft passes the blame onto EU who forced them to open up their OS as an antitrust settlement. EU later denied any responsibility for the outage.

While it's understandable why EU would force such move onto Microsoft, to prevent them from having an unfair advantage, there are many things Microsoft could have done better to prevent this problem. Here are a couple of examples of the top of my head (keep in mind I'm not a kernel/driver developer):

Handling drivers preventing Windows from booting
Better recovery from system crashes
Ensuring drivers don't crash the entire OS with them, even ones that are not critical to the system

The ironic thing about this is that Microsoft DOES acknowledge that software should move away from kernel space and are actively working to make this happen, with features like VBS enclaves or Azure Attestation. So to me it looks like this was just to move pressure away from them.

Anticheats are also problematic

Some users will point out that anticheats work in a similar way to CrowdSrike, in that they use kernel mode drivers that start up with the system, and monitor the system for bad behaviour (cheating in this case). This raises the question as to whether another outage, with gamers this time around, could happen, and I definitely see all the ingredients needed for such a disaster.

For one, game companies are focused more on their game revenue being up as opposed to the safety of their software, and as a result these companies don't have all the experience and attention to detail needed to develop such low level software. And indeed, anticheat software has caused issues like when Vanguard was just introduced into LOL and PCs we're falling like flies.

Youtubers like Low Level Learning and Gardiner Bryant have made videos going into more detail about this issue, and I recommend you check those too. This post focuses on the CrowdStrike outage, but I thought this was relevant here.

What about other platforms?

The keen eye among you will point out that CrowdStrike Falcon is also available on Linux and Mac OS. Thankfully, those platforms were not affected that day, but that doesn't mean that they are immune to such problems. In fact, Falcon did cause some issues on Linux in April, but it was less severe than Windows. Just imagine if all Linux systems were affected, International No-Internet Day wouldn't even begin to cover the gravity of the situation.

Closing thoughts

The CrowdStrike outage has affected many industries worldwide, and there are a few important things we learned. The most important one is that having one company like CrowdStrike control the security of most enterprises is quite a bad idea, and we just saw the implications of that. But also, having code that can access a system at such low levels is a disaster waiting to happen, and we should move away from software with this much access over one's system.

Can you use Google Docs to create your website?

document10 — Sun, 18 Feb 2024 15:49:37 +0000

It was a boring night at the university library. While working on an important document for a project, I start looking around Google Docs, and come across a funny-looking button : "Download as webpage (.zip archive)" . Naturally my curiosity was sparked, since I'm already quite experienced with web developement and design. So could Google Docs be used to create stunning websites, essentially invalidating all the training I've gone through?

Well no, the reality is a bit more complicated, so I took some time to test out this "website builder" to see for myself what can it acheive.

Test Cases

For my first test, I downloaded the very document I was working on (which I can't show), and I was met with a zip file containing the "website". I was surprised to see that it looked pretty close to what it looked in Google Docs. This is when I got more curious. I attempted to put toghether a document with an arrangement of basic styles, and ended up with this:

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGpLhv3qFjX7dUn1mYxfCXhI);ol{margin:0;padding:0}table td,table th{padding:0}.c10{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Roboto";font-style:normal}.c1{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c2{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c12{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c6{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c9{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-style:normal}.c8{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c7{-webkit-text-decoration-skip:none;text-decoration:underline;text-decoration-skip-ink:none;font-style:italic}.c0{font-family:"Roboto";font-style:italic;font-weight:400}.c11{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c13{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c5{font-weight:400;font-family:"Roboto"}.c3{font-weight:700;font-family:"Roboto"}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c11 doc-content"><p class="c10 title" id="h.vrdkew492fff"><span class="c4">Website Title</span></p><p class="c1 subtitle" id="h.66112negqu7i"><span class="c5 c8">Desc</span></p><h1 class="c2" id="h.2a5rnjbk5zp6"><span class="c5 c6">Website Subtitle</span></h1><p class="c12"><span class="c5">The </span><span class="c3">following</span><span class="c5">&nbsp;content </span><span class="c0">is</span><span class="c5">&nbsp;for </span><span class="c5 c13">testing</span><span class="c5">&nbsp;the functionality of </span><span class="c3 c7">Google Docs</span><span class="c5 c9">&nbsp;as a website builder tool.</span></p></body></html>

Yes, the entire document was formatted to be as ~~unreadable~~ compressed as possible, maybe to save space. In my next attempt, I tried including more styles, even URLs and images. Because I included an image into the document, when I extracted the zip file , I was met with a new folder containing the image:

In any case, here's the spagetti HTML generated by Google Docs:

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGj7cmV9Mv51eWkfzN59WO6SqFfA22cXsXWI1Ih-t7ioy);.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb   "}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf   "}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf   "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb   "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0   "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf   "}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb   "}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}ol{margin:0;padding:0}table td,table th{padding:0}.c2{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c0{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Ubuntu";font-style:normal}.c16{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c18{color:#ff9900;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c17{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c14{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:13pt;font-family:"Arial";font-style:normal}.c20{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c5{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c19{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c8{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c10{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-style:normal}.c21{color:#000000;text-decoration:none;vertical-align:baseline;font-size:26pt;font-style:normal}.c6{font-family:"Roboto";color:#1155cc;font-weight:400}.c13{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c11{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c7{font-weight:400;font-family:"Roboto"}.c1{padding:0;margin:0}.c22{color:inherit;text-decoration:inherit}.c12{font-weight:700;font-family:"Roboto"}.c23{font-weight:400;font-family:"Ubuntu"}.c15{font-style:italic}.c9{background-color:#ff9900}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c11 doc-content"><p class="c17 title" id="h.vrdkew492fff"><span class="c7 c21">Website Title</span></p><p class="c0 subtitle" id="h.66112negqu7i"><span class="c7 c19">Desc</span></p><h1 class="c20" id="h.2a5rnjbk5zp6"><span class="c7 c8">Website smaller title</span></h1><p class="c5"><span class="c7">The </span><span class="c12">following</span><span class="c7">&nbsp;content </span><span class="c7 c15">is</span><span class="c7">&nbsp;for </span><span class="c7 c13">testing</span><span class="c7">&nbsp;the functionality of </span><span class="c13 c12 c15">Google Docs</span><span class="c7">&nbsp;as a </span><span class="c6"><a class="c22" href="https://www.google.com/url?q=https://document10.github.io/&amp;sa=D&amp;source=editors&amp;ust=1707524280306009&amp;usg=AOvVaw2C764UhzrtEpuO2DqycjHD">website builder</a></span><span class="c7 c10">&nbsp;tool.</span></p><h2 class="c16" id="h.8pk3e87o5cuv"><span class="c4">Even smaller title</span></h2><ul class="c1 lst-kix_9krdbto0mf6t-0 start"><li class="c2 li-bullet-0"><span class="c18">List</span></li><li class="c2 li-bullet-0"><span class="c3 c9">List</span></li><li class="c2 li-bullet-0"><span class="c14">List</span></li></ul><ol class="c1 lst-kix_77ngjtnr4xy0-0 start" start="1"><li class="c2 li-bullet-0"><span class="c3">List</span></li><li class="c2 li-bullet-0"><span class="c10 c23">List</span></li><li class="c2 li-bullet-0"><span class="c3">List</span></li></ol><p class="c5"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 313.33px;"><img alt="" src="images/image1.png" style="width: 601.70px; height: 313.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p></body></html>

You can try these codes out for yourself, but note that the images won't work, since it needs an image stored at a local path.

For my final test, I tried putting everything and the kitchen sink in that document,and i ended up with this:

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGj7cmV9Mv51eWkfzN59WO6SqFfA22cXsXWI1Ih-t7ioy);ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}.lst-kix_zedufsgekgex-0>li{counter-increment:lst-ctn-kix_zedufsgekgex-0}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ol.lst-kix_zedufsgekgex-8.start{counter-reset:lst-ctn-kix_zedufsgekgex-8 0}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5.start{counter-reset:lst-ctn-kix_zedufsgekgex-5 0}ol.lst-kix_zedufsgekgex-2.start{counter-reset:lst-ctn-kix_zedufsgekgex-2 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_zedufsgekgex-1>li{counter-increment:lst-ctn-kix_zedufsgekgex-1}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf   "}ol.lst-kix_zedufsgekgex-3.start{counter-reset:lst-ctn-kix_zedufsgekgex-3 0}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}ol.lst-kix_zedufsgekgex-4.start{counter-reset:lst-ctn-kix_zedufsgekgex-4 0}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}.lst-kix_zedufsgekgex-2>li{counter-increment:lst-ctn-kix_zedufsgekgex-2}.lst-kix_zedufsgekgex-8>li{counter-increment:lst-ctn-kix_zedufsgekgex-8}.lst-kix_zedufsgekgex-5>li{counter-increment:lst-ctn-kix_zedufsgekgex-5}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}.lst-kix_sjfi6gnc81zt-2>li:before{content:"\0025a0   "}.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}.lst-kix_sjfi6gnc81zt-1>li:before{content:"\0025cb   "}.lst-kix_sjfi6gnc81zt-5>li:before{content:"\0025a0   "}.lst-kix_sjfi6gnc81zt-4>li:before{content:"\0025cb   "}.lst-kix_sjfi6gnc81zt-3>li:before{content:"\0025cf   "}ul.lst-kix_sjfi6gnc81zt-1{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-0{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-5{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-4{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-3{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}.lst-kix_sjfi6gnc81zt-6>li:before{content:"\0025cf   "}ul.lst-kix_sjfi6gnc81zt-8{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-7{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-6{list-style-type:none}.lst-kix_sjfi6gnc81zt-8>li:before{content:"\0025a0   "}.lst-kix_zedufsgekgex-6>li{counter-increment:lst-ctn-kix_zedufsgekgex-6}.lst-kix_sjfi6gnc81zt-7>li:before{content:"\0025cb   "}.lst-kix_zedufsgekgex-8>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-8,lower-roman) ". "}.lst-kix_zedufsgekgex-4>li{counter-increment:lst-ctn-kix_zedufsgekgex-4}.lst-kix_zedufsgekgex-7>li{counter-increment:lst-ctn-kix_zedufsgekgex-7}.lst-kix_zedufsgekgex-5>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-5,lower-roman) ". "}.lst-kix_zedufsgekgex-7>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-7,lower-latin) ". "}.lst-kix_zedufsgekgex-6>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-6,decimal) ". "}ol.lst-kix_zedufsgekgex-6.start{counter-reset:lst-ctn-kix_zedufsgekgex-6 0}.lst-kix_sjfi6gnc81zt-0>li:before{content:"\0025cf   "}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb   "}ol.lst-kix_zedufsgekgex-0{list-style-type:none}.lst-kix_zedufsgekgex-3>li{counter-increment:lst-ctn-kix_zedufsgekgex-3}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf   "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb   "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0   "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_zedufsgekgex-1>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-1,lower-latin) ". "}.lst-kix_zedufsgekgex-3>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-3,decimal) ". "}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf   "}ol.lst-kix_zedufsgekgex-7.start{counter-reset:lst-ctn-kix_zedufsgekgex-7 0}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb   "}.lst-kix_zedufsgekgex-0>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-0,decimal) ". "}ol.lst-kix_zedufsgekgex-0.start{counter-reset:lst-ctn-kix_zedufsgekgex-0 0}.lst-kix_zedufsgekgex-4>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_zedufsgekgex-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_zedufsgekgex-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}ol.lst-kix_zedufsgekgex-2{list-style-type:none}ol.lst-kix_zedufsgekgex-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}.lst-kix_zedufsgekgex-2>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-2,lower-roman) ". "}ol.lst-kix_zedufsgekgex-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}ol.lst-kix_zedufsgekgex-1.start{counter-reset:lst-ctn-kix_zedufsgekgex-1 0}ol{margin:0;padding:0}table td,table th{padding:0}.c32{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:0pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c0{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:100pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c22{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:0pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c33{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c11{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:112.9pt;border-top-color:#000000;border-bottom-style:solid}.c23{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:0pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c24{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:100pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c25{margin-left:36pt;padding-top:0pt;padding-bottom:16pt;line-height:1.0;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c15{color:#ff9900;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Roboto";font-style:normal}.c34{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:13pt;font-family:"Arial";font-style:normal}.c35{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Ubuntu";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:19pt;font-family:"Arial";font-style:italic}.c28{padding-top:18pt;padding-bottom:6pt;line-height:1.0;page-break-after:avoid;orphans:2;widows:2;text-align:center}.c13{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c19{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Ubuntu";font-style:normal}.c26{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c36{margin-left:36pt;padding-top:20pt;padding-bottom:6pt;line-height:1.0;page-break-after:avoid;text-align:left}.c20{color:#000000;text-decoration:none;vertical-align:baseline;font-size:26pt;font-style:normal}.c21{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c37{padding-top:0pt;padding-bottom:3pt;line-height:1.0;page-break-after:avoid;text-align:left}.c30{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c2{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c8{margin-left:36pt;padding-left:0pt;orphans:2;widows:2}.c31{border-spacing:0;border-collapse:collapse;margin-right:auto}.c39{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c3{font-family:"Roboto";color:#1155cc;font-weight:400}.c17{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c5{padding:0;margin:0}.c16{margin-left:36pt;padding-left:0pt}.c10{font-weight:400;font-family:"Roboto"}.c18{font-weight:700;font-family:"Roboto"}.c29{orphans:2;widows:2}.c38{color:inherit;text-decoration:inherit}.c27{color:#0000ee}.c14{background-color:#ff9900}.c12{font-style:italic}.c7{height:11pt}.c9{height:0pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c39 doc-content"><p class="c29 c37 title" id="h.vrdkew492fff"><span class="c10 c20">Website Title</span></p><p class="c25 subtitle" id="h.66112negqu7i"><span class="c10 c21">Desc</span></p><h1 class="c29 c36" id="h.2a5rnjbk5zp6"><span class="c10 c30">Website smaller title</span></h1><p class="c2 c29"><span class="c10">The </span><span class="c18">following</span><span class="c10">&nbsp;content </span><span class="c10 c12">is</span><span class="c10">&nbsp;for </span><span class="c10 c17">testing</span><span class="c10">&nbsp;the functionality of </span><span class="c17 c18 c12">Google Docs</span><span class="c10">&nbsp;as a </span><span class="c3"><a class="c38" href="https://www.google.com/url?q=https://document10.github.io/&amp;sa=D&amp;source=editors&amp;ust=1708111620537886&amp;usg=AOvVaw3wTPsFTTDqNdooSIbaXEw0">website builder</a></span><span class="c4">&nbsp;tool.</span></p><h2 class="c28" id="h.8pk3e87o5cuv"><span class="c35">Even smaller title</span></h2><ul class="c5 lst-kix_9krdbto0mf6t-0 start"><li class="c2 c8 li-bullet-0"><span class="c15">List</span></li><li class="c2 c8 li-bullet-0"><span class="c1 c14">List</span></li><li class="c2 c8 li-bullet-0"><span class="c34">List</span></li></ul><ol class="c5 lst-kix_77ngjtnr4xy0-0 start" start="1"><li class="c2 c8 li-bullet-0"><span class="c6">List</span></li><li class="c2 c8 li-bullet-0"><span class="c19">List</span></li><li class="c2 c8 li-bullet-0"><span class="c1">List</span></li></ol><p class="c2 c29"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 313.33px;"><img alt="" src="images/image3.png" style="width: 601.70px; height: 313.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c26" dir="rtl"><span class="c1">Some text contained here.</span></p><a id="t.b4d587ff15870bee40efb646351b1aba88ca1acc"></a><a id="t.0"></a><table class="c31"><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">11</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">12</span></p></td><td class="c11" colspan="1" rowspan="1"><ol class="c5 lst-kix_zedufsgekgex-0 start" start="1"><li class="c2 c16 li-bullet-0"><span class="c1">13</span></li></ol></td><td class="c11" colspan="1" rowspan="1"><ul class="c5 lst-kix_sjfi6gnc81zt-0 start"><li class="c2 c16 li-bullet-0"><span class="c1">14</span></li></ul></td></tr><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">21</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">22</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">23</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">24</span></p></td></tr><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">31</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">32</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">33</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">34</span></p></td></tr></table><p class="c26"><img src="images/image1.png"></p><a id="t.4988a7a6e0ce213ad52679ac1afa2db5ffc0b62e"></a><a id="t.1"></a><table class="c31"><thead><tr class="c9"><td class="c32" colspan="1" rowspan="1"><p class="c2"><span class="c13">Proiect</span></p></td><td class="c0" colspan="1" rowspan="1"><p class="c2"><span class="c13">Stare</span></p></td><td class="c0" colspan="1" rowspan="1"><p class="c2"><span class="c13">Fi&#537;iere asociate</span></p></td><td class="c22" colspan="1" rowspan="1"><p class="c2"><span class="c13">Note</span></p></td><tbody></tbody></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">Ne&icirc;nceput</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fi&#537;ier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">&Icirc;n desf&#259;&#537;urare</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fi&#537;ier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">Lansat</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fi&#537;ier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr></thead></table><p class="c26"><span class="c17 c27">Ne&icirc;nceput</span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 292.00px; height: 260.00px;"><img alt="" src="images/image4.png" style="width: 292.00px; height: 260.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 372.00px;"><img alt="" src="images/image2.png" style="width: 601.70px; height: 372.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="Points scored"></span></p></body></html>

This time around, quite a lot of things were broken, since there was more interactivity going on. I suggest not to look at the code too hard as it's really messy.

Actually trying to build a website

Enough messing auround now it's time to actually build a functional website and see how useful it is. My first idea was of a blog post about the 5 cutest dog breeds, but since I'm not an expert in dogs, I asked ~~ChatGPT~~ Microsoft Copilot to give me the text for this post using this prompt:

You are the writer for a blog related to nature and lifestyle. Your job is to create a post about the 5 cutest dog breeds in the world. The post should contain a good introduction that instantly catches the readers' attention, and it should be well organised into multiple sections.

Right away, the AI generated the text and organised it in the typical blogpost style. It also attempted to add images but those seem to be broken so I had to look for images myself.

Another problem was that the post was provided in Markdown.This makes sense since most posts (including this one) are written in this way, but for my usecase I just needed plain text, because I would add the formatting afterwards. Also Google Docs's markdown support doesn't seem to work when pasting large walls of text at once, so I had to convert the code to regular text and apply styling manually.

Next, I needed some images (some that are actually working), so I went on Google Images and grabbed the first image that made sense, and placed it in the document.

Of course, if I want to be a good blog writter, I would also need to fact-check the information given by the AI (better yet not use AI at all), as well as ensure that none of the images aren't copyright protected, but since this was just a demo, I will skip on these steps.

Lastly, I downloaded the page, opened it and it actually ended up looking great. There was of course a lot more things I could've done to make the page look better, but the initial result ended up looking pretty nice.Here's the source code of the website, minus working images:

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}.lst-kix_zedufsgekgex-0>li{counter-increment:lst-ctn-kix_zedufsgekgex-0}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ol.lst-kix_zedufsgekgex-8.start{counter-reset:lst-ctn-kix_zedufsgekgex-8 0}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5.start{counter-reset:lst-ctn-kix_zedufsgekgex-5 0}ol.lst-kix_zedufsgekgex-2.start{counter-reset:lst-ctn-kix_zedufsgekgex-2 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_zedufsgekgex-1>li{counter-increment:lst-ctn-kix_zedufsgekgex-1}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf   "}ol.lst-kix_zedufsgekgex-3.start{counter-reset:lst-ctn-kix_zedufsgekgex-3 0}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}ol.lst-kix_zedufsgekgex-4.start{counter-reset:lst-ctn-kix_zedufsgekgex-4 0}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}.lst-kix_zedufsgekgex-2>li{counter-increment:lst-ctn-kix_zedufsgekgex-2}.lst-kix_zedufsgekgex-8>li{counter-increment:lst-ctn-kix_zedufsgekgex-8}.lst-kix_zedufsgekgex-5>li{counter-increment:lst-ctn-kix_zedufsgekgex-5}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}.lst-kix_sjfi6gnc81zt-2>li:before{content:"\0025a0   "}.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}.lst-kix_sjfi6gnc81zt-1>li:before{content:"\0025cb   "}.lst-kix_sjfi6gnc81zt-5>li:before{content:"\0025a0   "}.lst-kix_sjfi6gnc81zt-4>li:before{content:"\0025cb   "}.lst-kix_sjfi6gnc81zt-3>li:before{content:"\0025cf   "}ul.lst-kix_sjfi6gnc81zt-1{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-0{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-5{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-4{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}ul.lst-kix_sjfi6gnc81zt-2{list-style-type:none}.lst-kix_sjfi6gnc81zt-6>li:before{content:"\0025cf   "}ul.lst-kix_sjfi6gnc81zt-8{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-7{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-6{list-style-type:none}.lst-kix_zedufsgekgex-6>li{counter-increment:lst-ctn-kix_zedufsgekgex-6}.lst-kix_sjfi6gnc81zt-8>li:before{content:"\0025a0   "}.lst-kix_sjfi6gnc81zt-7>li:before{content:"\0025cb   "}.lst-kix_zedufsgekgex-8>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-8,lower-roman) ". "}.lst-kix_zedufsgekgex-4>li{counter-increment:lst-ctn-kix_zedufsgekgex-4}.lst-kix_zedufsgekgex-7>li{counter-increment:lst-ctn-kix_zedufsgekgex-7}.lst-kix_zedufsgekgex-5>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-5,lower-roman) ". "}.lst-kix_zedufsgekgex-7>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-7,lower-latin) ". "}.lst-kix_zedufsgekgex-6>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-6,decimal) ". "}ol.lst-kix_zedufsgekgex-6.start{counter-reset:lst-ctn-kix_zedufsgekgex-6 0}.lst-kix_sjfi6gnc81zt-0>li:before{content:"\0025cf   "}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb   "}ol.lst-kix_zedufsgekgex-0{list-style-type:none}.lst-kix_zedufsgekgex-3>li{counter-increment:lst-ctn-kix_zedufsgekgex-3}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf   "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb   "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0   "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0   "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_zedufsgekgex-1>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-1,lower-latin) ". "}.lst-kix_zedufsgekgex-3>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-3,decimal) ". "}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf   "}ol.lst-kix_zedufsgekgex-7.start{counter-reset:lst-ctn-kix_zedufsgekgex-7 0}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb   "}.lst-kix_zedufsgekgex-0>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-0,decimal) ". "}ol.lst-kix_zedufsgekgex-0.start{counter-reset:lst-ctn-kix_zedufsgekgex-0 0}.lst-kix_zedufsgekgex-4>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_zedufsgekgex-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_zedufsgekgex-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}ol.lst-kix_zedufsgekgex-2{list-style-type:none}ol.lst-kix_zedufsgekgex-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}.lst-kix_zedufsgekgex-2>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-2,lower-roman) ". "}ol.lst-kix_zedufsgekgex-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}ol.lst-kix_zedufsgekgex-1.start{counter-reset:lst-ctn-kix_zedufsgekgex-1 0}ol{margin:0;padding:0}table td,table th{padding:0}.c6{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c7{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c9{color:#666666;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:15pt;font-family:"Arial";font-style:normal}.c5{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Arial";font-style:normal}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c0{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c1{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c8{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c2{height:11pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c8 doc-content"><p class="c6 title" id="h.6i5d3wx1cbp0"><span class="c5">&nbsp;&#128062; The Top 5 Cutest Dog Breeds That Will Melt Your Heart! &#128062;</span></p><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 600.00px; height: 400.00px;"><img alt="" src="images/image2.png" style="width: 600.00px; height: 400.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Are you ready to embark on a delightful journey through the world of adorable canines? Look no further! In this post, we&#39;ll introduce you to the five most charming and endearing dog breeds that will leave you grinning from ear to ear. From fluffy furballs to pint-sized companions, these pups are guaranteed to steal your heart. So, grab your favorite mug of cocoa, snuggle up, and let&#39;s dive into the world of irresistible cuteness!</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.57dtw4qh0c15"><span class="c4">1. Cavalier King Charles Spaniel</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image4.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">The Cavalier King Charles Spaniel is the epitome of elegance and sweetness. With their expressive eyes and silky, feathered ears, they look like they stepped straight out of a fairy tale. These little charmers are affectionate, gentle, and thrive on cuddles. Whether they&#39;re perched on your lap or chasing butterflies in the garden, their regal demeanor and wagging tails will make you swoon.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.2ki5f5b14m84"><span class="c4">2. Pomeranian</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image5.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Don&#39;t let their small size fool you&mdash;Pomeranians pack a punch of cuteness! These fluffy balls of energy have a lion-like mane and an attitude to match. Their vibrant personalities and playful antics will keep you entertained for hours. Plus, their fox-like faces and plume-like tails make them irresistible Instagram models. Prepare for daily doses of &quot;aww&quot; as you watch your Pomeranian conquer hearts wherever they go.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.hx7fh0kcir6r"><span class="c4">3. French Bulldog</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 600.00px; height: 400.00px;"><img alt="" src="images/image6.png" style="width: 600.00px; height: 400.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Meet the French Bulldog, the pint-sized powerhouse of charm. Their bat-like ears, wrinkled snouts, and stocky bodies exude charisma. Despite their comical appearance, Frenchies are loyal, affectionate, and downright adorable. Whether they&#39;re snuggling under blankets or attempting yoga poses, their quirky expressions will leave you grinning. Warning: Owning a French Bulldog may lead to spontaneous laughter fits.</span></p><h1 class="c0" id="h.bxfs9949oong"><span class="c4">4. Shiba Inu</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image3.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1"><span class="c3">Shiba Inus are the embodiment of &quot;small but mighty.&quot; These Japanese treasures have a fox-like appearance, with plush coats and a confident strut. Their independence and mischievous nature add to their charm. Picture a Shiba Inu perched on a hill, surveying the world with those soulful eyes&mdash;utterly captivating! Just be prepared for their sassy attitude and occasional bursts of zoomies.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.pcklpf9cjfl1"><span class="c4">5. Dachshund</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image1.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1"><span class="c3">Last but not least, we have the Dachshund, also known as the &quot;wiener dog.&quot; Their elongated bodies and short legs make them look like hot dogs with tails. But don&#39;t be fooled&mdash;these little sausages are bursting with personality! Dachshunds are playful, curious, and fiercely loyal. Whether they&#39;re burrowing under blankets or chasing squirrels, their determination and cuteness will win you over.</span></p><p class="c1 c2"><span class="c3"></span></p><p class="c7 subtitle" id="h.h1keun3cqdyy"><span class="c9">So there you have it&mdash;the fabulous five dog breeds that redefine cuteness. Which one stole your heart? Let us know in the comments below! &#128054;&#10084;&#65039;</span></p><p class="c1 c2"><span class="c3"></span></p></body></html>

Advantages and Disadvantages

Now that I played around enough with this "website builder" , it's time to talk about the ups and downs of this tool. There are lots of nuances with Google Docs so let's go through them:

Advantages

Easy to use

By design, Google Docs is made to be very easy to understand, even by someone who never had any experience with word processors and such. And if you do, then even better. This means that building a website is pretty straightforward (with some caveats that we will discuss later).

Made by Google

This can be a double-edged sword and we'll talk about this later, but because this is made by Google, you don't need any extra accounts or login details since pretty much everyone owns a Google account at this point. You can take advantage of syncing across devices, collaboration, extentions, and the list goes on.

Markdown support

I did test Google Docs' markdown support too, and it's basically what you would expect from a markdown editor. Markdown makes posts so easy to make, so it's a great tool to have for your website

Disavantages

While Google Docs as a website builder can be quite useful, there are enough downsides to using it that i wouldn't recommend this tool for anything serious.

Lack of advanced styling/elements

The Achille's heel for this tool, there is no way to create advanced designs, like the ones we see in modern websites. Also, there is no way to add fancy interactive elements by default, which makes this only useful for basic blog posts, and even there its better to just build it yourself.

And sure, Google Docs has a wide extentions ecosystem, but it;s unlikely they'll actually work on the web, since they were designed with viewing the document normally in mind, and this also adds unnecesary overhead.

Spagetti code

You probably noticed that the code given out by Google Docs is a one liner mess, and it's hard to navigate. This structuring of the code makes sense, since the document could be stored on some flash drive or could be sent on the internet, where file sizes do matter. But even then it's more practical to export the document as PDF or DOCX, and if you need to look through the document to make changes, something you will have to do if you want the website to look good, you're going to have a tough time.

Owned by Google

I mentioned previously that this tool being owned by Google is a great advantage, but it can also be a bad thing, for multiple reasons. Putting any privacy concerns to the side, the big problems come once your Google account gets banned or restricted. This can be especially bad if you're using an account controlled by an organisation, which was the case for the account I used to edit the project document I mentioned at the begining. Having your organisation view your website endeavours can be a pretty awkward conversation starter.

Finally, if your Google Drive space is full, you won't be able to edit your website, and the 15 GB we get for free can be filled up really fast if you also have a phone using the same Google account to back up photos.

No hosting provided

Finally, with Google Docs you don't have a direct way to host the website. Instead you're provided with the source code of the website, and you need to figure out how to host it yourself. This might not be an issue for some people. In fact, I could figure out how to set up Nginx or some other HTTPS server in one weekend, but not everyone has the time or knowledge for doing this. This is one of the main selling points of automatic website builders like Wix or Squarespace, they not only make building the website easier, but they also deal with the annoying backend stuff for you, like hosting the website, server maintenance and sometimes even make getting a domain name easier.

Should you use this tool?

The short answer is no. There are better tools to build websites that offer similar, if not better features compared to Google Docs, and they may not be too pricy either. However I still see this as a useful learning tool, if you're just getting started in web developement. You can see how the web works, but also what bad developer practices to avoid.

A simple guide for configuring sudo and doas

document10 — Sun, 24 Dec 2023 14:30:27 +0000

When doing work on an Unix system,it's advised to use as little privileges as posible,so as to avoid the risk of breaking anything by accident.But when you need to make any singificant changes to the system,like installing/updating packages or changing critical configs,that is a situation when having the right permissions is crucial.

In most cases this is done using sudo or doas,where sudo is preconfigured for distros like Ubuntu,Fedora,etc.If you're using a more Do-It-Yourself system like Arch or FreeBSD,that may not be the case.But fear not,since I can help you with configuring either of them in this post,with examples.

Wheel group

Often in this post,you'll see me mention the wheel group. This is a special group that is used with these tools ,for easily adding or removing access to these commands. If you're wondering about why it's named the wheel group,you can watch this video.

To see what groups your user is in run this command:

groups username

replacing username with the name of your user.The command should give you a list of groups your user is part of.If you see the wheel group there,you can continue.Otherwise run the following command as the root user:

usermod -a -G wheel username

Replace username with your username.

FreeBSD users should use the following command:

pw groupmod wheel -m username

where username is the name of your user.

If you are using sudo you may also want to add your user to the sudo group, which is done by replacing the wheel in the prevoius commands with sudo.

Sudo

sudo used to be the short form for superuser do but now it is called in the official project page as substitute user do,because it's used to run commands as a different user than the one you are currently logged in.Most of the time,however, it is used to access the super user or root (hence the original name).

Acording to wikipedia, the tool had its early origins around 1980, and was developed by Robert Coggeshall and Cliff Spencer at the Department of Computer Science at SUNY/Buffalo.
Sudo is ubiquitous in most Linux distros,and there's a good chance it's already installed and configured for your system.If not, this guide is for you.

Installation

First you'll want to ensure sudo is installed in the first place.To do that run this command:

sudo -V

This should show information about the current install of sudo.If the command runs succesfully,you can skip to configuration,otherwise we need to install it manually.This is done by running one of the following commands (depending on your distribution),logged in as the root user:

Ubuntu/Debian :apt install sudo
Arch:pacman -S sudo
OpenSUSE:zypper install sudo
RHEL/Fedora:dnf install sudo
Void Linux:xbps-install sudo
FreeBSD:pkg install sudo

Configuration using the sudoers file

There are two main ways to configure sudo.The first one is using the sudoers file.It is located at /etc/sudoers for Linux,and /usr/local/etc/sudoers for FreeBSD respectively.The paths are different,but the configuration works in the same way.

A typical sudoers file looks like this.

The sudoers file must be edited with the visudo command,which ensures the config is free of errors.Running this command as the root user will result in opening vi by default.If you want to use a different editor you can set the VISUAL environment varaible to the editor you want.
For example,if you want to use micro as the text editor run:

VISUAL=micro visudo

or you can run export VISUAL=micro before running visudo.

There are lots of things we can configure inside the sudoers file,but for this post we'll focus on giving users access to the sudo command.The basic syntax is the following:

User Host=(RunAs) Command

where User is the user this applies to,Host is the host this applies to,RunAs is the target user and Command is the Commands that can be used.

Most of the time,you'll use this:

username ALL=(ALL) ALL

This gives username (replace with the target user) access to all users, and all commands. Aditionally you can add NOPASSWD: before the last argument to allow the user to run sudo without having to type the password every time (THIS IS VERY DANGEROUS,DON'T DO THIS).

You can also replace the username with the name of a group preceeded by % to have the same effect over all of the users of the group.In fact,the default config contains lines which can be uncommented to give all users from the wheel and sudo groups access to the sudo command.

## Uncomment to allow members of group wheel to execute any command
# %wheel ALL=(ALL:ALL) ALL

## Same thing without a password
# %wheel ALL=(ALL:ALL) NOPASSWD: ALL

## Uncomment to allow members of group sudo to execute any command
# %sudo ALL=(ALL:ALL) ALL

Configuration using the sudoers.d directory

Another way to configure sudo is using the sudoers.d directory.This is one way to separate the configuration.
The directory is located at /etc/sudoers.d/ for Linux and /usr/local/etc/sudoers.d/ for FreeBSD respectively.Here you can create multiple files,each with different configurations.

First ensure this line is in your sudoers file:

Linux - @includedir /etc/sudoers.d
FreeBSD - @includedir /usr/local/etc/sudoers.d

Next,you may create as many configs as you need ,using any editor you like ,related to many users or groups.For example:

echo "username ALL=(ALL) ALL" >> /etc/sudoers.d/username

is the simplest way to give username access to sudo.You don't have to name it the same as the user,but it's good to keep things organised.

Doas

Doas was created by Ted Unangst for OpenBSD,as a simpler and safer alternative to sudo.doas is not configured by default on most distros,but configuring it is much easier than sudo.

Installation

To check if doas is installed run

doas -s

which should drop you in a root shell.If the command is not installed,use one of the following to install it:

Ubuntu/Debian :apt install doas
Arch:pacman -S opendoas
OpenSUSE:zypper install doas
RHEL/Fedora:dnf install opendoas
Void Linux:xbps-install opendoas
FreeBSD:pkg install doas

Configuration

The default config is located at /etc/doas.conf for Linux and /usr/local/etc/doas.conf for FreeBSD.Unlike sudo,this file is not created when you install doas,and without it the command is useless.So we need to create it,and populate it with appropriate rules.

After creating the file,we need to ensure it has the correct permissions.For Linux:

chown -c root:root /etc/doas.conf
chmod -c 0400 /etc/doas.conf

and for FreeBSD:

chown -c root:root /usr/local/etc/doas.conf
chmod -c 0400 /usr/local/etc/doas.conf

Aditionally,ensure the config file ends with a newline.

The basic structure for giving access to the doas command is as follows:

permit|deny [options] identity [as target] [cmd command [args ...]]

where identity is the target user, target (if specified) is the user identity can run commands as and command are the commands the user is allowed to use.If command is ommited,the user can run any commands.

You can also add various options after permit/deny for various functions.Here are the more commonly used ones:

keepenv : keep environment variables
nopass : use doas without a password (BAD IDEA!).
persist : don't prompt the user to type the password again after some time (potentially unsafe)

For example:

permit persist keepenv : username

allows username (replace with your username) to run any commands using doas.

You may also want to allow users of the wheel group to run doas, which is acheived using:

permit persist keepenv : wheel

Once you're done with editing your config,you need to make sure the config does not have any syntax errors,that may prevent doas from running properly.You can do this by running the following command as the root user:

doas -C /etc/doas.conf && echo "config ok" || echo "config error"

(change /etc/doas.conf for /usr/local/etc/doas.conf for FreeBSD)

Environment variables

Keep in mind that doas does not retain all the environment variables that sudo does. Notably, XAUTHORITY, LANG and LC_ALL are omitted, which makes using X11 harder. So it's good to use this line to fix that:

permit setenv { XAUTHORITY LANG LC_ALL } :wheel

Aditionally,because doas was developed for OpenBSD,it also retains some of its quirks,like how user-installed executables are stored in /usr/local/bin,in contrast to /usr/bin where Linux stores them. As a result,doas can have problems on Linux so the following workaround can be used:

permit setenv {PATH=/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin} :wheel

Note that you don't need to do this workaround on FreeBSD or OpenBSD.

Combining the two lines we get:

permit persist setenv {PATH=/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin XAUTHORITY LANG LC_ALL} :wheel

Conclusion

I hope this tutorial was helpful. I will be posting more tutorials and opinion posts in 2024. Happy new year!

DEV Community: document10

My first internship experience and what I learned

Background

Looking for a company

First impressions

Starting the internship

The frontend part

The backend part

document10 / deno-fresh-notes-app

Basic notes app made using Deno and Fresh

Deno Fresh Notes App

Screenshots

Installation

The atmosphere at the company

Closing thoughts

document10 / ccf-antenna

Proiect practica

An autopsy on the CrowdStrike outage

What caused the issue

Not a developer issue

Fun fact about CrowdStrike

Why Microsoft is also at fault

Anticheats are also problematic

What about other platforms?

Closing thoughts

Can you use Google Docs to create your website?

Test Cases

Actually trying to build a website

Advantages and Disadvantages

Advantages

Easy to use

Made by Google

Markdown support

Disavantages

Lack of advanced styling/elements

Spagetti code

Owned by Google

No hosting provided

Should you use this tool?

A simple guide for configuring sudo and doas

Wheel group

Sudo

Installation

Configuration using the sudoers file

Configuration using the sudoers.d directory

Doas

Installation

Configuration

Environment variables

Conclusion

Sources