Learning Web 07: Responsive navbar in raw CSS and new website theme

Decided to take a different path for a moment in my learning and create a theme of my own again. I’ve been working on a website for someone and learning stuff with that and decided to apply some to my own while also picking up new skills for that person’s website. So I sat out to make a responsive navbar setup with raw CSS instead of using tailwind or bootstrap. Another thing I decided to do different was to use a single list for both layouts–the tutorials I ran into all used two versions of the same list in two different divs that it hides and shows while I’m just using the one.

Learning Web 06: The beginning of project structure

Last time I learned a bit about esbuild and then moved on to try working with the svg element in HTML5. I had originally intended to work with a graph library instead of designing my own but found that it might be difficult to automate for testing. The reason why is that the individual elements in the svg that it created didn’t have very good names to look for. There were also a lot of levels to the objects created so it would be more difficult to find those elements through xpath addressing, or I thought it would be not having really done that before.

Learning Web 05: Javascript bundling

Last time I messed about with some divs and did some clicking and highlighting. After I was finished I decided to go looking at what was out there that already did what I want. I found something that’s just it and not based on a framework, but after trying to get it to work I learned that there was a bunch of obstacles I didn’t know about.

I couldn’t just make it open some javascript and have it work. This is a typescript module and apparently does cross-site scripting so needed to be served. Then after I got that going it couldn’t find the import. Well, that’s because I needed to bundle the built output (my simple tests worked because they didn’t use dependencies). So I needed to learn about that and I found some stuff to try.

Projects 01: Brief Descriptions

I’ve always focused mostly on what my employers needed from me and not really done much with my own time that wasn’t geared toward that. I’ve learned a lot that way but I do wish I’d spent more on my own stuff. Had a bunch of other stuff going on the last decade as well that took up a lot of time. So I’m getting back into it.

Going into freelance also more or less forced me to create an LLC and a bunch of other stuff you do to keep more of your money. With that in mind I have started some projects there that it pays me for when it can and I have the time I can give it. They are or will be open source when I can get there but in the meantime, one issue with making progress is that I need to renew a lot of very rusty skills. So most of the time my “learning” posts are about these. Further, I plan to do some projects geared to learn more about some of the problems I’m thinking about. I do hope that I can get more contracts or something and keep that business floating so it can make one or more of these happen, but we’ll see. Maybe someone wants to partner with me; that would be great!

Learning Web 04: Divs and SVG

After running into issues last time I did some more research and believe there’s a way better direction to take. I won’t say that was a waste of time because I learned some stuff that may very well help later. I’m pretty sure this is going to be more fruitful though.

Attempt to do it here

I should be able to create an outer div, within which I’ll create my other stuff, and then be able to assign it some real-estate here and do it in the blog like the first one because I’m not doing any selenium testing this time. So here I’ll try to just create one that has a border and some area:

Learning Web 03: Continuing with testing

Last time I looked into what was available for testing web application front ends and decided on Selenium to try to figure out. It was late, I was hungry, so I stopped.

Project setup

I’m going to be writing real test code now instead of just paying with javascript so I need a real project instead of just doing it here. So I just created one with a simple flake for nix that installs python3. I won’t really go into it here, it’s pretty easy to get that level of Nix info somewhere else.

Learning Web 02: Testing

In the last post I familiarized myself with how the HTML5 canvas works with regard to JavaScript scripting. I got it to draw some text the way I wanted and respond to clicks from the mouse to do some updates and open a “dialog”. I learned that there’s a big difference between the size of the canvas and it’s size on the screen, and that the attributes control the one and css the other (I imagine there’s a way to set the attribute version in css though).

Learning Web 01: JavaScript Canvas

I haven’t done web development in 15 years at least. I’ve made my little websites and even made my own themes, but I haven’t really done anything significant in this field in a long time. For a number of reasons it feels like something I need to get back into, so this is the start of my progress on that end.

What I already know

I’ve done HTML5 so I know semantic HTML, or at least that it exists and is preferable to the older ways. I did JavaScript a long time ago and made some funky stuff back in the day that had PHP generating Javascript that generated HTML. That’s all completely different now though. Also did some JavaScript when I helped out an overloaded testing team some years back. I’ve looked at TypeScript a bit when they threatened to switch to that from C++ for slot machine games.