Programming and Coding: What's The Difference?
When I was first introduced to the terms "programming" and "coding", they were used in a sense that was strictly seperate, and to mix them up was a very real faux pas. Back then, coding was used to refer to creating "easy" things, like html, css, and Javascript, while programming was reserved for software development, like writing and maintaining programs in languages like C. Nowadays, as entire apps are being designed in Javascript, the two terms seems to be melting together. Even people who once made a clear distinction between the two have been forced to acknowledge that there is an increasing gray area.
Because of that gray area, I'll be using coding and programming interchangeably, with absolutely no meaningful different between the two terms, unless they're bolded.
Homologous Design Structures Through Time NEW
I was recently watching The Only Unbreakable Law, a Casey Muratori video seeking any actual Laws for software, Laws in the stricter sense like those used by physics, such as Newton's Law. The video goes on to explain that he believes the only true, perminant law about software architecture that cannot be overturned by technological advancements is Conway's Law.
Conway's Law
Conway's Law is the idea that the structure of a company is reflected in the product it produces. That if you have two teams, one that produces part A and a second one that produces part B, then parts A and B will never become fully integrated together, but will necessarily involve a boundary between them. cont.
This means, that certain types of advancements will never be possible under certain organizational structures, because the amount of communication between teams is not sufficient. If you actually want team A and B to produce an integrated component, they need to be integrated into the same team so that there will be enough communication between them. This is likely the reason that experiments like early Bell Labs, early MIT, and other kinds of "chaotic mixing" environments are so good at developing revolutionary progress. It remains to be seen if this can be perpetuated in practice over a long period of time, because these states seem somewhat liminal in the sense that the natural tendency of any social or organizational space is to exit these states.
The goal of company restructuring is likely not to re-create these states, but to the extent that it works, it is probably because of this internal mixing and consolidation action - that the team A and B are now working together and go from producing an A+B into an integrated AB, which could actually be a really big advancement. And this is likely the reason that "interdisciplinary" efforts in the sciences can prove to be so effective. "Silos", as they are sometimes called, are often good for taking a certain assumption or paradigm and drilling down into it -- this sometimes produces important innovations, but rarely produces the kinds of innovations that precipitate a step-change.
Conway's Nightmare
However, it's important to understand that the reason companies reproduce themselves is not literally because of the org chart, but instead what they org chart represents. The org chart, to the extent that it mirrors reality, shows the difficulty of communication between two groups. If the more steps between groups, the more difficult communication becomes, even when desired. Since groups that communicate rarely cannot build a truly integrated system, this is what produces the A+B environment.
This has a conclusion that does not arrive intuitively to people: When you do not start from scratch, when you build on a legacy, then the natural consequence is that not only will your product reflect the current org chart, but it will also reflect a franken-chart, where past and present teams are laid over the top of each other. Unless you make clear and specific efforts to avoid this situation, it will inevitably occur.
Writing Programs
Writing programs, for work or for pleasure, can be equal parts fun and frustrating.
Languages:
- COBOL is one of the oldest programming languages still in widespread use, though it is mainly used for maintaining legacy systems.
Silly Program Ideas
- A tree like editor (think scrivner or gingko) for writing programs or websites
- A contact manager/ "social CRM" based on the pokedex!
- A text input method based on joysticks, similar to japanese 9key swipe
- NEW An all in one social life and productivity manager called MOTH.
Version Numbers
Do you know what the various version numbers on programs work, and how to apply them to your own projects? "Semantic Versioning" is the most common way to do version numbers, and also one of the easiest.
Creating Your Own Website
Creating a website on a platform like Neocities can be a really fun way of expressing yourself, especially since they take care of a lot of the confusing aspects of getting your site set up. With HTML, CSS, and JS (JavaScript) you can customize a website to fit any personality. There's so much more easy control over what things look like compared to other similar "easy" sites, for example blogging platforms like wordpress, or rigid microblogging platforms like Twitter.
But, that freedom comes at a price: designing your website! I can tell you with a lot of confidence that it's not as hard as it seems at first, and a lot of "complicated" looking websites are often just a result of small choices layered on top of each other in a deliberate way. As I go through learning how to make my website, I'll be sharing the research I've found as well as the lessons I've learned the hard way.
Making Your Website
One of the most frustrating aspects of coding this website has been the complete inability of every single coding website I visit to actually explain what is happening in the random code that they show you. They don't take time to explain the different arguments. They don't take time to explain what they are showing you visually, as if some little picture will magically answer all of your questions. They don't even tell you where or why you would use something (and when you shouldn't!). It's crazy disappointing to me, and has lead to a lot of trying the wrong thing multiple times and checking to make sure I didn't do it wrong.
What is the obsession with sharing code you don't explain? If someone is struggling, and you just give them code to copy-paste, what is that going to accomplish? They learned nothing. When creating my website, I've done my best to avoid using code I didn't understand. Finding style tutorials and guides is pretty impossible for css as well. I've had to fall back on some half remembered things from previous failed attempts to learn python and C, like ways to use comments to visually break up long code, using comments to explain which div is ending on a particular line, and so on.
Code Isn't a Magical Incantation!
Code is often talked about and shared in a way that's treated as magical or unknowable. However, with enough interest and dedication, you can determine how each part of the code works, and how it interacts to create the sum total of what you see.
How much you want to know, how how interested you are in learning is the only variable in the equation. But I suggest that you should always try to understand, at least a little bit, how each peice of code that you use works.
Starting off Right
Build good habits. If there is a strict way and a casual way to do something, always try to do it the strict way.
Managing Your Project
Managing a big project, like building a website, can be kind of intimidating. Having some ideas about what you want to do and how you want to get there can be really helpful. You can take them as casually or as seriously as you want.
First, in really broad strokes, decide: what kind of website do I want to make? how do I want it to look? and who is it for? Write down your answers! It will help you decide what to do in the future.
Next, make a road map. Decide what order you want to do things in, in broad strokes. Let's say, for example, you want to have your entire website ready for desktop before you start with mobile. Or, maybe instead of that, you want to start with a pokemon wiki, and later you want to show off your art collection.
Then, you want to take that first phase and break it into smaller parts, that have a story attached to them. If your website is all about sharing you, then one example might be "I'm a music lover and I want to see your taste in music, so I can get new ideas for what to listen to. By doing this, you see your website from the point of view of potential friends or users.
After we have those stories, then we make a plan for what we'll try to accomplish over the next two weeks. Every day write a little about what you did, and then what you plan to do the next day. In the morning, share publicly anything you are struggling with -- someone may be able to help you!
At the end of the two weeks, look at what you accomplished. Try to get feedback on if it went well. Also, take come time to think about how things went. How could you improve things? Is there something you need to understand better? What could you do to save time next time? What's something that you could improve? Could you have a better workflow?
HTML
Basic HTML
There are all sorts of basic resources for learning HTML. The thing is, basic HTML all by itself is not very complicated, because it doesn't actually do all that much on it's own, visually. I do think it's best to learn first though, because it's the skeleton for what you'll build with CSS afterwards.
To begin with, I would recommend the 4 hour freecodecamp youtube course. It's 10 lessons, which take 4 hours altogether. It helps you get familiar with all the important basics and is a great watch.
After that, I would suggest just trying to build your own project. It's not going to look super fancy, but start planning out your content, how you want it all to look, start finding images and links, writing your content.
Plan Your Content
The initial phase where you have a lot of energy and drive, but are lacking the knowledge, is a really frustrating time in a project. Whenever you get frustrated with learning the html, just take a second to plan out how your content should work, how it should look, and what it should have inside.
Get inspired. Look at other websites you like, and see what they are doing!
Tables
In old HTML, before CSS became popular, tables were often overused, which is terrible because they are very annoying to create by hand. After you understand how tables work, and you can reliably code them by hand, using an html table generator will allow you to create the table quickly, while still maintaining full control over the coding.
SEO
Basic SEO
SEO, or
Search Engine Optimization, is a way of making it so that it is easier for Search Engines like Google to understand your site and add it to their search results.
Things to keep in mind:
Organizing your site
- Organize the pages on your website into folders with useful names. For example, if you have pages about cats, dogs, and parrots, you'll want to create a folder called something like "pets" and the pages inside should have names like cat, or dog. That means you should have urls that look like "yoursite.com/pets/cats.html" for your cat page. The bigger your website is, the more important this becomes.
- Try not to duplicate content. That means, if you have a page about cats located at "yoursite.com/pets/cats.html", then you shouldn't copy-paste the entire thing to another page located at "yoursite.com/animals/house-cats.html". Pick one address, and combine the pages.
- Using the "title" tag in your head information plays a large role in what a search enging desides to call each specific page in it's search results.
- Snippets are the little blurbs of text that show up under the name of your site in search results. Usually it is one or two sentences from your page that the search engine things summarizes the content of the page, but sometimes it comes from the "description" in a meta tag.
- When using the "description" in the meta tag, make sure that it's unique for each page. The description should explain what the page is about.
Make it readable
- Use headings (ex. "h1", "h2") when coding your website to help search engines understand your content.
- You should only use one "h1" heading per page.
- Make sure your website has good contrast, so that people don't quickly click off of your site because it is hard too read.
- Make sure to create good alt text for your images that explains what they are. instead of saying "flowers" say something like "aesthetic field of daisies at sunset", or instead of "cat" say "kitten covered in milk looking helpless"
Links are powerful
- Whenever there are links that might be helpful to the reader, whether they are to your own site or someone elses, be sure to include them. This helps search engines understand more about the topic you are writing about.
- Make link text useful. That is, avoid saying "learn more about birds here" and instead say something more like "caring for birds"
- If you are linking to a site you don't like or don't trust, be sure to add a "no follow" to your links, so that your site doesn't become associated with them.
You can just ignore this advice
I think I should take a moment to mention why I have even made this section, since this guide is specifically about learning how to make a NeoCities site. It's not because I think these are "crazy important".
What's crazy important is that you love your site: you love looking at it, you love working with it, you can't wait to update it, and you feel really proud of it and showing it to other people -- in short, that your website reflects who you are as a person, or who you would like to become.
I've included these things partly because of personal interest, but also I want people to be able to find my blog entries or "wiki" pages where I catalogue information I find useful. While I'll continue to write the information regardless of the amount that others access it, I do like helping people.
If it makes your website less fun for you, don't do it! We're here to have fun and share our personalities.
How big should my webpages be?
Of course, all different types of websites come in all different sizes, from the handcoded HTML to the pages dripping with Javascript. But in general, what size should they be?
Well, the smaller the better! The smaller your page is, the faster it will load. The average size is about 2MB, with about 900kb of that devoted to images! Your html files should be under 28kb and your CSS sheet less than 70kb.
Did you Know?
The very first webpage was only 4kb!
Also, the faster your page, the more likely someone who isn't from neocities will read it! If your page takes more than 5 seconds to fully load (all your pictures and stuff), then people are twice as likely to leave before reading it!
Save on Bandwidth! If you're paying for bandwidth, then having smaller sized pages (with less images, etc.) lets more people see your site for the same amount of bandwidth, saving you money!
Optimizing for phones. Sometimes we don't really care about optimizing for mobile, we just want our site to be fun. But if you do want to optimize for mobile, remember that smartphones are way slower than computers. 4g phones are 12% slower, but 3g phones are 40% slower! So it makes sense to hide some of the visual elements on your page to make them load faster, even if it doesn't look as fun.
If you write yourself a lot of comments on your HTML or CSS, that can make the file bigger, but usually it's not enough to make any real difference.
When your page is 14kb or under, it actually loads way faster, up to half a second faster, because it can be loaded all at once.
I found this interesting graphic which offers some advice on how to make pages smaller.
It seems there's some way to use CSS to show only smaller parts of larger images, saving file size. I don't know how to do this though.
CSS
Nesting
Not so basic CSS:
Using something like the new CSS Nesting
CSS Frameworks
Because a lot of people find CSS pretty difficult, a lot of people use frameworks instead. One of the criticisms of doing this is that you tend to end up learning how to use the framework, rather than learning how to use CSS. One way to combat this is to first learn CSS up to a decent level, before starting to use a framework. This ensures that you understand how the CSS works, and that you're just using the framework to speed up what you were already doing.
Tailwind
One of the most popular frameworks is Tailwinds which come with a lot of pre-defined classes that can even be chained together to make something kind of like a "super class".
One of the criticism.
Resources
- W3 School How To
- Atomic Design (Brad Frost)
- Refactoring UI (Adam Wathan & Steve Schoger)
While this design video has a lot of issues (grammar is quite bad, for example), I also think it had a lot to offer when it comes to making things look appealing. Some of the visual explainations are very intuitive and useful.
Javascript
Basic Javascript
