diff options
| author | altaf-creator <dev@altafcreator.com> | 2026-06-13 19:06:09 +0800 |
|---|---|---|
| committer | altaf-creator <dev@altafcreator.com> | 2026-06-13 19:06:09 +0800 |
| commit | 1b14996290f228a329d83c164e50c27364cc0a22 (patch) | |
| tree | 14e978e3c17674f36fd36d4d60b278a7e0c788ea | |
| parent | b9b627ca77048191577b41f40c352a9ce67ef61b (diff) | |
| -rw-r--r-- | data/blogs.json | 7 | ||||
| -rw-r--r-- | data/blogs/urban0.md | 182 | ||||
| -rw-r--r-- | data/events/nytc.md | 58 | ||||
| -rw-r--r-- | markdown_renderer.py | 4 | ||||
| -rw-r--r-- | pages.py | 2 | ||||
| -rw-r--r-- | templates/blogpost.html | 1 | ||||
| -rw-r--r-- | www/assets/images/blog/ass_banner.png | bin | 0 -> 346038 bytes | |||
| -rw-r--r-- | www/projects/index.html | 4 | ||||
| -rw-r--r-- | www/scripts/blog.js | 5 | ||||
| -rw-r--r-- | www/scripts/constants.js | 4 | ||||
| -rw-r--r-- | www/scripts/iframe.js | 11 | ||||
| -rw-r--r-- | www/style.css | 103 |
12 files changed, 308 insertions, 73 deletions
diff --git a/data/blogs.json b/data/blogs.json index 14851b9..38e6a60 100644 --- a/data/blogs.json +++ b/data/blogs.json @@ -2,7 +2,7 @@ [ { "thumbnail": "/assets/images/blog/ass.png", - "banner": "/assets/images/blog/ass.png", + "banner": "/assets/images/blog/ass_banner.png", "path": "/data/blogs/ass.md" }, { @@ -14,6 +14,11 @@ "thumbnail": "/assets/images/blog/33_cover.png", "banner": "/assets/images/blog/33_banner.png", "path": "/data/blogs/1.md" + }, + { + "thumbnail": "", + "banner": "", + "path": "/data/blogs/urban0.md" } ] } diff --git a/data/blogs/urban0.md b/data/blogs/urban0.md index 79c2c73..469fb15 100644 --- a/data/blogs/urban0.md +++ b/data/blogs/urban0.md @@ -1,111 +1,191 @@ --- -title: Design Thinking and our Urban Environment -description: Work in progress -date: Jun 2026 +title: Reimagining Singapore's Streets with Design Thinking +description: A secondary schooler's take on how we should design our streets. +date: 12 Jun 2026 author: altaf-creator tags: - Blog - Urbanism --- -<!-- +=+=+= -This blog is a work-in-progress. -# Outline -* ~~STEM >< Humanities. Overlap.~~ -* ~~**Urban design** often viewed as engineering, but it's also something human. (What is urban design)~~ -* We've been thinking of road design too much in an engineering perspective. - * ~~Road design is deeply linked to urbanism, an inter-disciplinary study~~ - * Streets are human spaces, even places! -* What is **Design Thinking** - * STEAM more human, because overlap -* Importance of design thinking in shaping our urban environment. - * Singapore strengths, HDB, placemaking. - * Singapore negatives, roadway car-centric. -* In my school, design thinking. MOE pushes for this. -* So, should be applied more, especially for our urban roads and hence environment. -* Current positive efforts: - * LTMP Refresh (People-centric) - * Road repurposing -* Hi! Who am I? +<div class="shadow-filter" markdown="1"> + +</div> +View of Marine Parade Rd from footpath. Photograph taken by me. <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +{: .img-caption } --+-+-+ +This is a typical road that you may find in Singapore. Four 3.2 m to 3.5 m wide lanes lined with trees and 1.8 m wide footpaths. -+=+=+= +The roads and streets of Singapore are widely acclaimed to be world-class. This is definitely true in an engineering perspective. As seen in the picture above, the lanes are nice, wide, smooth, and with clear road markings. Traffic flows smoothly, managed by relatively smart automated traffic lights. Roads are maintained regularly with advanced civil engineering technology to ensure the roads are always in pristine condition. + +The traffic engineering in Singapore is definitely world-class. However, I feel like Singapore has been building its streets too much in an engineering lens. + +To be clear, the issue is not that traffic engineering is unimportant. Efficient traffic acts as the veins that keep Singapore alive. Without it, economic productivity and people's daily commute will be severely crippled. However, roads and streets are not only built to accommodate efficient traffic flow. -Engineering and humanities are often represented as total counterparts. Academic diplomas are categorised into distinct fields, usually sciences and arts. Faculties for engineering and humanities disciplines are often separate. This categorisation does work in a lot of contexts, especially in highly-specialised disciplines fields of both fields. However, this separation does ignore the fact that these two fields very often intersect, and the disciplines within this intersection play an undeniably important role in society. +Streets inherently are spaces for humans. A street's function is more than connecting places to places. A street can be a place where people connect with each other. It can be a place where people discover new things around their neighbourhood. There is an inextricable social part in streets. When we ignore it, that is, when we design our streets purely in an engineering perspective (despite the name "traffic engineering"), we are reducing a street's functionality from a place for the community to merely a traffic conduit. -One major discipline in that intersection is urbanism. I'll use urbanism as a large umbrella term encompassing different disciplines including urban planning and urban design. But basically, I'm talking about how we build our cities. Urbanism may be considered a science discipline as it does touch on architecture, +<div class="shadow-filter" markdown="1"> + +</div> +View of Bedok North St 1, a street near Bedok Town Centre and Heartbeat@Bedok. Despite being a silver zone, the carriageway is still fairly wide with 4 lanes of vehicular traffic. Photograph taken by me. <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +{: .img-caption } + +This is what I feel like I'm seeing in Singapore. There are many instances where wide 4-lane roads are cutting through town centres of heartlands, despite being categorised as a local access road. Town centres are vibrant places bustling of activities and businesses. Regardless of people's background and age, these are places where people want to spend their time in. Having wide roads cutting through it will make it harder for people to explore and find out about new businesses near that place. It may also be harder for residents living across the road to walk there, despite their close proximity, as wide roads for vehicles can act as a physical barrier that reduces permeability. Not only that, vehicles are polluting, and wide roads that facilitate vehicular movement will make the environment around it more uncomfortable to spend time in, which is contradictory of the characteristics of a town centre. + +There is also the impacts on road safety. Conventional road design in Singapore often features wide and straight lanes in arterial roads and local streets. Drivers subconsciously associate these characteristics with faster driving, just like how they would drive in expressways, disregarding the speed limit of that street. In an unfortunate circumstance of a traffic accident, higher speeds will result in more fatal consequences. In fact, the risk of a pedestrian fatality increases exponentially with the collision speed[^1]. Places such as town centres should be a place where people can navigate freely with peace of mind, rather than a high-speed thoroughfare that compromises safety. + +As of 2024, the road network in Singapore occupies 12% of Singapore's total land area[^2]. This is a significant portion of land-scarce Singapore, even comparable to the total land area allocated for housing (14%)[^3]. Since road infrastructure in Singapore covers such a large area, making sure that we design our roads and streets correctly, that is designing roads that accommodates the needs of everyone, not just the flow of vehicles, is very important. Therefore, designing our roads and streets with empathy is crucial. -+-+-+ ---> + +=+=+= - +This is where **design thinking** can come in. -This is a typical road that you may find in Singapore. Four 3.2 m to 3.5 m wide lanes lined with trees and 1.8 m wide footpaths. +Design thinking generally refers to a human-centered methodology that designers can use to ensure that they solve problems by prioritising the needs of the users[^4]. There are numerous frameworks of design thinking out there, but they all generally have a common theme of listening and **empathising** to problems that a target audience faces, and focusing on solving them. For this post, I'll use a very common 5-staged design thinking framework. The stages include: empathise, define, ideate, prototype, and test. -The roads and streets of Singapore are widely acclaimed to be world-class. This is definitely true in an engineering perspective. As seen in the picture above, the lanes are nice, wide, smooth, and with clear road markings. Traffic flows smoothly, managed by relatively smart automated traffic lights. Roads are maintained regularly with advanced civil engineering technology to ensure the roads are always in pristine condition. - -The traffic engineering in Singapore is definitely world-class. However, I feel like Singapore has been building its streets too much in an engineering lens. +<div class="shadow-filter" markdown="1"> + +</div> +The 5 iterative stages of Design Thinking: empathise, define, ideate, and prototype. Illustration by me. <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +{: .img-caption } -Streets inherently are spaces for humans. A street's function is more than connecting places to places. A street can be a place where people connect with each other. It can be a place where people discover new things around their neighbourhood. There is an inextricable social part in streets. When we ignore it, that is, when we design our streets purely in an engineering perspective (despite the name "traffic engineering), we are reducing a street's functionality from a place for the community to merely a traffic conduit. +Let's go through a brief explanation of each of these five stages[^9]. - +1. **Empathise.** This is a stage where we understand the problems and needs of the people within the context of a problem. Empathy is the main feature of a human centric design process like design thinking. We can do this by listening and engaging with people directly and/or observing people's behaviour. +2. **Define.** The data we gathered from people may be messy and can be quite overwhelming. This is the stage where we bring clarity to the problem we are tackling. We can do this by crafting a problem statement, kind of like a point-of-view. This way, it will be clearer of what problem we are actually solving for everyone. +3. **Ideate.** This is the stage where we think of solutions and generate... well... ideas! In this stage, we are focusing on generating as broad of a range of solutions as possible. We won't truly know whether any idea is good or not, but that is where the next stage comes in. +4. **Prototype.** This is where we try out different ideas and create quick and cheap prototypes that can still bring in useful feedback from your team and users. This stage serves many purposes, from being another way to ideate, communicate your idea to users via an example, and to test out different ideas to see whether they work or not. +5. **Test.** This stage is very related to the previous stage. This is the stage where we can see whether our prototypes work well, by giving users the chance to use the prototypes. This is also the stage where we can listen to further feedback and adjust accordingly. In fact, this stage can also be used to refine our problem statement/point-of-view. -Or maybe  +Design thinking can be effective since it eliminates biases of the problem solver. Design thinking does this because the whole process of design thinking makes problem solvers empathise and see the perspective of the people they are trying to help.[^10] Because of that, solutions delivered via a design thinking process are often able to accommodate people's actual needs better. -Or maybe  +The reason why I am bringing up design thinking is because it is often taught in Singapore schools. -This is what I feel like I'm seeing in Singapore. There are many instances where wide 4-lane roads are cutting through town centres of heartlands, despite being categorised as a local access road. Town centres are vibrant places bustling of activities and businesses. Regardless of people's background and age, these are places where people want to spend their time in. Having wide roads cutting through it will make it harder for people to explore and find out about new businesses near that place. It may also be harder for residents living across the road to walk there, despite their close proximity, as wide roads for vehicles can act as a physical barrier that reduces permeability. Not only that, vehicles are polluting, and wide roads that facilitate vehicular movement will make the environment around it more uncomfortable to spend time in, which is contradictory of the characteristics of a town centre. + -There is also the impacts on road safety. Conventional road design in Singapore often features wide and straight lanes in arterial roads and local streets. Drivers subconsciously associate these characteristics with faster driving, just like how they would drive in expressways, disregarding the speed limit of that street. In an unfortunate circumstance of a traffic accident, higher speeds will result in more fatal consequences. In fact, the risk of a pedestrian fatality increases exponentially with the collision speed[^1]. Places such as town centres should be a place where people can navigate freely with peace of mind, rather than a high-speed thoroughfare that compromises safety. +In the Ministry of Education's national curriculum, Design & Technology (D&T) is currently a compulsory subject for lower secondary students. One of the core concepts taught in the D&T syllabus is Design Thinking, where pupils will learn along the way the thought processes of design thinking itself, seeking solutions by considering the needs of users, functionality, and environment[^5]. Academic competitions that encourage students to learn and apply design thinking principles also exist, such as SUTD's STEAMunity, a STEM problem solving competition[^6]. These sort of activities teaches pupils that in the process of creating and designing something, empathy is essential to ensure (problem is solved) -As of 2024, the road network in Singapore occupies 12% of Singapore's total land area[^2]. This is a significant portion of land-scarce Singapore, even comparable to the total land area allocated for housing (14%)[^3]. Since road infrastructure in Singapore covers such a large area, making sure that we design our roads and streets correctly, that is designing roads that accommodates the needs of everyone, not just the flow of vehicles, is very important. Therefore, designing our roads and streets with empathy is crucial. +This shows Singapore already considers empathy as an important aspect in engineering. Having already embraced human-centric design process in education, the same principles can also be applied to how we design our streets. -+-+-+ +=+=+= -This is where Design Thinking can come in. +Let's see how design thinking can be applied in road design to make it more human-centric. + +## Stage 1: Empathise + +<div class="shadow-filter" markdown="1"> + +</div> +Side view of Bedok North Ave 2. Photograph taken by me. <i class="fa-brands fa-creative-commons"></i><i class="fa-brands fa-creative-commons-by"></i><i class="fa-brands fa-creative-commons-sa"></i> CC-BY-SA 4.0 +{: .img-caption } + +This is Bedok North Ave 2, a street that serves Kaki Bukit neighbourhood centre at its northern end, numerous HDB precincts, and Heartbeat@Bedok at its southern end. Despite having "Avenue" in its name (which is usually reserved for Major Arterial/Category 2 roads), it is officially classified as a Category 4 road[^7], which means that it is a primary access road/street that provides access to developments[^8]. Despite being a local street though, it has a pretty wide and straight 4-lane carriageway (the portion of road for vehicular traffic), no bus lanes, footpaths on both sides, and a cycling path on only one side. + +Being one of the first HDB towns built, Bedok is a mature estate, and in this particular neighbourhood, there is a higher number of elderly living here. I also often see high amounts of foot traffic along the footpaths since I cycle there often. Additionally, this route is a popular route for cyclists and PMD/PMA users to go to Bedok Town Centre, so there are also a lot of cyclists on this street. + +Furthermore, from my personal observations, there is often little traffic going through this street. This makes the 4-lane carriageway built here feel overkill, as they take up a vast amount of space on this street. This makes crossing the street inherently more dangerous, which is amplified by the high footfall on this street. For drivers, this street serves as a primary access street, and there are quite a number of HDB car park driveways connected. Due to its 4-lane configuration, some manoeuvres will require drivers to cross 2 lanes of opposing traffic which increases the number of conflict points that makes it more dangerous for them too. +## Stage 2: Define + +Considering these circumstances, carriageway being too wide, high number of cyclists and foot traffic, and high number of elderly residents living nearby, the current design of Bedok North Ave 2 may not be optimal for what it serves. Instead, Bedok North Ave 2 should prioritise safety for everyone, pedestrians, cyclists, and drivers included, and convenience of walking and cycling. +## Stage 3: Ideate + +Let's try to improve this street by considering the priorities that we have identified. Just a quick but important note, I am by no means a qualified urban designer at all. I'm just a secondary school student that is interested in urbanism. The following example is most likely not a great example by any form of professional standards. I do still think it is an improvement, so perhaps just take the following example as a proof of concept instead. + +<div class="shadow-filter" markdown="1"> + +</div> +Screenshot of Google Earth. This map includes data from: Google, Airbus. Imagery from the dates: 23/03/2026. Note, some visible imagery has unknown date information. +{: .img-caption} -Design thinking generally refers to a methodology that designers can use to ensure that they solve problems by prioritising the needs of the users.[^4] There are numerous frameworks of design thinking out there, but they all generally have a common theme of listening to problems that a target audience faces, and focusing on solving them. This approach of thinking is (HBR plusses?) +Let's take some very rough measurements. I'll take my own quick measurements of green verges, the cycling path, and footpaths, but I'll use Google Earth and OneMap for the carriageway measurement since I do not want to endanger my life trying to measure it myself. I will also call the non-carriageway part of the street here roadside elements, although I'm still unsure of the official term for that. -The reason of why I am bringing up design thinking is because it is often taught in Singapore schools, at the very least my own school. +* Total carriageway width (median absent): ~14.0 m + * Therefore, ~3.5 m lane width +* East side roadside elements + * Green verge: 3.60 m + * Cycling path: 2.00 m + * Footpath: 1.56 m +* West side roadside element + * Green verge: 3.54 m + * Footpath: 1.86 m +Firstly, let's remove two of the lanes from the carriageway to turn this street into a simpler 2-lane bi-directional street. We can also make the lanes a bit narrower from 3.5 m to 3.2 m. There are two bus services plying this street, 137 and 225W/225G. We can retain the presence of bus bays on this street if we are really so concerned about traffic flow, or even make the bus stop into an in-lane bus stop. That way, while busses stopping will halt the entire traffic flow in that direction, we will have more space for sidewalks, cycling paths, and green verges, and it eliminates delays from buses merging back into traffic. But for now, let's just retain the bus bays. +From that alone, we've freed up 7.6 m worth of street space! Currently, the footpaths and cycling path here do meet LTA's minimum standards according to their Walking and Cycling Design Guide[^11]. However, LTA's minimum standards are still quite narrow compared to international standards, especially for a bi-directional cycling path. For instance, the United Kingdom's Cycle Infrastructure Design (LTN 1/20) guide sets out a desirable minimum width of 3.0 m to 4.0 m for a 2 way cycling path depending on bicycle traffic[^13]. So, let's take this opportunity to finally add another cycling path on the west side of the street, and widen these paths. We will also widen the footpaths on both sides of the street to improve walking comfort for everyone. The widened footpaths also ensure that groups of people that want to walk side-by-side have sufficient space and don't need to overflow to the cycling path. -This does show that Singapore does know that even engineering needs to consider the social part of a project, to be able to cater to the users of it. Something along this line. +Last year, LTA started enforcement that prohibits bicycles to use pedestrian-only paths and encourages pedestrians to use their own paths[^14]. Despite that, I still frequently observe cyclists using pedestrian-only paths and pedestrians walking on cycling paths. One of the causes of this may be due to the nature of most cycling paths in Singapore, where they are placed adjacent to pedestrian-only paths without clear physical separation. As a result, cyclists may need to veer onto pedestrian-only paths to avoid people walking on cycling paths, and pedestrians are not guaranteed a peace of mind since they may think that they need to watch out for cyclists using their paths. Therefore, we can try putting a buffer between the footpaths and cycling paths using either a kerb or a green verge. Not only does this increase comfort for cyclists and pedestrians, this also increases safety as the design minimises possible conflicts. If we want to upgrade the physical separation further, we can implement level differences between the cycling path and footpaths, or even use the existing 3.56 m-wide green verge as the buffer between the footpaths and cycling paths. + +<div class="shadow-filter" markdown="1"> + +</div> +## Stage 4 & 5: Prototyping and Testing + +Of course, we don't have the authority and resources to make real physical changes to the street. For these two stages, -+-+-+ +=+=+= -Coming back to my point of road design. +Fortunately, things are already getting better, albeit incrementally. The Land Transport Authority (LTA) has pushed numerous initiatives that shift the focus away from cars to people in designing the streets of Singapore. + +## LTA Road Repurposing + +<div class="iframe-manual-container flex-container gap" id="iframe-googlemaps"> +<iframe src="about:blank" data-src="https://www.google.com/maps/embed?pb=!4v1781248770546!6m8!1m7!1shv0RJ7fduSSV4znKDkQOvA!2m2!1d1.439052279883805!2d103.8006751428792!3f24.573714104988387!4f-3.9544474037450215!5f0.7820865974627469" height="240" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-iframe-manual id="iframe-google-0" class="flex"></iframe> +<iframe src="about:blank" data-src="https://www.google.com/maps/embed?pb=!4v1781248791238!6m8!1m7!1s1iGF1oI4_Zl6-t5FC9i6SQ!2m2!1d1.439064512003263!2d103.8006792107188!3f24.573714104988387!4f-3.9544474037450215!5f0.7820865974627469" height="240" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-iframe-manual id="iframe-google-1" class="flex"></iframe> +<div class="iframe-manual-warning shadow-filter"> +<div> +<span>The following contains 3rd party content from Google. Google may be able to track you and use 3rd party cookies.</span> +<button class="button button-inline" onclick="iframeLoad('iframe-googlemaps')">Load External Embed</button> +</div> +</div> +</div> + +Woodlands Ring Rd in 2019 (left/top) vs 2020 (right/bottom), before and after road repurposing works were done. External embed of Google Maps Street View. +{: .img-caption .img-caption-margin } -(How road design engineering can be more emphatetic, by appling DT) +For instance, LTA has completed several [road repurposing](https://www.lta.gov.sg/content/ltagov/en/upcoming_projects/road_commuter_facilities/road_repurposing.html) projects. These are projects where LTA is experimenting and reworking several roads and/or streets to better support active mobility and to make the environment more liveable and inclusive.[^12] LTA often does this by either reclaiming vehicle lanes from the carriageway for wider footpaths, cycling paths, and other commuter facilities, like Woodlands Ring Rd as seen above, or even pedestrianising whole stretches of a street, like Eng Hoon St[^12]. This is great, and I'm really looking forward to future road repurposing projects. -So, if the government is pushing the practice of Design Thinking in education, why can't we apply it to how we build our roads? +## LTA Land Transport Masterplan Refresh +* LTA Road repurposing projects + * Although feels like exceptions that should have been the norm. + * But... things may significantly change in the future. OR This may not be the case anymore itf! +* LTA LTMP 2026 Refresh + +As of recently, LTA is actively undergoing a nation-wide public consultation for the [Land Transport Master Plan Refresh](https://www.lta.gov.sg/content/ltagov/en/who_we_are/our_work/land_transport_master_plan_refresh.html). -+-+-+ +=+=+= -Hello there! +Hello there! Introduce yourself. -+-+-+ +=+=+= -**Footnotes and References** +**References** ///Footnotes Go Here/// [^1]: [https://road-safety.transport.ec.europa.eu/eu-road-safety-policy/priorities/safe-road-use/safe-speed/archive/speeding/speed-central-issue-road-safety/speed-and-injury-risk-different-speed-levels_en](https://road-safety.transport.ec.europa.eu/eu-road-safety-policy/priorities/safe-road-use/safe-speed/archive/speeding/speed-central-issue-road-safety/speed-and-injury-risk-different-speed-levels_en), accessed 9 Jun 2026 [^2]: [https://www.mot.gov.sg/news-resources/newsroom/written-reply-to-parliamentary-question-on-land-allocation-for-roads-and-car-parks-since-2010-and-future-policy-considerations/](https://www.mot.gov.sg/news-resources/newsroom/written-reply-to-parliamentary-question-on-land-allocation-for-roads-and-car-parks-since-2010-and-future-policy-considerations/#:~:text=Singapore%E2%80%99s%20road%20network%20occupies%20around%2012%25%20of%20our%20total%20land%20area%20today), accessed 9 Jun 2026 [^3]: [https://data.gov.sg/datasets/d_0ad604387b5b2dd99fbf48d89cb4f416/view](https://data.gov.sg/datasets/d_0ad604387b5b2dd99fbf48d89cb4f416/view), accessed 9 Jun 2026 - --+-+-+ - [^4]: [https://reference.nlb.gov.sg/launch/getting-started/product-dev/design-thinking/](https://reference.nlb.gov.sg/launch/getting-started/product-dev/design-thinking/), accessed 9 Jun 2026 +[^5]: [https://www.moe.gov.sg/api/media/890920bf-d47e-4ec3-9d2c-e4300413dca6/2017-d-amp-t-lower-secondary-syllabus.pdf](https://www.moe.gov.sg/api/media/890920bf-d47e-4ec3-9d2c-e4300413dca6/2017-d-amp-t-lower-secondary-syllabus.pdf), accessed in 9 Jun 2026. [Archived](https://web.archive.org/web/20260609050540/https://www.moe.gov.sg/api/media/890920bf-d47e-4ec3-9d2c-e4300413dca6/2017-d-amp-t-lower-secondary-syllabus.pdf). +[^6]: [https://www.sutd.edu.sg/innovation/steamunity/](https://www.sutd.edu.sg/innovation/steamunity/), accessed 9 Jun 2026. [Archived](https://web.archive.org/web/20260609093759/https://www.sutd.edu.sg/innovation/steamunity/). +[^7]: [https://app.sla.gov.sg/inlis/](https://app.sla.gov.sg/inlis/) +[^8]: [https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/road_line_plan/pdf/Road_line_Plan_Explanatory_notes_final.pdf](https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/road_line_plan/pdf/Road_line_Plan_Explanatory_notes_final.pdf), accessed 9 Jun 2026. [Archived](https://web.archive.org/web/20260609134012/https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/road_line_plan/pdf/Road_line_Plan_Explanatory_notes_final.pdf). +[^9]: [https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf](https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf), accessed 10 Jun 2026. [Archived](https://web.archive.org/web/20260610041142/https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf). +[^10]: [https://hbr.org/2018/09/why-design-thinking-works](https://hbr.org/2018/09/why-design-thinking-works), accessed 10 Jun 2026. [Archived](https://web.archive.org/web/20260519043246/https://hbr.org/2018/09/why-design-thinking-works). +[^11]: [https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/pdf/ActiveMobilityProposalsandRequirements/Walking%20Cycling%20Design%20Guide%20SG.pdf](https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/pdf/ActiveMobilityProposalsandRequirements/Walking%20Cycling%20Design%20Guide%20SG.pdf), accessed 10 Jun 2026. [Archived](https://web.archive.org/web/20260325041203/https://www.lta.gov.sg/content/dam/ltagov/industry_innovations/industry_matters/development_construction_resources/pdf/ActiveMobilityProposalsandRequirements/Walking%20Cycling%20Design%20Guide%20SG.pdf). +[^12]: [https://www.lta.gov.sg/content/ltagov/en/upcoming_projects/road_commuter_facilities/road_repurposing.html](https://www.lta.gov.sg/content/ltagov/en/upcoming_projects/road_commuter_facilities/road_repurposing.html), accessed 12 Jun 2026. [Archived](https://web.archive.org/web/20260612070039/https://www.lta.gov.sg/content/ltagov/en/upcoming_projects/road_commuter_facilities/road_repurposing.html) +[^13]: [https://assets.publishing.service.gov.uk/media/5ffa1f96d3bf7f65d9e35825/cycle-infrastructure-design-ltn-1-20.pdf](https://assets.publishing.service.gov.uk/media/5ffa1f96d3bf7f65d9e35825/cycle-infrastructure-design-ltn-1-20.pdf), accessed 13 Jun 2026. [Archived](https://web.archive.org/web/20260613021824/https://assets.publishing.service.gov.uk/media/5ffa1f96d3bf7f65d9e35825/cycle-infrastructure-design-ltn-1-20.pdf). +[^14]: [https://www.lta.gov.sg/content/ltagov/en/newsroom/2025/7/news-releases/pedestrian-only_paths_enforcement_starts_1Jul25.html](https://www.lta.gov.sg/content/ltagov/en/newsroom/2025/7/news-releases/pedestrian-only_paths_enforcement_starts_1Jul25.html), accessed 13 Jun 2026. [Archived](https://web.archive.org/web/20260613033237/https://www.lta.gov.sg/content/ltagov/en/newsroom/2025/7/news-releases/pedestrian-only_paths_enforcement_starts_1Jul25.html) + +-+-+-+
\ No newline at end of file diff --git a/data/events/nytc.md b/data/events/nytc.md index 9a7355d..aa74308 100644 --- a/data/events/nytc.md +++ b/data/events/nytc.md @@ -1,11 +1,61 @@ --- -title: "hello" -type: "Achievement" +title: National Youth Tech Championship 2025 +type: Achievement --- +-+-+- -National Youth Tech Championship 2025 -{ .heading } +[← Return to About Me](/about/) +# National Youth Tech Championship 2025 { .heading } + +<div class="shadow-filter" markdown="1"> + +</div> + +The official banner for NYTC 2025, Season 3: AI Drone Derby. Image courtesy of IMDA. +{: .img-caption } + +Visit their official site [here](https://www.imda.gov.sg/activities/activities-catalogue/national-youth-tech-championship)! +{: .info-box } + +National Youth Tech Championship (NYTC) is the premier tech competition in Singapore organised jointly by IMDA and Google for Infocomm (and Robotics) CCA students. + +<div class="flex-container flex gap-row" markdown="1"> +<div class="flex-flex" markdown="1"> +<div class="shadow-filter" markdown="1"> + +</div> + +Page A18, the headline page of Singapore section of July 19 2025 Issue of The Straits Times. Courtesy of The Straits Times. +{: .img-caption } + +</div> + +<div markdown="1" class="flex-flex" style="flex: 1.5 1;"> +The 2025 edition of NYTC last year, the third season, focused more on robotics, drones, and AI. Participants were required to code land robots and drones to navigate an obstacle course while completing AI-related tasks like computer vision. This was the year where me and my team participated when we were in Secondary 3. I was one of the main developers/coders of Ngee Ann Secondary’s team of four. + +That year, someway somehow we won as the champion (1st Place) of NYTC 2025! Continue + +Here are some things I've learnt along the way. +</div> + +</div> -+-+-+ + ++=+=+= + +# Problem Solving, of course. + +The night before the final day we were testing and refining our drone’s code. A usual occurrence for these past few weeks. Drones have this very annoying issue of being quite unreliable. Major issues include where they drift around while idle, and that movement commands are not consistent. Despite the documentation saying that the input parameter for movement commands are in centimetres, in practice it doesn’t seem like it. We’ve tried recalibrating it multiple times, but the issue seems to persist. + +Accurate measurements from the drone are pretty important in the context of this competition. For this edition of NYTC, participants are required to control their drones via code through an obstacle course. Before each round, they published the measurements for each obstacle course. That way, we can code our drone in accordance with the measurements. + +That is where we decided to run some tests and experiments. From that, we found out about the [drone’s actual unit scale to centimetres](https://github.com/leejiaq/nytc/blob/bf147375b8c2810f188a451dcfd51aecc599621a/2.2.py#L11), and we found that the scale is quite consistent across reboots and recalibrations (which is great, since we won’t need to find out about the scale each time we want to start flying). We tried applying this new scale into our existing code that uses the obstacle course’s measurements, and it seems like it’s working pretty well. + +In fact, it worked very well during the actual finals! We got some pretty good scores for 2 of the obstacles, and somehow a full score for one obstacle about pushing balls around (I’ll elaborate on this more). + +# Simple solutions are often good enough + + +-+-+-+
\ No newline at end of file diff --git a/markdown_renderer.py b/markdown_renderer.py index 1e7c755..7c1bd0b 100644 --- a/markdown_renderer.py +++ b/markdown_renderer.py @@ -8,8 +8,10 @@ class DefaultClassTreeprocessor(markdown.treeprocessors.Treeprocessor): def run(self, root): for element in root.iter("a"): print(element.attrib) - if "class" not in element.attrib or "button" not in element.attrib["class"]: + if "class" not in element.attrib: element.set("class", "link") + elif "button" not in element.attrib["class"]: + element.set("class", element.attrib["class"] + " link") if "href" in element.attrib and element.attrib["href"] == "": del element.attrib["href"] for element in root.iter("img"): @@ -178,7 +178,7 @@ def render_video(video_name: str) -> tuple: if "youtube" in metadata["path"]: pass iframe = BeautifulSoup(f""" - <iframe src="{metadata["path"]}" id="iframe-yt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> + <iframe src="{metadata["path"]}" id="iframe-yt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="img"></iframe> """, "html.parser") soup.select_one("#video-parent").append(iframe) soup.select_one("#video").decompose() diff --git a/templates/blogpost.html b/templates/blogpost.html index fff7cd5..3d7e572 100644 --- a/templates/blogpost.html +++ b/templates/blogpost.html @@ -23,6 +23,7 @@ <script defer src="/scripts/scroll.js"></script> <script defer src="/scripts/onload.js"></script> <script defer src="/scripts/blog.js"></script> + <script defer src="/scripts/iframe.js"></script> <div class="floating-nav-container"> <div class="floating-nav"> <a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a> diff --git a/www/assets/images/blog/ass_banner.png b/www/assets/images/blog/ass_banner.png Binary files differnew file mode 100644 index 0000000..d923be1 --- /dev/null +++ b/www/assets/images/blog/ass_banner.png diff --git a/www/projects/index.html b/www/projects/index.html index 7a3b920..27c532e 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -51,7 +51,7 @@ </div>
</section>
-->
- <section id="code-projs" style="border-top: none" class="top-section-margin">
+ <section style="border-top: none" class="top-section-margin">
<div class="center-grid">
<div class="div-sizing" style="max-width: none;">
<div class="flex-container flex-container-column">
@@ -325,7 +325,7 @@ </div>
</div>
</section>
- <section id="video-projs">
+ <section>
<div class="center-grid">
<div class="div-sizing" style="max-width: none;">
<div class="flex-container flex-container-column">
diff --git a/www/scripts/blog.js b/www/scripts/blog.js index c7c64f2..b5ad89c 100644 --- a/www/scripts/blog.js +++ b/www/scripts/blog.js @@ -29,7 +29,7 @@ function postCard(post, id) { var title = post.title; var date = post.date; - var author = post.author; + var description = post.description; var tags = post.tags; var thumbnail = post.thumbnail; @@ -45,7 +45,8 @@ function postCard(post, id) { ${evaluatedTags} </div> <a href="/blog/${id}" class="link"><h2>${title}</h2></a> - <p>${date}</p> + <p class="half-opacity-text"><i class="fa-solid fa-calendar"></i> ${date}</p> + <p>${description}</p> </div> </div> ` diff --git a/www/scripts/constants.js b/www/scripts/constants.js index 1c2812e..b2b7894 100644 --- a/www/scripts/constants.js +++ b/www/scripts/constants.js @@ -1,2 +1,2 @@ -const API_URL = "https://altafcreator.com/api" -//const API_URL = "http://localhost:9091/api" +//const API_URL = "https://altafcreator.com/api" +const API_URL = "http://localhost:9091/api" diff --git a/www/scripts/iframe.js b/www/scripts/iframe.js new file mode 100644 index 0000000..68eff8d --- /dev/null +++ b/www/scripts/iframe.js @@ -0,0 +1,11 @@ +function iframeLoad(id) { + const iframeContainer = document.getElementById(id); + const iframes = iframeContainer.querySelectorAll(":scope > iframe"); // this a NodeList + const warning = iframeContainer.querySelector(".iframe-manual-warning"); + + warning.remove(); + + iframes.forEach((frame, _) => { + frame.setAttribute("src", frame.getAttribute("data-src")); + }); +} diff --git a/www/style.css b/www/style.css index a238263..f454dd9 100644 --- a/www/style.css +++ b/www/style.css @@ -106,7 +106,7 @@ pre { }
li {
- line-height: 1.6rem;
+ line-height: 1.5rem;
}
img {
@@ -114,6 +114,10 @@ img { color: #000000AA;
}
+p {
+ line-height: 1.5rem;
+}
+
.desktop {
visibility: visible !important;
}
@@ -152,7 +156,7 @@ img { }
.text-section > .center-grid > .div-sizing {
- max-width: 80ch;
+ max-width: min(calc(100vw - 10px), 80ch);
}
.heading {
@@ -363,6 +367,18 @@ img { flex-grow: 1;
}
+.flex-shrink {
+ flex-shrink: 1;
+}
+
+.flex-flex { /* i have no fucking clue */
+ flex: 1 1;
+}
+
+.flex-flex-default {
+ flex: 1 1 400px;
+}
+
.flex-container {
display: flex;
flex-direction: row;
@@ -586,7 +602,8 @@ img { }
.card {
- height: 200px;
+ height: 250px;
+ max-width: 100%;
/* max-width: 800px;*/
width: 100%;
display: flex;
@@ -594,6 +611,7 @@ img { box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px;
margin-bottom: 15px;
margin-top: 15px;
+ overflow: hidden;
}
.card:hover {
@@ -626,6 +644,10 @@ img { .card > img {
object-fit: cover;
+ aspect-ratio: 16/9;
+ flex: none;
+ width: auto;
+ max-width: 50%;
}
.gallery-card {
@@ -660,6 +682,9 @@ img { position: relative;
align-content: center;
font-family: "JetBrains Mono", monospace;
+ border: 0;
+ cursor: pointer;
+ font-size: 1rem;
}
.button-alt {
@@ -732,7 +757,6 @@ img { .banner {
max-width: 100%;
- height: 500px;
object-fit: cover;
width: 100%;
box-sizing: border-box;
@@ -823,6 +847,10 @@ img { gap: 10px;
}
+.gap-row {
+ gap: 30px;
+}
+
.gap-top {
margin-top: 10px;
}
@@ -1109,6 +1137,17 @@ img { transform: rotate(0deg);
}
+.img-caption {
+ font-size: .9rem;
+ color: #000000AA;
+ margin-top: -.5rem;
+ text-align: center;
+}
+
+.img-caption-margin {
+ margin-top: .9rem;
+}
+
#video-controls-progress {
width: 100%;
}
@@ -1292,7 +1331,6 @@ img { #iframe-yt {
width: 100%;
aspect-ratio: 16/9;
- clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px));
}
.footnote {
@@ -1308,6 +1346,38 @@ li:target { display: none;
}
+.footnote-ref::before {
+ content: "[";
+ color: #000000AA;
+}
+
+.footnote-ref::after {
+ content: "]";
+ color: #000000AA;
+}
+
+.iframe-manual-container {
+ position: relative;
+}
+
+.iframe-manual-warning {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.iframe-manual-warning > div {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ align-items: center;
+ padding: 27px;
+ background-color: white;
+ clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+ text-align: center;
+}
+
@media only screen and (max-width: 600px) {
.desktop {
visibility: collapse !important;
@@ -1334,15 +1404,22 @@ li:target { .card {
flex-direction: column;
- height: 400px;
+ height: auto;
}
.card > * {
width: 100%;
- height: 50%;
box-sizing: border-box;
}
+ .card > img {
+ max-width: 100%;
+ }
+
+ .img {
+ clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+ }
+
section {
padding-inline: 15px;
margin-left: 0;
@@ -1399,10 +1476,14 @@ li:target { height: 35px;
}
- .top-section-margin {
+ #section-0 {
padding-top: 40px;
}
+ .no-top-section-margin {
+ padding-top: 0;
+ }
+
.flex-end-dynamic {
align-items: start;
justify-content: start;
@@ -1416,6 +1497,10 @@ li:target { display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
+
+ .gap-row {
+ gap: 0px;
+ }
}
@@ -1425,7 +1510,7 @@ li:target { }
#top-project-highlight {
- height: 280vh;
+ height: 200vh;
}
.wide {
|
