mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-07 16:15:54 -05:00
Redirect page to self-hosted domain
This commit is contained in:
parent
093f311e10
commit
a6747610d1
13 changed files with 20 additions and 644 deletions
|
|
@ -1,84 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="../styles/styles.css">
|
|
||||||
<link rel="stylesheet" href="../styles/thoughts.css">
|
|
||||||
<title>Plasma Widgets | Hamza Nasher-Alneam</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a class="home" href="../index.html">Home</a>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<div class="content thoughtsblock" style="min-height: 80vh;">
|
|
||||||
<div class="article">
|
|
||||||
<p style="text-align: center; font-family: sans-serif;">I have had an awful time working with KDE widgets - so I'm trying to help you with them! I'll add more articles later.</p>
|
|
||||||
<br><br>
|
|
||||||
<h1 id="publish-widget" onclick="copy('publish-widget')">Publish your KDE Widget</h1>
|
|
||||||
<h2>May 15 2024</h2>
|
|
||||||
<p>You've just built an incredible KDE widget, and you want to share it with the world. But how do you make sure hundreds
|
|
||||||
of people will get to try your new widget?</p>
|
|
||||||
<p>The best way to publish a widget is through the KDE Store. Opendesktop hosts the KDE Store, so first you'll need to make
|
|
||||||
an account with them. Go to the <a href="https://store.kde.org/browse/">KDE Store</a> and click "Register" in the top
|
|
||||||
right corner. That will take you through the process of creating an account. Once you have an account, go back to the
|
|
||||||
main page of the KDE Store, and log in if you need to. If you click on the profile picture in the right corner, you
|
|
||||||
should get a menu that looks like this:</p>
|
|
||||||
<div style="width: 100%; text-align: center">
|
|
||||||
<img style="box-shadow: 0 0 .2em #ccc; border-radius: .4em;" src="../images/plasma-widgets/profile-icon-menu.png" alt="Profile icon menu">
|
|
||||||
</div>
|
|
||||||
<p>Click on Add Product, which will take you to this
|
|
||||||
page:</p>
|
|
||||||
<div style="width: 100%; text-align: center">
|
|
||||||
<img style="box-shadow: 0 0 .2em #ccc; border-radius: .4em;"
|
|
||||||
src="../images/plasma-widgets/new-product-page.png" alt="Profile icon menu">
|
|
||||||
</div>
|
|
||||||
<p>Fill in the information for your app, using "Plasma Mobile Widgets" as the catagory.
|
|
||||||
When you've entered all the needed catagories, press next. We can skip the settings step, so just click next again. Add your .plasmoid file, and click save.</p>
|
|
||||||
<p>That's it! If you go back to the main page of the KDE Store, search your app name and it should come up.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="footer">
|
|
||||||
<div>
|
|
||||||
<h2>Find me</h2>
|
|
||||||
<p>Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p>
|
|
||||||
<p class="faded-footer">Many of my projects are on GitHub</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Contact me</h2>
|
|
||||||
<p>Email account -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam at google mail</a></p>
|
|
||||||
<p>Discord account -> <a href="#">namegoes.here</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
let url = document.location.href;
|
|
||||||
|
|
||||||
function copy(txt) {
|
|
||||||
let link = `${url}#${txt}`;
|
|
||||||
navigator.clipboard.writeText(link).then(() => {
|
|
||||||
console.log("Copied link!");
|
|
||||||
}, () => { console.log("Error copying link."); });
|
|
||||||
let alert = document.createElement("DIV");
|
|
||||||
alert.textContent = "Copied Link to Heading!";
|
|
||||||
alert.classList.add("tempAlert");
|
|
||||||
document.body.appendChild(alert);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.style.opacity = "1";
|
|
||||||
alert.style.bottom = ".5rem";
|
|
||||||
}, 200);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.style.opacity = "0";
|
|
||||||
alert.style.bottom = "-10rem";
|
|
||||||
}, 4200);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.remove();
|
|
||||||
}, 4400);
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
BIN
icons/race.png
BIN
icons/race.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
images/linux.png
BIN
images/linux.png
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
113
index.html
113
index.html
|
|
@ -1,100 +1,27 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta charset="UTF-8">
|
||||||
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="theme-color" content="#f69b46">
|
<title>Redirecting...</title>
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
|
<meta http-equiv="refresh" content="5;url=https://hnasheralneam.dev">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
<style>
|
||||||
<link rel="stylesheet" href="styles/home.css">
|
body {
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
display: flex;
|
||||||
<title>Hamza Nasher-Alneam</title>
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="progress-parent">
|
<div>
|
||||||
<div class="progress"></div>
|
<h1>Redirecting...</h1>
|
||||||
</div>
|
<p>If you are not redirected automatically, <a href="https://hnasheralneam.dev">click here</a> to go to the site.</p>
|
||||||
<br><br>
|
<p>You will be redirected in 5 seconds.</p>
|
||||||
|
</div>
|
||||||
<div class="content">
|
|
||||||
<div class="main-text">
|
|
||||||
<h1 class="title">I'm Hamza Nasher-Alneam</h1>
|
|
||||||
<p class="subtitle">A high school student with an interest in software and system management</p>
|
|
||||||
<br>
|
|
||||||
<div>
|
|
||||||
<h2 id="about-me">About me</h2>
|
|
||||||
<p>I'm a high school student in the United States. When I have time, I enjoy writing unoptimized code or messing around with Linux and servers. Fedora KDE btw.</p>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div>
|
|
||||||
<h2 id="work">Work</h2>
|
|
||||||
<p>With school starting again, it's difficult to find time to work on any projects, but over the summer I was able to work on some projects, the most prominent among them being <a href="https://fetchcv.hnasheralneam.dev/">FetchCv</a>, a developer profile site that I'm working on with a <a href="https://github.com/Urdons/">friend</a>. If you want to see what project I'm working on this week, it'll be up on my <a href="https://github.com/hnasheralneam">GitHub</a>.
|
|
||||||
</p>
|
|
||||||
<p>Recently, I've been working on a server, an old desktop from around 2010. It's running Kubuntu, because for some reason I decided a desktop OS would be great for a server. Now I'm trying to self-host everything, from photo backup with Immich to file backup with Rysnc to AI with Ollama (yes on a server with 4gb of memory), along with a self-hosted <a href="https://git.hnasheralneam.dev/">Forgejo</a> instance. Everything's up on my website at <a href="https://hnasheralneam.dev">hnasheralneam.dev</a>.</p>
|
|
||||||
<p>A small tool I've made is <a href="activity-log/">Activity Log</a>, a time tracking tool with graphs.</p>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div>
|
|
||||||
<h2>Achievements</h2>
|
|
||||||
<p><a href="https://github.com/Urdons">Urdons</a> and I won <b>first place</b> and the technical award at the MAGIC STEP Challenge! Here is our <a href="https://github.com/FetchCV/fetchcv">project</a> and <a href="https://docs.google.com/presentation/d/1i0Ufa3MRJhdeG6oTuq_ee8EPQ2ZBzV3qKtWBHWU25Wc/edit?usp=sharing">presentation</a>.
|
|
||||||
<i>February 24 2024</i></p>
|
|
||||||
<p>Our school robotics team got into the VEX Over Under state championship! <i>February 11 2024</i></p>
|
|
||||||
<p><a href="https://github.com/tildejustin">Justin</a> and I won third place at the MAGIC cybersecurity CTF! Here are <a href="https://magicinc.org/announcing-winners-of-ctf-14">the results</a>. <i>April 20 2023</i></p>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div>
|
|
||||||
<h2 id="funsies">Fun stuff</h2>
|
|
||||||
<p><a href="documents/developer_jokes.pdf">Developer jokes!</a></p>
|
|
||||||
<div class="funsies">
|
|
||||||
<p>Change the website color theme</p>
|
|
||||||
<button onclick="changeTheme()">Random</button>
|
|
||||||
<button onclick="changeThemeHex()" class="hex-code-label">Hex code</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<div class="thoughts-preview">
|
|
||||||
<h2>Thoughts</h2>
|
|
||||||
<a href="articles/plasma-widgets.html#publish-widget">
|
|
||||||
<div class="thoughts-bit">
|
|
||||||
<h4>Publish your Plasma widget</h4>
|
|
||||||
<i>May 15 2024</i>
|
|
||||||
<p>A quick tutorial that shows how publish a KDE widget on the widget store. More on KDE widgets coming soon
|
|
||||||
hopefully!</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="thoughts.html#imessage-lockin">
|
|
||||||
<div class="thoughts-bit">
|
|
||||||
<h4>The social issues with iMessage</h4>
|
|
||||||
<i>Dec 1 2022</i>
|
|
||||||
<p>Didn't update this for the RCS announcement, but that'll take a while to come into effect and still won't
|
|
||||||
change much socially in the U.S.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="thoughts.html#reject-folding-phones">
|
|
||||||
<div class="thoughts-bit">
|
|
||||||
<h4>An argument against folding phones</h4>
|
|
||||||
<i>Dec 1 2022</i>
|
|
||||||
<p>I mention the impracticalities in more words than strictly necessary.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
<div class="footer">
|
|
||||||
<div>
|
|
||||||
<h2>Social</h2>
|
|
||||||
<p>Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p>
|
|
||||||
<p class="faded-footer">Many of my projects are on GitHub</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Contact</h2>
|
|
||||||
<p>Email account -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam@gmail.com</a></p>
|
|
||||||
<p>Discord account -> <a href="#">namegoes.here</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
<script defer src="https://umami.hnasheralneam.dev/script.js" data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
|
||||||
<script src="main.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
27
main.js
27
main.js
|
|
@ -1,27 +0,0 @@
|
||||||
console.log("hello");
|
|
||||||
|
|
||||||
window.addEventListener("scroll", () => {
|
|
||||||
document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
function changeTheme() {
|
|
||||||
let color = (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, "0");
|
|
||||||
setThemeColor(`#${color}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeThemeHex() {
|
|
||||||
let hex = prompt("Enter valid hexadecimal code :)");
|
|
||||||
if (hex) {
|
|
||||||
if (hex.charAt(0) != "#") hex = `#${hex}`;
|
|
||||||
if (/^#[0-9A-F]{3}$/i.test(hex) || /^#[0-9A-F]{6}$/i.test(hex) || /^#[0-9A-F]{8}$/i.test(hex)) {
|
|
||||||
setThemeColor(hex);
|
|
||||||
document.querySelector(".hex-code-label").textContent = "Hex code: " + hex;
|
|
||||||
} else alert("Invalid hex code!");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setThemeColor(color) {
|
|
||||||
document.documentElement.style.setProperty("--theme-color", color);
|
|
||||||
let metaThemeColor = document.querySelector("meta[name=theme-color]");
|
|
||||||
metaThemeColor.setAttribute("content", color);
|
|
||||||
}
|
|
||||||
194
styles/home.css
194
styles/home.css
|
|
@ -1,194 +0,0 @@
|
||||||
* {
|
|
||||||
font-family: "Nunito", "Times New Roman", Times, serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-text {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 750px;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-text p {
|
|
||||||
margin: .5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 2rem 2rem 1rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-style: italic;
|
|
||||||
margin: 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
position: relative;
|
|
||||||
margin: 1rem .75rem .75rem 2.5rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: .3rem;
|
|
||||||
left: -.6rem;
|
|
||||||
height: 1rem;
|
|
||||||
width: .25rem;
|
|
||||||
border-radius: 5rem;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2:hover {
|
|
||||||
margin: 1rem .75rem .75rem 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2:hover::before {
|
|
||||||
left: -1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: .75rem 0 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: .2rem .5rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #fff;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
border: solid .2rem var(--theme-color);
|
|
||||||
border-radius: .5rem;
|
|
||||||
box-shadow: 0 .1rem .2rem #ddd;
|
|
||||||
transition: .15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
color: var(--theme-color);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
transform: scale(.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--theme-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts-preview a {
|
|
||||||
color: initial;
|
|
||||||
text-decoration: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts-bit p {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts-bit {
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: .5em;
|
|
||||||
margin: .4rem 1rem;
|
|
||||||
border: solid transparent .2rem;
|
|
||||||
transition: .25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts-bit:hover {
|
|
||||||
background-color: #aaaaaa20;
|
|
||||||
border-color: var(--theme-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts-bit:hover h4 {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thoughts {
|
|
||||||
margin: 2rem 2rem 0 0;
|
|
||||||
float: right;
|
|
||||||
color: #888;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.funsies {
|
|
||||||
padding: .5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.funsies p {
|
|
||||||
margin: 0 .2rem .8rem .2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-parent {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ddd;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
height: .5rem;
|
|
||||||
width: 0%;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
animation: progress 1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes progress {
|
|
||||||
to { width: 100%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
animation-play-state: paused;
|
|
||||||
animation-delay: calc(var(--scroll) * -1s);
|
|
||||||
animation-iteration-count: 1;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1200px) {
|
|
||||||
.main-text, .thoughtsblock {
|
|
||||||
padding: 0 2rem 0 4rem;
|
|
||||||
line-height: 1.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 700px) {
|
|
||||||
.content {
|
|
||||||
grid-template-columns: 100%;
|
|
||||||
margin-right: 0;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.thoughts-preview h2 {
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
.thoughts-preview * {
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-parent {
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
box-shadow: 0 .2rem .2rem #000;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 700px) {
|
|
||||||
.thoughts-preview {
|
|
||||||
background-color: #77777720;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--theme-color: #f69b46;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--theme-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
body {
|
|
||||||
background-color: #222;
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer styles */
|
|
||||||
.footer {
|
|
||||||
padding: 3rem 1rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto auto;
|
|
||||||
background-color: #222;
|
|
||||||
color: #fff;
|
|
||||||
border-bottom: solid .4rem var(--theme-color);
|
|
||||||
font-family: "Nunito", "Times New Roman", Times, serif;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h2 {
|
|
||||||
position: relative;
|
|
||||||
margin: 1rem .75rem .75rem 2.5rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h2::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: .5rem;
|
|
||||||
left: -.6rem;
|
|
||||||
height: 1rem;
|
|
||||||
width: .25rem;
|
|
||||||
border-radius: 5rem;
|
|
||||||
background-color: var(--theme-color);
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h2:hover {
|
|
||||||
margin: 1rem .75rem .75rem 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h2:hover::before {
|
|
||||||
left: -1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p {
|
|
||||||
margin: .5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faded-footer {
|
|
||||||
color: #bbb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 750px) {
|
|
||||||
.footer {
|
|
||||||
grid-template-columns: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.footer {
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
body {
|
|
||||||
background-color: #FEFDFA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home {
|
|
||||||
margin: 1.8rem 2rem 0 0;
|
|
||||||
float: right;
|
|
||||||
color: #888;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
font-family: "Ubuntu Mono", monospace;
|
|
||||||
line-height: 1.7rem;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article {
|
|
||||||
margin: 2rem auto 4rem auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article h2 {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article p {
|
|
||||||
margin-bottom: .4rem;
|
|
||||||
text-indent: 1rem;
|
|
||||||
line-height: 1.5em;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-family: serif;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article img {
|
|
||||||
max-height: 400px;
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.article img {
|
|
||||||
max-height: none;
|
|
||||||
max-width: calc(100vw - 4em);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tempAlert {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -10rem;
|
|
||||||
right: .5rem;
|
|
||||||
transition: .2s;
|
|
||||||
opacity: 0;
|
|
||||||
background-color: #222;
|
|
||||||
color: #eee;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border-radius: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
body {
|
|
||||||
background-color: #232326;
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
.tempAlert {
|
|
||||||
background-color: #FEFDFA;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 400px) {
|
|
||||||
.content { padding: 0 0.1rem; }
|
|
||||||
.article { padding: 0 1rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 600px) {
|
|
||||||
.content { padding: 0 2rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 900px) {
|
|
||||||
.content { padding: 0 6rem; }
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width">
|
|
||||||
<meta name="description" content="Hamza Nasher-Alneam's developer profile website!">
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="icons/race.png">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="styles/styles.css">
|
|
||||||
<link rel="stylesheet" href="styles/thoughts.css">
|
|
||||||
<title>Thoughts | Hamza Nasher-Alneam</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a class="home" href="index.html">Home</a>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<div class="content thoughtsblock">
|
|
||||||
<div class="article">
|
|
||||||
<h1 id="imessage-lockin" onclick="copy('imessage-lockin')">iMessage Lockin</h1>
|
|
||||||
<h2>Dec 1 2022</h2>
|
|
||||||
<p>Apple is known for its "walled garden"; a wonderful lineup of devices that work seamlessly together. But while their products may be great, they don't quite make up for the company's shortcomings, especially their refusal to play nice with other devices. All tech companies have some anti competition problems, like Microsoft trying to be Apple with Windows 11, Office, and Teams. May Steve Jobs protect us all from that horrible future. Every company puts their apps first, pre-installs bloatware, sorry, <i>software</i>, and generally tries to be your one go-to service provider. To make it clear, this is totally a problem that needs to be dealt with, and we can't let Microsoft, Google, Apple or anybody to have a completely locked system, no matter how wonderful. But at least while Android phones are competitors, they all use the same basic standards such as ports and messaging systems.</p>
|
|
||||||
<p>Let's start at the beginning. While the concept of SMS had been conceived in the early 80s, it wasn't until the 90s that it was actually implemented. SMS stands for Short Message Service, and supports plain text messages of up to 160 characters. This worked for a while, but by 2002 people wanted more out of messaging, so MMS, Multimedia Messaging Service, was created. It had support for images, links, videos, files, emojis, and more, and was pretty much globally adopted. These systems worked, but in 2007 another standard was created, RCS, or Rich Communication Services, which was officially released in 20016. It standardized features that companies had to individually implement before, as well as adding features from popular messaging apps, like reactions and other small additions that created a smooth texting experience. Additionally, it has much improved security, which is important when texting cross-platform (iMessage uses its own encryption). Basically, it wasn't revolutionary, but it was a great and necessary effort at improving and standardizing texting.</p>
|
|
||||||
<p>So 2019 comes around and Google declares that Android is adopting RCS. This is great, but Apple doesn't like standards, or Google. Thus the dreaded “green bubble” was born. On Apple's messaging service, iMessage, blue messages symbolize the other person is using iMessage, which means you can use reactions, high quality image and video files, and that the chat is end-to-end encrypted. Now if someone is using another device, like Android or Linux or HarmonyOS, that message will come in as green, which means iMessage has resorted to the primitive SMS and MMS standards to send you the message. Apple could have collaborated with Google to fix this, or just adopted RCS, but... they don't want to.</p>
|
|
||||||
<p>I believe it is time for a digression. You all know about Apple's lightning cable, unless you're a hermit who hasn't left their mountain for the last ten years. In 2012, Apple released a revolutionary new connector to replace their appalling 30-pin connector. It was small, beautiful, thin, and could be put in both ways. It is to this day one of the best connectors, obviously second to the superior USB-C cable. But the time for lightning has come to an end, and Apple should adopt the universal USB-C cable, which comes with benefits all around. It isn't revolutionary, but it has many small, much needed improvements. But Apple has reason to hold on to its outdated cable, and it's not nostalgia. Apple has a Made For iPhone (MFi) program that means for any lightning-certified accessory sold, they get a 2-4 dollar cut (the precise amount is not known, but this is a good estimate). Apple makes a huge amount of money off of this, and it helps retain a huge amount of control. This situation is nearly identical to the iMessage situation, and just goes to show that Apple is a corporation that will do anything to get as much money as possible.</p>
|
|
||||||
<p>But iMessage in a way is far worse. While lightning only affects people already in Apple's control, iMessage creates a bad experience for anyone who texts to an iMessage user. Google does their best to handle it on their end, but Apple is not doing anything to help. This situation has resulted in iMessage snobbery, where the people with the broken system look down on green messages, and this doesn't just stop at superiority. It has real consequences, like friends being left out if they have a different device. Additionally, peer pressure among the younger generation means that teenagers will often choose an iPhone just to "have a social life". This has resulted in <i>9 out of 10</i> teenagers who have phones owning an iPhone. I really can't see a company giving up total market dominance like that.</p>
|
|
||||||
<p>But don't worry! Because Google, who is strangely framing itself as the people's warrior, has created a Get the Message movement, with an accompanying #GetTheMessage hashtag to boot. And wow, are they serious about this. This is basically an attempt to make iPhone users realize their world isn't so perfect, and that they should join Android users in the fight for better messaging. They even hired some celebrities. I'm afraid Google hasn't noticed that Apple <i>never</i> listens to its users.</p>
|
|
||||||
<p>So far, this has been a one-sided battle. Apple is happy with its messaging monopoly, and has no reason to change anything. Google is not the hero though. While RCS is a great standard and it would benefit all users if Apple adopted it, this isn't about users. I believe in this situation the people at Google really care about users, but that isn't always the case. If they <i>really</i> cared about users, maybe their Pixel devices would cooperate with other devices, or Google wouldn't push their own products so much. This time though, they're right. #GetTheMessage!</p>
|
|
||||||
</div>
|
|
||||||
<div class="article">
|
|
||||||
<h1 id="reject-folding-phones" onclick="copy('reject-folding-phones')">An Argument Against Folding Phones</h1>
|
|
||||||
<h2>Dec 1 2022</h2>
|
|
||||||
<p>Unless you've been living under a rock for the last few years, you should have noticed a growing trend for foldable phones. Perhaps you thought it was cool, maybe you even considered buying one before you noticed the price. But why could anyone hate them? I'll tell you why it's a bad idea for everyone involved.</p>
|
|
||||||
<p>Let's start from the developer side of things. When building an interface, it has to be optimized for different screens. The two difficulties that arise are scale and aspect ratio. You can develop a website or app for a computer, and it won't take much scaling down to fit on a tablet or larger monitor. Some tweaks, yes, but nothing huge. Now developing for phones is different. Multiple OSs aside, these devices are tiny. And even if you turn the device into landscape mode, which no one does, the aspect ratio of the device is completely different, making the UI seem stretched. But that's not all, because every phone maker is determined to make all their devices have a unique shape, and thus, a new screen to be optimized for. You can already see how this is a nightmare, even without counting the separate code bases you'd need for each system, but it was about to get far worse.</p>
|
|
||||||
<p>In 2019 Samsung revealed the Galaxy Fold to the world. This may have been the first, but in their folly other companies were quick to follow. These weren't flip phones, they were smartphones that folded, a phone that looks like an ordinary or irritatingly skinny phone, until <i>wow, it flips open</i>, giving <i>twice the screen space</i>. How could this be less than perfect? It's the future! Well, sorry to break it to you, even with practical inconsistencies set aside (who has the time to flip their phone open every time they get a message? Most of the time the phone will stay closed, leaving you with a very thick but normal device), this is a developing nightmare. <i>Another</i> screen size to optimize for? So that's monitors, desktops, laptops, phones, and folding phones? Sure, a square screen looks nice, but not nearly enough people use it to make it worth developing for. Which brings us to the user.</p>
|
|
||||||
<p>User experience is everything. You might have a great device or operating system, but if you can't easily access the content you need it isn't worth it. Which is why people don't use Linux. Here was a bold new device, but it was about to face a greater challenge than the dubious press: getting developers to make apps and websites for their screens. Apple had great success getting developers to optimize for the iPhone and tablet, but that's not the whole story. Do you remember the Macbook Pro touchbar? Here's how that went down. In 2016 Apple unveiled the new Macbook Pro with a touch bar display where the command keys used to be. They flaunted how the benefits were unimaginable, with every app adding custom controls for easy use. But in 2022, Apple removed it from most of its Pro lineup. Why? Because the biggest feature, custom app controls, was never used by developers. Macbooks already have such a small market share, but for creators it might still make sense. But the fact that it was only on the Pro lineup, such an insignificant amount of users would have been affected that developers decided not to build for it. And <i>that</i> is the reason it was removed, not battery efficiency or whatever excuse they used. The new Dynamic Island feature on their Pro phones is the same mistake, and while there is a larger number of users, if they don't convince developers to build for this it will go the way of the touchbar and 3d touch.</p>
|
|
||||||
<p>So <i>what</i> was Samsung thinking? The phones are so expensive and niche that it makes nearly no sense to develop for them. If Android tablets had ever become a thing, then maybe apps would have been ready for that screen size and aspect ratio. But instead, Android apps are optimized for a normal phone screen, so opening nearly any website or app at full size is sure to be a bad experience. Why would someone buy a device where the core feature is extra screen if all their favorite apps and sites are warped and unusable? It just doesn't make sense. So you'd think that at least <i>some</i> phone manufacturers asked the geniuses behind their product design if this was a good idea. But <i>no</i>, everyone wants to get in on it. They think this is the Next Big Thing, and just about every phone maker has made or is rumored to be making a folding phone. But even with all of this aside, folding phones are <i>expensive</i>. The Samsung Galaxy Fold 4 starts at <i>1,799</i> US dollars. That is <i>not</i> a price most ordinary users are going to be willing to pay for a gimmick.</p>
|
|
||||||
<p>So, the folding phone. Smartphone makers are betting big when they keep making these, hoping that developers will build for them and consumers will buy. But the simple fact is, the smartphone market doesn't need disruption. The design we've reached, a flat rectangle, is basically perfect. It fits in your pocket, has an all-day battery life, and can run basically any task you want it to. And people are keeping their phones for longer, unwilling to buy another expensive phone that isn't noticeably better than their current one. I think this is the smartphone industry desperately scrambling to find some way to keep their exponential growth. But hey, that's just my opinion.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br><br>
|
|
||||||
<div class="footer">
|
|
||||||
<div>
|
|
||||||
<h2>Find me</h2>
|
|
||||||
<p>Github -> <a href="https://github.com/hnasheralneam">GitHub</a></p>
|
|
||||||
<p class="faded-footer">Many of my projects are on GitHub</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>Contact me</h2>
|
|
||||||
<p>Email account -> <a href="mailto:hnasheralneam@gmail.com">hnasheralneam at google mail</a></p>
|
|
||||||
<p>Discord account -> <a href="#">namegoes.here</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
let url = document.location.href;
|
|
||||||
|
|
||||||
function copy(txt) {
|
|
||||||
let link = `${url}#${txt}`;
|
|
||||||
navigator.clipboard.writeText(link).then(() => {
|
|
||||||
console.log("Copied link!");
|
|
||||||
}, () => { console.log("Error copying link."); });
|
|
||||||
let alert = document.createElement("DIV");
|
|
||||||
alert.textContent = "Copied Link to Heading!";
|
|
||||||
alert.classList.add("tempAlert");
|
|
||||||
document.body.appendChild(alert);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.style.opacity = "1";
|
|
||||||
alert.style.bottom = ".5rem";
|
|
||||||
}, 200);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.style.opacity = "0";
|
|
||||||
alert.style.bottom = "-10rem";
|
|
||||||
}, 4200);
|
|
||||||
setTimeout(() => {
|
|
||||||
alert.remove();
|
|
||||||
}, 4400);
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue