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
|
1. follow the [jekyll installation guide](https://jekyllrb.com/docs/installation) for your machine
|
||||||
|
|
||||||
2. clone project, then go to the directory:
|
2. clone project, then go to the directory:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ git clone git@github.com:ayoayco/blog
|
$ git clone git@github.com:ayoayco/blog
|
||||||
$ cd blog
|
$ cd blog
|
||||||
```
|
```
|
||||||
|
|
||||||
3. install dependencies:
|
3. install dependencies:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ bundle install
|
$ bundle install
|
||||||
```
|
```
|
||||||
|
|
||||||
4. run dev server:
|
4. run dev server:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ bundle exec jekyll serve --livereload
|
$ bundle exec jekyll serve --livereload
|
||||||
```
|
```
|
||||||
|
|
||||||
5. build project:
|
5. build project:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ bundle exec jekyll build
|
$ bundle exec jekyll build
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,3 @@ category: technology / productivity / personal / motivational / entertaining
|
||||||
<!-- In this blog
|
<!-- In this blog
|
||||||
1. what are web workers
|
1. what are web workers
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -158,4 +158,4 @@ jekyll-archives:
|
||||||
- year
|
- year
|
||||||
layout: archive
|
layout: archive
|
||||||
permalinks:
|
permalinks:
|
||||||
year: 'archives/:year/'
|
year: "archives/:year/"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<head>
|
<head>
|
||||||
<title>{{site.title}} • {{page.title}}</title>
|
<title>{{site.title}} • {{page.title}}</title>
|
||||||
<meta name="description"
|
<meta
|
||||||
content="Learn how to use the best and latest web technologies to boost your productivity." />
|
name="description"
|
||||||
|
content="Learn how to use the best and latest web technologies to boost your productivity."
|
||||||
|
/>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<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="webmention" href="https://webmention.io/ayos.blog/webmention" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
|
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
|
||||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}"
|
<link
|
||||||
href="{{ '/feed.xml' | relative_url }}" />
|
rel="alternate"
|
||||||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
|
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="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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">
|
<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 {
|
import {
|
||||||
getMentions,
|
getMentions,
|
||||||
renderMentions,
|
renderMentions,
|
||||||
|
|
@ -67,7 +80,7 @@
|
||||||
"/motivational/",
|
"/motivational/",
|
||||||
];
|
];
|
||||||
const url = new URL(
|
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)) {
|
if (!ignorePaths.includes(url.pathname)) {
|
||||||
const mentions = getMentions(url.toString())
|
const mentions = getMentions(url.toString())
|
||||||
|
|
@ -75,13 +88,16 @@
|
||||||
renderMentions(
|
renderMentions(
|
||||||
mentions,
|
mentions,
|
||||||
".blog-post__web-mentions",
|
".blog-post__web-mentions",
|
||||||
ignoreAuthorUrls
|
ignoreAuthorUrls,
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
.catch((err) => console.log("err", err));
|
.catch((err) => console.log("err", err));
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- lite-yt-embed -->
|
<!-- 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>
|
<script src="https://unpkg.com/lite-youtube-embed@0.3.3/src/lite-yt-embed.js"></script>
|
||||||
</head>
|
</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">
|
<table class="image">
|
||||||
<caption align="bottom">{{ include.description }}</caption>
|
<caption align="bottom">
|
||||||
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr>
|
{{ include.description }}
|
||||||
|
</caption>
|
||||||
|
<tr>
|
||||||
|
<td><img src="{{ include.url }}" alt="{{ include.description }}" /></td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<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>
|
<p>
|
||||||
Like you, I have many areas of interest. And you will find here a collection
|
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"
|
of my posts on varying topics which are not confined to my "professional"
|
||||||
work.
|
work.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>Read the full message</summary>
|
<summary>Read the full message</summary>
|
||||||
<p>
|
<p>
|
||||||
There may be some topics that pop up more than others.
|
There may be some topics that pop up more than others.
|
||||||
<a href="/technology">Technology</a> posts are mostly about web
|
<a href="/technology">Technology</a> posts are mostly about web development,
|
||||||
development, and may be more relatable to people who have found me for my
|
and may be more relatable to people who have found me for my development
|
||||||
development work. More opinionated <a href="/personal">personal</a> posts
|
work. More opinionated <a href="/personal">personal</a> posts are where I
|
||||||
are where I talk about stuff I find interesting because of their potential
|
talk about stuff I find interesting because of their potential to help
|
||||||
to help others as much as they have helped me.
|
others as much as they have helped me.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
I strive to keep things organized, and have created a page that lists
|
I strive to keep things organized, and have created a page that lists
|
||||||
|
|
@ -31,4 +31,4 @@
|
||||||
<li>email: ayo[at]ayco[dot]io</li>
|
<li>email: ayo[at]ayco[dot]io</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>~ <em>Ayo Ayco</em></p>
|
<p>~ <em>Ayo Ayco</em></p>
|
||||||
</details>
|
</details>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
<li class="blog-home__list-items__item">
|
<li class="blog-home__list-items__item">
|
||||||
<div class="blog-home__list-items__item__header">
|
<div class="blog-home__list-items__item__header">
|
||||||
<div class="blog-home__list-items__item__header__meta">
|
<div class="blog-home__list-items__item__header__meta">
|
||||||
<small>{% assign date_format = site.minima.date_format | default: "%b %-d,
|
<small
|
||||||
%Y" %} {{ post.date | date: date_format }}
|
>{% assign date_format = site.minima.date_format | default: "%b %-d, %Y"
|
||||||
|
%} {{ post.date | date: date_format }}
|
||||||
</small>
|
</small>
|
||||||
•
|
•
|
||||||
<small>
|
<small>
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,12 @@ layout: default
|
||||||
<h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>
|
<h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>
|
||||||
|
|
||||||
<ul class="posts">
|
<ul class="posts">
|
||||||
{% for post in page.posts %}
|
{% for post in page.posts %}
|
||||||
<li>
|
<li>
|
||||||
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
|
<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>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,8 @@ layout: default
|
||||||
<div class="blog-home">
|
<div class="blog-home">
|
||||||
{% if site.posts.size > 0 %}
|
{% if site.posts.size > 0 %}
|
||||||
<ul class="blog-home__list-items">
|
<ul class="blog-home__list-items">
|
||||||
{% for post in site.posts limit:10 %}
|
{% for post in site.posts limit:10 %} {% include post-item.html %} {% endfor
|
||||||
{% include post-item.html %}
|
%}
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,11 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
<article class="post">
|
|
||||||
|
|
||||||
|
<article class="post">
|
||||||
<header class="post-header">
|
<header class="post-header">
|
||||||
<h1 class="post-title">{{ page.title | escape }}</h1>
|
<h1 class="post-title">{{ page.title | escape }}</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="post-content">
|
<div class="post-content">{{ content }}</div>
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,11 @@ permalink: /good-programming-practices/
|
||||||
category: technology
|
category: technology
|
||||||
description: Some thoughts on practices that make programming better
|
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-->
|
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 as Problem Solving
|
||||||
|
|
||||||
- Programming is basically writing down code to instruct computers how to solve problems.
|
- 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.
|
- 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.
|
- 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.
|
- To do this, one must observe good programming practices.
|
||||||
|
|
||||||
### Good Programming Practices
|
### Good Programming Practices
|
||||||
|
|
||||||
Here are some points I try to observe while programming:
|
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.)
|
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.
|
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.
|
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.
|
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
|
**My role:** Senior Frontend Engineer
|
||||||
|
|
||||||
- introduced new technologies to upgrade v.1 of the Project NOAH
|
- 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
|
- worked on the development of v.2 of the Project NOAH web
|
||||||
app, a government-funded flagship real-time information platform
|
app, a government-funded flagship real-time information platform
|
||||||
to address the Philippines’ disaster problems
|
to address the Philippines’ disaster problems
|
||||||
- contributed technical insight for valuable research output of the
|
- contributed technical insight for valuable research output of the
|
||||||
project
|
project
|
||||||
|
|
||||||
**Technologies:** AngularJS, HTML, JavaScript, CSS, Python, PostgreSQL
|
**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.
|
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
|
**My role:** Project Manager and Lead Software Engineer
|
||||||
|
|
||||||
- spearheaded the overall development of WebSAFE, an impact
|
- spearheaded the overall development of WebSAFE, an impact
|
||||||
assessment tool for calculating needs for the effects of natural
|
assessment tool for calculating needs for the effects of natural
|
||||||
hazards on exposed assets such as people and infrastructure
|
hazards on exposed assets such as people and infrastructure
|
||||||
- lead the team of WebSAFE software developers and GIS specialists
|
- lead the team of WebSAFE software developers and GIS specialists
|
||||||
to innovate on the open-source tool InaSAFE, and build the web
|
to innovate on the open-source tool InaSAFE, and build the web
|
||||||
app for impact calculation of natural hazard and exposure in
|
app for impact calculation of natural hazard and exposure in
|
||||||
specific areas in the Philippines
|
specific areas in the Philippines
|
||||||
- presented WebSAFE in international and local conferences as a
|
- presented WebSAFE in international and local conferences as a
|
||||||
best practice in harnessing science and technology for disaster
|
best practice in harnessing science and technology for disaster
|
||||||
management
|
management
|
||||||
|
|
||||||
**Technologies:** AngularJS, HTML, JavaScript, CSS, Python, PostgreSQL
|
**Technologies:** AngularJS, HTML, JavaScript, CSS, Python, PostgreSQL
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,11 @@ project-date: "2017"
|
||||||
category: projects
|
category: projects
|
||||||
description: Submission platform to share ideas or kick-start project ideas
|
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.
|
Hosted in Infor’s private intranet, this is a submission platform where employees can share ideas or kick-start projects.
|
||||||
|
|
||||||
**My role**: Software Engineer
|
**My role**: Software Engineer
|
||||||
|
|
||||||
- constructed the core code-base of Innovation Flight Central
|
- constructed the core code-base of Innovation Flight Central
|
||||||
|
|
||||||
Technologies: PHP, MySQL, MiniOrange SAML Login, Windows Server (IIS), Windows ADFS
|
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/
|
permalink: /feels-fm/
|
||||||
description: What do you do when you don't want to do anything or talk to anyone?
|
description: What do you do when you don't want to do anything or talk to anyone?
|
||||||
category: productivity
|
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.
|
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
|
## 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:
|
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.
|
- 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.
|
- 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
|
## Other Possible Workarounds and Good Practice
|
||||||
|
|
||||||
Here are some helpful tips in designing HTML emails for Lotus Notes:
|
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.
|
- 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.
|
- 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.
|
- Keep your designs simple so that if they fail, your email is still readable.
|
||||||
|
|
||||||
## Suggestion on Campaign Creation Workflow
|
## 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.
|
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.
|
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.
|
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:
|
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.
|
- 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”
|
- 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:
|
- 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.
|
- 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.
|
- 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).
|
- 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).
|
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.
|
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
|
## The Quest
|
||||||
|
|
||||||
We are going to create a mobile application that:
|
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
|
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
|
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:
|
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
|
## The Hope
|
||||||
|
|
||||||
With this mission I hope to:
|
With this mission I hope to:
|
||||||
|
|
||||||
1. Bring the problem back in front of people's faces. :)
|
1. Bring the problem back in front of people's faces. :)
|
||||||
2. Spark conversations and actions.
|
2. Spark conversations and actions.
|
||||||
3. Aid NGOs and LGUs in policy-making.
|
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)
|
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> -->
|
Or you can email us at <a href="mailto:tech4good.pm.me">tech4good@pm.me</a> -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,16 @@ This is the classic game [Minesweeper](https://mnswpr.com) built with vanilla we
|
||||||
See the [source code on GitHub](https://github.com/ayoayco/mnswpr)
|
See the [source code on GitHub](https://github.com/ayoayco/mnswpr)
|
||||||
|
|
||||||
## What I have learned:
|
## What I have learned:
|
||||||
|
|
||||||
1. JS is awesome ✨
|
1. JS is awesome ✨
|
||||||
1. We don't always necessarily *need* JS frameworks (or TS) ✨
|
1. We don't always necessarily _need_ JS frameworks (or TS) ✨
|
||||||
1. Even subtle UI changes *can improve* user gameplay experience ✨
|
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. 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. 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:**
|
**Technology Stack:**
|
||||||
|
|
||||||
- HTML, JS, and CSS
|
- HTML, JS, and CSS
|
||||||
- Webpack for bundling
|
- Webpack for bundling
|
||||||
- Firebase for leader board store
|
- Firebase for leader board store
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@ description: Distrupted work week due to sickness and sudden vaccination schedul
|
||||||
image-attrib: >-
|
image-attrib: >-
|
||||||
Ayo Ayco. Playing in the pool with Kahel.
|
Ayo Ayco. Playing in the pool with Kahel.
|
||||||
category: personal
|
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-->
|
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.
|
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.
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: 'Weekly Review #8'
|
title: "Weekly Review #8"
|
||||||
image: pool-maintenance
|
image: pool-maintenance
|
||||||
permalink: /weekly-review-8/
|
permalink: /weekly-review-8/
|
||||||
description: I try to convince myself not to feel bad about failure
|
description: I try to convince myself not to feel bad about failure
|
||||||
|
|
|
||||||
|
|
@ -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."
|
> 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.
|
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.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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.
|
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.
|
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.
|
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.
|
So, for example, if you want to generate a worker for the root App component, just run the following in the terminal.
|
||||||
|
|
@ -68,6 +67,7 @@ Once done, open the generated directory and run the angular development server.
|
||||||
cd web-worker-demo
|
cd web-worker-demo
|
||||||
ng serve
|
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:
|
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
|
```ts
|
||||||
// app.component.ts
|
// app.component.ts
|
||||||
|
|
||||||
import { Component } from '@angular/core';
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: "app-root",
|
||||||
templateUrl: './app.component.html',
|
templateUrl: "./app.component.html",
|
||||||
styleUrls: ['./app.component.css'],
|
styleUrls: ["./app.component.css"],
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = 'Awesome Heroes';
|
title = "Awesome Heroes";
|
||||||
heroes = [
|
heroes = [
|
||||||
{ id: 12, name: 'Dr. Nice' },
|
{ id: 12, name: "Dr. Nice" },
|
||||||
{ id: 15, name: 'Magneta' },
|
{ id: 15, name: "Magneta" },
|
||||||
{ id: 13, name: 'Bombasto' },
|
{ id: 13, name: "Bombasto" },
|
||||||
{ id: 17, name: 'Dynama' },
|
{ id: 17, name: "Dynama" },
|
||||||
{ id: 16, name: 'RubberMan' },
|
{ id: 16, name: "RubberMan" },
|
||||||
{ id: 14, name: 'Celeritas' },
|
{ id: 14, name: "Celeritas" },
|
||||||
{ id: 19, name: 'Magma' },
|
{ id: 19, name: "Magma" },
|
||||||
{ id: 18, name: 'Dr. IQ' },
|
{ id: 18, name: "Dr. IQ" },
|
||||||
{ id: 20, name: 'Tornado' },
|
{ id: 20, name: "Tornado" },
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
👨🏻💻 Then replace everything in the App component template `app.component.html` with:
|
👨🏻💻 Then replace everything in the App component template `app.component.html` with:
|
||||||
|
|
@ -121,7 +120,6 @@ export class AppComponent {
|
||||||
<button>Sort by Name</button>
|
<button>Sort by Name</button>
|
||||||
|
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
👨🏻💻 Let's make it look a bit fancy with by putting the following in the App component CSS `app.component.css`:
|
👨🏻💻 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;
|
padding: 0 1rem;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Your app should look like this:
|
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
|
```bash
|
||||||
ng g web-worker app
|
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.
|
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.
|
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('id')">Sort by ID</button>
|
||||||
<button (click)="sortHeroes('name')">Sort by Name</button>
|
<button (click)="sortHeroes('name')">Sort by Name</button>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Check your devtools console and try clicking the buttons to see what's happening.
|
Check your devtools console and try clicking the buttons to see what's happening.
|
||||||
|
|
@ -278,7 +275,7 @@ After the `worker` instance is done processing, it will then send a message back
|
||||||
|
|
||||||
/// <reference lib="webworker" />
|
/// <reference lib="webworker" />
|
||||||
|
|
||||||
addEventListener('message', ({ data }) => {
|
addEventListener("message", ({ data }) => {
|
||||||
const { heroes, flag } = data;
|
const { heroes, flag } = data;
|
||||||
const response = heroes.sort((a: any, b: any) => {
|
const response = heroes.sort((a: any, b: any) => {
|
||||||
if (a[flag] < b[flag]) return -1;
|
if (a[flag] < b[flag]) return -1;
|
||||||
|
|
@ -287,7 +284,6 @@ addEventListener('message', ({ data }) => {
|
||||||
});
|
});
|
||||||
postMessage(response);
|
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.
|
||||||
|
|
@ -299,10 +295,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.
|
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! 🎉
|
Congratulations! You just built an Angular app that sorts a list of `heroes` by name or ID... using a Web Worker! 🎉
|
||||||
|
|
||||||
> The code for this demo app is in [my GitHub repository](https://github.com/ayoayco/ng-web-worker-demo)
|
> The code for this demo app is in [my GitHub repository](https://github.com/ayoayco/ng-web-worker-demo)
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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.
|
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?
|
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.
|
"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?
|
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?
|
## What Now?
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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:
|
I'm working toward bringing the following in the coming weeks:
|
||||||
|
|
||||||
1. Save favorites to a library
|
1. Save favorites to a library
|
||||||
2. Offline access
|
2. Offline access
|
||||||
3. Smart Insights about the article
|
3. Smart Insights about the article
|
||||||
|
|
@ -51,7 +52,7 @@ 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:
|
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!
|
## Join the Project!
|
||||||
|
|
|
||||||
|
|
@ -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)
|
[**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
|
## But Wait, There's More
|
||||||
|
|
||||||
The ones I listed above are the ones I have been using so far.
|
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.
|
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! :)
|
Please do share if you know of others! :)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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
|
## What is reactivity
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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.
|
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.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,5 +17,6 @@ We talked about Astro's Islands architecture and how to combine it with new-ish
|
||||||
Exciting times!
|
Exciting times!
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
1. **Slides** - I uploaded the [slides](https://docs.google.com/presentation/d/1V3wIXV8JnxAVdVhurqaOxWJq6hK_Ry_NY_7O7Dyh2A0/edit?usp=sharing) for this talk.
|
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.
|
2. **Repo** - here's the [source code](https://ayco.io/gh/shoe-shop) for the demo I did during the talk.
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ But the more I see how people use the OG (originally great) image, I realize how
|
||||||
|
|
||||||
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?”
|
“But you don’t understand, Ayo, it’s an art. What about all the dynamic script I wrote, Ayo?”
|
||||||
|
|
||||||
|
|
@ -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.
|
**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!)
|
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.
|
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!
|
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!
|
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:
|
Further readings:
|
||||||
|
|
||||||
1. [The Weekly Review](https://todoist.com/productivity-methods/weekly-review)
|
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. [Getting Things Done](https://www.goodreads.com/book/show/1633.Getting_Things_Done)
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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! 🍻
|
Feel free to use this approach if your photo library could use a bit of tidying up. Cheers! 🍻
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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.
|
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. :)
|
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. :)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ It works like magic, and it’s clear that technology has come a long way for ph
|
||||||
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:
|
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.
|
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.
|
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.
|
||||||
|
|
@ -22,4 +23,3 @@ So here are some reasons I take photos:
|
||||||
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.
|
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:
|
I recently thought about the different ways you can "have" a place in the Internet:
|
||||||
|
|
||||||
- Bare metal
|
- Bare metal
|
||||||
- Dedicated server
|
- Dedicated server
|
||||||
- Virtual Private Server (VPS)
|
- 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.
|
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.
|
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) &&
|
ignoreAuthorUrls.includes(m.author.url) &&
|
||||||
engagementTypes.includes(m["wm-property"])
|
engagementTypes.includes(m["wm-property"])
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (mentions.length) {
|
if (mentions.length) {
|
||||||
|
|
@ -68,7 +68,7 @@ function createRepliesBlock(replies, heading) {
|
||||||
<span class="reply-name">${reply.author.name}</span>
|
<span class="reply-name">${reply.author.name}</span>
|
||||||
|
|
||||||
<a href="${reply.url}" class="reply-date">${new Date(
|
<a href="${reply.url}" class="reply-date">${new Date(
|
||||||
reply.published
|
reply.published,
|
||||||
).toLocaleDateString()}</a>
|
).toLocaleDateString()}</a>
|
||||||
|
|
||||||
<div class="clear-both"></div>`;
|
<div class="clear-both"></div>`;
|
||||||
|
|
@ -129,7 +129,7 @@ export async function getMentions(url) {
|
||||||
|
|
||||||
while (true) {
|
while (true) {
|
||||||
const results = await fetch(
|
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());
|
).then((r) => r.json());
|
||||||
|
|
||||||
// dedupe depending on URL
|
// dedupe depending on URL
|
||||||
|
|
@ -151,6 +151,6 @@ export async function getMentions(url) {
|
||||||
return mentions.sort((a, b) =>
|
return mentions.sort((a, b) =>
|
||||||
(a.published || a["wm-received"]) < (b.published || b["wm-received"])
|
(a.published || a["wm-received"]) < (b.published || b["wm-received"])
|
||||||
? -1
|
? -1
|
||||||
: 1
|
: 1,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
# only the main sass file needs front matter
|
# only the main sass file needs front matter
|
||||||
---
|
---
|
||||||
|
|
||||||
@import "minima";
|
@import "minima";
|
||||||
@import url(reset.css);
|
@import url(reset.css);
|
||||||
@import url(variables.css);
|
@import url(variables.css);
|
||||||
|
|
@ -23,8 +24,17 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgba(0, 0, 0, 0.84);
|
color: rgba(0, 0, 0, 0.84);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
|
font-family:
|
||||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
medium-content-sans-serif-font,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
"Open Sans",
|
||||||
|
"Helvetica Neue",
|
||||||
sans-serif !important;
|
sans-serif !important;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -32,7 +42,9 @@ body {
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
a, a:visited, a:hover {
|
a,
|
||||||
|
a:visited,
|
||||||
|
a:hover {
|
||||||
color: var(--color-brand-complement);
|
color: var(--color-brand-complement);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-thickness: 1px;
|
text-decoration-thickness: 1px;
|
||||||
|
|
@ -271,7 +283,8 @@ iframe.mastodon-embed {
|
||||||
&__header {
|
&__header {
|
||||||
&__category {
|
&__category {
|
||||||
span {
|
span {
|
||||||
a, a:hover {
|
a,
|
||||||
|
a:hover {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -400,9 +413,18 @@ iframe.mastodon-embed {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: medium-content-sans-serif-font, -apple-system,
|
font-family:
|
||||||
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
medium-content-sans-serif-font,
|
||||||
"Open Sans", "Helvetica Neue", sans-serif !important;
|
-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;
|
padding: 1em;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
|
|
||||||
&__meta,
|
&__meta,
|
||||||
&__description {
|
&__description {
|
||||||
font-size: var(--font-size-base);
|
font-size: var(--font-size-base);
|
||||||
|
|
@ -534,7 +555,6 @@ iframe.mastodon-embed {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 0px) and (max-width: 600px) {
|
@media only screen and (min-width: 0px) and (max-width: 600px) {
|
||||||
|
|
||||||
article .post-content p,
|
article .post-content p,
|
||||||
article .post-content ul li,
|
article .post-content ul li,
|
||||||
article .post-content ol li,
|
article .post-content ol li,
|
||||||
|
|
@ -552,7 +572,6 @@ iframe.mastodon-embed {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__after-content {
|
&__after-content {
|
||||||
|
|
||||||
#reply-by-email a,
|
#reply-by-email a,
|
||||||
#fedi-link a {
|
#fedi-link a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -592,8 +611,6 @@ iframe.mastodon-embed {
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.side-panel {
|
.side-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -607,28 +624,31 @@ iframe.mastodon-embed {
|
||||||
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-nav .menu-icon>svg path {
|
.site-nav .menu-icon > svg path {
|
||||||
fill: #ffffff;
|
fill: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html, body{
|
html,
|
||||||
|
body {
|
||||||
background: var(--bg-darker);
|
background: var(--bg-darker);
|
||||||
color: var(--text-color-light);
|
color: var(--text-color-light);
|
||||||
|
|
||||||
summary,
|
summary,
|
||||||
a, a:visited, a:hover
|
a,
|
||||||
{
|
a:visited,
|
||||||
|
a:hover {
|
||||||
color: var(--color-brand-complement-dark);
|
color: var(--color-brand-complement-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-post{
|
.blog-post {
|
||||||
&__header {
|
&__header {
|
||||||
&__category {
|
&__category {
|
||||||
span {
|
span {
|
||||||
a, a:hover {
|
a,
|
||||||
|
a:hover {
|
||||||
color: var(--color-brand-complement-dark);
|
color: var(--color-brand-complement-dark);
|
||||||
border-bottom: solid 3px var(--color-brand-complement-dark);
|
border-bottom: solid 3px var(--color-brand-complement-dark);
|
||||||
}
|
}
|
||||||
|
|
@ -637,16 +657,21 @@ iframe.mastodon-embed {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
div.highlight, pre.highlight, code {
|
div.highlight,
|
||||||
|
pre.highlight,
|
||||||
|
code {
|
||||||
background: var(--bg-dark);
|
background: var(--bg-dark);
|
||||||
color: var(--text-color-light-faded);
|
color: var(--text-color-light-faded);
|
||||||
border: 0px;
|
border: 0px;
|
||||||
}
|
}
|
||||||
p, ol li, ul li {
|
p,
|
||||||
|
ol li,
|
||||||
|
ul li {
|
||||||
background: var(--bg-darker);
|
background: var(--bg-darker);
|
||||||
color: var(--text-color-light);
|
color: var(--text-color-light);
|
||||||
}
|
}
|
||||||
a, a:visited {
|
a,
|
||||||
|
a:visited {
|
||||||
color: var(--color-brand-complement-dark);
|
color: var(--color-brand-complement-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -686,9 +711,7 @@ iframe.mastodon-embed {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
footer.site-footer {
|
footer.site-footer {
|
||||||
border-color: var(--bg-dark)
|
border-color: var(--bg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -74,5 +74,3 @@ h6 {
|
||||||
#__next {
|
#__next {
|
||||||
isolation: isolate;
|
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
|
► /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.
|
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.
|
❤ 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.
|
♺ Built using bits from zClip, SubtlePatterns, jnotify, and list.js.
|
||||||
|
|
||||||
Fork me on GitHub
|
Fork me on GitHub
|
||||||
```
|
```
|
||||||
15
privacy.md
15
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.
|
Email marketing: With your permission, we may send you emails about our blog, new products and other updates.
|
||||||
|
|
||||||
----
|
---
|
||||||
|
|
||||||
## SECTION 2 - CONSENT
|
## 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.
|
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?
|
### 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.
|
You will also find an "unsubscribe" link at the bottom of our emails.
|
||||||
|
|
||||||
----
|
---
|
||||||
|
|
||||||
## SECTION 3 - DISCLOSURE
|
## 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.
|
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
|
## 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.
|
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
|
## 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.
|
We don't track analytics as of 22th of March, 2023. We also removed all JS that uses cookies.
|
||||||
|
|
||||||
----
|
---
|
||||||
|
|
||||||
## SECTION 6 - AGE OF CONSENT
|
## 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.
|
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
|
## SECTION 7 - CHANGES TO THIS PRIVACY POLICY
|
||||||
|
|
||||||
|
|
@ -87,5 +86,3 @@ If our blog is acquired or merged with another company, your information may be
|
||||||
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]
|
[Re: Privacy Compliance Officer]
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue