chore: format the codebase
This commit is contained in:
parent
3b2d8f63e4
commit
37625c54ce
51 changed files with 280 additions and 233 deletions
|
@ -8,22 +8,26 @@ This is the repo for [ayos.blog](https://ayos.blog), which is built with [Jekyll
|
|||
1. follow the [jekyll installation guide](https://jekyllrb.com/docs/installation) for your machine
|
||||
|
||||
2. clone project, then go to the directory:
|
||||
|
||||
```
|
||||
$ git clone git@github.com:ayoayco/blog
|
||||
$ cd blog
|
||||
```
|
||||
|
||||
3. install dependencies:
|
||||
|
||||
```
|
||||
$ bundle install
|
||||
```
|
||||
|
||||
4. run dev server:
|
||||
|
||||
```
|
||||
$ bundle exec jekyll serve --livereload
|
||||
```
|
||||
|
||||
5. build project:
|
||||
|
||||
```
|
||||
$ bundle exec jekyll build
|
||||
```
|
||||
|
|
|
@ -9,4 +9,3 @@ category: technology / productivity / personal / motivational / entertaining
|
|||
<!-- In this blog
|
||||
1. what are web workers
|
||||
-->
|
||||
|
||||
|
|
10
_config.yml
10
_config.yml
|
@ -154,8 +154,8 @@ prose:
|
|||
# - vendor/ruby/
|
||||
|
||||
jekyll-archives:
|
||||
enabled:
|
||||
- year
|
||||
layout: archive
|
||||
permalinks:
|
||||
year: 'archives/:year/'
|
||||
enabled:
|
||||
- year
|
||||
layout: archive
|
||||
permalinks:
|
||||
year: "archives/:year/"
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
<head>
|
||||
<title>{{site.title}} • {{page.title}}</title>
|
||||
<meta name="description"
|
||||
content="Learn how to use the best and latest web technologies to boost your productivity." />
|
||||
<meta
|
||||
name="description"
|
||||
content="Learn how to use the best and latest web technologies to boost your productivity."
|
||||
/>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
@ -35,17 +37,28 @@
|
|||
<link rel="webmention" href="https://webmention.io/ayos.blog/webmention" />
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}"
|
||||
href="{{ '/feed.xml' | relative_url }}" />
|
||||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="{{ site.title | escape }}"
|
||||
href="{{ '/feed.xml' | relative_url }}"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="//fonts.googleapis.com/css?family=Lato"
|
||||
/>
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<script type="module">
|
||||
import { minidenticonSvg } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.1/minidenticons.min.js'
|
||||
import { minidenticonSvg } from "https://cdn.jsdelivr.net/npm/minidenticons@4.2.1/minidenticons.min.js";
|
||||
import {
|
||||
getMentions,
|
||||
renderMentions,
|
||||
|
@ -67,7 +80,7 @@
|
|||
"/motivational/",
|
||||
];
|
||||
const url = new URL(
|
||||
document.URL.replace("http://localhost:4000", "https://ayos.blog")
|
||||
document.URL.replace("http://localhost:4000", "https://ayos.blog"),
|
||||
);
|
||||
if (!ignorePaths.includes(url.pathname)) {
|
||||
const mentions = getMentions(url.toString())
|
||||
|
@ -75,13 +88,16 @@
|
|||
renderMentions(
|
||||
mentions,
|
||||
".blog-post__web-mentions",
|
||||
ignoreAuthorUrls
|
||||
ignoreAuthorUrls,
|
||||
);
|
||||
})
|
||||
.catch((err) => console.log("err", err));
|
||||
}
|
||||
</script>
|
||||
<!-- lite-yt-embed -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/lite-youtube-embed@0.3.3/src/lite-yt-embed.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/lite-youtube-embed@0.3.3/src/lite-yt-embed.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/lite-youtube-embed@0.3.3/src/lite-yt-embed.js"></script>
|
||||
</head>
|
||||
|
|
|
@ -1 +1,4 @@
|
|||
<a class="u-url" rel="me" href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>
|
||||
<a class="u-url" rel="me" href="https://github.com/{{ include.username }}"
|
||||
><span class="icon icon--github">{% include icon-github.svg %}</span
|
||||
><span class="username">{{ include.username }}</span></a
|
||||
>
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
<table class="image">
|
||||
<caption align="bottom">{{ include.description }}</caption>
|
||||
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr>
|
||||
</table>
|
||||
<caption align="bottom">
|
||||
{{ include.description }}
|
||||
</caption>
|
||||
<tr>
|
||||
<td><img src="{{ include.url }}" alt="{{ include.description }}" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
@ -1,34 +1,34 @@
|
|||
<h2 style="font-weight: bold">Hello there, fellow human!</h2>
|
||||
<h2 style="font-weight: bold">Hello there, fellow human!</h2>
|
||||
|
||||
<p>Welcome to my personal blog! Glad you are here.</p>
|
||||
<p>Welcome to my personal blog! Glad you are here.</p>
|
||||
<p>
|
||||
Like you, I have many areas of interest. And you will find here a collection
|
||||
of my posts on varying topics which are not confined to my "professional"
|
||||
work.
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary>Read the full message</summary>
|
||||
<p>
|
||||
Like you, I have many areas of interest. And you will find here a collection
|
||||
of my posts on varying topics which are not confined to my "professional"
|
||||
work.
|
||||
There may be some topics that pop up more than others.
|
||||
<a href="/technology">Technology</a> posts are mostly about web development,
|
||||
and may be more relatable to people who have found me for my development
|
||||
work. More opinionated <a href="/personal">personal</a> posts are where I
|
||||
talk about stuff I find interesting because of their potential to help
|
||||
others as much as they have helped me.
|
||||
</p>
|
||||
|
||||
<details>
|
||||
<summary>Read the full message</summary>
|
||||
<p>
|
||||
There may be some topics that pop up more than others.
|
||||
<a href="/technology">Technology</a> posts are mostly about web
|
||||
development, and may be more relatable to people who have found me for my
|
||||
development work. More opinionated <a href="/personal">personal</a> posts
|
||||
are where I talk about stuff I find interesting because of their potential
|
||||
to help others as much as they have helped me.
|
||||
</p>
|
||||
<p>
|
||||
I strive to keep things organized, and have created a page that lists
|
||||
<a href="/categories">all topics</a> I have covered so far. However, other
|
||||
topics are likely to be added in the future.
|
||||
</p>
|
||||
<p>
|
||||
Thank you for the interest in reading. I look forward to any feedback or
|
||||
even the possibility of collaboration. Hit me up about any topic you find
|
||||
here! Below are my contact details.
|
||||
</p>
|
||||
<ul>
|
||||
<li>email: ayo[at]ayco[dot]io</li>
|
||||
</ul>
|
||||
<p>~ <em>Ayo Ayco</em></p>
|
||||
</details>
|
||||
<p>
|
||||
I strive to keep things organized, and have created a page that lists
|
||||
<a href="/categories">all topics</a> I have covered so far. However, other
|
||||
topics are likely to be added in the future.
|
||||
</p>
|
||||
<p>
|
||||
Thank you for the interest in reading. I look forward to any feedback or
|
||||
even the possibility of collaboration. Hit me up about any topic you find
|
||||
here! Below are my contact details.
|
||||
</p>
|
||||
<ul>
|
||||
<li>email: ayo[at]ayco[dot]io</li>
|
||||
</ul>
|
||||
<p>~ <em>Ayo Ayco</em></p>
|
||||
</details>
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
<li class="blog-home__list-items__item">
|
||||
<div class="blog-home__list-items__item__header">
|
||||
<div class="blog-home__list-items__item__header__meta">
|
||||
<small>{% assign date_format = site.minima.date_format | default: "%b %-d,
|
||||
%Y" %} {{ post.date | date: date_format }}
|
||||
<small
|
||||
>{% assign date_format = site.minima.date_format | default: "%b %-d, %Y"
|
||||
%} {{ post.date | date: date_format }}
|
||||
</small>
|
||||
•
|
||||
<small>
|
||||
|
@ -18,4 +19,4 @@
|
|||
<span>{{post.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</li>
|
||||
|
|
|
@ -5,10 +5,12 @@ layout: default
|
|||
<h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>
|
||||
|
||||
<ul class="posts">
|
||||
{% for post in page.posts %}
|
||||
{% for post in page.posts %}
|
||||
<li>
|
||||
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
|
||||
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
<a class="post-link" href="{{ post.url | relative_url }}"
|
||||
>{{ post.title }}</a
|
||||
>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
@ -5,9 +5,8 @@ layout: default
|
|||
<div class="blog-home">
|
||||
{% if site.posts.size > 0 %}
|
||||
<ul class="blog-home__list-items">
|
||||
{% for post in site.posts limit:10 %}
|
||||
{% include post-item.html %}
|
||||
{% endfor %}
|
||||
{% for post in site.posts limit:10 %} {% include post-item.html %} {% endfor
|
||||
%}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<p>
|
||||
|
|
|
@ -1,14 +1,11 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<article class="post">
|
||||
|
||||
<article class="post">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{{ page.title | escape }}</h1>
|
||||
</header>
|
||||
|
||||
<div class="post-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div class="post-content">{{ content }}</div>
|
||||
</article>
|
||||
|
|
|
@ -4,9 +4,11 @@ permalink: /good-programming-practices/
|
|||
category: technology
|
||||
description: Some thoughts on practices that make programming better
|
||||
---
|
||||
|
||||
I want to talk about programming and some practices that, I think, can make a programmer more efficient when observed. First, let's talk about what programming is.<!--more-->
|
||||
|
||||
### Programming as Problem Solving
|
||||
|
||||
- Programming is basically writing down code to instruct computers how to solve problems.
|
||||
- This means that there may be as many ways to code a program as there are ways to solve a problem.
|
||||
- A particular solution may be correct, but it could also be a bad/inefficient solution.
|
||||
|
@ -15,7 +17,9 @@ I want to talk about programming and some practices that, I think, can make a pr
|
|||
- To do this, one must observe good programming practices.
|
||||
|
||||
### Good Programming Practices
|
||||
|
||||
Here are some points I try to observe while programming:
|
||||
|
||||
1. Think of the most appropriate data structures for the problem at hand. Don't do everything in arrays. Remember that there are other ways to represent your models than the common, out-of-the-box data types (i.e., linked lists, trees, heaps, queues, etc.)
|
||||
2. Think of the most efficient algorithm.
|
||||
3. It does not hurt to lint your code. Code linting is arguably the easiest and fastest thing you can do to make sure your code is clean. Learn how to configure code linting so that it becomes natural to your programming practice. Linting detects problematic patterns in your code that might result into bugs and even some lines that are not following a certain style guide.
|
||||
|
|
|
@ -11,12 +11,13 @@ Project [NOAH](https://noah.up.edu.ph) is a multidisciplinary flagship project f
|
|||
Built with various open source technologies such as Python, Open Layers 3, Tornado Web, we used AngularJS as the framework for the web application.
|
||||
|
||||
**My role:** Senior Frontend Engineer
|
||||
|
||||
- introduced new technologies to upgrade v.1 of the Project NOAH
|
||||
web app
|
||||
web app
|
||||
- worked on the development of v.2 of the Project NOAH web
|
||||
app, a government-funded flagship real-time information platform
|
||||
to address the Philippines’ disaster problems
|
||||
app, a government-funded flagship real-time information platform
|
||||
to address the Philippines’ disaster problems
|
||||
- contributed technical insight for valuable research output of the
|
||||
project
|
||||
project
|
||||
|
||||
**Technologies:** AngularJS, HTML, JavaScript, CSS, Python, PostgreSQL
|
||||
|
|
|
@ -11,15 +11,16 @@ WebSAFE is an impact assessment tool for calculating needs for the effects of na
|
|||
Built with free and open source software InaSAFE at its core, WebSAFE is an impact assessment tool used in the Philippines to calculate the needs of a community considering the effects of a particular hazard. This feature is accessible in the Project NOAH web app.
|
||||
|
||||
**My role:** Project Manager and Lead Software Engineer
|
||||
|
||||
- spearheaded the overall development of WebSAFE, an impact
|
||||
assessment tool for calculating needs for the effects of natural
|
||||
hazards on exposed assets such as people and infrastructure
|
||||
assessment tool for calculating needs for the effects of natural
|
||||
hazards on exposed assets such as people and infrastructure
|
||||
- lead the team of WebSAFE software developers and GIS specialists
|
||||
to innovate on the open-source tool InaSAFE, and build the web
|
||||
app for impact calculation of natural hazard and exposure in
|
||||
specific areas in the Philippines
|
||||
to innovate on the open-source tool InaSAFE, and build the web
|
||||
app for impact calculation of natural hazard and exposure in
|
||||
specific areas in the Philippines
|
||||
- presented WebSAFE in international and local conferences as a
|
||||
best practice in harnessing science and technology for disaster
|
||||
management
|
||||
best practice in harnessing science and technology for disaster
|
||||
management
|
||||
|
||||
**Technologies:** AngularJS, HTML, JavaScript, CSS, Python, PostgreSQL
|
||||
|
|
|
@ -17,4 +17,4 @@ conference held in Seoul, South Korea.
|
|||
|
||||
<p>
|
||||
<a href="https://vimeo.com/142336887">WebSAFE: Developing an Online Exposure and Risk Assessment Tool for the Philippines — Ivan Lester Saddi, Ramon Ayco Jr</a> from <a href="https://vimeo.com/foss4g">FOSS4G</a> on <a href="https://vimeo.com">Vimeo</a>.
|
||||
</p>
|
||||
</p>
|
||||
|
|
|
@ -11,4 +11,4 @@ CITAS v2 is a platform for remote data collection, data storage, and a data anal
|
|||
The CITAS system facilitates the exchange of information from geospatial wireless sensors and mobile microscopy to the Machine
|
||||
Learning platform for analysis.
|
||||
|
||||
**Technologies:** Angular, Data Visualization, High Charts, LeafletJS, NodeJS, SCSS, HTML, Typescript, Git, Github Issues, Github Projects
|
||||
**Technologies:** Angular, Data Visualization, High Charts, LeafletJS, NodeJS, SCSS, HTML, Typescript, Git, Github Issues, Github Projects
|
||||
|
|
|
@ -59,4 +59,4 @@ To cut the long story short, Github is a good place to start learning how to be
|
|||
|
||||
But before you hurry and join Github, there's another thing we need to talk about. You won't be able to get the most out of it without this... You actually need to learn how to use Git.
|
||||
|
||||
But that's for another weekend.
|
||||
But that's for another weekend.
|
||||
|
|
|
@ -4,9 +4,11 @@ project-date: "2017"
|
|||
category: projects
|
||||
description: Submission platform to share ideas or kick-start project ideas
|
||||
---
|
||||
|
||||
Hosted in Infor’s private intranet, this is a submission platform where employees can share ideas or kick-start projects.
|
||||
|
||||
**My role**: Software Engineer
|
||||
|
||||
- constructed the core code-base of Innovation Flight Central
|
||||
|
||||
Technologies: PHP, MySQL, MiniOrange SAML Login, Windows Server (IIS), Windows ADFS
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 'Feels FM: An Emoji-Powered Jukebox for Your Mental Health'
|
||||
title: "Feels FM: An Emoji-Powered Jukebox for Your Mental Health"
|
||||
permalink: /feels-fm/
|
||||
description: What do you do when you don't want to do anything or talk to anyone?
|
||||
category: productivity
|
||||
|
|
|
@ -15,21 +15,23 @@ There are HTML elements that Lotus Notes simply does not understand. To make thi
|
|||
|
||||
This is why HTML Email designers hate Lotus Notes the most--pretty much like Internet Explorer for Web Developers.
|
||||
|
||||
|
||||
## Findings on Lotus Notes HTML email rendering
|
||||
|
||||
Lotus Notes has several issues with widely accepted HTML standards because of its own proprietary rich-text formatting. Here are some of these issues that can be found if you search the web:
|
||||
|
||||
- COLSPANS. These are attributes of table cells to tell the email client or the browser how many columns they span over. Lotus Notes cannot seem to understand this and we might need to just use multiple tables as a workaround.
|
||||
- CENTER ALIGNMENT. Using `<TABLE ALIGN="CENTER">` worked great in Lotus Notes 6.5.3. But not at all in Lotus Notes 6.5.4. Also, `<CENTER>` tags around the tables didn’t work in 6.5.4 either. We can make things simpler as a workaround so they'd look okay as left-aligned in 6.5.4.
|
||||
|
||||
|
||||
## Other Possible Workarounds and Good Practice
|
||||
|
||||
Here are some helpful tips in designing HTML emails for Lotus Notes:
|
||||
|
||||
- Use Mail Chimp's `*|ARCHIVE|*` merge tag to automatically generate a link to the online version of your MailChimp campaign. Subscribers can click this link to view your campaign directly in their web browsers.
|
||||
- Allow your subscribers to choose which version of your campaign they want to receive when they sign up to your list: HTML, Text, or Mobile. If they have difficulty viewing HTML email, they can select the Text option instead.
|
||||
- Keep your designs simple so that if they fail, your email is still readable.
|
||||
|
||||
## Suggestion on Campaign Creation Workflow
|
||||
|
||||
The WYSIWYG tool I mentioned earlier, is one that is provided by Mailchimp. This tool is great. I recommend it... if your readers' does not use Lotus Notes.
|
||||
|
||||
Mailchimp’s Drag and Drop tool for creating Email Campaigns generates HTML code that tries to make the campaign look good in many popular email programs. Unfortunately, Lotus Notes does not play well with most of these programs’ HTML rendering standards.
|
||||
|
@ -37,6 +39,7 @@ Mailchimp’s Drag and Drop tool for creating Email Campaigns generates HTML cod
|
|||
To make sure the Campaign will look good in Lotus Notes, we have to clean up the code that Mailchimp generates.
|
||||
|
||||
Follow these steps to clean up the HTML email design:
|
||||
|
||||
- Save Campaign as Template. To do this, Go to Campaigns page, Edit your Campaign, then click “Save as Template”. This is necessary because Mailchimp only allows Exporting to HTML from Templates.
|
||||
- Export Template to HTML. Once the Campaign is saved as a Template you can now export it into HTML code that we can clean up. Go to Templates page, click the dropdown button beside the Edit button on the Template, then select “Export as HTML”
|
||||
- Clean Up the HTML Code. Once you select the “Export as HTML” option, a file will be downloaded to your computer. Open this file in a Text Editor then do the following:
|
||||
|
@ -49,4 +52,3 @@ Follow these steps to clean up the HTML email design:
|
|||
- Make CSS style rules inline. As much as possible, apply style rules found inside the `<style> ... </style>` tags as inline styles to the elements. As of writing this blog, Mailchimp has an automatic inline feature to do this. Just check the checkbox in the design settings and Mailchimp will automatically do this for you.
|
||||
- Upload the Clean HTML Code into Mailchimp. Once you have done the cleaning up steps, you can go back to Mailchimp then create a Campaign using the new HTML Email. Create a Campain then choose HTML Email, then paste the code from the Text Editor you used.
|
||||
- Test the how the HTML Email looks. Mailchimp provides a paid feature called Inbox Preview to see how the HTML Email renders in several popular Email programs. If you are on a free account, you can use Preview Mode instead. Another option is opening an account in Litmus (http://litmus.com) which gives you screenshots of the HTML Email rendered in various Email Programs (including versions of Lotus Notes).
|
||||
|
||||
|
|
|
@ -34,4 +34,3 @@ If you have a particular problem you want to solve, you will have to consider ot
|
|||
Remember, I'm not talking about which language is more powerful (though I would still pick C).
|
||||
|
||||
Rather, I'm just bringing up the difference of the two languages when it comes to friendliness for first-time programmers.
|
||||
|
||||
|
|
|
@ -39,17 +39,19 @@ This is why in the past week, I have asked some of my techie friends to join me
|
|||
## The Quest
|
||||
|
||||
We are going to create a mobile application that:
|
||||
|
||||
1. Allows users to snap photos of different garbage dumps (legit or not), rate the location, and upload it
|
||||
2. Has a system for users to validate other users uploads
|
||||
3. Provides some visualizations such as a map of points and a heatmap similar to the following:
|
||||

|
||||
*Photo from a screenshot of: https://yosmhm.neis-one.org*
|
||||

|
||||
_Photo from a screenshot of: https://yosmhm.neis-one.org_
|
||||
|
||||
---
|
||||
|
||||
## The Hope
|
||||
|
||||
With this mission I hope to:
|
||||
|
||||
1. Bring the problem back in front of people's faces. :)
|
||||
2. Spark conversations and actions.
|
||||
3. Aid NGOs and LGUs in policy-making.
|
||||
|
@ -63,4 +65,3 @@ Interested to join us in our quest? Have suggestions or inquiries? Please let us
|
|||
You can sign up to chat with us: [Tech4GoodPH Slack Invitation](https://docs.google.com/forms/d/e/1FAIpQLScPt5WgyStjvpIsvlst1KRNP0b95gw8o2mzDwBN3JccDxSCDA/viewform?usp=sf_link)
|
||||
|
||||
Or you can email us at <a href="mailto:tech4good.pm.me">tech4good@pm.me</a> -->
|
||||
|
||||
|
|
|
@ -10,15 +10,17 @@ This is the classic game [Minesweeper](https://mnswpr.com) built with vanilla we
|
|||
See the [source code on GitHub](https://github.com/ayoayco/mnswpr)
|
||||
|
||||
## What I have learned:
|
||||
|
||||
1. JS is awesome ✨
|
||||
1. We don't always necessarily *need* JS frameworks (or TS) ✨
|
||||
1. Even subtle UI changes *can improve* user gameplay experience ✨
|
||||
1. We don't always necessarily _need_ JS frameworks (or TS) ✨
|
||||
1. Even subtle UI changes _can improve_ user gameplay experience ✨
|
||||
1. There's more ways to break you're app than you are initially aware of ✨
|
||||
1. Competition motivates users to use your app more ✨
|
||||
1. Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨
|
||||
1. Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨
|
||||
|
||||
**Technology Stack:**
|
||||
|
||||
- HTML, JS, and CSS
|
||||
- Webpack for bundling
|
||||
- Firebase for leader board store
|
||||
- Netlify for hosting
|
||||
- Netlify for hosting
|
||||
|
|
|
@ -6,8 +6,8 @@ description: Distrupted work week due to sickness and sudden vaccination schedul
|
|||
image-attrib: >-
|
||||
Ayo Ayco. Playing in the pool with Kahel.
|
||||
category: personal
|
||||
|
||||
---
|
||||
|
||||
To be completely honest, I don't feel very good with my performance this past week. I did not finish some big tasks due to disruptions of my work, which led me to try to handle my stress by fruitless binge-watching and playing games. My anxieties were terrible.<!--more-->
|
||||
|
||||
On the other hand, I do feel like this is just me being hard on myself. So I started my weekly review by remembering some positive things that happend last week.
|
||||
|
@ -22,4 +22,4 @@ Third, I also missed some requirements in a side-hustle, but I now realize it is
|
|||
|
||||
Having time to process this is good because now I am aware of what may cause me stress and anxiety, and hopefully will get better in handling them.
|
||||
|
||||
I am thankful that this experiences makes me grow and that I am able to process this all.
|
||||
I am thankful that this experiences makes me grow and that I am able to process this all.
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 'Weekly Review #8'
|
||||
title: "Weekly Review #8"
|
||||
image: pool-maintenance
|
||||
permalink: /weekly-review-8/
|
||||
description: I try to convince myself not to feel bad about failure
|
||||
|
|
|
@ -14,8 +14,8 @@ When I previously did the weekly review on Mondays, and many days go in between
|
|||
|
||||
I will still write these short blogs on Mondays though. This lifts the pressure of publishing a new blog in the same day.
|
||||
|
||||
Also, doing the weekly review on the Saturdays, gives me time to do work tasks on Mondays. This sets up the week with a sense of productivity. Also since Saturday is "my own time" I don't feel any restrictions when I do the weekly review, and no quick questions or meetings to interrupt. :)
|
||||
Also, doing the weekly review on the Saturdays, gives me time to do work tasks on Mondays. This sets up the week with a sense of productivity. Also since Saturday is "my own time" I don't feel any restrictions when I do the weekly review, and no quick questions or meetings to interrupt. :)
|
||||
|
||||
I really think my move to do the weekly review on a Saturday is a good idea.
|
||||
|
||||
We'll see. 😅
|
||||
We'll see. 😅
|
||||
|
|
|
@ -16,7 +16,7 @@ Of course there are other things I need to answer regularly (in my weekly review
|
|||
|
||||
> The art of resting the mind and the power of dismissing from it all care and worry is probably one of the secrets of our great men."
|
||||
>
|
||||
> *- Capt. J.A. Hatfield*
|
||||
> _- Capt. J.A. Hatfield_
|
||||
|
||||
If I approach this life without a system (a way of processing and organizing things) that takes into account my motivations, I find that it is easy to lose track of things I truly value.
|
||||
|
||||
|
|
|
@ -32,4 +32,4 @@ It clears up some space in my head and trust that I will get reminded of the imp
|
|||
|
||||
With more headspace, I can make sure I will be able to handle tasks that are already processed, organized, and clarified when and where I can best handle them–regardless of whether my mind feels like it or not.
|
||||
|
||||
What are some things you do to “trick” yourself into being productive?
|
||||
What are some things you do to “trick” yourself into being productive?
|
||||
|
|
|
@ -4,15 +4,15 @@ image: kribbestraat-55
|
|||
permalink: /weekly-review-15/
|
||||
description: "All projects can be daunting if you don't start this habit."
|
||||
image-attrib: Ayo Ayco
|
||||
image-alt: Winter time in the city
|
||||
image-alt: Winter time in the city
|
||||
category: personal
|
||||
---
|
||||
|
||||
Wow, it's been a while since I posted something! December 2021 must have been the busiest, most demanding month of my entire life.<!--more-->
|
||||
|
||||
It was a time when the items in my "Active Projects" list was the most.
|
||||
It was a time when the items in my "Active Projects" list was the most.
|
||||
|
||||
Everything I want/need to accomplish, I treat as a Project. And last month indeed there were a lot of things that needed to be accomplished.
|
||||
Everything I want/need to accomplish, I treat as a Project. And last month indeed there were a lot of things that needed to be accomplished.
|
||||
|
||||
I realized there's one thing that made handling multiple projects significantly more manageable.
|
||||
|
||||
|
@ -20,7 +20,7 @@ And it's this: the habit of asking "What's the real next action?"
|
|||
|
||||
I know it sounds obvious, but you'll be surprised at how hard this really is if you don't intentionally put your mind into it.
|
||||
|
||||
For example, you might think the next action is something like "call the municipality office" ... but if you think more about it, the *real* next action is "find the municipality office's phone number" and even then, the real next action would be "find out the schedule when the municipality office can take calls".
|
||||
For example, you might think the next action is something like "call the municipality office" ... but if you think more about it, the _real_ next action is "find the municipality office's phone number" and even then, the real next action would be "find out the schedule when the municipality office can take calls".
|
||||
|
||||
Determining the Real Next Action helps in breaking down projects into manageable tasks and frees the mind to focus on really doing the stuff that can actually be done.
|
||||
|
||||
|
|
|
@ -37,7 +37,6 @@ ng g web-worker <location>
|
|||
|
||||
With this, it will generate a `*.worker.ts` file, scaffold the minimal usage in the `location` you indicate, and configure the app for using web workers.
|
||||
|
||||
|
||||
The `location` can be any Angular component.
|
||||
|
||||
So, for example, if you want to generate a worker for the root App component, just run the following in the terminal.
|
||||
|
@ -46,7 +45,7 @@ So, for example, if you want to generate a worker for the root App component, ju
|
|||
ng g web-worker app
|
||||
```
|
||||
|
||||
This will generate an `app.worker.ts` file beside `app.component.ts`
|
||||
This will generate an `app.worker.ts` file beside `app.component.ts`
|
||||
|
||||
## Demo Angular App with Web Workers
|
||||
|
||||
|
@ -68,6 +67,7 @@ Once done, open the generated directory and run the angular development server.
|
|||
cd web-worker-demo
|
||||
ng serve
|
||||
```
|
||||
|
||||
If you open your browser to `localhost:4200` (or whatever the dev server shows you), you should find a default initial Angular app running which should look like this:
|
||||
|
||||

|
||||
|
@ -79,28 +79,27 @@ Great! Now that we have an Angular app, lets display some super hero names.
|
|||
```ts
|
||||
// app.component.ts
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
selector: "app-root",
|
||||
templateUrl: "./app.component.html",
|
||||
styleUrls: ["./app.component.css"],
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Awesome Heroes';
|
||||
title = "Awesome Heroes";
|
||||
heroes = [
|
||||
{ id: 12, name: 'Dr. Nice' },
|
||||
{ id: 15, name: 'Magneta' },
|
||||
{ id: 13, name: 'Bombasto' },
|
||||
{ id: 17, name: 'Dynama' },
|
||||
{ id: 16, name: 'RubberMan' },
|
||||
{ id: 14, name: 'Celeritas' },
|
||||
{ id: 19, name: 'Magma' },
|
||||
{ id: 18, name: 'Dr. IQ' },
|
||||
{ id: 20, name: 'Tornado' },
|
||||
{ id: 12, name: "Dr. Nice" },
|
||||
{ id: 15, name: "Magneta" },
|
||||
{ id: 13, name: "Bombasto" },
|
||||
{ id: 17, name: "Dynama" },
|
||||
{ id: 16, name: "RubberMan" },
|
||||
{ id: 14, name: "Celeritas" },
|
||||
{ id: 19, name: "Magma" },
|
||||
{ id: 18, name: "Dr. IQ" },
|
||||
{ id: 20, name: "Tornado" },
|
||||
];
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
👨🏻💻 Then replace everything in the App component template `app.component.html` with:
|
||||
|
@ -121,7 +120,6 @@ export class AppComponent {
|
|||
<button>Sort by Name</button>
|
||||
|
||||
{% endraw %}
|
||||
|
||||
```
|
||||
|
||||
👨🏻💻 Let's make it look a bit fancy with by putting the following in the App component CSS `app.component.css`:
|
||||
|
@ -166,7 +164,6 @@ span.badge {
|
|||
padding: 0 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Your app should look like this:
|
||||
|
@ -182,6 +179,7 @@ In your terminal, run the command to add a web worker for the App component:
|
|||
```bash
|
||||
ng g web-worker app
|
||||
```
|
||||
|
||||
After running this, a new `app.worker.ts` file is generated, and your `app.component.ts` file will be updated with a minimal usage.
|
||||
|
||||
Go on, check around what has changed in your app's code.
|
||||
|
@ -232,7 +230,6 @@ More on the usage of these below.
|
|||
|
||||
<button (click)="sortHeroes('id')">Sort by ID</button>
|
||||
<button (click)="sortHeroes('name')">Sort by Name</button>
|
||||
|
||||
```
|
||||
|
||||
Check your devtools console and try clicking the buttons to see what's happening.
|
||||
|
@ -245,7 +242,7 @@ If you see this, your app is now creating and using a web worker.
|
|||
|
||||
👨🏻💻 Also, update the `worker.onmessage` callback so that it will assign the processed data to `this.heroes`.
|
||||
|
||||
Your `sortHeroes` method should now be:
|
||||
Your `sortHeroes` method should now be:
|
||||
|
||||
```ts
|
||||
// app.component.ts
|
||||
|
@ -278,7 +275,7 @@ After the `worker` instance is done processing, it will then send a message back
|
|||
|
||||
/// <reference lib="webworker" />
|
||||
|
||||
addEventListener('message', ({ data }) => {
|
||||
addEventListener("message", ({ data }) => {
|
||||
const { heroes, flag } = data;
|
||||
const response = heroes.sort((a: any, b: any) => {
|
||||
if (a[flag] < b[flag]) return -1;
|
||||
|
@ -287,10 +284,9 @@ addEventListener('message', ({ data }) => {
|
|||
});
|
||||
postMessage(response);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
What's happening here? First, a callback is attached to the `message` event which will be triggered when the message sent by `AppComponent` is received.
|
||||
What's happening here? First, a callback is attached to the `message` event which will be triggered when the message sent by `AppComponent` is received.
|
||||
|
||||
Next, the `data` object received will contain the `heroes` array and `flag` in it, so we destructure the received data and use this information for the `heroes.sort` callback.
|
||||
|
||||
|
@ -298,10 +294,9 @@ Now check your app again in your browser and click around the two buttons.
|
|||
|
||||
The heroes list should now be sorted depending on which button you click.
|
||||
|
||||
| Sorted by ID | Sorted by Name |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
| Sorted by ID | Sorted by Name |
|
||||
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
|  |  |
|
||||
|
||||
Congratulations! You just built an Angular app that sorts a list of `heroes` by name or ID... using a Web Worker! 🎉
|
||||
|
||||
|
|
|
@ -46,4 +46,4 @@ Practically, I find that if you play in that game you end up just creating conte
|
|||
|
||||
To cut the long story short, I was never really motivated by that and I see there's more negative impact.
|
||||
|
||||
So now I can just focus on putting out more content and "logging" my life's journey on the web... Let's go back to the roots of web logging.
|
||||
So now I can just focus on putting out more content and "logging" my life's journey on the web... Let's go back to the roots of web logging.
|
||||
|
|
|
@ -22,7 +22,7 @@ While waiting for the run to finish, I have some time to breathe and consider th
|
|||
|
||||
It's not something I wake up and look forward to do, but it is necessary when joining a project in the middle of its life and you reach a point of confidence degradation.
|
||||
|
||||
Okay, now the tests are done. All passed, all green checks. I just have to make sure the branch is synced with the development branch... and, *voila!* 30+ files of merge conflicts.
|
||||
Okay, now the tests are done. All passed, all green checks. I just have to make sure the branch is synced with the development branch... and, _voila!_ 30+ files of merge conflicts.
|
||||
|
||||
More things to fix due to another [PR](https://thecodebytes.com/what-is-a-pr-pull-request-in-software-development/) we merged recently.
|
||||
|
||||
|
@ -36,9 +36,9 @@ I still wasn't alive back then to catch the cinema release, but I sure still lik
|
|||
|
||||
What if I was at the beginning of this project? What could have I done to prevent this codebase from giving my future self all this trouble?
|
||||
|
||||
The idealistic developers will say *the business requirements should have been gathered first and that should guide the technical decisions*. Sure but, being from the future, we know that business requirements will also change.
|
||||
The idealistic developers will say _the business requirements should have been gathered first and that should guide the technical decisions_. Sure but, being from the future, we know that business requirements will also change.
|
||||
|
||||
Other developers might say *just build with the recommended frameworks to keep the codebase flexible and scalable*. But, still, because we are from the future, we now know that the frameworks (and tooling) of the past didn't really mean projects will just chug on like well-oiled machines.
|
||||
Other developers might say _just build with the recommended frameworks to keep the codebase flexible and scalable_. But, still, because we are from the future, we now know that the frameworks (and tooling) of the past didn't really mean projects will just chug on like well-oiled machines.
|
||||
|
||||
"Could this have been avoided?" -- That's not a simple question to answer. Business requirements and available technologies have changed and will continue to change.
|
||||
|
||||
|
@ -52,7 +52,7 @@ Should they do it right even though it will take some additional time to researc
|
|||
|
||||
Or should they mash everything together as fast as possible and get everyone's nod of approval?
|
||||
|
||||
If we *always* reward speed and not careful thinking, the result often builds up toward technical debt.
|
||||
If we _always_ reward speed and not careful thinking, the result often builds up toward technical debt.
|
||||
|
||||
## What Now?
|
||||
|
||||
|
@ -66,4 +66,4 @@ I don't mind being that guy who stops the chug chug of the software development
|
|||
|
||||
The worst thing that could happen is you have a couple of sprints without new features.
|
||||
|
||||
The alternative is you've built something up to a point that it is hard to maintain and no one wants to touch it... or is even capable of touching it.
|
||||
The alternative is you've built something up to a point that it is hard to maintain and no one wants to touch it... or is even capable of touching it.
|
||||
|
|
|
@ -31,6 +31,7 @@ The project and the road map for features are all public on my [GitHub](https://
|
|||
Right now, it successfully extracts the content and delivers a clean page to your browser.
|
||||
|
||||
I'm working toward bringing the following in the coming weeks:
|
||||
|
||||
1. Save favorites to a library
|
||||
2. Offline access
|
||||
3. Smart Insights about the article
|
||||
|
@ -50,8 +51,8 @@ javascript:(function(){ window.open('https://cozy.ayco.io/?url=%27 + window.loca
|
|||
|
||||
This is possible on all major browsers, including Safari on iOS (where I personally use this often). Some screenshots:
|
||||
|
||||
| Firefox | Chrome |
|
||||
| --- | --- |
|
||||
| Firefox | Chrome |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|  |  |
|
||||
|
||||
## Join the Project!
|
||||
|
@ -64,4 +65,4 @@ I think there's lots of good a simple tool could bring if it allows users to cut
|
|||
|
||||
This project is a groundwork for this experience.
|
||||
|
||||
Let's build the web we want! 🧸
|
||||
Let's build the web we want! 🧸
|
||||
|
|
|
@ -16,7 +16,7 @@ Last year, around November, a wave of [#TwitterMigration](https://social.ayco.io
|
|||
|
||||
I was part of that wave, and first signed up with [fosstodon.org](https://fosstodon.org/@ayo), a Mastodon community around Free and Open Source Software.
|
||||
|
||||
Like a lot of us new there, I loved the features that we didn't have in Twitter, like editing posts, super flexible content filters, and the capability to get updates from communities outside the one we signed up on.
|
||||
Like a lot of us new there, I loved the features that we didn't have in Twitter, like editing posts, super flexible content filters, and the capability to get updates from communities outside the one we signed up on.
|
||||
|
||||
But maybe the biggest thing that made me want to stay and invest in this is the realization that people can come together to form communities and create software that works for the benefit of the people.
|
||||
|
||||
|
@ -44,7 +44,6 @@ So here, I list some of them that I am currently using.
|
|||
|
||||
[**Pixelfed**](https://pixelfed.org/) - A decentralized photo sharing platform. It's part of the fediverse too, and maybe one of my favorites. It reminds me of the early Instagram days when photos being posted were actually good photography. Now every other popular place is just a variant of TikTok. Haha, anyway, here's [my pixelfed account](https://metapixl.com/ayo)
|
||||
|
||||
|
||||
## But Wait, There's More
|
||||
|
||||
The ones I listed above are the ones I have been using so far.
|
||||
|
@ -60,4 +59,3 @@ I'll probably post more when I get to try new ones.
|
|||
I love exploring these solutions as they usually lead to meeting people who think outside the box and me learning a lot from them.
|
||||
|
||||
Please do share if you know of others! :)
|
||||
|
||||
|
|
|
@ -14,4 +14,4 @@ However, I am still looking for a good alternative to SoundCloud which I could s
|
|||
|
||||
In the mean time, here's a guitar solo idea for a song I wrote (Scared):
|
||||
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/934295782&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/ayoayco" title="ayoayco" target="_blank" style="color: #cccccc; text-decoration: none;">ayoayco</a> · <a href="https://soundcloud.com/ayoayco/11222020-scared-test-lead" title="11.22.2020 - Scared Test Lead" target="_blank" style="color: #cccccc; text-decoration: none;">11.22.2020 - Scared Test Lead</a></div>
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/934295782&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/ayoayco" title="ayoayco" target="_blank" style="color: #cccccc; text-decoration: none;">ayoayco</a> · <a href="https://soundcloud.com/ayoayco/11222020-scared-test-lead" title="11.22.2020 - Scared Test Lead" target="_blank" style="color: #cccccc; text-decoration: none;">11.22.2020 - Scared Test Lead</a></div>
|
||||
|
|
|
@ -10,7 +10,7 @@ If you have ever looked up "how to write web components", you may have seen seve
|
|||
|
||||
I agree! To me, this was immediately apparent because I din't want to write a lot of the boilerplate every time I need a custom element.
|
||||
|
||||
But I sometimes see "reactivity" getting touted as a major feature of base classes and thought I'd write this quick one to show, well, you don't need a base class for *just that*.
|
||||
But I sometimes see "reactivity" getting touted as a major feature of base classes and thought I'd write this quick one to show, well, you don't need a base class for _just that_.
|
||||
|
||||
## What is reactivity
|
||||
|
||||
|
@ -48,7 +48,7 @@ In this example we use the standard `dataset` that collects all attributes prefi
|
|||
|
||||
Hence, every time the user clicks the element, the program modifies the observed `data-count` attribute and the update to the UI via `textContent` is triggered.
|
||||
|
||||
The standard for `data-` prefixed attributes exists to make sure they don't override standard HTML attributes. And collecting all values behind the `dataset` property means no standard HTML properties can also be overriden.
|
||||
The standard for `data-` prefixed attributes exists to make sure they don't override standard HTML attributes. And collecting all values behind the `dataset` property means no standard HTML properties can also be overriden.
|
||||
|
||||
Nice! But what's the catch?
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ category: technology
|
|||
fedi-url: https://social.ayco.io/@ayo/111758693535566456
|
||||
---
|
||||
|
||||
Back in December 2022, I went through the process of hosting my own [instance of Mastodon](https://social.ayco.io) which I [documented](https://fosstodon.org/@ayo/109545132022543467) as I work on it.
|
||||
Back in December 2022, I went through the process of hosting my own [instance of Mastodon](https://social.ayco.io) which I [documented](https://fosstodon.org/@ayo/109545132022543467) as I work on it.
|
||||
|
||||
But like a lot of software products out there, setting it up once is not enough... maintainers of servers in this federated social network need to upgrade every once in a while.
|
||||
|
||||
|
@ -38,7 +38,7 @@ First step is to determine the version you want to upgrade to in the project's [
|
|||
|
||||
If you are going for just a few patches away, the steps in the release page is usually enough.
|
||||
|
||||
But if your current version is one minor version away from the version you want to upgrade to (e.g, 4.1.x going to 4.2.x), you *can* directly checkout the target version branch but it is important that you read through the first minor release page (i.e., 4.2.0 for our example). Normally, they will have an important step for migrating between minor releases. More so, if you are jumping between major versions.
|
||||
But if your current version is one minor version away from the version you want to upgrade to (e.g, 4.1.x going to 4.2.x), you _can_ directly checkout the target version branch but it is important that you read through the first minor release page (i.e., 4.2.0 for our example). Normally, they will have an important step for migrating between minor releases. More so, if you are jumping between major versions.
|
||||
|
||||
If you have a small server with limited resource, running the build (or precompile) scripts might hit your memory (RAM) limits... it helps to stop the processes first--remember the three process mentioned in [Mastodon Administration 101](#mastodon-administration-101)? In my case, because I'm on Ubuntu I can use `systemctl stop` to do this.
|
||||
|
||||
|
@ -56,4 +56,4 @@ The process of self-hosting and maintaining a Mastodon (or any decentralized pla
|
|||
|
||||
Every upgrade to Mastodon shows the love and hard work our community has put into this revolutionary software evidenced by the improvements that keep pouring in.
|
||||
|
||||
Every issue, PR, post, like, boost, and whatever interaction makes me hopeful for a more free and open web.
|
||||
Every issue, PR, post, like, boost, and whatever interaction makes me hopeful for a more free and open web.
|
||||
|
|
|
@ -17,5 +17,6 @@ We talked about Astro's Islands architecture and how to combine it with new-ish
|
|||
Exciting times!
|
||||
|
||||
## Links
|
||||
|
||||
1. **Slides** - I uploaded the [slides](https://docs.google.com/presentation/d/1V3wIXV8JnxAVdVhurqaOxWJq6hK_Ry_NY_7O7Dyh2A0/edit?usp=sharing) for this talk.
|
||||
2. **Repo** - here's the [source code](https://ayco.io/gh/shoe-shop) for the demo I did during the talk.
|
||||
|
|
|
@ -7,17 +7,17 @@ category: technology
|
|||
fedi-url: https://social.ayco.io/@ayo/112386096303871531
|
||||
---
|
||||
|
||||
What great irony: a rage-post on OG images when one of my earliest contributions to Elk was the [first implementation of preview cards](https://github.com/elk-zone/elk/pull/339). When we got that in, the timeline really came to life. In my humble opinion. Like all my opinions.
|
||||
What great irony: a rage-post on OG images when one of my earliest contributions to Elk was the [first implementation of preview cards](https://github.com/elk-zone/elk/pull/339). When we got that in, the timeline really came to life. In my humble opinion. Like all my opinions.
|
||||
|
||||
But the more I see how people use the OG (originally great) image, I realize how hard it is to work with visually in a design. And the cognitive load it adds for me as a reader doesn’t help too… I don’t want the emotional click-bait tactics.
|
||||
But the more I see how people use the OG (originally great) image, I realize how hard it is to work with visually in a design. And the cognitive load it adds for me as a reader doesn’t help too… I don’t want the emotional click-bait tactics.
|
||||
|
||||
So when I worked on my own site’s [**/threads**](https://ayo.ayco.io/threads) page recently, I tried to skip showing the image--though more out of laziness than intentional. I decided to just show the more important information people should know before clicking a link: source, full title, and full description… yup none of them cut down. Hopefully no one writes an essay in their meta tags though.
|
||||
So when I worked on my own site’s [**/threads**](https://ayo.ayco.io/threads) page recently, I tried to skip showing the image--though more out of laziness than intentional. I decided to just show the more important information people should know before clicking a link: source, full title, and full description… yup none of them cut down. Hopefully no one writes an essay in their meta tags though.
|
||||
|
||||
…And then I realized how calm and *how much* controlled the layout is. *How Much* I Love the feeling that no one out there can ruin the feels on my personal `/threads` page.
|
||||
…And then I realized how calm and _how much_ controlled the layout is. _How Much_ I Love the feeling that no one out there can ruin the feels on my personal `/threads` page.
|
||||
|
||||
“But you don’t understand, Ayo, it’s an art. What about all the dynamic script I wrote, Ayo?”
|
||||
|
||||
Okay let’s have an honest conversation about that.
|
||||
Okay let’s have an honest conversation about that.
|
||||
|
||||
You already wrote a lot of words on your blog. And you wanna use an image to… display more words?
|
||||
|
||||
|
@ -28,12 +28,11 @@ Why not be abstract for a change and show a picture of something that may help i
|
|||
**Okay,** I get it, it’s magical. Dynamic image. Automated stuff. So why don’t we get to some healthy compromise here.
|
||||
|
||||
If you reaaaaaaally have to do it, here are some nice points to consider (yay blog post with a list!)
|
||||
1. Imagine a square at the center, and try to put stuff as close to it as you can. You’ll thank yourself when you see your post shared somewhere with small preview cards.
|
||||
|
||||
1. Imagine a square at the center, and try to put stuff as close to it as you can. You’ll thank yourself when you see your post shared somewhere with small preview cards.
|
||||
2. Dark theme? Yeah. When your image shows up in an app, it doesn’t respect the user’s preferences. No one will click on that link if you blind their eyes before they can read the description. Believe me.
|
||||
3. No portrait aspect ratio 🥲 (I try to limit my emojis but this one’s worth it). If you think no one does this, you might as well believe Earth is flat. I’ve seen a lot. I want to think they were on the lazy side and just used whatever image they found, but… no matter the reason. Just don’t
|
||||
3. No portrait aspect ratio 🥲 (I try to limit my emojis but this one’s worth it). If you think no one does this, you might as well believe Earth is flat. I’ve seen a lot. I want to think they were on the lazy side and just used whatever image they found, but… no matter the reason. Just don’t
|
||||
|
||||
|
||||
I kind of wish we have a standard on how browsers process OG images. Like some auto invert color mechanism to sync with the user’s preferences. I don’t know. For now I will just not show them.
|
||||
I kind of wish we have a standard on how browsers process OG images. Like some auto invert color mechanism to sync with the user’s preferences. I don’t know. For now I will just not show them.
|
||||
|
||||
Visit my [/threads](https://ayo.ayco.io/threads) page!
|
||||
|
||||
|
|
|
@ -16,8 +16,9 @@ I stumbled upon a few missteps I’d been making. For one, I realized I was spen
|
|||
|
||||
With this exercise, it became clear that I needed to inject flexibility and spontaneity into the process: make it FUN. It shouldn’t be about ticking boxes mindlessly; it should be about reflecting on the past week and strategizing for the next. Now I’m genuinely ready and excited to do my next Weekly Review!
|
||||
|
||||
-----
|
||||
---
|
||||
|
||||
Further readings:
|
||||
|
||||
1. [The Weekly Review](https://todoist.com/productivity-methods/weekly-review)
|
||||
2. [Getting Things Done](https://www.goodreads.com/book/show/1633.Getting_Things_Done)
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
title: "Organizing My Digital Memories"
|
||||
permalink: /:title/
|
||||
description: "Time to be intentional with the memories I keep close"
|
||||
category: personal
|
||||
category: personal
|
||||
fedi-url: https://social.ayco.io/@ayo/113401764230390625
|
||||
---
|
||||
|
||||
Started organizing my photos & videos I have taken through the years, and here’s my planned method...
|
||||
|
||||
First up, I back up all raw files into separate directories per year in hard drives — I currently have two: a 128GB USB-C, which I can plug directly into my phone on the go, and a 2TB external hard drive for less-frequent accessed backups. This way, I am confident that I have copies of everything safely stored even if cloud services get nuked for some reason.
|
||||
First up, I back up all raw files into separate directories per year in hard drives — I currently have two: a 128GB USB-C, which I can plug directly into my phone on the go, and a 2TB external hard drive for less-frequent accessed backups. This way, I am confident that I have copies of everything safely stored even if cloud services get nuked for some reason.
|
||||
|
||||
I will then curate and handpick my favorite items for significant moments (e.g., travels, events, parties), and create albums for them. These are the memories that matter to me; the ones I’d likely want to come back to and remember. Doing this reminds me of those family photo albums we used to keep around growing up.
|
||||
|
||||
|
@ -17,4 +17,3 @@ These special albums are what I will then sync across devices using a cloud serv
|
|||
The idea is to be more intentional with the photos & videos I intend to keep close and share to friends & family.
|
||||
|
||||
Feel free to use this approach if your photo library could use a bit of tidying up. Cheers! 🍻
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ category: technology
|
|||
fedi-url: https://social.ayco.io/@ayo/113409643660863435
|
||||
---
|
||||
|
||||
I’m now leaning on plain text files for notes instead of proprietary formats.
|
||||
I’m now leaning on plain text files for notes instead of proprietary formats.
|
||||
|
||||
Currently, I have hundreds of notes scattered across OneNote and Apple Notes. I’ve accumulated so much notes on OneNote because I’ve been a fan of it since it came out and has been too lazy to move away (if it works, it works). Apple Notes more recently offers convenience for quick notes on Apple devices.
|
||||
|
||||
|
@ -15,4 +15,3 @@ However, I often struggle with these apps due to syncing issues or restrictions
|
|||
So, I realized: plain text files don’t have any of these issues.
|
||||
|
||||
If I have a preferred text editor on one platform, I’m not locked into using only that on another. Any cloud sync service would be fine too; I can even use git if I want. :)
|
||||
|
||||
|
|
|
@ -8,18 +8,18 @@ fedi-url: https://social.ayco.io/@ayo/113412934242250762
|
|||
|
||||
Counting myself as a “creative”, I gravitate toward looking for ways to reflect some Truth/Reality in different forms. One such form is by capturing moments in Photos.
|
||||
|
||||
At one point during a trip to Heidelberg, Germany I struggled to capture the old bridge without noise (tourists, unsatisfactory lighting/angle, etc.) Just in time, Apple released [Clean Up feature on their Photos app](https://cozy.pub/?url=https://appleinsider.com/inside/ios-18/tips/how-to-use-clean-up-in-ios-181-photos-to-remove-distractions), so I tested it... and it works! Locally too, meaning it does not need communication to some supercomputer via the Internet.
|
||||
At one point during a trip to Heidelberg, Germany I struggled to capture the old bridge without noise (tourists, unsatisfactory lighting/angle, etc.) Just in time, Apple released [Clean Up feature on their Photos app](https://cozy.pub/?url=https://appleinsider.com/inside/ios-18/tips/how-to-use-clean-up-in-ios-181-photos-to-remove-distractions), so I tested it... and it works! Locally too, meaning it does not need communication to some supercomputer via the Internet.
|
||||
|
||||
It works like magic, and it’s clear that technology has come a long way for photography, but...
|
||||
|
||||
Why do I take photos? If I wanted a perfect shot, someone (a better photographer with better talent & tools) must have posted one online and I can just download their work — a joke I told my wife.
|
||||
Why do I take photos? If I wanted a perfect shot, someone (a better photographer with better talent & tools) must have posted one online and I can just download their work — a joke I told my wife.
|
||||
|
||||
So here are some reasons I take photos:
|
||||
|
||||
1. **Authenticity** - Capturing reality and reflecting truth is at the core of photography. Each shot is a snippet of a moment that can never be replicated. This means embracing the imperfections and unexpected elements that tell a story.
|
||||
|
||||
2. **Connection** - The photos I take carry memories that are personal to me. Each image is a timestamp of an experience, a place, and a feeling. These are the nuances that make the photo special and irreplaceable.
|
||||
|
||||
3. **Creativity** - From a young age, my father taught me the basics of photography which still guide every photo I take. Photography, for me, is a creative expression. It's about seeing the world through a unique lens, interpreting it, and sharing that with others.
|
||||
|
||||
The reality captured in a candid moment, the story behind an image, and the personal connection a photographer brings to each shot are irreplaceable. No matter what kind of Technological advancement for photography happens, these reasons will not change.
|
||||
|
||||
The reality captured in a candid moment, the story behind an image, and the personal connection a photographer brings to each shot are irreplaceable. No matter what kind of Technological advancement for photography happens, these reasons will not change.
|
||||
|
|
|
@ -7,6 +7,7 @@ fedi-url: https://social.ayco.io/@ayo/113427150306107770
|
|||
---
|
||||
|
||||
I recently thought about the different ways you can "have" a place in the Internet:
|
||||
|
||||
- Bare metal
|
||||
- Dedicated server
|
||||
- Virtual Private Server (VPS)
|
||||
|
|
|
@ -19,7 +19,7 @@ Here’s the clincher: I still think Catherine the Great is correct: “That whi
|
|||
|
||||
Growth will always be the proof of life.
|
||||
|
||||
However, not all growth is the same... or *looks* the same.
|
||||
However, not all growth is the same... or _looks_ the same.
|
||||
|
||||
Consider how trees both grow upwards (leaves seeking light) and downwards (roots seeking nutrients). This is how we should properly view growth.
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ export function renderMentions(mentions, rootSelector, ignoreAuthorUrls = []) {
|
|||
!(
|
||||
ignoreAuthorUrls.includes(m.author.url) &&
|
||||
engagementTypes.includes(m["wm-property"])
|
||||
)
|
||||
),
|
||||
);
|
||||
|
||||
if (mentions.length) {
|
||||
|
@ -60,15 +60,15 @@ function createRepliesBlock(replies, heading) {
|
|||
author.innerHTML = `
|
||||
<a href="${reply.author.url}">
|
||||
<minidenticon-svg username="${reply.author.url}" alt="Avatar for ${
|
||||
reply.author.name
|
||||
}" class="reply-photo" src="${reply.author.photo}">
|
||||
reply.author.name
|
||||
}" class="reply-photo" src="${reply.author.photo}">
|
||||
</minidenticon-svg>
|
||||
</a>
|
||||
|
||||
<span class="reply-name">${reply.author.name}</span>
|
||||
|
||||
<a href="${reply.url}" class="reply-date">${new Date(
|
||||
reply.published
|
||||
reply.published,
|
||||
).toLocaleDateString()}</a>
|
||||
|
||||
<div class="clear-both"></div>`;
|
||||
|
@ -129,7 +129,7 @@ export async function getMentions(url) {
|
|||
|
||||
while (true) {
|
||||
const results = await fetch(
|
||||
`https://webmention.io/api/mentions.jf2?target=${url}&per-page=${perPage}&page=${page}`
|
||||
`https://webmention.io/api/mentions.jf2?target=${url}&per-page=${perPage}&page=${page}`,
|
||||
).then((r) => r.json());
|
||||
|
||||
// dedupe depending on URL
|
||||
|
@ -151,6 +151,6 @@ export async function getMentions(url) {
|
|||
return mentions.sort((a, b) =>
|
||||
(a.published || a["wm-received"]) < (b.published || b["wm-received"])
|
||||
? -1
|
||||
: 1
|
||||
: 1,
|
||||
);
|
||||
}
|
||||
|
|
103
assets/main.scss
103
assets/main.scss
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
# only the main sass file needs front matter
|
||||
---
|
||||
# only the main sass file needs front matter
|
||||
---
|
||||
|
||||
@import "minima";
|
||||
@import url(reset.css);
|
||||
@import url(variables.css);
|
||||
|
@ -23,8 +24,17 @@ body {
|
|||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
line-height: 1.5;
|
||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||
font-family:
|
||||
medium-content-sans-serif-font,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
"Open Sans",
|
||||
"Helvetica Neue",
|
||||
sans-serif !important;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
|
@ -32,7 +42,9 @@ body {
|
|||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
a, a:visited, a:hover {
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: var(--color-brand-complement);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
|
@ -271,7 +283,8 @@ iframe.mastodon-embed {
|
|||
&__header {
|
||||
&__category {
|
||||
span {
|
||||
a, a:hover {
|
||||
a,
|
||||
a:hover {
|
||||
text-transform: uppercase;
|
||||
padding: 3px;
|
||||
width: auto;
|
||||
|
@ -400,9 +413,18 @@ iframe.mastodon-embed {
|
|||
display: inline-block;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
font-family: medium-content-sans-serif-font, -apple-system,
|
||||
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
"Open Sans", "Helvetica Neue", sans-serif !important;
|
||||
font-family:
|
||||
medium-content-sans-serif-font,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
"Open Sans",
|
||||
"Helvetica Neue",
|
||||
sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -488,7 +510,6 @@ iframe.mastodon-embed {
|
|||
padding: 1em;
|
||||
|
||||
&__header {
|
||||
|
||||
&__meta,
|
||||
&__description {
|
||||
font-size: var(--font-size-base);
|
||||
|
@ -534,7 +555,6 @@ iframe.mastodon-embed {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 0px) and (max-width: 600px) {
|
||||
|
||||
article .post-content p,
|
||||
article .post-content ul li,
|
||||
article .post-content ol li,
|
||||
|
@ -552,7 +572,6 @@ iframe.mastodon-embed {
|
|||
}
|
||||
|
||||
&__after-content {
|
||||
|
||||
#reply-by-email a,
|
||||
#fedi-link a {
|
||||
display: inline-block;
|
||||
|
@ -592,8 +611,6 @@ iframe.mastodon-embed {
|
|||
padding: 0 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.side-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -607,46 +624,54 @@ iframe.mastodon-embed {
|
|||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||
}
|
||||
|
||||
.site-nav .menu-icon>svg path {
|
||||
.site-nav .menu-icon > svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html, body{
|
||||
html,
|
||||
body {
|
||||
background: var(--bg-darker);
|
||||
color: var(--text-color-light);
|
||||
|
||||
summary,
|
||||
a, a:visited, a:hover
|
||||
{
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: var(--color-brand-complement-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post{
|
||||
.blog-post {
|
||||
&__header {
|
||||
&__category {
|
||||
span {
|
||||
a, a:hover {
|
||||
a,
|
||||
a:hover {
|
||||
color: var(--color-brand-complement-dark);
|
||||
border-bottom: solid 3px var(--color-brand-complement-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__content {
|
||||
div.highlight, pre.highlight, code {
|
||||
div.highlight,
|
||||
pre.highlight,
|
||||
code {
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-color-light-faded);
|
||||
border: 0px;
|
||||
}
|
||||
p, ol li, ul li {
|
||||
p,
|
||||
ol li,
|
||||
ul li {
|
||||
background: var(--bg-darker);
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
a, a:visited {
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--color-brand-complement-dark);
|
||||
}
|
||||
}
|
||||
|
@ -667,28 +692,26 @@ iframe.mastodon-embed {
|
|||
|
||||
.blog-home {
|
||||
&__list-items__item {
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-color-light);
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-color-light);
|
||||
|
||||
&__header__title {
|
||||
&__header__title {
|
||||
color: var(--color-brand-complement-dark) !important;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--text-color-light);
|
||||
text-decoration-color: var(--color-brand-complement-dark) !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-brand-complement-dark) !important;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--text-color-light);
|
||||
text-decoration-color: var(--color-brand-complement-dark) !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-brand-complement-dark) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer.site-footer {
|
||||
border-color: var(--bg-dark)
|
||||
border-color: var(--bg-dark);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -74,5 +74,3 @@ h6 {
|
|||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -896,8 +896,6 @@ Campfire also supports a few sounds
|
|||
|
||||
► /play secret► /play trombone► /play crickets► /play rimshot► /play vuvuzela► /play tmyk► /play live► /play drama► /play yeah► /play greatjob► /play pushit► /play nyan► /play tada► /play ohmy► /play bueller► /play ohyeah► /play 56k► /play dangerzone► /play horn► /play horror► /play loggins► /play yodel► /play sax► /play noooo► /play heygirl► /play inconceivable► /play deeper► /play whoomp► /play clowntown► /play what► /play bezos► /play trololo► /play makeitso► /play sexyback► /play bell► /play danielsan► /play greyjoy► /play story► /play dadgummit► /play rollout► /play cottoneyejoe► /play rumble► /play guarantee► /play unix► /play letitgo
|
||||
|
||||
|
||||
|
||||
This page was created by Arvid Andersson / @arvid_a at Oktavilla. Source code is available on GitHub.
|
||||
|
||||
❤ View all the super awesome people that have contributed to this page on the GitHub contributors page.
|
||||
|
@ -906,5 +904,5 @@ This page was created by Arvid Andersson / @arvid_a at Oktavilla. Source code is
|
|||
|
||||
♺ Built using bits from zClip, SubtlePatterns, jnotify, and list.js.
|
||||
|
||||
Fork me on GitHub
|
||||
```
|
||||
Fork me on GitHub
|
||||
```
|
||||
|
|
2
index.md
2
index.md
|
@ -8,4 +8,4 @@ type: "home"
|
|||
title: "Home"
|
||||
description: "Web Technologies and Productivity Hacks"
|
||||
image: "hello-world"
|
||||
---
|
||||
---
|
||||
|
|
19
privacy.md
19
privacy.md
|
@ -13,7 +13,7 @@ When you browse our blog, we also automatically receive your computer’s intern
|
|||
|
||||
Email marketing: With your permission, we may send you emails about our blog, new products and other updates.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 2 - CONSENT
|
||||
|
||||
|
@ -23,20 +23,19 @@ When you provide us with personal information to subscribe to our emails or news
|
|||
|
||||
If we ask for your personal information for a secondary reason, like marketing, we will either ask you directly for your expressed consent, or provide you with an opportunity to say no.
|
||||
|
||||
|
||||
### How do I withdraw my consent?
|
||||
|
||||
If after you opt-in, you change your mind, you may withdraw your consent for us to contact you, for the continued collection, use or disclosure of your information, at anytime, by contacting us at ayo@ayco.io
|
||||
If after you opt-in, you change your mind, you may withdraw your consent for us to contact you, for the continued collection, use or disclosure of your information, at anytime, by contacting us at ayo@ayco.io
|
||||
|
||||
You will also find an "unsubscribe" link at the bottom of our emails.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 3 - DISCLOSURE
|
||||
|
||||
We may disclose your personal information if we are required by law to do so or if you violate our Terms of Service.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 4 - THIRD-PARTY SERVICES
|
||||
|
||||
|
@ -56,7 +55,7 @@ Once you leave our blog or are redirected to a third-party website or applicatio
|
|||
|
||||
When you click on links on our blog, they may direct you away from our site. We are not responsible for the privacy practices of other sites and encourage you to read their privacy statements.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 5 - SECURITY
|
||||
|
||||
|
@ -68,13 +67,13 @@ We do not have SSL on our website because we don't gather personal information.
|
|||
|
||||
We don't track analytics as of 22th of March, 2023. We also removed all JS that uses cookies.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 6 - AGE OF CONSENT
|
||||
|
||||
By using this site, you represent that you are at least the age of majority in your state or province of residence, or that you are the age of majority in your state or province of residence and you have given us your consent to allow any of your minor dependents to use this site.
|
||||
|
||||
----
|
||||
---
|
||||
|
||||
## SECTION 7 - CHANGES TO THIS PRIVACY POLICY
|
||||
|
||||
|
@ -84,8 +83,6 @@ If our blog is acquired or merged with another company, your information may be
|
|||
|
||||
### QUESTIONS AND CONTACT INFORMATION
|
||||
|
||||
If you would like to: access, correct, amend or delete any personal information we have about you, register a complaint, or simply want more information contact our Privacy Compliance Officer at ayo@ayco.io
|
||||
If you would like to: access, correct, amend or delete any personal information we have about you, register a complaint, or simply want more information contact our Privacy Compliance Officer at ayo@ayco.io
|
||||
|
||||
[Re: Privacy Compliance Officer]
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue