DEV Community: Dominic Duffin

Monthly Challenge: Photography

Dominic Duffin — Tue, 30 Jul 2024 18:06:00 +0000

As programmers, we spend all day in front of the screen. At Virtual Coffee, we also value health and wellbeing. The motivation behind our August challenge is to get folks out and about and seeing the world. We will be encouraging our members to make the most of summer (in the Northern hemisphere, at least), enjoy some work / life balance and benefit from the fresh air and exercise of the great outdoors. The challenge could also be completed without ever leaving the car, but the hope is that folks will leave the car for a bit and get some real fresh air and exercise. A little hint for those of you that have access to public transportation: Public transportation is a great way to see the world while someone else does the driving. It also forces you to actually get some exercise because it probably won't pick you up at your front door.

Some inspiration

August is a good time to get out of the house, away from the desk. The city, the country, the beach or steam trains, it doesn’t matter what you do out there, so long as you get out there and enjoy living, not just working, even for a little bit. So, let's do it, folks!

If you’re addicted to your phone and want to take this idea a step further, we have a bigger idea for you: Get together with friends or family and leave all your phones (and other networked devices) behind, bringing only a standalone camera to record your day. we bet y'all will have fun, enjoy yourselves (and each other) and realize there's no need to always have the entire world in your pocket. The internet will still be there when you get back.

If you’re not yet a member of Virtual Coffee, but the Challenge appeals to you, we encourage you to get out and do it anyway, and post your pictures in the comments section, below.

A Review of Coding with ChatGPT: A Simple Express Server

Dominic Duffin — Sun, 11 Dec 2022 21:59:54 +0000

Code samples included in this post were generated by ChatGPT, OpenAI's large-scale language model optimized for dialogue.

The cover image in this post was generated by DALL-E 2, OpenAI's image generation model.

Scenario

Having played around a bit randomly asking ChatGPT to write code, I wanted to put it to the test with a simple, but vaguely 'real' scenario.

A simple Express server with a series of endpoints related to the processing of orders.

Taking an order object with various information such as items purchased, total price, customer details etc., the endpoints will return a string for a shipping label, an amount of commission for the salesperson, and an amount of loyalty points for the customer. To add a bit more complexity, there will also be a couple of endpoints returning CSV's.

Work

First, I create a new Express server. I can just use a command so I don't need ChatGPT for this.

npx express-generator --no-view

Now to bring in ChatGPT! First, I ask it to generate a route that returns a hard coded JSON object for an order with billing address, shipping address, line items, total, payment method, shipping method, customer, salesperson and order number. This will not be directly used by the application, but be useful later.

It returns this, which gets the gist of it but is slightly limited. I definitely need the addresses to include the country so I add that manually.

app.get('/order/:id', (req, res) => {
  const orderId = req.params.id;
  const order = {
    billingAddress: {
      street: '1 Main St',
      city: 'Boston',
      state: 'MA',
      zip: '01234'
    },
    shippingAddress: {
      street: '1 Main St',
      city: 'Boston',
      state: 'MA',
      zip: '01234'
    },
    lineItems: [
      {
        productId: 1,
        name: 'Product 1',
        quantity: 2,
        price: 9.99
      },
      {
        productId: 2,
        name: 'Product 2',
        quantity: 1,
        price: 14.99
      }
    ],
    total: 34.97,
    paymentMethod: 'credit card',
    shippingMethod: '2-day',
    customer: {
      id: 1,
      name: 'John Doe'
    },
    salesperson: {
      id: 2,
      name: 'Jane Doe'
    },
    orderNumber: orderId
  };
  res.json(order);
});

I try to start the server and it crashes because app is not defined. Since I am using Express Router from the generator, I need to change app.get to router.get. I do that and it works!

I want to try some test driven development with ChatGPT so I install Jest.

I ask ChatGPT to generate a Jest test for the main functions the program is going to need.

A function that takes an order object and returns the shipping address as a string.

test('getShippingAddressFromOrder', () => {
  const order = {
    shippingAddress: {
      street: '1 Main St',
      city: 'Boston',
      state: 'MA',
      zip: '01234'
    }
  };

  const expectedShippingAddress = '1 Main St, Boston, MA 01234';
  const actualShippingAddress = getShippingAddressFromOrder(order);

  expect(actualShippingAddress).toBe(expectedShippingAddress);
});

A function that takes an order object and returns the salesperson's commission of 0.1%.

test('getSalespersonCommission', () => {
  const order = {
    total: 100,
    salesperson: {
      id: 1,
      name: 'Jane Doe'
    }
  };

  const expectedCommission = 0.1;
  const actualCommission = getSalespersonCommission(order);

  expect(actualCommission).toBe(expectedCommission);
});

A function that takes an order object and returns the amount of customer loyalty points at 2 per dollar.

test('getCustomerLoyaltyPoints', () => {
  const order = {
    total: 100,
    customer: {
      id: 1,
      name: 'John Doe'
    }
  };

  const expectedLoyaltyPoints = 200;
  const actualLoyaltyPoints = getCustomerLoyaltyPoints(order);

  expect(actualLoyaltyPoints).toBe(expectedLoyaltyPoints);
});

A function that takes an order object and returns a csv for the packer with line items and the order number.

test('getPackerCsv', () => {
  const order = {
    orderNumber: 123456,
    lineItems: [
      {
        productId: 1,
        name: 'Product 1',
        quantity: 2
      },
      {
        productId: 2,
        name: 'Product 2',
        quantity: 1
      }
    ]
  };

  const expectedCsv = '123456,Product 1,2\n123456,Product 2,1';
  const actualCsv = getPackerCsv(order);

  expect(actualCsv).toBe(expectedCsv);
});

A function that takes an order object and returns a csv for finance with country and revenue.

test('getFinanceCsv', () => {
  const order = {
    billingAddress: {
      country: 'US',
    },
    total: 100,
  };

  const expectedCsv = 'US,100';
  const actualCsv = getFinanceCsv(order);

  expect(actualCsv).toBe(expectedCsv);
});

Now I have five test that run and they all fail, which is great as the functions have not yet been written!

Next I ask ChatGPT to write my functions.

A function that takes an order object and returns the shipping address as a string.

function getShippingAddressFromOrder(order) {
  const { shippingAddress } = order;
  return `${shippingAddress.street}, ${shippingAddress.city}, ${shippingAddress.state} ${shippingAddress.zip}`;
}

A function that takes an order object and returns the salesperson's commission of 0.1%.

function calculateCommission(order) {
  return order.total * 0.001;
}

A function that takes an order object and returns the amount of customer loyalty points at 2 per dollar.

function calculateLoyaltyPoints(order) {
  return order.total * 2;
}

A function that takes an order object and returns a csv for the packer with line items and the order number.

function generatePackerCsv(order) {
  let csv = `Order Number: ${order.number}\n`;

  for (const item of order.items) {
    csv += `${item.name}, ${item.quantity}\n`;
  }

  return csv;
}

A function that takes an order object and returns a csv for finance with country and revenue.

function generateFinanceCsv(order) {
  return `${order.country}, ${order.total}\n`;
}

It tells me how to use the functions and gives example objects to call them with.

Next I export them and import them into my test files. This step I do manually.

I now run my tests again and one passes (🎉) and the other four fail. I see this is because the function names don't match the names in the tests, which I correct manually.

Now three of them pass. One fails because the function returns the wrong result, the other fails because the function expects an iterable and is not getting one.

I look at this and find that one is using the wrong property name and the other is expecting the wrong nesting. These issues are easy to manually fix.

They both still fail, this time because the CSV strings returned by the functions do not match the ones expected by the tests. This is a bigger bug.

After some manual debugging, all tests are now passing.

I think I may want another function that takes a CSV string and generates a CSV file, so I will ask ChatGPT for a test and a function for this.

const fs = require("fs");
const { generateCsvFile } = require("./csv-utils");

describe("generateCsvFile", () => {
  it("should generate a CSV file from a CSV string", () => {
    const csvString = "A,B,C\n1,2,3\n4,5,6";
    const filePath = "./test.csv";

    generateCsvFile(csvString, filePath);

    const csvFile = fs.readFileSync(filePath, "utf8");
    expect(csvFile).toEqual(csvString);

    fs.unlinkSync(filePath);
  });
});

const fs = require("fs");

function generateCsvFile(csvString, filePath) {
  fs.writeFileSync(filePath, csvString, "utf8");
}

module.exports = { generateCsvFile };

This time it has generated the imports and exports for me as well, so I just need to change the path to suit my directory structure and it should pass.

It does!

The final step is to make the routes that will use these functions, and I ask ChatGPT to do this as well.

A route that accepts an order object and uses a getShippingAddressFromOrder function to return the shipping address.

app.get('/shipping-address', (req, res) => {
  const { order } = req.body;
  const shippingAddress = getShippingAddressFromOrder(order);

  res.send({ shippingAddress });
});

A route that accepts an order object and uses a getSalespersonCommission function to return the salesperson's commission.

app.get('/salesperson-commission', (req, res) => {
  const { order } = req.body;
  const commission = getSalespersonCommission(order);

  res.send({ commission });
});

A route that accepts an order object and uses a getCustomerLoyaltyPoints function to return the customer's loyalty points.

app.get('/customer-loyalty-points', (req, res) => {
  const { order } = req.body;
  const loyaltyPoints = getCustomerLoyaltyPoints(order);

  res.send({ loyaltyPoints });
});

A route that accepts an order object and uses a getPackerCsv function to return a CSV file for the packer.

app.get('/packer-csv', (req, res) => {
  const { order } = req.body;
  const csv = getPackerCsv(order);

  res.setHeader('Content-Type', 'text/csv');
  res.setHeader('Content-Disposition', 'attachment; filename="packer.csv"');
  res.send(csv);
});

A route that accepts an order object and uses a getFinanceCsv function to return a CSV file for finance.

app.get('/finance-csv', (req, res) => {
  const { order } = req.body;
  const csv = getFinanceCsv(order);

  res.setHeader('Content-Type', 'text/csv');
  res.setHeader('Content-Disposition', 'attachment; filename="finance.csv"');
  res.send(csv);
});

I have to change app.get to router.get again. I also have to add the function imports manually.

Then I start the server and try using the order object returned by the /order/:id endpoint to test the new routes.

The shipping address endpoint works and I get this response:

{
    "shippingAddress": "1 Main St, Boston, MA 01234"
}

The salesperson's commission endpoint works and I get this response:

{
    "commission": 0.03497
}

The customer loyalty points endpoint works and I get this response:

{
    "loyaltyPoints": 69.94
}

I now realize that it should be rounding the loyalty points to an integer.

The packer CSV endpoint works and I get this response:

1,Product 1,2
1,Product 2,1

The finance CSV endpoint works and I get this response:

US,34.97

I now have a working server and I've hardly written any code by hand!

Review

Now to do a code review of what GPTChat has produced.

While it has certainly done an impressive job, it is by no means flawless.

I have a few comments on the code style, I prefer arrow functions and no semicolons, but if this tool was integrated into an IDE it would probably be trivial to make it understand that from existing code style or linter rules, so no worries there.

The bugs that broke the tests mostly seemed to be about a lack of consistency, rather than any fundamental lack of understanding, and it is worth remembering that I didn't do all this in one go, so it didn't have the context of what it had previously written. Again, this would probably be resolved if the tool was integrated into an IDE.

I don't like the address objects it generated - the properties included would not easily support addresses in some parts of the world, and it did not include the country, which would be essential in any international setting (and let's face it, most tech is international). The shipping address string function assumes it will always and only have the same four properties it generated for the sample address. This may indicate that ChatGPT does not have sufficient understanding of the range of standards used around the world, or just assumes a US context (and I'm not in the US). It also did not round the customer loyalty points, whereas when I get my credit card statement, these are always rounded down.

Overall, I think it is necessary to remember that this is a tool and not a source of truth. It can be a useful assistant for humans but its output should always be checked by humans before being used in production.

Highlights from a Year of Virtual Events

Dominic Duffin — Tue, 29 Dec 2020 13:56:27 +0000

Tech Conferences

These are the tech conferences I most enjoyed this year, and that I would definitely attend if they are held virtually (or with siginificant virtual elements) in the future.

MagnoliaJS

MagnoliaJS 2020 was the first ever tech conference I attended, and looking back now, I still think it was one of the best. There were a lot of very interesting talks, and I learned about using CSS variables to build themes, a concept I have applied to my personal website. It also had lunch hour Zoom meeting sessions where you could just chat with other attendees. This was the thing I think was missing from a lot of the conferences I haven't highlighted, it really enhances the feeling of being part of an event rather than just watching a stream.

The conference suffered from its share of technical problems, but everyone was still working out how to do virtual events back in April, it was exciting and it didn't really matter if there were a few hitches.

Microsoft Build

Microsoft Build had a slick and polished feel about it, the streams were so professionally produced they could have been mainstream television. As a developer who develops on a Windows machine, I also learned about the new Windows Terminal and Windows Subsystem for Linux, tools that I have been using on a regular basis ever since. Windows Terminal especially is such an improvement over any other terminal I've tried. The were some good workshops, too, and everything was free, which is amazing.

Distributed Camp

Distributed Camp was very different from the previous conferences, but equally enjoyable. It was small, most interactions were on Discord (though Zoom meetings also featured), and the sessions were half-day and took an in-depth look at a particular distributed computing technology. I got involved as a volunteer, helping with the logo design and Discord moderation. The nice thing about a small conference is that you get to interact directly with speakers in a way that just doesn't happen when there are thousands of attendees, and I made valuable connections there.

Blockdown 2.0

Blockdown was a blockchain and cryptocurrency focused conference held in a 3D virtual world. There were speakers from several projects in the space that I admire, and the 3D virtual world was exciting to explore, even if it did mean getting prepared a while before a talk started so I could load the world and get to the auditorium. There was also a fun games room among the scenes to explore.

Codeland:Distributed

I had watched the livestream of the Codeland conference in 2019, but it felt really great to get the full experience in the distributed ediion in 2020. Highlights of this conference were the affordable $25 workshop ticket option (this was one of the few conferences I actually paid for and well worth the money) and the opportunity to get real physical swag at a virtual conference. The necessary steps to secure swag also prompted me to setup a profile readme on Github, which I had been intending to do for ages and just not got around to.

Ournetworks

Ournetworks was a fascinating mixture of disciplines related to concepts of decentralised technology, but stretching right across from core tech to art and literature. There were lots of really fun and experimental talks and workshops (I stayed up til 1am one night, so it must have been good!). Some of the platforms used were not as slick as at other events, but it had a wonderful feeling of being on the edge of new frontiers that totally made up for that.

Regular meetups and other virtual events

These are the regular virtual events I have been attending through the year where I have found interesting discussion, supportive community and continuing conversation in Slack or Discord communities. These have been the real highlights of my 2020.

CodeBookClub

The CodeBookClub actually started as a virtual book club back in January, before we all knew that 2020 was going to be defined by the pandemic. We have been reading the YDKJS series and doing CodeWars challenges in alternate weeks. I certainly feel that it has leveled up my knowledge of JavaScript and I have found the experience of learning together in an non-institutional group setting to be excellent.

Find out more

Virtual Coffee

I have been attending Virtual Coffee pretty much every week since May 14, and have learned a lot from a lot of people in the community. Through community initiatives such as the VC Hacktoberfest Initiative and the December monthly challenge I have made the jump into serious open source contributions and had opportunities to learn new skills while doing something real with them, which is my preferred way to learn. In addition to the regular meetups there are also brownbag sessions and office hours, which provide excellent support for me to grow my skills and experience. There is also lots of fun at Virtual Coffee, such as sharing fun facts at the regular meetups, and community members getting together to play games or read books.

Website

Interintellect Salons

Interintellect salons are amazing three hour events where people from a wide range of intellectual and professional backgrounds come together for fun and intellectually stimulating conversation across disciplinary boundaries, and share a wide range of personal and professional experiences. In addition to the main salons, there are also book clubs, talks, game nights and various fun activities in Discord. The II has provided an unrivaled opportunity to bridge the gap between my tech and non-tech interests.

Website

I Started Learning 11ty & Liquid, and Built a MVP Blog in the First Week

Dominic Duffin — Tue, 25 Aug 2020 18:57:03 +0000

I've been thinking about starting a self-hosted blog for a while. This summer I decided to do it. The first step was to decide what tech to use to build it. I wanted to use it as a project with which to learn something new. I started using Gatsby and went through some tutorials and built most of the site, then decided last week to switch to 11ty and Liquid.

Having spent a while building a Gatsby site I then discarded, I wanted to get something up and running quickly once I'd decided on 11ty/Liquid. I also had other things on, so I gave some thought to what the MVP (Minimum Viable Product) would be.

Determining the MVP

Firstly, the bare minimum required to make a functioning blog. I decided I needed:

A system that turns markdown into an HTML page for each post.
A home page that displays recent posts in descending order.
A system to display some basic data about/with each post, such as date, title and some social media links.

Secondly, I wanted to get the aesthetic right from the beginning. It might not be perfect, but I wanted the design to be something I felt comfortable sharing with the world.

Thirdly, I wanted to have the metadata and graphics for icons and social media ready from the beginning. This meant:

Favicons
Open Graph and Twitter metadata for each post

Building the MVP

Turning markdown posts into blog pages turns out to be very easy with 11ty: it does it out of the box. Using a Liquid for loop to display a collection of posts on the home page was straightforward, but it took me a while to figure out reversing the order of the collection (it was very simple once I found the correct method). I had already worked out a frontmatter system for the Gatsby site, which could be adapted to suit the new 11ty site. This made the third bare minimum task easier because I already had a structure in mind, and I could adapt the markdown I'd already written to work with the new site.

Similarly, I was able to reuse a lot of the CSS I'd written for the Gatsby site, with just a few changes to element names and such like. The design therefore came together quickly, with just a few tweaks to suit the new architecture.

After that came the favicons and social metadata. I designed an icon and found a favicon generator that could generate all the necessary formats. I added all the metadata to the Liquid templates and designed a template cover image that I can adapt for each post.

I consciously decided not to include social sharing buttons as I don't want to expose all my readers to the tracking technology that is often included with these buttons. Instead, I have placed a link at the bottom of each post that can be copy-pasted. It remains to be seen whether this will be effective, but I hope so.

Issues that arose during development

To begin with I was running the 11ty compiler and then pushing the _site directory to the remote repo along with everything else. I soon realised I should add _site to the gitignore to stop this, but I then had to get the _site directory out of the remote. After puzzling over this for a while, I figured I would remove _site from the gitignore temporarily, delete it, push to the remote, then restore _site to the gitignore and push again. This worked.

Going forward

Building an MVP means leaving out desirable, but not critical, features, and there are things I want to add in the future.

At the moment, the excerpts on the home page are added manually to each post's frontmatter. I'd like to add a system that generates these automatically from the page content. I'd also like to add an about page, which will act as an alternative to the initial 'about' post when that is buried under newer posts.

In the future, I'd like to be able publish guest posts, and build out a profile page on the site for each author.

Once these things are in place, a navigation bar will also be needed to enable readers to access everything.

I did take some of these ambitions into account when building the MVP, so as to ease future work. For example, post frontmatter includes the author name, even though for now all posts are by me. Nevertheless, it is inevitable that parts of the MVP will need to be reworked as I add new features.

Some resources I found useful

Let's Learn Eleventy!, by Jason Lengstorf on the Netlfiy blog www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty/

11ty docs www.11ty.dev/docs/

Liquid docs shopify.github.io/liquid/

How many favicons should you have in your site?, by Jecelyn Yeen jec.fyi/blog/favicons-manifest

Conclusion

I was pleasantly surprised by how easy I found it to get into 11ty and Liquid, with the bulk of it being intuitively similar to standard HTML and Markdown. I am also pleased with how little code is required to build a functioning MVP. Building with 11ty and Liquid was altogether a good experience.

Finally

If you want to check out what I built, it can be found at sparksandvertices.uk

CSS Resources from my Bookmarks

Dominic Duffin — Wed, 03 Apr 2019 12:47:44 +0000

I've got a lot of bookmarks! So I'm going to share some of them on here! This may become a (occasional) series 😊

Text formatting

Deep dive CSS: font-metrics, line-height and vertical-align by Vincent De Oliveira

Alignment

Box Alignment Cheatsheet by Rachel Andrew

Animation

How to Use CSS Variables for Animation by Dennis Gaebel
Easy CSS Watermelon Slice animation tutorial by Muna Mohammed

Grid

Basic Concepts of grid layout - MDN
Grid fallbacks and overrides by Rachel Andrew
CSS Grid Layout and Progressive Enhancement - MDN
GRID: A simple visual cheatsheet for CSS Grid Layout
Grid by Example: A collection of Grid resources maintained by Rachel Andrew

Flexbox

Tweet by Ali Spittel on centering with Flexbox

Shapes

Experimental layouts with CSS Shapes and clip-path by Michelle Barker
CSS Shapes Resources by Kristopher Van Sant

Units

The new (and old) CSS units you've never heard about by Massimo Artizzu

Specificity

CSS Specifity by Emma Wedekind
CSS specifity and the cascade by Andy Bell

Responsive design

Using Media Queries For Responsive Design In 2018 by Rachel Andrew
Creating Responsive Diamonds Using Viewport Units by Meghan Sterling

General

CSS Tricks: css-tricks.com
CSS: From Zero to Hero by Ali Spittel
Things nobody ever taught me about CSS by Charlie Gerard
CSS Reference - MDN

Other collections of resources

Resources to Help You Create CSS Images! by Victoria Bergquist

I'm Dominic, and this is how I will support women devs.

Dominic Duffin — Fri, 08 Mar 2019 14:36:19 +0000

How I will advocate for gender equality

There are two strands to my vision for supporting gender equality in tech:

Building inclusive communities

We need to build, and grow, communities that can support women in tech. Communities are an important part of people's professional development, whether for learning skills, accessing opportunities or gaining a feeling of belonging. Sadly, there appears to be a lot of tech communities out there that are unwelcoming or actively hostile to women in tech. There are also many communities that are supportive to women in tech. I want to see the inclusive, supportive, communities grow to encompass the majority of the tech community as a whole. I hope that this will cause the misogyny and harassment that appears to be tolerated in parts of tech to become socially unacceptable across 99% of the tech world.
I will work to build and foster inclusive communities that can support women in tech.

Supporting companies with woman founders and/or good gender balance in their development teams

I believe we all have the power to help shape the world through the decisions we make all the time about what to buy, what services to use, which tool to use for a job, etc. Ultimately the direction of the world is determined by the sum total of the decisions we all make.
I will do my best to support women in tech through my decisions about the services I use.

Finally

I believe if enough people do these things, it is within our reach to build a tech industry that looks very different from today's, where the values that support gender inequality (and other inclusivity objectives) are found in all the dominant companies and communities.
I will do what is within my power to get us there, and I hope you will too.

How I Approach a Creative Coding Project

Dominic Duffin — Fri, 01 Jun 2018 16:08:59 +0000

In this post I aim to demonstrate how I approach a creative coding project, using my contribution to this months Creative Coding Club theme (Spring into Action) as an example.

Before writing any code, I find it helpful to sketch out what I want to do on a piece of graph paper. Having the sketch in front of me makes it easier to work out what code to write. I draw the sketch using squares, rectangles, circles and ovals, angled as needed, which are the shapes I will code (I could use others, but I like to keep it simple, and I haven’t yet found those four insufficient). I create more complex shapes by combining shapes in various ways. I normally draw the shapes in pencil and then use coloured pens to highlight each layer, with each colour corresponding to a z-index and background colour. Oh, and I often cross stuff out and start again because it doesn’t end up looking the way I want, as you can see from the picture below:

Now that I have sketches I’m satisfied with for the cloud, sun, rain and lightning, I’m ready to write some code. From the sketch I can see most of what I need to write. Each square on the graph paper equals a set number of pixels on the screen, this time I’ve chosen 10 pixels, but I vary that from project to project. The colour coded highlighting tells me what z-index each element should have. I create curved elements using CSS border-radius, and angled elements using CSS transform. I’m not afraid to deviate from the sketch if it doesn’t look right once coded, and this time I adapted the lightning sketch as I coded.

The HTML code is just a long series of divs (semantic elements are not much use in this type of project).

<div class="cloudRectangle"></div>
<div class="cloudCircle" id="leftCloudCircle"></div>
<div class="cloudCircle" id="topCloudCircle"></div>
<div class="cloudCircle" id="rightCloudCircle"></div>
<div class="sunCentre"></div>
<div class="sunRay" id="sunRayNorthNorthWest"></div>
<div class="sunRay" id="sunRayNorth"></div>
<div class="sunRay" id="sunRayNorthNorthEast"></div>
<div class="sunRay" id="sunRayEastNorthEast"></div>
<div class="sunRay" id="sunRayEast"></div>
<div class="sunRay" id="sunRayEastSouthEast"></div>
<div class="rain" id="rainTopLeft"></div>
<div class="rain" id="rainTopCentre"></div>
<div class="rain" id="rainTopRight"></div>
<div class="rain" id="rainMiddleLeft"></div>
<div class="rain" id="rainMiddleCentre"></div>
<div class="rain" id="rainMiddleRight"></div>
<div class="rain" id="rainBottomLeft"></div>
<div class="rain" id="rainBottomCentre"></div>
<div class="rain" id="rainBottomRight"></div>
<div class="lightningYellow" id="lightningYellowMain"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourNorthEast"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthWest"></div>
<div class="lightningBodyColour" id="lightningBodyColourSouthEast"></div>
<div class="lightningYellow" id="lightningYellowTopStrip"></div>
<div class="lightningYellow" id="lightningYellowMiddleStrip"></div>
<div class="lightningYellow" id="lightningYellowBottomStrip"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniRectangle"></div>
<div class="lightningBodyColour" id="lightningBodyColourLeftMiniSquare"></div>
<div class="lightningBodyColour" id="lightningBodyColourRightMiniSquare"></div>

<div class="ground"></div>

<div class="flowerStem" id="flower1Stem"></div>
<div class="flowerPetalNorthWest" id="flower1PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower1PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower1PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower1PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower1YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower1OrangeCentre"></div>

<div class="flowerStem" id="flower2Stem"></div>
<div class="flowerPetalNorthWest" id="flower2PetalNorthWest"></div>
<div class="flowerPetalNorthEast" id="flower2PetalNorthEast"></div>
<div class="flowerPetalSouthWest" id="flower2PetalSouthWest"></div>
<div class="flowerPetalSouthEast" id="flower2PetalSouthEast"></div>
<div class="flowerYellowCentre" id="flower2YellowCentre"></div>
<div class="flowerOrangeCentre" id="flower2OrangeCentre"></div>

I use descriptive id and class names so that I can easily see what each bit of the code is for. I often have to make decisions about how to assign the ids and classes. For example, I could’ve chosen to use one class for all the parts of the cloud, or equally to have used a different class for the larger circle than the smaller ones.

The CSS has a lot more lines than the HTML. First of all, I just write the CSS for the basic visuals. I will add more code for the animations later. I won’t show you the entire CSS here, but here is an example for the cloud:

.cloudRectangle {
  position: absolute;
  background-color: #cccccc;
  width: 120px;
  height: 100px;
  left: 750px;
  top: 150px;
  z-index: 3;
}

.cloudCircle {
  position: absolute;
  background-color: #cccccc;
  border-radius: 50%;
  z-index: 3;
}

#leftCloudCircle {
  width: 100px;
  height: 100px;
  left: 700px;
  top: 150px;
}

#topCloudCircle {
  width: 120px;
  height: 120px;
  left: 750px;
  top: 90px;
}

#rightCloudCircle {
  width: 100px;
  height: 100px;
  left: 820px;
  top: 150px;
}

Now that I’ve got the basic visuals right, it’s time to start coding the animations. In this project I’m using CSS keyframes animations, so I add the animation properties to the CSS for the elements I want to animate, and specify the animation using a keyframes @ rule. As before, I’ll just show you a bit of the animation code, this time for the sky:

@keyframes skyAnimation {
  25% {
    background-color: #aaccff;
  }
  50% {
    background-color: #ffffff;
  }
  75% {
    background-color: #dddddd;
  }
}

The sky is actually the page background, so the animation property needs to be added to body:

body {
  background-color: #ffffff;
  animation: skyAnimation 60s infinite;
}

Now that I’ve got the animations working satisfactorily, the project is complete!

You can look at the full code and see the finished project on CodePen:

Introduction: I'm Dominic Duffin

Dominic Duffin — Tue, 11 Jul 2017 09:32:54 +0000

Hello Dev.to()

I currently code in HTML/CSS/JS - still learning these but plan to learn others. I did do a bit of Java a little while ago.

I'm starting the main part of my degree at the Open University in October, which will be an Open Degree in which I plan to focus on computing, politics and economics.

You can find me on:

Twitter as dominicduffin1
CodePen as dominicduffin1

There's not much on my CodePen yet - I've just set it up.

I live in the UK.

Pleased to be part of Dev.to()