Glam Up My Markup » Earth Day Celebration Landing Page

Đăng Tú — Sat, 27 Apr 2024 14:13:46 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

An ordinary landing page like every other landing page you've ever seen with simple mindset. It ain't much but an honest work :]

Source code
https://gitlab.com/ndt-challenge/dev.to/frontend-240417/-/tree/bcca5c5840eb487af7378ea20f84016bcd02e443/Glam%20Up%20My%20Markup

Demo

https://ndt-challenge.gitlab.io/dev.to/frontend-240417/glam-up-my-markup

Dev.to image upload has too many restriction that I couldn't upload my website screenshot. Quite disappointed but there is nothing I can do, here is the image from imgbox.com site: https://imgbox.com/LTZBlO3R

Journey

I'm not really good in design and my ideas inverse to my age as programmer. So in short, this landing page may not be the finest in the contest but at least I did my best. With that in mind, I didn't expect to loot anything this time. However the goddam unexpected thing always be there right in the corner to do you a goddam jump scare. This time, it was a good jump scare, or jump happy 🤔 excited jump 🤔 hmn...

At first start this challenge, I admitted I'd been pretty negative about the challenge. Look at the glamup HTML code make me want to murder whoever come up with. The part of content supposed to use semantic tag didn't, class name spilled everywhere. However, after work, once I'd calmed down, I found out it was intentional from the staff. All the tags have class name was actually hints on missing information that the staff may want us, participators, to look further more. Yep, I firmly believed it was a minor challenge on encouraging us to research and understand more about earthday project. Yup yup, it was all about spreading message. That's tight 'n I like it. → lesson learnt: early judgment is usually bad, don't let it become conclusion.

After I understood the real assigment, or that what I thought, I start with the logic task first and complete it quite fast. Learning from the last time mistake, I don't want to do complex structure. So I focused on the kind of struct that can delivery well content to visitor, the classic flexbox layout. During the research, I found a few more fun/cool quotes about the earth or environment and I decide to collect a few of them to share it on the site. That make the spirit of the challenge make more sense right? Yet, my features greed refuses to leave me along. I want to add more feature that can actually put people awareness on the weather around them. And that is how my trailing cursor came in the play. If it's hot, you'll see fire and snow for being cold. From there I know what I should do next for my site design. → lesson learnt: Ideas don't always come at once. It is one thing after another. If you couldn't find an idea for your work. Do something easy, or something else. You may surprise what you got later on. (maybe)

💡 Tip
To enjoy different ~~harassment~~ from trailing cursor, you can modify localstorage directly by update/create temperature key. The value can be any float number.

With the weather trailing cursor idea, I decided to make a website graphic design look like an outdoor zone. Instead using minimalism concerpt, I use a lot of texture and multiple color to bring out the nature element onto the website. At first I want to draw the tree and stuff content on each leafs brush on the tree. But it's too complicated and not very responsive. I gave up. I'm not an artist and the plan is unrealistic. I decide to come back to minimalism, still I only took the layout concept of it. Colorful textures didn't go elsewhere. As result, it won't look good under the eyes of professional but it surely not too horrible. → lesson learnt: Never forget these 3 things, your goal, your time 'n your skills. Know enemies (time in this case) as much as you know yourself is the key to success.

The rest is tiny elements that doesn't play big impact in the site. Those can be an animation title on the browser tab, header background moving, custom unorder list bullets, the small arrow in the quote bubble, hilarious photo in events section and footer title. They ain't much, some are not even noticable. Yet, once you remove them out, it definitely feels something's missing. Espcially the bubble arrow, at first I used the famous border trick to make the arrow. However, with border I couldn't blur the backdrop so I decided to scrap the code and go with the clip-path way.

❗Known Bug
In Firefox on Linux, even if you click allow, the geolocation API still return permission denied. Since it happens on Linux, I'm not sure if it's just me or other people got the same problem. Please lemme know if you got the same like me.

What's next

I kinda like the trailing cursor so I properly build a library backed by custom element. Not sure when I could release it, tomorrow or tomorrow. Who knows 🙃

There ain't much to say so I put a period here. Hope you guys found my trailing cursor is ~~annoying~~ fun. I swear I didn't built that feature to share my thought about the goddam hot weather in Vietnam atm 🫠 Really, I've no intention to convert the frustration of hot onto painful look of the website... 🙃

A Half-baked Work at Glam Up My Markup

Đăng Tú — Sun, 31 Mar 2024 17:38:26 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

Base on the skeleton, I add CSS to make it looks a bit fancy and use Js to improve UX (More specific, turn a whole form into multiple sections for focusing purpose)

Demo

https://ndt-challenge.gitlab.io/dev.to/1st/glam-up-my-markup

Glam Up My Markup · main · Challenges Accepted / DEV.to / 1st - 20Mar2024 · GitLab

on2024(20 Mar, 31 Mar) | demo: Glam-up My Markup

gitlab.com

Journey

A lot of fun during working but due to deadline, I cannot polish my work any longer. The main reason behind this mess is because I want to play with Solid. I always like it but rarely have a good chance to use it. So I decied to use it on this simple challenge.

At first, every looks nice enough with just simple 2 nav buttons, go forward or fallback, easy peasy. But then, me being stupidly greedy decided to add 1 tiny feature. Just like a client used to say, only a tiny button, what could go wrong? Yep, only a tiny "reset" button and I burn my whole cute little project into ash.

So till now, at the moment I'm writing in the middle of the night (GTM+7), my code has been through at least 2 refactoring times and I still have no idea what I did. Many problems are still there and many other features will never see the sun light...

So, technically, this work isn't worth to submit. But I still want to submit with a hope that somebody can give me a few advices to improve my code. Right now, I'm stuck with the fact that createEffect of SolidJs doesn't seems to work in change event of select. Oh, suggestions for clean code are welcome too.

History API in One Byte Explanation

Đăng Tú — Fri, 22 Mar 2024 05:53:05 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

Browser session history is managed by states and this API helps us to modify and query it. Along pushing, replacing states and tracking it with popstate event, we can navigate visitors to go back, forward or jump to specific point of the history.

Additional Context

MDN reference | cover credit to Joanna Kosinska

I'm a simple old-school guy who just tried to munch a lot information in a bite, yes pun intend >:) Hopefully it won't choke any reader ;)

DEV Community: Đăng Tú

Glam Up My Markup » Earth Day Celebration Landing Page

What I Built

Demo

Journey

What's next

A Half-baked Work at Glam Up My Markup

What I Built

Demo

Glam Up My Markup · main · Challenges Accepted / DEV.to / 1st - 20Mar2024 · GitLab

Journey

History API in One Byte Explanation

Explainer

Additional Context