gipsi.itbit.me

Web development - Design Systems
Digital Transformation

Tab 1 Hello World!

I'm Gipsi

I'm learning to code, with a particular interest in:

This page is part of the process and a record of my progress.

I am using progressive enhancement techniques to create:

Learning to Code

8 bits of Coding Challenge

  1. Having completed #100DaysOfCode twice
  2. I'm now doing #301DaysOfCode.
  3. And built a website a day with #30Days30Sites challenge
  4. and most of #dailycssimages Must finish!
  5. and building something every day with the Vanilla JavaScript30 Challenge
  6. I completed 30 days of #DailyWritingChallenge (yes I know it's not coding but it really helps with explaining to myself what the code is all about - when the rubber duck isn't listening)
  7. Although I try to stay accountable with daily updates on:
    1. twitter @gipsitana
    2. and at gipsi.github.io
  8. I still find it hard to keep track of progress with daily challenges. So I occasionally work on crafting a streak box, an HTML semantic calendar by Ian Devlin
    which will hopefully be useful in two ways:
    1. Mark days (incentivise)
    2. Highlight links (access content)

Semantic calendar

M - T - W - T - F - S - S
  1. Google Lighthouse
  2. YDKJS
  3. JS testing D1 Node.js NPM and Git Bash
  4. JS testing D2 Mocha and Chai
  5. JS testing D3 Asynchronous and promises
  6. Home screen icons
  7. Js testing and fixing my service worker
  8. Js testing - back to the future, Sinon
  9. Codecademy Bash Command line
  10. Babelrc and JSON5
  11. Lighthouse
  12. PWA list
  13. Garden of Forking paths
  14. Grid and Fibonacci
  15. Things needed for a PWA
  16. The State Of JavaScript Survey 2017
  17. ionic blog
  18. Framework churn and web components
  19. 50th Day of JavaScript
  20. ISS Street View
  21. Codelab
  22. Anti-pattern
  23. Theramin
  24. Musical notes on a PC keyboard

gipsi.itbit.me

2017-09-30 Saturday

gipsi.itbit.me

2017-09-29 Friday

gipsi.itbit.me

2017-09-28 Thursday

gipsi.itbit.me

2017-09-27 Wednesday

gipsi.itbit.me

2017-09-26 Tuesday

gipsi.itbit.me

2017-09-25 Monday

web components and otters

Didn't get much chance to code today and felt rotten with flu anyway so read about JavaScript stuff that seems useful to know

Going through how Service workers work again too. This is a code project I'd like to gain some competence.

Web components with otters

gipsi.itbit.me

2017-09-24 Sunday

Musical notes on a PC keyboard

gipsi.itbit.me

2017-09-23 Saturday

Theramin

Reload the page to stop!

gipsi.itbit.me

2017-09-22 Friday

Anti-patterns

How to recognise an Anti-pattern

Codelab

gipsi.itbit.me

2017-09-21 Thursday

Codelab: Chrome dev tools Service workers.

ISS Street View

gipsi.itbit.me

2017-09-20 Wednesday

ISS Streetview tweeted by @mycodeangel

Now

Chilly rainshowers

50th Day of JavaScript

gipsi.itbit.me

2017-09-19 Tuesday

Progress with progressive web app project, icon-sizing, polyfill and promises. Service worker for my blog.

Framework churn and web components

gipsi.itbit.me

2017-09-18 Monday

ionic blog

The State Of JavaScript Survey 2017

gipsi.itbit.me

2017-09-17 Sunday

survey

Segmentation / Alternative paths

gipsi.itbit.me

2017-09-16 Saturday

From text to hypertext

Things needed for a PWA

gipsi.itbit.me

2017-09-15 Friday
  1. >HTTPS
  2. Manifest
  3. Service worker

Grid and Fibonnaci

gipsi.itbit.me

2017-09-14 Thursday

Garden of Forking paths

gipsi.itbit.me

2017-09-13 Wednesday

PWA list

gipsi.itbit.me

2017-09-12 Tuesday

Things you need for a #PWA

  1. HTTPS
  2. Manifest
  3. Service worker

Lighthouse

gipsi.itbit.me

2017-09-11 Monday

Totally Tooling Tips: Lighthouse https://youtu.be/d98CAgQNeaM

Babelrc to JSON5

gipsi.itbit.me

2017-09-10 Sunday

Javascript testing D5 What's babelrc to JSON5,.Why does it matter? What's a JSON lock file?

Codecademy Bash Command line

gipsi.itbit.me

2017-09-09 Saturday

Today

Cool, sunshine with big clouds and illuminated rain - darkness came, Music Festival Sounds echo weirdly through the cold wet woods

Tinkered with Manifest.json to improve #PWA of Splash screen/Landing page

Using Nightly dev tools without a tutorial.

got a certificate for talking to Discobot about how to use the forums.

forum tutorial certificate

Good idea to think a bit more about image sizing!

Js testing, Back to the future with Sinon

gipsi.itbit.me

2017-09-08 Friday

Now

Cool, pouring with rain all day

Followed the lesson and passed all the tests.

~/js-testing $ ./node_modules/.bin/mocha --require babel-register test/day 4.test.js day 4 tests timeout tests √ should return expected value from callback dateDescriber tests √ should correctly describe a future year √ should correctly describe a past year √ should correctly describe current year 4 passing (32ms)

Homework: Sinon fake timers

Js testing and fixing a my service worker

gipsi.itbit.me

2017-09-07 Thursday

Cooler, breezy, spots of rain

Completed day 3 of JS testing email course. Validated service worker code js with Beautify Tools - there were lots of missing semi-colons.

Home screen icons

gipsi.itbit.me

2017-09-06 Wednesday

Made a folder full of home screen icons for my service worker.

JS testing D3 Asynchronous and promises

gipsi.itbit.me

2017-09-05 Tuesday

Only half- way through today's JavaScript tesing for beginners lesson. Not enough time on PC.

JS testing D2 Mocha and Chai

gipsi.itbit.me

2017-09-04 Monday

First test using Mocha and Chai. And using Visual Studio Code. Spent quite a while trying to integrate Bash into VS code. Started suggested codecademy course on command line.

JS testing D1 Node.js NPM and Git Bash

gipsi.itbit.me

2017-09-03 Sunday

First email with JavaScript testing lesson. An overview and summary of tools to install with links. Very clear instructions to follow with suggestions for homework.

YDKJS and new calendar month

gipsi.itbit.me

2017-09-02 Saturday

Reading YDKJS about Scope.

  1. Engine
  2. Compiler>
  3. Scope
a.m.

Then making new files and calendars for this month.

Google Lighthouse

gipsi.itbit.me

2017-09-01 Friday

67% PWA for my Splash page.



Semantic calendar

M - T - W - T - F - S - S

  1. About JSON
  2. Brackets editor and JSLint. Mozilla Thimble and Paint.net
  3. Random Excuse machine coder(remix)
  4. Remixed a blog site with ghost and glitch https://wakeful-cover.glitch.me/
  5. Centering weather widget
  6. Building a Basic HTTP server with Node beginner Book: http://dandy-hub.glitch.me
  7. Adjusting JS image changer and making site into smaller linked files
  8. Learn to crawl before you can walk
  9. Navigation links to other files and folders
  10. Making things with code - fake arrows
  11. Dynamic HTML
  12. Linking
  13. Chrome Developer Tools
  14. Wireframing
  15. Pro Git
  16. What is HTML5?
  17. Grokking
  18. Visualising DOM
  19. Codeschool Free Weekend
  20. Codeschool Free Weekend
  21. Promises and Service Worker API
  22. A sad goodbye to dailycssimages
  23. Processing and P5.js
  24. High Ping and gadgets
  25. 25th Day of JavaScript
  26. Am I Post-digital?
  27. Success with a Service-worker
  28. Service-worker test-page
  29. Testing Service Worker
  30. Splash Page
  31. Progressive Web App

Progressive Web App

gipsi.itbit.me

2017-08-31 Thursday

Following the Medium Article A beginner’s guide to making Progressive Web Apps by UVE

I read the article through and got a good understanding of the stages so tested my test page with Google lighthouse in the Chrome Browser it failed on the service-worker as I suspected, the other categories were Ok and tweaking those I can understand. Still lots to learn about the JavaScript.

Splash Page

gipsi.itbit.me

2017-08-30 Wednesday
>

Lots of time tinkering with my new Service-worker splash page (ages choosing font colours) exploring Firefox Developer Tools. As is often the case, being new to this browser it took a while to actually find the tools, but I got there and had a play with Responsive Design Mode and the Eyedropper tool which is literally pixel point accurate.

Still pleased about being able to view my blog while offline. Takes a bit of getting used to, the links still don't work but the back and forward arrows do, to visit the pages I went to whilst online. This seems to point to my one long page being more convenient for offline, and indeed the links do work on there.

I am stretching myself here but it's rekindling an enthusiasm and confidence in my willingess and ability to learn and get to grips with how this JavaScript works with more focus and clarity beginning to emerge over what I'm trying to achieve. There's not really that much code and I've been enjoying going over what each piece does, the hows and whys.

Testing Service-worker

gipsi.itbit.me

2017-08-29 Tuesday

Tuesday after August Bank Holiday weekend - very hot and sunny 28.6 degrees celcius at this computer terminal.

Delighted that I can now review my blog when offline.

Next stage an idea from Chris Bolin perhaps?

Service-worker test-page

gipsi.itbit.me

2017-08-28 Monday

Sunny and hot Bank holiday Monday in England. - Chemical Haze at Birling Gap causing breathing difficulties.

  • Improving Web Service Worker test page
  • Reading about Web Service Workers
  • Using Firefox Nightly and Google Chrome
  • Github Pages
  • Atom Code Editor
  • Windows 7
  • Android
  • p5.js rgb circles with transparency
red, green and blue circles on canvas

Very keen to see how accesible my site was when I went offline. A bit of a rush visiting different pages on it to test as my phone needed turning on and it takes ages. Last night I was disappointed and only seemed to get the "sorry you're offline" dinosaur page but mysteriously this morning I seemed to get a limited functionality, if I used the back arrows to navigate rather than links - this is definately progress!

Today's session was mostly tinkering with the appearance of the test-page, background and font colour. Good for practicing basic html and css.

Success with a Service Worker

gipsi.itbit.me

2017-08-27 Sunday

I spend quite a bit of time offline out of range of phone signal or wifi so can appreciate how useful Service Workers could be.

Reading some articles and tutorials then watching the video of Lyza D Gardner's talk The Pragmatists Guide to Service Workers inspired me to have a go.

This is what I achieved so far gipsi.github.io

Am I Post-digital?

gipsi.itbit.me

2017-08-26 Saturday

Sunny and hot Saturday in England.

After reading a bit of Post-digital Membrane this morning I wondered Am I post-digital?

Going to read What is post-digital? by Florian Cramer before I decide.

  • P5.Js - created canvas drew circles
  • Reading about Post-digital
  • Using Firefox Nightly - Pretty Firebug add-on
  • Adobe Acrobat reader
  • Atom Code Editor
  • Windows 7 - Android
  • booogle
  • Quantum CSS
red, green and blue circles on canvas

P5.Js - created canvas drew red green and blue circles

25th Day of JavaScript

gipsi.itbit.me

2017-08-25 Friday

A quarter of the way through 100days of JavaScript already and I don't feel like I've got that far. I was brought to an abrupt halt trying to build the FreeCodeCamp Weather App. despite a resolve to proceed. I didn't have a clear enough picture of what API's are and found a widget code snippet which did the job much better that I feel like I can. This made me think more generally about what JavaScript is and what I would like to achieve by learning it.

So I've read more articles and books than done actual coding, searching for something that helps me feel a little less than lost at sea. I have absorbed quite a bit en route about patterns, packages and libraries and whilst keeping vanilla JavaScript in mind (finish JavaScript30?) I do like the look of P5.JS. Today I did my first 'hello!' which was actually a circle.

After the CSS Daily Images challenge I realised how important a visual style of learning is for me to understand concepts. I did have a go with the Processing language last year with a Future Learn course but got left behind. Still have a tendency to overestimate the time I have available online.

I write html every day updating this website as well as starting every project I do with an html document and keep learning more about it by doing.

The CSS I did as part of this page construction helps me visualise and I still try to read and understand a little more each day - particularly flexbox, which I really like.

This week particularly I have got a better understanding of the great leap in potential of HTML5 and CSS3.

High Ping and gadgets

gipsi.itbit.me

2017-08-24 Thursday

Reading the history of JavaScript. At this stage I'm immersing my thoughts in what JavaScript is and what it can be used for. PC Mainenance!

There is High ping and apparently gadgets on Windows7 desktop are a security risk so removed them.

Processing and P5.js

gipsi.itbit.me

2017-08-23 Wednesday

Exploring processing and p5.js http://lauren-mccarthy.com/teaching/Networked-Media …

A sad goodbye to dailycssimages

gipsi.itbit.me

2017-08-22 Tuesday

Very sad to hear that Coding Artist did not get the funding needed to carry on, it was a great project and I learnt so much. It gave me that connection between the coded instructions and the visual output I needed to understand how it works.

Promises and Service Worker API

gipsi.itbit.me

2017-08-21 Monday

An article in .NET magazine about Service workers caught my eye and I read it through burt did.nt get a chance to try the code on computer.

Codeschool Free Weekend

gipsi.itbit.me

2017-08-20 Sunday

Just about managed to start Cracking the Case with Flexbox

Codeschool Free Weekend

gipsi.itbit.me

2017-08-19 Friday

Front-end Foundations, Front-end Formations, Journey into Mobile, CSS cross-country and Unmasking HTML emails.

Reading What is HTML5? and Snow Crash

Visualising DOM

gipsi.itbit.me

2017-08-18 Friday

Ok, so I went down a rabbit hole of trying to verbalise visualisation concepts after searching and reading this kind of thing:Visualising node link graphs.

I was intrigued by the look of Tilt-3D an add on for Firefox that views the DOM in 3D but it appears there's not a current version.

Grokking

gipsi.itbit.me

2017-08-17 Thursday
Graphic Thesaurus for "grok" provided by FreeThesaurus.com
Visualising nodes and their relationships after reading up on Neo4j whilst making logical links and file names that connect to navigate this site.

Thinking in JavaScript

gipsi.itbit.me

2017-08-16 Wednesday
Reading this to get a better understanding of the JavaScript: Thinking in JavaScript And Programming Windows store appsboth are free on Google play store. Lots of useful stuff about app development.

What is HTML5?

gipsi.itbit.me

2017-08-15 Tuesday
Getting some deeper understanding with What is HTML5?by Brett Maclaughlin. Only a short book but a useful reference which has left me with a strong sense of the potential of HTML5.

Pro Git

gipsi.itbit.me

2017-08-14 Monday

Learning more about version control with Pro Git

Chrome Developer Tools

gipsi.itbit.me

2017-08-13 Sunday

I am getting some more practice linking to different places within a website

Earlier today I did half of a course about Chrome Developer Tools. Which also covered installing Git and Atom.

Linking and wireframes

gipsi.itbit.me

2017-08-12 Saturday

Very much focussing on linking files and folders today. I've been stumbling a bit on this so taking more care to really understand what's going on and how to do it. I couldn't get things to link at all on the desktop to start with, so I took a step back from putting the files in different folders and trying to link those and tried proceeding from having them in the same folder.

Dynamic HTML

gipsi.itbit.me

2017-08-11 Friday

I'm starting to get anxious about a perceived complexity in what I'm trying to do here. I don't understand why I can't link files. It feels like I'm missing some really obvious procedure. I found an exerpt in an old book called Dynamic HTML in action which I typed out and put on the menu page I'm constructing.

Today I'm struggling to link files in different folders/directories. Searching for guidelines took me to HTML Source A delightfully presented tutorial written in an engaging tone that walks through the essentials. Some of the gaps in what I've learned so far seem to be filled in when I look through the contents so I think I'll follow this one carefully. There are handy keyboard shortcuts introduced at just the right moment!

Making things with code - fake arrows

gipsi.itbit.me

2017-08-10 Thursday

For more practice with storing and accessing files I followed a recipe from 'designing web graphics.2' - 1997 issue fake arrows This was great fun and I was delighted with the effect. It involved making two gif files in paint.net for the arrows and two html files in VS Code for the text, list and links.

Dividing this site into smaller files is a bigger task than I at first supposed. I am trying to make new files and preserve this one 'as is' to keep a record of how it progressed over time. I do tweak things a bit, particularly the css if something looks grossly out of proportion, as I work out where to put the files in folders and make links to the right places.

HTML Navigation links to other files and folders

gipsi.itbit.me

2017-08-09 Wednesday

This morning I woke up still thinking about how to split my very long single page into smaller files. I drew a diagram, wrote some file paths and looked for clues in and old web design book by Lynda Weinman.

I spent a few hours making a menu page with the navigation buttons and dropdown menu but got stuck trying to make the the 'back to top' button into a 'home' button. I can't get it to link back to the menu page which is what I am trying to do. menu Ah! menu I've been trying all kinds of naming, lots of 'Read and search' (I don't like asking unless I absolutely have to) and putting the file in another folder has got more than an error message - just needs a stylesheet in the folder I'm guessing. menu DaDaa ... yay I did it, much persistence and it's just this kind of thing that makes me feel like quitting.

Learn to crawl before you can walk

gipsi.itbit.me

2017-08-08 Tuesday

Good advice from the GitKraken 'Getting started tutorial'. First time using GitKraken went well, I like the visual representation of the workflow and good notification popups to explain where I was going wrong were helpful - I did manage to try and do some things in the wrong order.

Second time using VS Code was a pleasant experience and navigating files and folders went smoothly.

I've been thinking about navigating whilst practicing moving up and down through folders making preparations to divide this site into smaller sections.

gipsi.itbit.me

2017-08-07 Monday

gipsi.itbit.me

2017-08-06 Sunday

gipsi.itbit.me

2017-08-05 Saturday

gipsi.itbit.me

2017-08-04 Friday

gipsi.itbit.me

2017-08-03 Thursday

gipsi.itbit.me

2017-08-02 Wednesday

gipsi.itbit.me

2017-08-03 Tuesday
M ---- T ----- W ----- T ----- F ----- S ---- S

  1. The Queue data structure
  2. By the power of grayskull!
  3. ~~~~ Chaining if else statements
  4. Switch instead of if else, magenta instead of green
  5. Coding electronic music tools
  6. JavaScript: Dot notation or brackets - a choice!
  7. JavaScript: objects for lookups
  8. JavaScript: going through Sololearn exercises again. Writing in HTML
  9. JavaScript - if else do while switch break ; ()
  10. #FreeCodeCamp variable JavaScript patterns with operators: logical assignment comparison ; {}
  11. Javascript: testing objects + Trying out some CSS authoring and validation tools
  12. JavaScript Conditionals, Pragmatic Programming
  13. JavaScript Functions
  14. Processing:JavaScriptMode
  15. Processing: Sonic Painter
  16. HTML5: Building, breaking, fixing
  17. FreeCodeCamp 350th milestone
  18. 100DaysofCode: Day 200
  19. HTML Challenges
  20. HTML, JavaScript and PHP
  21. Javascript basics, HTML as a weapon and a peek at Moz://a Dev Tools
  22. Fledging the nest: uh-oh, algorithms!
  23. Wordle
  24. Zen-like HTML/CSS Immersion and help with JS
  25. Flex-box Zombies
  26. Meyer reset
  27. Elementary HTML with linked sub-folders in Vs Code,
  28. Finished FreeCodeCamp JavaScript algorithms section.
  29. #SoloLearn PHP #FreeCodeeCamp JSON API's and AJAX done, started HTML/CSS/JS Random Quote Machine
  30. finished HTML/CSS/JS Random Quote Machine
  31. Weather Widget


Picking colours from a rainbow.

Shades of green.

I have enjoyed mixing colours with paint, doodling colourful patterns with felt tips. I once made a cyclopedia protective cover colouring in all the small squares on graph paper with coloured pencils. Psychedelic patterns were all the rage then as the visions of 1960's echoed in the decoration of jazzy wrappers in the 1970's.

Colored pencils had a softer tone than the myriad dazzling colours of printed synthetic inks and paints. I painted wild flowers with a palette of watercolours with pigment names that gave hints of their natural origin. Cadmium yellow, Zinc white, lamp black, veridion, vermilion, Prussian blue, burnt sienna.

I thought of Italian roof tiles when looking for a colour to represent a sussex oast house in a bucolic scene in guache on an oak chest of drawers I was decorating but painted mostly green.

216 hex value cross browser palette is the one I'm sticking to now. May Tech CSS Tutorial and reference app has a chart I use offline. It explains the origin of this web safe colour palette designed to display on 256 colour machines. And the reason why 40 of the colours were held in reserve.

My own reason for using this palette is to limit the choice. It makes it easier to experiment with how colors respond to one another when placed together in this medium which is one of light rather than paint. It can be dauntingly overwhelming to think there are millions of colours to pick from a rainbow.

I've tried using named colours, linen and seashell. associative naming can be helpful but soon become a ubiquitous choice of convenience as the avocado and magnolia interior decoration vinyl emulsions of the DIY 1980's.

I quite like linen and seashells and magnolia and avocados and I found when using these kind of colour names in css it did help me remember them. I was picking coloures I liked the name of and making the names into sets.

Oh yes, the title. With this site I'm interpreting nature. When I look around outside, especially in may there's a lot of green. And the word itself I find hardly adequate to describe the variation. Light or dark, bluish or yellowish.

So taking a leaf from the book of trees and plants, to enhance the page with css I'll look out for harmonious hues or tones that catch my eye as I seek to build layers with visual meaning.


Weather Widget

gipsi.itbit.me

2017-07-31 Monday
meteoblue

Spent a few hours today trying to build a weather app for the FreeCodeCamp Zipline. I need to go back over some of the previous lessons to grasp what I need to do using JSON and an API key.

Instead I found this rather nice weather widget. Less code, more functionality. Instead I found this rather nice weather widget. Less code, more functionality. Than I could do in the time.

Random Quote Machine

gipsi.itbit.me

2017-07-30 Sunday

finished HTML/CSS/JS Random Quote Machine
Random Quote Machine

Only after I posted to twitter did I realise I wrote aphorisms instead of apothegms.

#SoloLearn PHP #FreeCodeeCamp JSON API's and AJAX done, started HTML/CSS/JS Random Quote Machine

gipsi.itbit.me

2017-07-29 Saturday

#SoloLearn PHP #FreeCodeeCamp JSON API's and AJAX done, started HTML/CSS/JS Random Quote Machine

Finished FreeCodeCamp JavaScript algorithms section.

gipsi.itbit.me

2017-07-28 Friday

Finished FreeCodeCamp JavaScript algorithms section.

Elementary HTML with linked sub-folders in Vs Code

gipsi.itbit.me

2017-07-27 Thursday

Going through the basics of html again with Creating a Website: The Missing Manual by Matthew MacDonald. inline (phrase) and block(flow),HTML Elements: Block-Level vs. Inline Elements (this article has a useful bit about changing them in the CSS too) and container and standalone HTML in a Nutshellare good things to know.

Also noticed the horizontal rule tag and had a go with it. This page is getting too long and I spent a couple of hours focusing on how to divide it into sub folders. I've got used to my quirky stylesheet and find it easier to read and think about how I'd like it to look and work, so I linked it back for now It makes it all look a bit janky but this hr tag is useful for putting divides at places where I can split the page into separate files.
The deciding factor was that the back to top button wasn't working with the CSS reset.

My first day using Visual Studio Code went seamlessly. I'm used to using NotePad++ and I also used this as I know where I am with it.
Getting lost and naming things can be challenging, so backtracking whilst learning new things helps me keep my bearings.

Meyer reset

gipsi.itbit.me

2017-07-26 Wednesday

Listened to this great podcast this morning Toolsday - on Writing

Back to some css today and trying to get all the flex-box's to line up wasn't happening. Went I through Shay Howe's Building your first Website in html and css

Which led to an Eric Meyer Reset

Flex-box

gipsi.itbit.me

2017-07-25 Tuesday

FreeCodeCamp bonfire Return Largest Numbers in Arrays Complete. Played excellent FlexboxZombies game.

Zen-like HTML/CSS Immersion and help with JS

gipsi.itbit.me

2017-07-24 Monday

After watching week 3 of Coursera's Mindshift I went for the immersive approach today.

In the morning I did some SoloLearn PHP tutorials covering functions, and although it's going to take some drilling to remember the new syntax it's helpful to go over the way the different elements of a programming language are put to use, and this is becoming - gradually - more familiar.

This page has been niggling for a while and needs sorting out. I thought about completely re-doing the stylesheet Css Zen Garden style but it seemed a bit ambitious for the time available. Instead I tweaked things a bit by adding some inline styles to the HTML. W3c tutorial pages were helpful.

I took a screenshots of the stage I got to with the semantic calendar as a reminder of the process.
Semantic calendar being developed - web page view
Semantic calendar being developed - the code

Today's FreeCodecamp bonfire "Title case a sentence" required the RSA method. I did try to use the hint which was MDN String.prototype.split() page ...

But found Maria's Developer Blog walkthrough with explanations approach much more helpful.

Wordle

gipsi.itbit.me

2017-07-23 Sunday

Reading a book about html5 some history of WHATWG and W3C. The Wordle programme was mentioned so I had to have a go with it when on PC. This proved more difficult than I had anticipated. The browsers Chrome, Firefox Developer and Opera would not accept the Java plug in or add on required. Internet explorer would do it but Java had to be updated and all traces of previous Java removed.

Finally I got it working! And it was worth it, there's an impressive selection of fonts and colours to play around with, great fun.

Here's a Wordle cloud for my web log:

HTML Web log Wordle Cloud

And this is a Wordle cloud for thr HTML version of the web log

HTML Web log Wordle Cloud

Next I did three FreeCodeCamp bonfires:

  • Factorialize a Number
  • Check for Palindromes
  • Find the Longest Word in a String

This required much Read, Search Ask. With Google, on StackOverflow, FreecodeCamp Forums, YouTube, Medium. At this stage I'm hoping that exposing myself to the code repeadedly I will eventually absorb how it works. I looked at quite a few different solutions, and when I tried them not all of them worked. I can find the ones that do and then work out how.

SoloLearn has helped me a lot to grasp some JavaScript basics. I think it's the format of just one phone screen divided into small memorable chunks.

Fledging the nest: uh-oh, algorithms!

gipsi.itbit.me

2017-07-22 Saturday

Some HTML challenges on SoloLearn then PHP control stuctures exercises and quizzes.

A bit more time on this page today. And some photo editing with paint.NET

Skipped through FreeCodeCamp Javascript object oriented and functional programming section, then first bonfire: splitting a string (and reversing it and joining it back up again).

fledging the nest

Javascript basics, HTML as a weapon and a peek at moz://a Dev Tools

gipsi.itbit.me

2017-07-21 Friday

#100DaysOfCode #301DaysOfCode Day 203

#FreeCodeCamp #Javascript Basic Yes! I completed the JavaScript Basics. Although I didn't time it, I think 10 hours is about the right estimate for how long it took - spread over a month. This time I am actually sticking to at least one exercise - a little each day. This is the second time I've done these exercises and I'm absorbing them better than the first time around two years ago. It's clearer to me what the code is for and how it can be used. This is longer than I thought it would take when I started but there has been much to learn about context and application, culture and more.

#SoloLearn I completed 50 challenges with 1 weapon: HTML! Braving the competition of doing code quiz challenges with other learners I have lost most, drawn a few and won hardly any but the experienc is good. I find them rather like flash cards, good for testing what I've learnt and spotting gaps in knowledge.

moz://a css grid - I had a quick skim around the Mozilla Web developer site and would like to spend more time there. I was particularly interested in Firefox Developer edition and the CSS Grid section.

HTML, JavaScript and PHP

gipsi.itbit.me

2017-07-20 Thursday

#100DaysOfCode #301DaysOfCode Day 202 #FreeCodeCamp #Javascript Profile Lookup #SoloLearn HTML challenges and PHP Arrays

HTML Challenges

gipsi.itbit.me

2017-07-19 Wednesday

#100DaysOfCod#301DaysOfCode Day 201 #FreeCodeCamp #Javascript nesting for loops #SoloLearn HTML challenges.

100DaysofCode: Day 200

gipsi.itbit.me

2017-07-18 Tuesday

Another milestone!

To celebrate I started learning another programming language on the SoloLearn phone app - PHP. Had to pause a bit to get how variable variables work but other than that progress was quite smooth for about an hour covering basic syntax, variables and operators.

Some goals for the next 100 Days.

  • Make a functional search box for this page
  • Practice HTML
    • Get to know and use more HTML5 features - semantically
  • Practice CSS
    • Learn Flexbox better
    • Learn Grid
  • JavaScript: Keep up my FreeCodeCamp streak -
  • PHP: Learn. Today was Day 1!
  • Use Git: practice. Contribute to open source.
  • Shell Scripting: practice command line
  • Learn Linux
  • Creative media generative programming with sound and pixels: algorave, gifs.

There's a fair bit missing from this list, particularly graphics and Ux/Ui related which I hope to get practice with this through exploring and making things.

FreeCodeCamp 350th milestone:

gipsi.itbit.me

2017-07-17 Monday

Today I reached my FreeCodeCamp 350th milestone, it was a Javascript basics count backwards with for loop exercise.

Next some playing around trying different bullet points, list styles and types at the top of this page using w3schools

HTML5: Building, breaking, fixing.

gipsi.itbit.me

2017-07-16 Sunday

SoloLearn: after learning a bit about JavaScript objects - name:value pairs I scooted through the HTML5 section of HTML Basics.

This whetted my apetite to try out some of the HTML5 tags and rearrange thing a bit on this page. Hence todays heading.

Processing: Sonic Painter

gipsi.itbit.me

2017-07-15 Saturday

Coursera's Creative Programming for Digital Media & Mobile Apps Is engaging and inspiring. I've got to make an effort to catch up and complete the course, but made good progress today.

Processing: JavaScriptMode

gipsi.itbit.me

2017-07-14 Friday

Took ages finding the right mode folder to put JavaScriptMode folder in to get Processing to work in the browser - but got there in the end, yay!

JavaScript Functions

gipsi.itbit.me

2017-07-13 Thursday

Going through the JavaScript functions section of the Sololearn App on phone. Twenty five minute sessions really focussing till I get it.

One FreeCodeCamp exercise.

JavaScript Conditionals, Pragmatic Programming

gipsi.itbit.me

2017-07-12 Wednesday

JavaScript Conditionals - SoloLearn

Reading The Pragmatic Programmer

Here's a couple of exerpts I liked so far.

As a programmer you are:

  • part listener
  • part adviser
  • part interpreter
  • part dictator

Wisdom Acrostic

- Understanding an Audience

What do they want to learn? What is their interest in what you've got to say? How ssophisticated are they? How much detail do they want? Whom do they want to own the information? How can you motivate them to listen?

Javascript: testing objects + Trying out some CSS authoring and validation tools.

gipsi.itbit.me

2017-07-11 Tuesday

#100DaysOfCode #301DaysOfCode 193 #FreeCodeCamp Javascript: testing objects + Trying out some CSS authoring and validation tools.

#FreeCodeCamp variable JavaScript patterns with operators: logical assignment comparison ; {}

gipsi.itbit.me

2017-07-10 Monday

2017-07-10 #100DaysOfCode #301DaysOfCode 192 #FreeCodeCamp variable JavaScript patterns with operators: logical assignment comparison ; {}

JavaScript - if else do while switch break ; ()

gipsi.itbit.me

2017-07-09 Sunday

#100DaysOfCode #301DaysOfCode 191 #FreeCodeCamp JavaScript - if else do while switch break ; ()

JavaScript: going through Sololearn exercises again. Writing in HTML

gipsi.itbit.me

2017-07-08 Saturday

Started the day with another week of Mindshift videos. As a follow on tho Learning how to learn it's a helpful refresher going into more details about the benefits of the Pomodoro technique and the focus and diffuse modes of thinking with some nice new diagrams to illustrate - I particularly like the honeycombe one for diffuse mode. Also the visualising Memory Palace supplementary vieo was good.

Also some more Sololearn Javascript excersises - I'm getting better! Soon I might even be confident enough to take on other learners in the challenge games.

Today I'm also playing an online game whilst coding ... afk'ng to grind some levels. Just thought I'd give it a go.

JavaScript: objects for lookups

gipsi.itbit.me

2017-07-07 Friday

I found the FCC objects for lookups difficult to solve so only did one JS exercise today. I spent a long time trying to figure it out myself as the Mindshift course I'm doing reminded me of the importance of this. I eventually looked it up though as I was just stuck. What I found was I had put a var where I didn't need it and although I'm still not entirely sure why, by recalling it like this by writing about it and making a mental not I think it will fall into place eventually.

I also revisited the Javascript section on Sololearn. Although I completed it going back through the exercises is making more sense now I'm actually making things.

JavaScript: Dot notation or brackets - a choice!

gipsi.itbit.me

2017-06-06 Thursday

Some FreeCodeCamp challenges.

Coding electronic music tools

gipsi.itbit.me

2017-07-05 Wednesday
Catching up with some lessons with Futurelearn's Coding Electronic music tools with Javascript has been great fun today, and Codecircle is a great feature they are developing at Goldsmiths College.

Switch instead of if else, magenta instead of green

gipsi.itbit.me

2017-06-04 Tuesday

I've started the Mindshift course and watching the first videos reminded me of the importance of solving the FreeCodeCamp JavaScript challenges myself, so although it can feel difficult and takes a while sometimes I do feel like it's sinking in, I know I understand how it works.

By making this page too I'm getting a sense of what I can do and with practice get familiar. I made a new calendar box for July and changed the link color to magenta, which I've wanted to do for a while as the green didn't show up too well against a blue background.

~~~~ Chaining if else statements - JavaScript

gipsi.itbit.me

2017-07-03 Monday

After getting stuck on an else if statement because I hadn't put a curly brace at the end I'm quite pleased I got this FCC challenge on chaining if else statements right first time.

... Small steps.

By the power of grayskull!

gipsi.itbit.me

2017-07-02 Sunday

By the power of Grayskull and FreeCodeCamp challenges I can now use JavaScript comparison operators.

via GIPHY

The Queue data structure

gipsi.itbit.me

2017-07-01 Saturday

In Computer Science a queue is an abstract Data Structure where items are kept in order.

Wrote a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of array. The nextInLine function should then return the element that was removed.

function nextInLine(arr, item) { // Your code here arr.push(item); return arr.shift(); // Change this line } // Test Setup var testArr = [1,2,3,4,5]; // Display Code console.log("Before: " + JSON.stringify(testArr)); console.log(nextInLine(testArr, 6)); // Modify this line to test console.log("After: " + JSON.stringify(testArr));

And a boolean true/false.



M - T - W - T - F - S - S