My Hardware and Software Development Setup

Ed H AHSAA Blog
Ed's Blog Index & Contents

Apr 2, 2021 8:00

AmesHigh.org My Setup

Background

If you are interested technically in my hardware and the software I am using to migrate this old website to new 11ty

hardware

  • A dozen years ago I was in the Iowa City, Iowa dump with my Son. We were hauling a load of something to the dump. They have an electronics recycling center and they let us look thru it and take whatever cool electronics we wanted. I don't think they allow that anymore. We found 3 laptops in the recycling bins with power cords too. One was a White Macbook. We got all 3 of the laptops to work including the Macbook. For some reason I called Apple to see if whoever tossed this Macbook away had Apple Care. Amazingly, there was still 11 days left of apple care. There was no hard drive in the Macbook so I put one in and sent the Macbook to Apple and they fixed everything and sent it back working. I told them I was the new owner and they switched the Apple Care to my name. I had been using Windows systems for years and was tired of them breaking and having to reload Windows at least once a year it seemed. So I decided to try OSX and use this MacBook. It took a week of headaches to finally get used to OSX and the Apple way. Then I mostly appreciated the opperating system and really appreciated the reliability. I now have 2 Macbook Pro's and 2 iMac's and they are for the most part very reliable. The iMac 27 is having some issues now but they are all 8 to 10 years old systems.

  • I like using older Apple systems because they can be opened and upgraded. The newer Apple systems are not easy to upgrade.

SSD Hard drive

  • I upgraded 2 Macbook Pro laptops with internal SSD hard drives and wow is the speed difference impressive. Very noticable increase in speed. I want to do the same with the iMac systems. The iMac hard drives have termal sensors built in so if switching to a 3rd party non-apple hard drive the fan will think the hard drive is overheating and run constantly which is annoying. There is a thermal addon that I have purchased online that fixes this problem with 3rd party hard drives. I haven't tried the SSD's yet in any of my iMac's.
Atom.io
  • I Started using the Atom editor in 2016. I like it and recommend. I installed an FTP package into the editor. I would live edit and upload to a live website. Yes, I know, not the safest best idea. Another reason to use Eleventy, it automatically builds to a developtment staging area on the local system with an automaticlly refreshed browser.
Bulma
  • Added Bulma CSS to the AHSAA website in 2019. Bulma is easy to use, mostly intuitive and keeps the website looking like it has somewhat of a theme. I use the Atom editor package Bulma-Autocomplet-2 to autocomplete Bulma CSS classes. There was an annoyance when I would type any Bulma class with a hypen, for example is-dark or is-0-tablet-only the autocomplete would add an extra is- to the front and type is-is-dark or is-is-0-tablet-only, I would have to go back and delete the is-0 every time. It was frustrating. I spend and hour and finally figured out how to fix this. The fix is to go to Atom -> Preferences -> Settings -> Packages -> Language-html -> Settings and delete the hypen from the Non Word Character list that you see there. That's it, then it autocompletes Bulma just fine in the Atom editor.
Syncthing

Update: 1/27/2022 I still use syncthing to keep my code on 2 or 3 devices, but I don't use it to edit on one device and have it sync to another and build there. Instead I'm using Network File sharing. I edit files that are stored on the faster MacBook Pro thru the netowkr from the iMAC with the larger screen. I had a problem were once in a while it would not let me save the file and I would get a permissions error. I think the problem is my main user account edh has a UID of 501 on the macbook pro and a UID of 502 on the iMac. It iwas too hard to change the UID's so insteal I chmod 547 all the files in my src directory. This is probbably not the best or safest method, but it was the only way I could get ATOM editor to save. In fact I also installed Visual Studio Code and it had the same permissions problem. Doing the chmod in terminal on all my src files seems to have solved the unable to save problem. Back to coding again.

  • Syncthing is used to syncronize folders with code back and forth between multiple computers. It allows me to edit and developt on any of the 3 computers that are syncronized. AHSAA website code is stored in a folder "Sites". Syncthing synchronize this folder from my Macbook Pro to an 21.5" iMac and soon to be a 2nd larger iMac. This allows me to edit developtment code on any system system and build on any system. It works rather well, I was surprised how nice it is working. The MacBook Pro is a 13" mid-2012 upgraded to an SSD and 8GB of 1333 Mhz DDR3 memory with a 2.7 GHz Intel Core i7 processor with a graphics processor. The Macbook Pro renders and builds 491 files in 4.7 seconds. The iMac is a mid-2010 with a mechanical spinning stock original slow 500GB hard drive disk and 16GB of 1333 Mhz DDR3 and a 3.06 GHz Dual-Core Intel Core i3 processor and a graphics processor, takes 18 seconds to build the same files. I can also edit on the iMac, wait 14 seconds for the files to syncronize to the Macbook pro which will build in 4.7 secons, but it still takes 18 seconds to build from the iMac either way. I still do use it to edit and build because it has such nice screen real estate but those extra 14 seconds are painfull.
Teletype for Atom.io

Update: 1/27/2022 I still use syncthing but am not using Teletype now. It was too much work to keep joining and sharing files and keeping track which ones were being shared with teletype. What I needed was to be able to Teletype any file in the src folder without so much typing and joining. Instead I'm using Network File sharing. I edit files that are stored on the faster MacBook Pro thru the netowkr from the iMAC with the larger screen. I had a problem were once in a while it would not let me save the file and I would get a permissions error. I think the problem is my main user account edh has a UID of 501 on the macbook pro and a UID of 502 on the iMac. It iwas too hard to change the UID's so insteal I chmod 547 all the files in my src directory. This is probbably not the best or safest method, but it was the only way I could get ATOM editor to save. In fact I also installed Visual Studio Code and it had the same permissions problem. Doing the chmod in terminal on all my src files seems to have solved the unable to save problem. Back to coding again.

Discovered a faster way to edit and syncronize using multiple computers. I use Atom editor. It has many many packages that can be installed. I discovered the Teletype package and it designed to enable editing and collaborating from 2, 3, 4 or more computers in real time from different developers, instantaneously. It is still in Beta. I found that it works for multiple devices with one user. I made my fastest computer the host and share it to my other 2 computers via the Teletype package. Then edit using my 21.5" iMac because it has the largest screen. When I save, it saves on the host instantaneously. Super fast compared to waiting the 10 seconds for Syncthing to syncronize. I still have syncthing enabled. Important to me to keep files the same across the 3 devices, although there are more conficts usually in the build directory. The only issue I have now is that when I open the file on the host computer it does show up on the other computers, then when I edit another file from the host it does not show up unless I leave Teletype and rejoin. Sometimes that works without leaving and rejoining and sometimes not. Maybe I don't know the proper order to open the files? If that happens I can fall back to Syncthing or I can leave and join Teletype which only takes 10 seconds.

Screen Sharing

OSX has built in screen sharing. I tried it and IMHO it isn't as nice as Teletype (above) at least for me. It might work well for you so I'm putting that here as a suggestion. Simple to setup, in OSX System Preferences click on Screen Sharing in the sharing tab. Then on the remote computer browser type vnc://192.168.xx.xx/ into the URL bar or something similar of course replacing the xx.xx with the IP of the host computer, then type in the username and password to authenticate and you can control the screen of the host computer. It does work good.

backup
  • 2021-09-24 Update on Syncthing and backing up. Syncthing is not designed for backing up, it is designed to sync and it is really good at that. If you choose to use syncthing make sure it is always running on all the devices that you are doing development work on while you are doing actual coding, that way all the devices are current. I am now using 3 syncronized devices that are synced with the development code. It is cool to be able to switch between them and I can keep a browser on one showing my current development website and keep open a Bulma website too for reference. I didn't have syncthing running on one of my 3 development systems. It was my iMac 21.5" early 2010 and it is the slowest of them because it does not have an SSD for the main drive. So it takes 17 seconds to process the AHSAA eleventy files while my Macbook Pro 13" early 2011 has a 2TB SSD hard drive and processes 11ty in 4.7 seconds. So I wasn't using the iMac for develpment. The iMac is a 21.5" and has some nice screen real estate, I decided okay, it is nice to do development work on, I'm typing this right now on it, anyway, bad me, I did not have syncthing running on the iMac and I edited a file that I had been working on for a few day on the MacBook Pro and that file. I edited first then turned on syncthing and Boom! it overwrote my 2 other devices code for that file. I should have turned on sycthing first then edited. Wrong order. So I lost my work for the day. Why? My Timemachine backups have not been working right either for a few months and I haven't taken the time to address that problem. I have an old TimeCapsule Wifi with an internal 2TB and an external 4TB plugged into the USB on the Time Capsule. I used this for backup for years and it was great and has saved my bacon at least 3 times, timemachining thru wifi multiple times a day automatically and I don't think about it, then it stopped working. I now plug the external 4TB into my laptop for backup and I had not done that for a few days. Blah. So I lost some code, not much, and I remember what I did, still frustrating. So the moral is backup daily if not hourly with Time machine or something automatic if possible and beware of syncthing. I also use rsync manually once a month to the same 4TB because Time Machine is in a form that I have to go thru Time Machine software to access the files and I only trust Time Machine 90%. rsync is built into the Mac OSX system, accessable thru Terminal, and it keeps a mirror of the data, at least the way I use it and fast to access the backup files, while Time Machine backup does version control which is great and better, but slow to access the backup files. rsync is powerful, so powerful it can 100% delete all your files if you put the source were the destination goes or get the wrong destination, so use --dry-run first with rsync and 110% know what you are doing.
Eleventy setup
Follow docs at 11ty.dev or https://www.11ty.dev/docs/getting-started/ to install eleventy
  1. Open a Terminal
  2. pwd ← to see where you are
  3. ls ← to see what folder you want to go into
  4. cd Sites ← I keep all my code in the Sites folder because I have multiple sites
  5. cd 11ty-ahs ← this is where I keep my ahs code on my local machine, your folder name will be different
  6. npx @11ty/eleventy --serve ← run this command from inside the directory where your code lives --serve keeps a webserver running usually on 192.158.68.148:8080 or port 8081 which I can access from any browser on my local network, even from my android cell phone.