On Whether I Prefer Vanilla JavaScript or Frameworks?
|

On Whether I Prefer Vanilla JavaScript or Frameworks?

Byrichard

Today someone on twitter asked this question, and rather than be reply: 320 of 10,000, I chose to write a blog post about it. The TLDR answer is Vanilla JS because if you learn how it works without the help of a framework you understand the language. This doesn’t mean that I don’t have an interest in learning to take full advantage of frameworks.


As I listen to JavaScript Jabber one thing is clear. Whereas if we listen to courses and twitter discussions we are tricked into thinking that we should either use React or Angular we see, through JavaScript Jabber that frameworks are as diverse as they are flexible. One app will be excellent for one type of task and another will be awesome for something else. If you spend time learning Vanilla JavaScript, and then you learn about the diverse choice of frameworks then you can either write concise and effective code that does what you need with little to no bloat.


I don’t want to just learn a framework and be inflexible. I want to learn how it works, behind the scenes. Before WordPress, I was learning about navigation using Server Side Includes and other such tricks. When I played with PhpBoards, WordPress, Drupal, Joomla, wiki software, and more I managed to use them as a user, and they did want I wanted, but I never looked behind the curtains so I could use WordPress, but I couldn’t create my own themes, etc, and to some degree, I still can’t.


I have spent time trying to make it so that I can share my instagram archive on my website without using Instagram, and I managed with WordPress. Recently I tried using Vanilla Javascript and I found manipulating the DOM to be challenging. This is precisely why learning to code with Vanilla JS is so important. It shows you the complexities, and with time you learn how things work together.


One of the jokes is that if you get stuck you should RTFM and with frameworks that’s often quite easy. With Vanilla JavaScript RTFM doesn’t mean read just one manual. It means read about a variety of concepts until you understand enough to get it to work by yourself.


So far I can show a random post after each reload, or show the ten most recent posts and their caption. The next three challenges are:


  1. Go through the posts at a time
  2. Add crud capability using JavaScript. At first I will try with an empty json file, and then move on. CRUD requires understanding of the fs library (I need to double check the term)
  3. Add the ability to transfer data from the json to an SQL or NoSQL database.
  4. Experiment with Houdini and responsive design with a wall of pictures.


We’ll see what else I can think of. The point of this is to take skills I learn in courses and apply them to a project without having someone else provide me with the list of necessary steps.


That’s it for now.

Trying To Read Nested Data From a JSON File

Byrichard

Over the last two evenings I have been attempting to read nested data. I have tried to parse the data and other methods but without success. I have browsed the web to try to find solutions but for now I am getting stuck. Learning is also about trial and error, and knowing where to find the right information. For now I am lost. At the end of this process I will be more self-sufficient.


Learning by watching courses is good, and we do make progress, but it doesn’t require us to think about problems in the same way. We learn to follow instructions but not problem solve, and that’s what I want to learn. So far I have spent two hours on this specific problem, and I could easily remove a few lines and it would no longer be nested. I will persevere.


Playing with Comments


Since I am trying and failing to accomplish what I am trying to accomplish I am now using comments to mark what I still need to achieve, whilst looking for solutions and ideas.


Prototypes and CSS


I have also continued studying prototypes, factories and more. I see some overlap between this topic and CSS. For those with experience and time both allow for more depth and complexity than is comfortable when you are starting out. The short version is that with prototypes and factories you can cut down on the lines of code in a project, making it easier to read, and lighter.


The Pandemic Continues


It is now the weekend but the pandemic is still alive and well. Governments are deciding not to do anything to stop the spread, preferring to tell people that for vaccinated people it’s no worse than the flu, whilst ignoring the fact that children from 0-18 have not been vaccinated. There is a certain degree of indifference by governments that is hard to observe. They expect the next few weeks to be difficult, and that’s as far as their sense of responsibility goes. It is a challenge not to be disappointed by this attitude.


Reviewing EcmaScript 6

Reviewing EcmaScript 6

Byrichard

Recently I have spent time focusing on JavaScript and EcmaScript to make sure that I understand it. By now it is over a year ago since I felt that I wanted to study Angular but felt that I didn’t have enough knowledge to resolve the challenges so I decided to return to basics. My return to basics involved a number of courses and books but it also led me to study this Linkedin Learning Pathway. It is easy to study, get a certiciate and move on, especially for extroverts or outgoing people who find interacting with people easy.


If I know people then I do find it easy. In other scenarios I struggle. I am working to ensure that if and when I say that I have certain skills, that I have those skills. I want to understand what I am doing and why.


A while ago I managed to get my instagram feed from Instagram JSON files to Wordpress via a number of steps and this felt good but I felt that I did not fully understand what I had done. Since then I have studied JSON, JS and other related technologies so I should be able to accomplish the same task more easily, and with fewer tools. I have to decide whether I want to import this data into wordpress or whether I want to run it outside of the CMS.


Such a project will encourage me to conceptualise and then realise my goal, without the skeleton of a course behind it to provide me with guidance. I want this to be a self driven project. It will indicate my progress. When I decide to take the plunge I should find the task easy.


I always find new things to learn, during this pandemic, and these new things keep me occupied and distracted from the eternal return that are these days.

Yet Another Sunny Day

Yet Another Sunny Day

Byrichard

As I looked straight down from a bridge today I noticed that the river is so low that the river bed has become bone dry in places. In other places you see that the gress is turning yellow. When tractors tend to the fields you see that they are stirring up clouds of dust. It is so dry, so often, that it is only a matter of time before forest fires burn down local forests.


A boat from La Belle époque on the Lac Léman
A boat from La Belle époque on the Lac Léman


Plenty of people are miserable for the rain, but when these consistent droughts lead to forest fires that remove the landscape and vegetation that we are used to they will not be so happy. They do not understand that these droughts are not normal. The fact that I didn’t use weather apps for years tells you how stable the weather system we’re in is.


I often walk by a door in a wall that frames this view. It’s a nice view. A nice garden with nice trees, the lake, a boat from the Belle époque and behind it the French side of the Lake, Haute Savoie and the Alps. A churchyard has a similar view, but with the train line as a bonus. If I was patient I could get the boat, a train and the rest of the landscape.


I am currently studying node.js, to see what I may eventually understand. So far most of the ideas and concepts are self-explanatory. The challenge will be in finding a project idea and getting it to work. Slowly I am getting to understand this topic. Node.JS looks intuitive to use.


Part of my motivation came from listening to the Javascript Jabber podcasts while I walk. It’s easy to hear about React, Angular, Laravel and other frameworks but it’s more interesting to hear about all the other smaller projets, like history.js, apline.js and many others. I like the idea of having specialist frameworks for specific tasks.


I felt overwhelmed by Angular, and then by Javascript. By changing context I am trying to get a different perspective, in an attempt to get a broader understanding of what various parts do. I am already better equipped for when I return to Laravel or Angular. I am also better equipped to understand typescript and Coffeescript etc.

Learning To Code By Building CMSs
|

Learning To Code By Building CMSs

Byrichard

It’s easy to use Facebook or other CMS every day without thinking about how the code works. This summer I have coded two CMS using Linkedin Learning. One of these CMS was running with PHP and MySQL and the other was running with Ruby On Rails and MySQL.


The PHP CMS


In the process I learned how to install MySQL, how to get MySQL and PHP to talk to each other. How to organise files between private and public folders on a web server and more. Getting MySQL to talk with the web server was a challenge that took a few days to get right.


With the PHP CMS I learned about arrays, about interacting between PHP and MySQL and I learned to be attentive to using the correct syntax. Sometimes though, a single typo would block my progress for a period of time. It wasn’t rare for me to compare the code I wrote with the code written by the instructor line by line to find my typos.


I could have cut and pasted the code but I found that simply typing the code character by character was enough to force me to read the code carefully. When I made typos it taught me to attentive to details as well as to be more aware of the syntax.


Ruby On Rails


Ruby on Rails was an interesting learning challenge. I got stuck before I even finished setting up the project. As a result of this I went back and followed a course on essential Ruby. This worked as a nice complement to what I learned from that point on.


During the project configuration process I got stuck because I created the project with the wrong database connection type. I left it on the default and when I tried to correct this I failed, and failed, and failed again. Eventually I decided to delete the application and create a new one, with the right database connection and this time it worked well.


The challenges I faced were that the Puma Server wouldn’t start because a gem was missing, that the CMS wouldn’t start because of a mistake in the routing file and more. Eventually I would restart the server but I spent a lot of time debugging.


One of the most persistant problems I had with Ruby on Rails is that it’s hundreds of lines of code across multiple files and although the error messages are obvious you need to learn to read them. For two or three days I couldn’t find what the error was, despite looking through every page and its code. Eventually I found that I had written “visible” and forgotten a “:visible”. That error crashed the Puma server consistently.


With Ruby On Rails, I learned to work within a framework. This knowledge is transferrable to working with other frameworks. I’ve gone from knowing how to install and use a CMS like WordPress, Joomla, and Drupal to learning how to create one and to understand how arrays and functions work. I have also learned how to think about security and how to use blowfish and other encryption technology to keep passwords etc. more secure.


With Ruby Gems I could work on projects of my own and be less reliant on other websites. One project I would like to work on is creating a heatmap of all my walking activities and the easiest way to do this would be to find some code and adapt it to have the functionality I desire.


The Next Step


The next step is to learn to use JavaScript. I will then know how to use HTML/PHP for content, CSS for layout and finally JS for interactivity.



Playing With Grasshopper

Playing With Grasshopper

Byrichard

Grasshopper is a Google app to teach adults and children about Javascript. It provides people with short, easy to understand modules to get a grasshopper to do things.


The curriculum is divided into seven modules. These are:


  • Fundamentals
  • Fundamentals II
  • Intro to Interviewing
  • Array Methods
  • Animations
  • Animations II
  • Using a Code Editor
  • Intro To Webpages


So far I have only played with part of the fundamentals course. You don’t need to write much code. You can select which function and variable you want to use, rather than typing lines and lines of code.


This is the type of app that you can use almost anywhere, and anytime you have a few minutes free.


One of the challenges, when you want to learn a new programming language, is to set up an environment before you start playing with code. That can be a long process and it’s easy to lose interest before you have even written two lines of code.


With such a simple app you don’t need to set anything up. You can play with code, see what it does, and then try something more complex. You can familiarise yourself with the language before you install a development environment on the machine you use.


An example of Grasshopper on a desktop.


As soon as the app is installed on your phone you start learning.


Day 59 of Self-Isolation in Switzerland – Thunder As I Got Home
| |

Day 59 of Self-Isolation in Switzerland – Thunder As I Got Home

Byrichard

For once I walked in the drizzle, rather than the rain but I could hear thunder as I got home. I have almost reading Thirst: 2600 Miles to Home during this walk. Poetically I was listening to her about walking with a storm on its way whilst a storm was thundering over the Jura.


The rain became heavy just as I got close to home so today I am not drenched to the bone, and in need of a change of clothes like yesterday. I started today’s walk by running for the first two and a half kilometres, using the Guardian’s running podcast week three, for the fourth time. I didn’t run last week and I prefer to give my legs time to acclimate to running before pushing too much.


I spent most of my waking hours today working on the website. I’m still working on the front page and I think it’s almost ready to go live. It’s built with CSS, a little javascript, and grids. I have it behaving as I want it to behave. It looks good, whether viewed on a “desktop” or a mobile phone.


What I learned while working on the front page has helped. When I was making web pages mobile-friendly a week or two ago was bare bones and I didn’t change much. Now when I re-worked three or four pages today I used CSS where I could. I replaced tables with CSS and with pages where I had lists I used CSS to enhance lists. There is one page I still need to re-work, but I need to think about how to do something interesting.


See you tomorrow.