Dev Environment

April 9, 2018

#ESLint #Git #node.js #Raspberry Pi #Samba #Ubuntu #VirtualBox #Visual Studio Code

So previously I was using a Raspberry Pi running LAMP as a development server over a LAN. Editing /etc/hosts to access virtual domains as if they were live online. That was a great solution which I took for granted until I needed to take it on the road – I only realised how Heath Robinson it was when I found myself plugging it in at Starbucks.

So I knew I wanted a virtualised solution – to be able to run a LAMP with virtual hosting on my MacBook (or Linux laptop if I switch at some point) and to be able to access that as if it were networked like the Pi. Also to be able to simply backup / clone the entire installation. It’s important to me that it runs the same environment as the live server – that’s why I don’t just run Apache on localhost. Anyhow it’s much nicer keeping everything contained.

Before the Pi I had been using MAMP / MAMP Pro. But I found that way over – complicated … and sometimes unaccountably flaky. It’s too packaged. And it seemed too much locked into particular versions, upgrade cycles etc. Really I just want to be running the same versions of Ubuntu server + packages as I am using live. Things which try to make things easier always end up needing troubleshooting in my experience. I don’t want to have to know about about MAMP when it goes wrong – or figure out what it has installed on my machine. It’s just another thing to have to know about.

Someone suggested VVV. So I had a look at that. Many of the same issues as MAMP I reckon. And I read a thread at Github full of reasons why upgrading VVV to the latest LTS version of Ubuntu server wasn’t an option. Too many dependencies apparently. Ugh.

In the end the simplest solution was the obvious solution. So now I’m running Ubuntu server via VirtualBox and accessing it as if it were on my local network. Same as I was doing with the Pi. I can start it up headless from the macOS command line and it boots in about 20 secs. Then I log in via SSH. And I’m running Samba on the client with /var/www shared so that I can edit files using Visual Studio Code on my host. Obviously that would be a security issue if it were a real server – but in a sandboxed environment it’s fine. I’ve also installed Git, Node, ESLint.

Actually I suppose the simpler solution would be to just run Linux native. And I wonder how Apple switching away from x86 would impact my current solution.

Restaurant Potager

April 9, 2018

restaurantpotager.com
restaurantpotager.com

Started building another demo at restaurantpotager.com

It’s a different workflow – Bootstrap 4 with Sass. This is a much faster way of getting stuff done. And I’m using Git for version control and backup – with changes also pushed from local dev straight to the live server.

I’m proficient in Angular.js according to PluralSight (tl;dr – I’m not)

February 25, 2018

#Angular.js #JavaScript #jQuery #MySQL #React.js

PluralSight
According to PluralSight these are my proficiencies

I know that this kind of thing is very subjective – but I took some online tests to see how I would perform. I particularly enjoyed TestDome which involves live coding. It’s a challenge doing something against the clock – even when all of the usual lookups and documentation are available. These tests were not easy. There is enough time to look up specific references or syntax – but you have to know what to look up. That seems fairly real world.

SimonSJavaScript (Hard)

SimonSPHP and WordPress (Hard)

SimonSJavaScript with jQuery (Hard)

Meanwhile – I found out about PluralSight via their tie-in with StackOverflow. I have been following various of their ‘paths’ (courses) recently as a way of consolidating / structuring / revising some of what I know – and learning some new stuff. The courses seem mostly very good.

But I was less sure about their testing. The first surprise was when I scored ‘Proficient’ on Angular.js. I got a badge. Yay! Ok – so it’s a JavaScript thing and I know a little bit about Design Patterns which helped. But I haven’t ever used Angular.js so far and I am definitely not proficient. I just tried to choose feasible answers.

These are multiple choice tests against the clock. There is no time to Google the answers. But if you read the questions carefully and have a good general knowledge of web technologies in general then many of the answers will come. You can have two goes at the tests – but you’ll get different questions.

I wasn’t surprised to do ok at the jQuery test – or that I scored relatively low on CSS. I always have to refer the documentation for CSS – even though I have used it a lot. But I was definitely surprised to score higher on node.js than on JavaScript – since I have only ever used node.js locally as a test environment. I am definitely much more familiar with regular JavaScript. Although I often have to remind myself how to do something the regular JavaScript way if I have been buried in jQuery for a while.

And apparently I’m an ‘Expert’ with MySQL. In reality I’m a competent beginner and I get stuff done by reading the documentation or carefully looking at Stack Overflow answers. I’m actually quite weak on using SQL in general – although I have no doubt that I would be quickly up to speed if that was what I was doing every day.

My other proficiencies apparently include C++, React, ‘Security For Hackers & Developers’ and ASP.NET MVC5. In reality I know about the same re React as I know about AngularJS. And I haven’t written any C++ for maybe 20 years. I would have to start again with that. I currently know very little about the world of Microsoft solutions in general (things have moved on a bit since I was programming Visual Basic). I’m just not ‘Proficient’ in all of these technologies. I wish that I were. And everything I know about security is from recipes, checklists and podcasts.

Sulby Theme Slider

February 23, 2018

#CSS #JavaScript #jQuery #JSON #PHP #Shortcode API #Sulby Theme #WordPress

 

I built this simple slider for my standalone "Sulby" WordPress theme. Written in PHP and JavaScript with jQuery + CSS defining the layout, responsiveness etc. The code is below.

In several past projects we used a well known third-party slider. Now I wanted something more minimal, lightweight and extensible. If we want to change the look and feel then we can do that that in CSS. If we want different functionality then let’s do it in the code. It’s much simpler than trying to work out how to achieve a result via a convoluted plugin interface or restrictive settings.

The PHP creates a WordPress Shortcode. The WordPress Shortcode API can be used to create macros which can be added to a Post or a Page – or to a PHP template using the do_shortcode() function. Eg the slider shown here is added like this:

[insertSulbySlider images=1005,992,1003,1002,993 message-title="Slider Demo" message-body="stock images from my legacy portfolio at Getty Images & iStockPhoto" slider-caption="Bunhill / Getty Images" slider-caption-link="https://www.gettyimages.com/search/photographer?excludenudity=true&family=creative&phrase=bunhill&photographer=bunhill&sort=best" delay=8 aspect-padding=56.25 header-bool=false]

The images are added by ID. The json_encode function sanitizes this input and then translates the data to a JSON string to be passed to a JavaScript function. The $custom_aspect variable allows me to specify the aspect ratio of the slider. The TL;DR:

eg – 100 = 1:1 / 75 = 4:3 / 66.66 = 3:2 / 56.25 = 16:9

We need to be able to specify the aspect ratio every time. The slider is a div background image but there is not currently a way in CSS to set height such that it is dynamically proportional to widthcalc only works with vw and vh. We could do it in Javascript but that would be clunky (the function would be repeatedly called as the user resized a browser window). Instead we set width to 100% and height to 0 (in the CSS). Then use padding-top as a percentage. The method is described here at w3schools.com.

The $header_bool variable flags a specific exception – if the slider is at the top of the page then it wants to be approaching full height relative to the device or browser window – 79vh set in the JavaScript. This particularly matters on phones and the $custom_aspect variable is effectively ignored.

Each slider needs a unique #ID – because elements must be unique per page and potentially we may have more than one slider per page with different properties. That means naming them dynamically. PHP’s uniqid() is a perfectly adequate solution here.

Show Code

1 2 3 5