Add the Game Gig event page #113

moosichu · 2017-11-05T17:32:08Z

Adds a page for the Game Gig event. Still massively in progress!!!

Current state:

Fixes #113 and #135.

moosichu · 2017-11-05T17:33:35Z

There is currently no styling or a bunch of other features. 😭

However, the skeleton of an awesome event page is there!

I have followed the general layout of the one from last year - https://gamegig.hackersatcambridge.com/, but have tried to HaCTML it. 😸

The JavaScript that updates instances of CurrentTime work on an id basis, instead of a class basis.

Add a mechanism to include custom css for specific events.

…ite into feature/game-gig

Done so that when we display them, order is preserved.

…ite into feature/game-gig

CountDownTimer now uses that instead of inline JavaScript in string literals.

jaredkhan

Could also use DictionaryLiteral to preserve the order

moosichu · 2017-11-07T08:49:44Z

@jaredkhan Didn't know about that, that is an option.

EDIT
@jaredkhan and I spoke about this in person, and came to the conclusion that using tuples is the way forward.

Pinpickle · 2017-11-28T18:15:19Z

@moosichu just pushed some changes for ya

moosichu · 2017-11-28T23:56:19Z

@Pinpickle @jaredkhan @CharlieCrisp @eliotlim @martinhartt I know feel that this is in a state to be merged! Please review ASAP!

jaredkhan · 2017-11-29T09:16:02Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.js

+    const endDate = {{endDate}};
+    const CountDownTimerId = {{id}};
+    const CountDownTimerPreId = {{preId}};
+    const beforeEventMessage = {{beforeEventMessage}}


Let's be consistent with semicolons

Worth noting that we're going semicolonless in our gulpfile, following this standard

(up for discussion on this, can probably wait until later)

jaredkhan

Had a pass over the code. Great work

Also, don't need gamegig3000-logo.png anymore

jaredkhan · 2017-11-29T09:20:13Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.swift

+import Foundation
+
+struct CountDownTimer : Nodeable {
+  let startDate : Date


To me this reads like the date that the timer starts counting down. If this is specific to events, maybe we could use some /// doc comments on this struct

jaredkhan · 2017-11-29T09:23:10Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.swift

+  let endDate : Date
+  let id = "CountDownTimer\(UUID().description)"
+
+  let preId = "CountDownTimerPre\(UUID().description)" // the id of the countdown message


Don't love that we are changing the ID of an element. I expect we can get away without this

I have created issue #170 for this, I think fixing this is low priority.

jaredkhan · 2017-11-29T09:24:20Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.swift

+        ].containing("YOU SHOULD SEE THE TIME REMAINING HERE"),
+        Script(
+          file: "Hackathons/CountDownTimer.js",
+          escapes: [


Not sure 'escapes' is the right word to be using here. 'context' is a common alternative.

How come? I think 'context' is more confusing than 'escapes'.

The current system is a half-way house anyway tbh.

What about 'definitions'?

Good shout.

jaredkhan · 2017-11-29T09:27:16Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/GameGig2017/GameGig2017.swift

+    ("Web Dev with Mozilla", "https://globalgamejam.org/news/dev-web-mozilla")
+  ]
+
+  let GoboLogo = El.A[Attr.href => "http://studiogobo.com/",


We should lowercase variables/constants

jaredkhan · 2017-11-29T09:29:36Z

Sources/HaCWebsiteLib/ViewModels/Hackathons/GameGig2017/GameGig2017.swift

+// swiftlint:disable line_length
+
+
+extension String {


Nice! We could move this out to somewhere else. Files for extensions conventionally take the form: e.g. String+idMangle.swift

Created issue #171 for this.

jaredkhan · 2017-11-29T09:58:29Z

Sources/HaCWebsiteLib/ViewModels/Script.swift

+import DotEnv
+import Foundation
+
+protocol JavaScriptable {


This could definitely use a doc comment

jaredkhan · 2017-11-29T10:01:21Z

Sources/HaCWebsiteLib/ViewModels/Script.swift

+/**
+ * This class is used in order load front-end scripts from a file relative to the current path for browsing pleasure.
+ *
+ * It depends on the build system loading files into the 'Data' folder before running.


Your right, that has been changed! Will fix. Good catch.

Still this @moosichu

jaredkhan · 2017-11-29T10:03:45Z

Sources/HaCWebsiteLib/routes.swift

@@ -17,7 +17,7 @@ func getWebsiteRouter() -> Router {
    "/git": "https://github.com/hackersatcambridge/git-workshop-2017",
    "/binary-exploitation": "https://github.com/hackersatcambridge/binary-exploitation/blob/master/handout.md",
    "/make-games-with-love": "https://github.com/hackersatcambridge/make-games-with-love",
-    "/gamegig": "https://www.facebook.com/events/124219834921040/"
+    "/gamegig": "/event/2017/gamegig3000"


Why the year if we also have a version number in the name?

jaredkhan · 2017-11-29T10:04:57Z

gulpfile.js

@@ -40,10 +40,13 @@ function buildStatic () {
          main: './main.js',
          // Styles entry points
          'styles/main': './styles/main.styl',
+          // TODO: Ideally we want this to be a wildcard match of some form
+          // so we can automatically pick-up new custom styles.
+          'styles/custom/gamegig2017': './styles/custom/gamegig2017.styl'


Could do with an issue for this

Is there a GitHub thing called a debate? ;)

Created #173 for this.

jaredkhan · 2017-11-29T10:09:11Z

static/src/styles/custom/gamegig2017.styl

+a {
+  text-decoration: none;
+  padding: none;
+  --link-color: #fd7cb3;


What's this syntax?

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

CSS Variables.

The hot new thing ;)

Is it worth using these over ~~less~~ stylus variables?

I honestly don't have an opinion either way, I think it's probably worth discussing with @Pinpickle .

I'm just not knowledgable enough.

We got a bunch of tradeoffs here!

For CSS Custom Properties:

An official thing, so people get to learn something applicable for every project as opposed to those with preprocessors

You can set them on a per selector basis. On one link I can set --link-color to one thing, and on another I can set it to something else and they won't conflict.

Can set them dynamically in JS or CSS pseudo-classes (like :hover) and changes will propagate (+++)

You can give them values before or after you use them, putting less importance on file ordering

Against:

Browser support is getting better, but not fully there: https://caniuse.com/#feat=css-variables (notable example is IE 11 but I think this is fine for our userbase)

We now have another decision to make when making a variable: Should this be in Stylus or in CSS?

Fair bit more verbose than Stylus

Have to go "all in" on CSS when using them. So we can't use Stylus operators (have to use calc) or colour functions (these are coming to CSS but are basically a dream at the moment)

Can we please come to a conclusion on what to do in this instance? The debate is interesting, but I want to get this live ASAP.

Probably best to stick with Stylus for now to avoid changing things?

Currently I'm using CSS vars I think, so change those to stylus ones yes?

That's the idea! To clarify I meant avoiding changing the convention in our codebase

moosichu · 2017-11-29T14:05:17Z

@jaredkhan All your concerns should be addressed now. :)

moosichu · 2017-11-29T17:30:02Z

@jaredkhan It should all really be addressed now! I would really like this live today, so that the banner is on the site as soon as this workshop is done.

The comments were outdated and so that part has been removed.

jaredkhan

Let's gig

moosichu added 2 commits November 5, 2017 12:28

Add a development route for the Game Gig page

72320db

Add Game Gig event content

7a65e86

moosichu added backend enhancement frontend in progress labels Nov 5, 2017

moosichu added 4 commits November 5, 2017 21:11

Move reusable components for hackathons to place that make sense

b7e742c

Make the clock actually functional!

293b6bc

Make CurrentTime work on an id basis

d2b7d1e

The JavaScript that updates instances of CurrentTime work on an id basis, instead of a class basis.

Add custom CSS mechanism

c7b6695

Add a mechanism to include custom css for specific events.

moosichu force-pushed the feature/game-gig branch from fa1f6cf to c7b6695 Compare November 6, 2017 14:18

moosichu added 10 commits November 6, 2017 14:18

Merge branch 'master' of ssh://github.com/hackersatcambridge/hac-webs…

dca8442

…ite into feature/game-gig

Replace dictionaries with lists of tuples

74cd5ee

Done so that when we display them, order is preserved.

Add a functional countdown timer

a82c407

Merge branch 'master' of ssh://github.com/hackersatcambridge/hac-webs…

c63a609

…ite into feature/game-gig

Make PostCard Nodeable

4774a7a

Update code to remove explicit .node cases

020ca52

Implement JavaScript templating in Script.swift

d675e1f

CountDownTimer now uses that instead of inline JavaScript in string literals.

Refactor the twitter feed

f47dec3

Make CurrentTime.swift use CurrentTime.js

6f72c79

Aim to ensure Date behaviour is correct

45d5ce5

moosichu mentioned this pull request Nov 6, 2017

Properly escape strings that are encoded to JavaScript #117

Open

moosichu added 5 commits November 6, 2017 22:18

Clearly label JavaScript string escape location

502bfc6

Remove hardcoded date objects in CountDownTimer.swift

28c410b

Make CountDownTimer messages configurable

9a621c9

Make the event scheduler use Swift Date objects

129a222

Cleanup Hackathon protocol

7aa6208

jaredkhan reviewed Nov 7, 2017

View reviewed changes

moosichu added 2 commits November 28, 2017 23:50

Update GameGig event feature and make it point to live event URL

30c1ff3

Merge branch 'master' into feature/game-gig

bc9c90c

moosichu removed the in progress label Nov 28, 2017

jaredkhan reviewed Nov 29, 2017

View reviewed changes

moosichu and others added 3 commits November 29, 2017 09:22

Make semicolons in CountDownTimer.js consistent

9ad9790

Make semicolons in CurrentTime.js consistent

403798b

Remove old images

a2bd02d

jaredkhan reviewed Nov 29, 2017

View reviewed changes

moosichu added 6 commits November 29, 2017 13:26

Merge branch 'master' into feature/game-gig

aca7ecb

Comment on CountDownTimer struct

a7931aa

Lowercase variable names

e4e3bfd

Remove traces of twitter feed from game gig

d4d75a4

Link to our custom code of conduct

3daa214

Improve function for getting gameGigDates

8eb2d00

moosichu mentioned this pull request Nov 29, 2017

Investigate how we should handle custom stylesheets #173

Open

moosichu added 4 commits November 29, 2017 14:18

Add poster link back to the event

68bd026

Replace CSS vars with stylus ones

757c35c

Rename escapes to definitions

100bc45

Merge branch 'master' into feature/game-gig

8e41e46

moosichu and others added 2 commits November 29, 2017 17:44

Add comment to JavaScript protocol

c86d65e

Fix error in comments

5ec4388

The comments were outdated and so that part has been removed.

moosichu force-pushed the feature/game-gig branch from 467f564 to 5ec4388 Compare November 29, 2017 18:10

Make links target blank

d31a02e

jaredkhan approved these changes Nov 29, 2017

View reviewed changes

jaredkhan merged commit 4b1848d into hackersatcambridge:master Nov 29, 2017

moosichu mentioned this pull request Dec 5, 2017

Add styling to game gig page #135

Closed

Add the Game Gig event page #113

Add the Game Gig event page #113

Conversation

moosichu commented Nov 5, 2017 • edited Loading

moosichu commented Nov 5, 2017

jaredkhan left a comment

Choose a reason for hiding this comment

moosichu commented Nov 7, 2017 • edited Loading

Pinpickle commented Nov 28, 2017

moosichu commented Nov 28, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredkhan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moosichu Nov 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredkhan Nov 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moosichu commented Nov 29, 2017

moosichu commented Nov 29, 2017

jaredkhan left a comment

Choose a reason for hiding this comment

moosichu commented Nov 5, 2017 •

edited

Loading

moosichu commented Nov 7, 2017 •

edited

Loading

moosichu Nov 29, 2017 •

edited

Loading

jaredkhan Nov 29, 2017 •

edited

Loading