Swag-for-dev: Design the website

[swapagarwal]

We shall be hosting this on either devswag.xyz or devswag.io domain.

(Moving this from #43 to its separate thread)
What extra features would you like to see on the website?

One example I can think of is the ability to filter swag opportunities by the level of difficulty. Feel free to share more!

Also, it'd be great if someone volunteers to get the initial design of the website in place. Cheers!

[zac-garby]

I’d like to design the website :)

[cozyplanes]

io seems easier to remember

[swapagarwal]

@zac-garby Awesome! How about you take the lead on this? Let's keep it minimalistic and get it out before Hacktoberfest. 😇

[zac-garby]

Cool! I'll start it a bit later today when I get home. Do we want it to automatically fetch the swag opportunities from the repo?

[vickrantearnest]

That would be ideal.

On Thu, Sep 20, 2018 at 1:51 PM Vickrant Earnest [e-mail]
wrote:

>
>

On Thu, Sep 20, 2018 at 1:46 PM Zac Garby [e-mail]
wrote:

Cool! I'll start it a bit later today when I get home. Do we want it to
automatically fetch the swag opportunities from the repo?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/swapagarwal/swag-for-dev/issues/52#issuecomment-423087387,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKQXP09xEMKLcg7EcAwGlqcw12gGDWyIks5uc07YgaJpZM4Wxkcr
.

[swapagarwal]

@zac-garby I can export the list in json format if that helps?
Something like:

{
    "name": "Alexa",
    "difficulty": "hard",
    "description": "Publish a skill, get a hoodie (varies by country) and an Echo Spot (if 1,000 unique customers use your skill in its first 30 days of publication)!",
    "reference": "https://developer.amazon.com/alexa-skills-kit/alexa-developer-skill-promotion",
    "image": "https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/dex/alexa/alexa-skills-kit/ASM0761-Dev-LP-Goodiepage-UK-March._CB501585903_.png"
}

[zac-garby]

@swapagarwal Yeah, that would be very useful - thanks

[swapagarwal]

Your wish, is my command: https://github.com/swapagarwal/swag-for-dev/blob/master/data.json
(The website can load data from https://raw.githubusercontent.com/swapagarwal/swag-for-dev/master/data.json)

[plibither8]

Hey @swapagarwal @zac-garby, if possible, I'd like to help too :)

Also, I vote for .xyz

[swapagarwal]

@plibither8 Sure! It'd be great if you can sketch up a quick mock and share the design that's on your mind.

[plibither8]

Sure, I'll start work late at night. I'll try to share it by tonight (IST) itself

[zac-garby]

@swapagarwal I've made a quick design of what the site might look like. I was thinking for the colour scheme we could keep it really simple, maybe just black and white.

Let me know what you think :)

[JosueDanielBust]

I think .io is more easy to remember. I vote for use the .io

[plibither8]

@zac-garby Are you going to use PaperCSS?

[swapagarwal]

@zac-garby Black and white looks good for v1.
👍 for the minimalistic design.
Let's wait for @plibither8 to pitch in, and then we can start!

[swapagarwal]

And @plibither8 is here! 🎉

[zac-garby]

@plibither8 Never heard of it, but just looked it up. Probably not - it just looks like that because of the program I used to design it. I probably should've been more clear

[zac-garby]

I'm wondering whether to use some framework like Vue or React or something, or just plain HTML, JS, CSS. On the one hand, it will be a lot easier using a framework, but the page will take longer to load. What do you think?

[plibither8]

@swapagarwal My idea was more or less what @zac-garby has suggested: minimalistic and clean. I would probably lose out the borders, make the name more prominent and above the image, and add a separate line for the link to quickly access the details and reference. @zac-garby I like your way to mark the difficulty - with the colours.

[zac-garby]

@plibither8 Definitely, that's a good point about a more prominent name. Which borders would you get rid of?

[swapagarwal]

I don't suspect the page will take a long time to load (irrespective of framework) as there is very limited data as of now! So it essentially boils down to your comfort levels: use whatever you're comfortable in! (unless, of course, you want to use this as an opportunity to try out a new framework! 😉)

[plibither8]

@zac-garby I don't think it will be that much of a problem to use vanilla JS, since it's mostly a static website and our key focus is minimalism. Fetching the data from the JSON file and mapping over its elements to create the HTML divs for each swag item should be fairly simple.

[plibither8]

@zac-garby I was referring to the borders around the entire swag item

[zac-garby]

I've done a little bit of Vue before, and I reckon that might be a good option. The main thing I'm thinking of here is the sorting/filtering when the options are changed, which is a perfect use of Vue. It probably would be slightly easier to just do plain JS though, because it saves having to set up a whole build system and all that stuff.

[swapagarwal]

@zac-garby I run a local Vue community, so I can help in setting up the build process. 😅
@plibither8 Vanilla / Vue?

[plibither8]

Personally, I am more comfortable working with vanilla, but I have done one project using Vue, so its not alien to me.

[zac-garby]

Okay, I say we should use vanilla just because it's a lot simpler

[swapagarwal]

Great! How do you want to collaborate on this?

[zac-garby]

Here's an updated design with the changes you suggested.

[zac-garby]

I'm not really sure, I don't do a huge amount of projects with other people. How does it usually work?

[plibither8]

@zac-garby it looks great

[zac-garby]

@plibither8 Thanks :) Oh, and any idea of what we should write under the title?

[swapagarwal]

We usually divide into short tasks and then assign amongst ourselves.

[plibither8]

@swapagarwal Maybe create a new branch (something akin to gh-pages) where we can start work on the website. Later you can merge the branch to master and deploy using (I recommend) Netlify

[swapagarwal]

@zac-garby I'll work on the text. You can use Lorem Ipsum for now.

[swapagarwal]

Netlify is ❤️

[plibither8]

@plibither8 Thanks :) Oh, and any idea of what we should write under the title?

How about the type of swag we receive from them. Eg: Stickers, T-Shirts

[zac-garby]

Netlify looks awesome!

[swapagarwal]

I've added you two as collaborators: https://github.com/swapagarwal/swag-for-dev/invitations
You can work on the website branch (please don't touch the master branch 😇), which I've hooked up with netlify at https://peaceful-chandrasekhar-efde8e.netlify.com. Data can be pulled from https://peaceful-chandrasekhar-efde8e.netlify.com/data.json
So basically any changes you push to website branch will be immediately available on Netlify. Cheers!

[zac-garby]

Sounds good. How are we going to divide the tasks up?

[swapagarwal]

@plibither8 Any suggestions?

[plibither8]

This is the sort of mockup I was thinking of.

[swapagarwal]

I see the following tasks:

1. CSS (layout) of a card
2. Remaining CSS (and HTML) of the website
3. Fetch data dynamically
4. Apply filters / sorting logic

[zac-garby]

I like it :) Not too keen on the box shadows around the images though

[zac-garby]

Yeah that works. I'd like to do 3 and 4 if possible, they sound fun

[swapagarwal]

@plibither8 Are you comfortable with CSS?

[plibither8]

Sure! I have a few suggestions if it's fine.
I am more comfortable with using Pug and Stylus for HTML and CSS respectively, for which I usually use Gulp as the task runner to compile the files. For JS, I write in ES6 and transpile the code to browser standards using Babel. Is that okay?

[zac-garby]

Yeah, that's a good idea

[plibither8]

Great. I'll set up the gulpfile and npm dependancies then.

[zac-garby]

Cool, I'll get started on the data fetching

[remram44]

Isn't it easier to have CI in this repo build a static website, rather than have a separate project that loads JSON from here and dynamically render for the user client-side? This seems unnecessarily inefficient.

Also :-1: on .io (again).

[swapagarwal]

@remram44 That is the plan once the other things are in place. 😅
The website isn't a separate project as you mentioned; and the final build will be statically served on the domain.

[plibither8]

@swapagarwal Please configure Netlify to deploy from the site/dist folder

[plibither8]

@zac-garby Take a look at the directory structure, I'll be following that, is it okay?

[zac-garby]

@plibither8 Looks good to me

[swapagarwal]

@plibither8 site/dist configured!