Post Your Site / WAYWO - Developers

For a web development forum there seems to be quite a bit of a lack of web development going on here. Let's change that. Two simple questions: 1) What is your personal website address or what are you currently working on? 2) What did you use to make it? I'll start first: 1) https://www.benbristow.co.uk (Source) 2) Jekyll (Ruby powered Static site generator), Webpack (with ES6/Babel), Nunjucks for templating of dynamic content and PHP7/Composer for anything that needs to talk to the outside world (Instagram posts, LastFM history and contact form). Hosted with DigitalOcean.

1) My website that is still being worked on locally so it is not quite available online yet. The 503 page that you see does not reflect how the final site will look, I just wanted a fancy landing page. I'm still trying to figure out an overall design for the rest of the site. 2) It runs on PHP 7.2.9 on Ubuntu 16.04 via DigialOcean. Static assets (SASS to CSS, optimizing images, etc) are processed with a combination of Gulp and Webpack. The frontend uses the Bootstrap framework but heavily modified.

1) Richardpetrosino.com 2) It's hosted by Arvixe (desperately looking to change this, recommendations?), uses PHP 5.6 on some random and old ass Red Hat distro. Front-end was hand coded with just HTML, CSS, and jQuery. HOWEVER I'm learning React, and currently working with the Spotify API to try to generate a song (from your saved songs) based off the API's audio features: https://files.facepunch.com/forum/upload/188/35f6d5f2-c2ff-4074-baeb-18f4750fccd6/Screen Shot 2018-09-12 at 12.50.20 PM.png I have absolutely no idea how to transfer any of this to a remote host!

I can recommend DigitalOcean. Their servers are great and they've loads of locations so you can find one close to you. Pricing is very basic compared to other 'cloud' providers like AWS. You pay for what you use - by the hour or just a monthly fee (depending on how long you keep the box running for). The bandwidth is generous too - I think it's about 2TB as standard. Very reasonably priced and good networking speeds. I use them myself and @depthbomb seems to be using them too from my post below. If you're a student or still have access to your student email address (.ac.uk/.edu) you can get $50 worth of credit for free though the Student Developer Pack programme (also AWS credit if you want to experiment with that - but that can be pricey) which is enough for a box for at least a few months, maybe even longer if you choose a lower-spec one.

The pricing seems outrageously high-- I'm currently getting unlimited diskspace from Arvixe for 150 biennially, or about 6.50 a month. It looks like, with Digital Ocean, 25gb of disk space is 5.00 a month, which seems much much worse, especially since I'm already at 200mb on disk. Am I reading these prices wrong?

There’s no such thing as unlimited disk space. There’s probably some terms and conditions somewhere saying if you use this much we’ll be unhappy. It’s just marketing spiel. And what are you talking about? You’ll still have 127 times the storage left after your 200mb! Ideally you wouldn’t be storing many files on your server anyway and as per guidelines of the 12 factor web application you’d be using a service like Amazon S3 to store files which is as close to unlimited you’ll actually get, and very cheap.

digital ocean is really cool

I have been working on a custom built forum for my anime figure enthusiast forum: Powered by a django backend with vue 3 cli on the frontend, and bulma, users can link their myfigurecollection profiles and their figure collections are synced: https://i.imgur.com/ZXr75Vp.jpg https://i.imgur.com/VB6MXCm.jpg https://i.imgur.com/jMb43p4.jpg

https://loyaltyrpg.com Is made by me in PHP and for HTML template i use bulma , i really like the website style of facepunch projects.

https://files.facepunch.com/forum/upload/177444/9d56f98b-ac95-46d7-a18b-6d29a73e23dc/Screenshot_2018-09-13 r6-operatoricons.png http://marcopixel.eu/r6-operatoricons/ It's a small companion website for the project i'm working on, which is essentialy to host/preview the icons made in Illustrator. Works pretty well with no big issues Built on Gatsby (Static-site generator for React) using the Typescript Example, hosting everything on Github Pages

1) Not public yet 2) A basic WIP, social-network that has CRUD & ACL functionalites. Uses Vue.js & Bootstrap for the frontend, then Laravel for the backend. Users have the ability to do certian actions depending on what role they have. https://i.imgur.com/6dzdobm.png https://i.imgur.com/SiDjTrk.png https://i.imgur.com/phkLjnf.png https://i.imgur.com/SR6Im2l.png

Looks good but seems like a bit too much style over substance. A lot of wasted space on those pages for very little content. Perhaps would look better with less 'ipsum' content?

1) Jonathan Droogh | Portfolio Other websites: Clockwork Constructors CW Doc Bare Backups 2) HTML, CSS, PHP, and Bootstrap. This is what I use for most of my websites.

Thanks, and yea there is still a lot of empty space. I plan to add more features like categories, tags, like/dislike, follow users, and all that stuff to fill empy space on the pages. Thanks for your suggestion!

A nice list of projects you've got going there. I can't really judge too much because I use Bootstrap extensively, but your main portfolio site does scream 'Default Bootstrap' the moment you look at it. Might not be a great thing if you're applying for jobs as any web developer will see that too. Also on your 'Projects' page perhaps add some margin/padding between each item? They seem quite close together and to my eye looks quite cluttered. Perhaps make use of the Bootstrap Card component?

Current main project: https://eventvods.com/ Currently working on redesigning video player + clarifying voting. https://i.imgur.com/PwXcqh8.jpg https://i.imgur.com/s0ayeZR.png

Haha yeah there's no doubt that it scream default Bootstrap. I just wanted to throw something together that provided more content because my website beforehand just had my name with random bootstrap buttons as links. It looked this (Wayback Machine): Jonathan Droogh | Home Thanks for the suggestions btw, I wasn't really a fan of how the Projects page turned out either. I think Cards would work nicely in this case.

That's already looking much better! More breathing room. Not really sure there's much extra worth adding, it's simple and to the point.

Currently still in development. A WordPress theme for a client - an index of Hummus restaurants in Israel and the West Bank. https://files.facepunch.com/forum/upload/144793/9a4e6bcd-8dae-4e0c-8db1-0720a97ad993/_C__wamp_0-Archive_hummus_index.html(Desktop 1080p).png

Sweet!! I went to Israel a couple months ago and it was AWESOME!

Would appreciate some feedback on this design. https://i.imgur.com/xPoD0SY.png

Looks good but I'm a sucker for 16px paddings so here's an edit I made in gimp that does that. Not sure about adding it to the 'Notification' title but IMO the padding around the notification itself looks better this way. https://files.facepunch.com/forum/upload/231991/f192e57a-d03c-47dc-87ca-cc742b5885b1/image.png

Thanks for the feedback! Not sure how you're calculating padding there, but I've tried increasing it in the demo (to 12px - we use multiples of 6px, and 18px seems overkill) https://i.imgur.com/AlLgGl1.png

I nicked it from some official material design document :v. Basically they (appear to *couch*) use paddings/margins that seem to be dividable by 8, so 8px, 16px, 24px etc. I find that using some kind of spacing that is dividable by some base number you decide on to be pretty good for creating shit that's (somewhat) pleasing to the eyes. But hopping to a 8px base while you're already working with 6px spacings doesn't seem like a good idea so using 12px seems reasonable. Only thing I'd do now is making the left/right padding around the bell icon the same, currently the left spacing is way larger then the right one, maybe try changing that to 24 (which his dividable by 6).

Haha no I meant - my actual version using 12px looks like it has more padding than your 16px mockup, so I was wondering if there was a difference in how you were calculating it. Great feedback, thank you

1) Reager.org Only other site worth mentioning as well is HoroBox 2) Built using the typical bullshittery of abusing CSS and the Audio API with a tiny bit of PHP to just randomise stuff on the serverside (video etc, could do this on the client by I'm lazy, the JS is already pretty heavy on the browser anyway) other than that its pretty much all controlled by JS to do the whole visualizer via the Audio API. The second is just a reskinned pomf clone with way more effort put into its appearance than needed. Haven't really done anything major in the last half of the year, mostly just toying around with with concepts that go nowhere.

Background on reager.org gets cut off on my 1440p monitor. ez fix is to set background-size: 100% 1080px; on #fullsize-overlay. Stretches it a bit but still looks good. Also the facepunch link is dead cus of forum change and perhaps all those links should have a target="_blank" on them to open everything up in a new tab. But besides me being unable to control my urges to fix things, cool stuff, really digging the design (and music taste).

Completely overlooked that image issue, should really have tested it back when I made it by spanning the site over my three screens to check if it worked on ultrawides/anything not x1080. Laziness to blame there.

I'm not a webdev, but years ago I said hover should be avoided because of touch, and got an angry reply with this link: http://www.w3.org/TR/pointerevents/ I just wanted to make sure I got this right: they were making an argument about web standards, and not user experience—mouseover is still bad for mobile.

See section 11 in that. The events should be mapped appropriately, but only on certain devices (i.e. not of there's alsoa mouse). From a UX perspective, you can use hovering, but you have to make sure touching/clicking will work as fallback (and won't navigate away instead, for example).