blog.iankulin.com

blog.iankulin.com

CodePen.io

After seeing examples from a web development course, I try CodePen.io, an online editor for HTML, CSS and JavaScript with a live preview. I note its support for preprocessors, some quirks around document-level HTML, and its limits compared to a full IDE, and share a link to my first example pen...

Second Guessing

I reflect on my methods for learning JavaScript: typing along with tutorials and completing the extension tasks, recreating websites I find interesting, and cherry-picking beginner episodes of the JavaScript Jabber podcast. I also touch on how writing these blog posts helps clarify my thinking and provides a sense of accountability, and mention anticipating a tutorial’s discussion of onclick versus addEventListener as a sign my immersion is paying off...

Step Ahead

A follow-up on a todo app I built alongside the Complete Web Developer course, in which I replaced right-click deletion and click-to-cross-out behavior with explicit check and delete buttons on each list item, motivated by discoverability and accessibility concerns. My implementation notes cover attaching handlers via onclick versus addEventListener, the fragility of indexing into childNodes, and innerText versus createTextNode for inserting content. I’ve included links to the source code and a live demo...

Web Reference

A rundown of the reference sites I rely on when developing web apps, prompted by how often tutorials I find via search turn out to be outdated. I cover W3Schools’ How To section, MDN Web Docs for detailed API references, CSS Tricks for CSS property details, and Can I Use for checking browser compatibility...

Document Object Model - ToDo

A learning exercise in DOM manipulation: I build a classic todo list web app where users add items via a text input and cross them off by clicking. I move from directly setting textDecoration to toggling a completed CSS class, separating behaviour from presentation, and also discuss element id naming conventions and the risks of hardcoded strings...

Are you okay JavaScript arrays?

A short musing from a developer more used to type-safe languages: I find a JavaScript example uncomfortable and speculate that JavaScript objects may turn out to be just arrays. If so, accessing properties from inside functions would require something like self[2] notation...

Curse of Backwards Compatibility

My reflections on a JavaScript Jabber podcast discussion about how HTML, CSS, and JavaScript must preserve backward compatibility in ways compiled languages like Swift do not, illustrated by my 1996 website still rendering fine in modern browsers. I argue this legacy burden weighs down web technologies and makes them harder to learn, noting CSS features like flex-box can never be deprecated in favor of newer approaches. A later episode on semantic HTML revisited the theme, with hosts wishing breaking changes would force site owners to update...

Running Javascript in VS Code

I share a quick tip on running JavaScript in VS Code: install Node.js, and the editor will offer it as the runtime the first time you execute a JS file. I also note that the Live Server dev server is accessible to other devices on my network via my machine’s IP address, which is handy for previewing layouts on phones...

99 CSS Layout Feedback

I compare my solution to the first CSS assignment in the Complete Web Developer course with the instructor’s, covering differences in semantic HTML choices, the use of classes versus selectors, and layout techniques like flexbox. I also note new concepts introduced in the solution, including vh units, media queries, and a fixed-position sticky navbar, along with a centering issue that arose when applying it...

99 CSS Layout challenge

I write up the first practical challenge in the Zero To Mastery Complete Web Developer course: building a responsive page layout with CSS. Instead of mixing flexbox and grid as the challenge suggested, I used only CSS grid, then walk through the code for each section — nav bar, cover image, project grid, and footer — noting the nav link alignment was the trickiest part...

HTML 002 - Tags for structure

I introduce semantic HTML: tags that describe what a piece of content is rather than how it should look. I cover why semantic markup matters for maintainability, accessibility, and search engines, and survey common tags like header, nav, article, and section, along with the non-semantic div and span...

HTML 001

I give a beginner-level introduction to HTML covering what markup tags are, paired versus unpaired tags, and why HTML is semantic rather than about display. I explain the basic document structure with html, head, and body tags, how tags nest, and how to add an image with the img tag, building up a simple example page along the way...

CSS for Beginners

I found the ZTM webdev course was skipping ahead too quickly and decided it needed supplementing. For CSS, I’ve chosen a YouTube series by Dave Gray as the additional material...

Who is Emmet?

Emmet is a Visual Studio Code feature that expands short abbreviations into full HTML, using CSS selector syntax. I describe how I discovered it and demonstrate the basics: creating elements with classes and ids, nesting child elements, inserting text, and repeating items such as list entries...

ZTM - Complete Web Developer

A few weeks into the Zero to Mastery Complete Web Developer course on Udemy, I compare it with Paul Hudson’s 100 Days of SwiftUI across several dimensions: video versus text format, pacing and depth, how current the content is, student exercises, and cost. My early impressions are positive, though the course is faster-paced and less hands-on than the SwiftUI counterpart...

Visual Studio Code

I am branching into back-end web development because my planned apps will need a REST API and database, and making the ticket app a web app could simplify Android support. I bought a Udemy web developer course, chose VS Code with plugins over the course’s recommended Sublime Text, and compare the course’s approach to 100 Days of SwiftUI. I’m undecided whether to document this side project on this blog or a separate one, given my commitment to weekly iOS-related posts...

ChatGPT's code writing

I ask ChatGPT to write a SwiftUI todo app with items that reoccur after a set number of days, sharing the generated code and the fixes needed to make it run, such as replacing a non-existent date formatter and adding a NavigationView. Iterating toward a more complex app, including CoreData persistence, required progressively more manual correction from me. My brief closing thoughts cover what ChatGPT might mean for developers and internet content...

Sharing is caring

Continuing my SwiftUI demo project, I use ShareLink to let users share a view rendered as an image via the standard share sheet, with SharePreview supplying the thumbnail and title. I also cover adding the Photo Library Additions usage description so a Save Image option appears, along with the permission prompt users see on first use...

Clean code

After listening to a podcast episode about “humane” development, I describe my personal Swift coding style, which centers on being kind to whoever reads the code next. The principles I cover include following community conventions, writing code that reads like natural language, keeping functions small and single-purpose, avoiding hidden dependencies like globals, and using comments as temporary scaffolding that usually gets deleted once the code is written...

ImageRenderer()

A short SwiftUI example showing how ImageRenderer converts a view into a UIImage or CGImage. I build a simple behaviour ticket view, use a Save button to render it to an image, and display the saved result behind a toggle...