DEV Community: W3Teal

W3Teal & Fosstodon

W3Teal — Tue, 25 Feb 2025 09:25:30 +0000

Choosing an instance on Mastodon is hard, I really like Fosstodon because it has dev, web, and FOSS themes. Also this instance has been around for a long time (2018, I still don't know anything about programming), and still has updates until now. I appreciate the Invite-only decision to reduce and give wide space to developers who really want to. (Although the approval request is enough, but this can also train how to communicate according to each person's way).

I have never written such a long letter to get a Fosstodon invitation link, I have contacted Fosstodon emails but have not received a reply. So I searched for people who are fairly new to Fosstodon who have available contacts. And I finally got Fosstodon!

And also as my intention, I will use Fosstodon as my only primary account (meaning the other accounts will be second... third...), so that there are enough accounts that I can leave, and I can focus on only posting on Fosstodon. 🙏

Impressions

W3Teal: "First impressions: On the local feed, I found pos…" - Fosstodon

First impressions: On the local feed, I found posts about tech, tech promotions, memes and shitposts? The experience was quite enjoyable, filled with funny and intelligent people.

fosstodon.org

W3Teal: "It feels like people don't like to post much, in …" - Fosstodon

It feels like people don't like to post much, in this duration there are quite a lot of delays so that my post doesn't fall, even though the active users are up to 11 thousand? I can say that the speed of this server is very fast. Since my account was suspended at mastodon.scot, I have become more careful in every instance that has its own rules.

fosstodon.org

W3Teal: "My last Mastodon account transfer. Fosstodon has …" - Fosstodon

My last Mastodon account transfer. Fosstodon has been my dream instance for a long time, although it is the same as other servers but of course the experience is a bit different, right? "fosstodon.org" which premium account invited you here?

fosstodon.org

Nice long-form posts

Thoughts on Mastodon After 1 Week

Dan Han ・ Nov 13 '22

#writing

We’ve moved to Fosstodon 🦣

Erin Bensinger for The DEV Team ・ Dec 30 '22

#meta #mastodon #fediverse #socialmedia

zedas.fr

I migrated my Mastodon account to Fosstodon — Paolo Amoroso's Journal

Mastodon.technology, the Mastodon instance that hosted my account, will be shut down. The admin Ash Furrow took this decision for serious...

journal.paoloamoroso.com

I moved to Fosstodon too

W3Teal — Tue, 25 Feb 2025 08:58:58 +0000

We’ve moved to Fosstodon 🦣

Erin Bensinger for The DEV Team ・ Dec 30 '22

#meta #mastodon #fediverse #socialmedia

Ebook Fasih HTML5 & CSS3 DARI 0

W3Teal — Sun, 26 Jan 2025 06:07:49 +0000

Coming soon.

Buku yang membahas seputar basis HTML dan CSS, disusun secara berwarna, ringkas, dan mudah dimengerti.
Akhir Januari 2025.

Postingan mengenai buku ini:

https://fedi.my.id/@l/113882747529311436

Halaman resmi dari buku "Ebook Fasih HTML5 & CSS3 DARI 0".
Merupakan sequel dari buku yang saya ciptakan saat saya masih pemula (Ebook HTML CSS Manual Dasar).

Membahas beberapa tentang

IDE (Integrated development environment)
Root (doctype)
Head
Tipografi
Wrapper
Table
Form
List
Atribut
...dan masih banyak lagi! Tidak termasuk bahasan yang ada didalamnya lagi.

I moved to GitLab

W3Teal — Thu, 16 Jan 2025 08:20:15 +0000

No more!

https://gitlab.com/LIGMATV

This is just a personal story

Recently, I had some connection issues behind my router with GitHub. It seems like GitHub is almost silently blocked.

Why GitLab?

Because it is a fairly close alternative to GitHub with moderate popularity, and I also feel that GitLab is quite mature compared to other git alternatives such as Codeberg and Bitbucket

Why Leave GitHub?

I didn't completely leave, I was just being careful because our stupid MCDA can block it at any time, because GitHub is also often detected as a malicious site, so GitHub can be vulnerable to being blocked. So far, I've only imported my popular repositories.

Features i know

Customizable

It's easier to mark all my repositories by icons, like:

Flexible data

Almost in all places, there's a Atom feeds. Like in GMX.css: Issues, ~~Pull~~ Merge request.

Same features, but more

Later, what

Notify if this repository is on GitLab and archive it.

Alternative to GitHub Desktop

I use GitHub desktop a lot to make commits from local, since I moved to GitLab, I found the official GitLab workflow extension, and I use it and I find myself using VSCodium more often for terminal and commits than using 3 separate applications.

https://docs.gitlab.com/ee/editor_extensions/visual_studio_code/

My repositories in GitLab

11ty Beer: 🍻✨ An 11ty blog template with Material Design, PWA and minified files that simply works.
Awesome Ringtone: 📞📲🎶 An awesome & curated list of ringtones from well-known brands such as Apple, LG, Samsung, etc.
boredown: 📝💯 Portable static site generator with frontmatter & math feature, without HTML & JS knowledge.
GMX.css: GMX.css implements the Material 3 design system in Vanilla CSS/JS, from the components to the animations to the theming.

And, some Docsify plugins and themes.
I also officially archived this repository and added a notice that it has been moved to GitLab.

Docsify Theme GitHub: The minimal amount of CSS to replicate the GitHub Markdown style
Docsify Dark Switcher: Easily switch toggle to light and dark theme for your Docsify, customizable and works in any CSS themes.
Docsify Navbar Fixed: A new always on top customizable and pretty navigation bar for your docs.
Docsify Vite Coverpage: A new responsive vite-like coverpage for your docs.
Docsify Theme 98: Bring back the old Windows Classic theme in Docsify.
Docsify Theme XP: Bring back the old Luna XP theme in Docsify.
Docsify Theme Vista: Bring back the old Aero theme in Docsify.

[Boost]

W3Teal — Tue, 14 Jan 2025 08:41:54 +0000

Why Mastodon.social is the Best Twitter Alternative for Developers?

Joodi ・ Dec 3 '24

#mastodon #twitteralternative #mastodonsocial #twitter

How to embed your Mastodon profile

W3Teal — Sat, 11 Jan 2025 12:08:52 +0000

In X (aka Twitter), you can easily embed your profile page via their official page. But, how you can do it in Mastodon? Here the step-by-step tutorial how to make it.

1. Import the module

You can import the file via JSDelivr CDN. (Source)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.min.css" integrity="sha256-1UGgxsonaMCfOEnVOL89aMKSo3GEAmaRP0ISbsWa6lU=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.umd.js" integrity="sha256-E6WPG6iq+qQIzvu3HPJJxoAeRdum5siq13x4ITjyxu8=" crossorigin="anonymous"></script>

2. Add the embed wrapper

You can embed that in whenever place you want. (Source)

<div id="mt-container" class="mt-container">
  <div class="mt-body" role="feed">
    <div class="mt-loading-spinner"></div>
  </div>
</div>

3. Add JS configuration

After import and add the wrapper, now you need to add the MastodonTimeline config. (Source)

<script>
   const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.social/",
      timelineType: "profile",
      userId: "950856",
      profileName: "@LIGMATV",
   });
</script>

Change the instanceUrl to where you signed up your Mastodon account. For example, if your profile link is https://mastodon.social/@example, then the instance is https://mastodon.social/.
timelineType, the type of timeline you want. In this case, you just need to make it profile.
userId, you can find your user ID via your instance API. For example, if your profile link is https://mastodon.social/@example, then the API link is in https://mastodon.social/api/v1/accounts/lookup?acct=example. You can find it in first section (For example: {"id":"950856",...)
profileName, it's your username in the instance.

You can see the working example in how my Mastodon account looks in this embed approach:

Just it! Considering to give star and contributing to mastodon-embed-timeline repository! ⭐ https://gitlab.com/idotj/mastodon-embed-timeline

GMX.css v0.0.16: Select your favorite theme!

W3Teal — Mon, 16 Dec 2024 04:24:25 +0000

Bored for use the default purple theme? Now, GMX.css have a built in themes that you can simply add to your website! 👀

Add

So, you can import the themes file under the gmx.css & iconify-icon imports with this simple code:

<link rel="stylesheet" href="https://unpkg.com/gmx.css/theme.css">

It was includes Red, Pink, Purple, Indigo, Blue, Cyan, Teal, Green, Lime, Yellow, Amber, Orange and Monochrome color.

For example, if you want to make your site have a green color scheme, just add the green class to your body site!

...
<body class="green">
     ...

Just that! Import the theme file and add color class to the body. Make your website have uniqueness and characteristics. 🎨

Getting started on your website with GMX.css now ✨

<link rel="stylesheet" href="https://unpkg.com/gmx.css">
<script src="https://unpkg.com/iconify-icon"></script>

GMX.css repository
GMX.css NPM
GMX.css website

My history in blogging (& coding) (Until i falling to Dev.to)

W3Teal — Sun, 15 Dec 2024 07:41:38 +0000

Background

So before, i starting to make some blogs with Blogger (it's removed). And i like this! Because they have an simple UI with WYSIWYG and fully customizable themes. Since then, i start to make more blogs but, it don't have any attention.

In early of this year, i became very interested in learning coding. And mostly, my projects like Bukumark was helped by ChatGPT (sad). When i make some website for me, the blogs is basically just copied from the Blogger (because it's complicated bruh).

OG

Until now, i have 5 website. First, i have a "Look ma, i have website!" ahh website that i built with ChatGPT. It doesn't have blogs. Basically just an lists to all my social and my AI-generated projects. (I use so much AI why). It's has the "next-generation" version, but doesn't really matter.

Jekyll

Second, a Jekyll website. What i like from it is Simplicity, but it's doesn't easily customizable (because i newbie). At this part, i start to include all my blogs here. I describe that with "Now im can admit that Jekyll is yummy."

Vitepress

Third, a Vite (Vitepress) website. Really, the UI & UX really gorgeous. It fix my issue about customization. But because the code is really bad, i didn't know why when i reload, it's get broken. I describe that with "Vue JS was too clean and customized. Why im not use it since old?"

My english is really broken at that time, yeah we always learn.

Docsify

Fourth, a Docsify website. This is the website I have used the longest (until today). I make a bunch of plugins and themes, like i have a lot of potential from this SG. And at that time, i starting to get really good at coding (except js). Nothing so much issue with this, it does the job really well.

But, because i used to make blogs, seems like these SSG doesn't mean so much for me. Like... writing an blog from terminal? Bad idea for me. I want to back to Blogger, but it's deleted. So what then? I stop blogging.

DEV.to

I also make my own SG called Boredown. Has perfect lighthouse but, i never use it. Lately, i work for my new CSS framework called GMX.css which i write myself. To spread it, i make some posts for it in DEV.to and Medium. But i feel like, DEV.to is really good. It's don't have paywall or vendor lock-in. The community is great and basically developer-oriented. It's also open source and have flexible API which i use for my new website!

My issues is solved, i have a website with my posts in DEV.to, while i can customize it in my own. And great place and community for writing blogs. I fork the template, it was use 11ty. I also love the lighthouse score i get from the new website.

So that, my journey in blogging. Like it or not, it depends on each person's taste and maybe i will move to another place, and i would be happy to create another blog. Thanks for reading!

GMX.css v0.0.13: Now in NPM!

W3Teal — Sat, 14 Dec 2024 03:03:00 +0000

Following the GMX.css v0.0.13, We now publishing the GMX.css in NPM. So, it's now more easy to use it in any framework.

Installing from NPM:

npm install gmx.css
npm install iconify-icon

Importing from NPM:

@import "gmx.css";

import 'gmx.css';

And also, it's now easier to import it via CDN with JSDelivr and UNPKG.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gmx.css">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon"></script>

<link rel="stylesheet" href="https://unpkg.com/gmx.css">
<script src="https://unpkg.com/iconify-icon"></script>

GMX.css repository
GMX.css NPM
GMX.css website

GMX.css: Create a simple layout

W3Teal — Thu, 12 Dec 2024 10:23:12 +0000

Make a simple web page can be difficult, because a lot of ugly and unstyled components built in by browser. But of course, you can customize all of it with CSS. But styling can waste your times, makes you not serious about building applications.

GMX.css, an CSS framework that comnes with a lot of beautiful styled components with Material Design based, you can building your web apps many times easier and faster. This is how you can make an simple layout with GMX.css.

First, you need to import the CSS and Iconify Icon. We recommended to use the JSDelivr CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LIGMATV/gmx.css@main/gmx.css">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>

Second, we built the simple navigation. And also it was really responsive! In desktop, it will showed in left and vertical, meanwhille in mobile, it will showed in bottom and horizontal.

Third, built some container with typography and button. You can learn from here.

You now can built an simple web app with GMX.css. For more explore, visit the website to see the demos and examples of the elements you want to copy 👇🏻
https://ligmatv.is-a.dev/gmx.css/ (Source code)

GMX.css v0.0.12: What's new?

W3Teal — Thu, 12 Dec 2024 09:33:08 +0000

The new minor update from GMX.css just launched now. What's the difference?

Progress

The progress element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. And also, there's a different attribute to run this element, you can make the progress element with normal bar or circular look, and make it runs statically by value or leave it intermedinate.

The code is simple, just create the progress element for intermedinate.

<progress></progress>

Or, you can give it value and max too.

<progress value="30" max="100"></progress>

Wants the circular version? Add the circle class with --value variable.

<progress class="circle" value="30" max="100" style="--value: 30;"></progress>

Circle but intermedinate and spinning? Sure.

<progress class="circle spin" style="--value: 30;"></progress>

Try the demo here:

Not just add progress, we also made the web more responsive.
See the difference and try inspect: v0.0.10 vs v0.0.12

Cool right? Getting started now by add single line in your HTML file!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LIGMATV/gmx.css@main/gmx.css">

GMX.css repository
GMX.css website

GMX.css: The most lightweight Material Design-based framework

W3Teal — Mon, 09 Dec 2024 10:52:52 +0000

I used to create my website with Beer.css, it's very lightweight and easy to reusable the components and customizable. And later, i found M3 Svelte which have a perfect Material Design Guideline and good-looking too, but sadly that framework is just for Svelte framework, meanwhille me just HTML5 framework. So i decide to make my own framework...

Understanding

GMX.css is an new CSS framework that implements the Material 3 design system in Vanilla CSS/JS, from the components to the animations to the theming. I used to make this framework for my own, but i decide to publish it on GitHub. That's because there's already a bunch of components already (Thought it's just realeased in yesterday).

Feature

It's was really lighweight. So far, with 15 components already implemented, the unminified (full) version size is just 19,3 KB! Thought it has a lot of variables and utilities. But this framework is not yet stable, so there are still many things that untidy so that this framework is still not perfect. But it's already responsive!

On desktop

On phone

Try it

Try it, and give me some comment... Thanks.
https://ligmatv.is-a.dev/gmx.css/ (Source code)

DEV Community: W3Teal

W3Teal & Fosstodon

Impressions

W3Teal: "First impressions: On the local feed, I found pos…" - Fosstodon

W3Teal: "It feels like people don't like to post much, in …" - Fosstodon

W3Teal: "My last Mastodon account transfer. Fosstodon has …" - Fosstodon

Nice long-form posts

Thoughts on Mastodon After 1 Week

Dan Han ・ Nov 13 '22

We’ve moved to Fosstodon 🦣

Erin Bensinger for The DEV Team ・ Dec 30 '22

I migrated my Mastodon account to Fosstodon — Paolo Amoroso's Journal

I moved to Fosstodon too

We’ve moved to Fosstodon 🦣

Erin Bensinger for The DEV Team ・ Dec 30 '22

Ebook Fasih HTML5 & CSS3 DARI 0

Coming soon.

I moved to GitLab

No more!

Why GitLab?

Why Leave GitHub?

Features i know

Customizable

Flexible data

Same features, but more

Later, what

Alternative to GitHub Desktop

My repositories in GitLab

[Boost]

Why Mastodon.social is the Best Twitter Alternative for Developers?

Joodi ・ Dec 3 '24

How to embed your Mastodon profile

1. Import the module

2. Add the embed wrapper

3. Add JS configuration

GMX.css v0.0.16: Select your favorite theme!

Add

My history in blogging (& coding) (Until i falling to Dev.to)

Background

OG

Jekyll

Vitepress

Docsify

DEV.to

GMX.css v0.0.13: Now in NPM!

GMX.css: Create a simple layout

GMX.css v0.0.12: What's new?

Progress

More

GMX.css: The most lightweight Material Design-based framework

Understanding

Feature

Try it