Hi, I'm Chris and I build things for the web.

I'm a Web developer living in Sydney, Australia.

See my work on Github See me on LinkedIn
  • app.js
  • services.js
  • style.css
  • index.htm

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

50

'use strict';


const elMain = document.querySelector("main")


function appendChild(el, child) {

  return el.appendChild(child)

}


function getData(el, key) {

  return el.getAttribute("data-" + key)

}


function applyArguments(func, args) {

  return func.apply(null, args);

}


function steps(steps) {

  if ( steps === void 0 ) steps = 10;


  return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); };

}


function userModal() {

  modalOpenClose(true, 'user', 'start')

}


/* ==========================================================================

  #BUTTONS

========================================================================== */


.c-btn {

  display: inline-block;

  vertical-align: middle;

  font: inherit;

  text-align: center;

  margin: 0;

  cursor: pointer;

  padding: 0;

  transition: all 300ms ease-in-out;

}


.btn--primary, .btn--secondary {

  position: relative;

  margin: 0.5em;

  width: 8.5em;

  height: 2em;

  border-radius: 24px;

  text-shadow: 1px 1px var(--c-sh-txt, rgba(0, 0, 0, 0.5));

  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

  font-weight: 900;

  font-size: 24px;

}


.btn--primary:active {

  transform: translatey(4px);

}


.btn--primary:active:after {

  transform: translatey(-4px) scale(1.4, 0.95);

}


.btn--primary:after {

  content: "";

  position: absolute;

  top: calc(100% + 0.4em);

  right: -0.5em;

  left: -0.5em;

  height: 0.5em;

  background: radial-gradient(rgba(0, 0, 0, 0.25), transparent 50%);

  transition: inherit;

}

  • 0 0
  • Ln 1, Col 1
  • Spaces: 2
  • UTF-8
  • CRLF
  • Plain Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi maxime quibusdam dolore quo et, corrupti vitae dicta, rerum molestiae recusandae necessitatibus facilis minima aliquid at temporibus eum modi? Ratione deserunt blanditiis corrupti minus consequatur quos minima aliquid.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi maxime quibusdam dolore quo et, corrupti vitae dicta, rerum molestiae recusandae necessitatibus facilis minima aliquid at temporibus eum modi nemo?

I love coding

Welcome to my website. I'm a Web developer living in Sydney, Australia. I love coding. I've been doing it for over fifteen years. Thesedays I work with React, JavaScript, Typescript, Node.js, CSS, HTML5 and all the tools that go along with it.

ZATASK.COM

ZaTask is a project management SPA. It's great for managing your projects, both business and personal. I use it all the time. Drag and drop things to easily prioritize tasks. It's very visual to make things stand out clearly. It's a kanban board style app similar to Trello. Developed using React, Node, Express, Passport.js for authentication and many other things.

It's totally FREE. Create an account. Sign up and create as many boards as you want. No limits. And start using it for your business or to plan your life.

SEE PROJECT DETAILS

Click here to get a deep dive into how I built this great app

VISIT ZATASK.COM

BLUE MOON DATE LIBRARY

Blue Moon is a library to find unique dates such as the second Thursday of each month or the last Sunday of Febrary for the next five years. It can also be used to create dates more intuitively.

SEE PROJECT DETAILS SEE GITHUB PAGE

STOOGE CSS FRAMEWORK

Stooge CSS is a utility-based CSS framework similar to Tachyon but with an easier class naming system. There is a specific format for classnames eg text-align: centre is ta-ce

There is a pre-defined color system, components, responsiveness, It is especially useful to add to your Sass system as an add-on.

SEE PROJECT DETAILS SEE GITHUB PAGE SEE DOCUMENTATION

BAB

Bab searches multiple text files for a specific text string. Bab is similar to Grep but with the option of saved search profiles and options for outputting format.

SEE PROJECT DETAILS SEE GITHUB PAGE

FLEX FRAMEWORK

A micro-framework flexbox CSS framework made to make it very easy to structure your website. Flexbox is used extensively in webpage layout thesedays. It's often the best way to do the base layout of websites. It makes it easy and fast to structure webpages. Flexbox Framework is so useful.

SEE PROJECT DETAILS SEE GITHUB PAGE

SEE ALL MY OTHER GITHUB REPOS

I have lots of other nice little Repos on Github. Check them out.

Note: I also have a lot of unpublished projects that are either incomplete or for various other reasons have chosen not to publish.

See my work on Github

I'm Chris. I'm from Sydney where I'm doing freelance web development. My skills are in Frontend and Full-stack development. I work mainly with React, Typescript, Javascript, Node.js as well as many other tools.

I have a strong focus on good coding style, best practices and great software design.

In the last several years I have transitioned towards Frontend and Full-stack web development to bring the skills I've developed from desktop software development and design to the web.

I have developed a Project Management Kanban-style web app ZaTask for anyone to sign-up and use.

Early on in my university days, I became interested in database applications. I began making desktop database apps for small businesses.

For more than a decade, I've worked as a freelancer developing database applications for many types of businesses in many different industries. Visual Basic was my main language. I developed office automation tools, invoicing tools, custom CRM systems and many other types of database applicatons.

I am Founder of SuperiorPro Software Pty Ltd through which I developed and sold recruitment software called MasterFind. It was developed over many years. It's being used mainly in medical recruitment.

I worked as a Database developer in the Sales-Finance department at a multinational food company. I hold a Bachelors degree in Computer Science from The University of New South Wales.

During my leisure time, you'll find me bushwalking, with friends or building apps.

See my details below to contact me aand find out more about me.

See my work on Github See me on LinkedIn
Chris Waddell

When I started out, I ran many experiments and tested many ideas to really deeply understand the DOM and it's performance limits and I documented some of my findings on Codepen. The codepens have a description of what I've learnt and performance issue's I've found. I've covered various topics. Check them out. I've gone into depth on many CSS properties.

Javascript Animation

Javascript

CSS Animation

CSS

SVG Animation

SASS

I like doing animations and running experiments to grow my knowledge. I test out ideas and put them up on Codepen.

Check out my fantastic and unique collection of codepens

See my Codepens

I made some really handy tools for coding developers. See the Tools list or view the Tools menu at the top of the page. I wanted to share them.

There is a ZaTask Project management web app (totally FREE), an RGB color picker and various tools to help in coding.

See all the Tools

Who wants to be a millionaire?

This uses multiple quiz API's and a reverse proxy with Node.js. Have a go.

Play Millionaire

2048

In this very addictive game you must make the numbers double until they reach 2048. 2, 4, 8, 16 up to 2048. Use the arrow keys to play.

Give it a try.

Play 2048
See all my Games

What you should do now

Check out my Codepens and see what I've written about easy one. Check my tweets. Check out my LinkedIn. Set up a ZaTask account so you can manage your projects easily.

Use my Tools like the Color Choose regularly like I do because it's better than all the others.

Scroll down and check my social media. Drop me a message.