I've created a website that links for hip hop tracks every Friday. It's like a blog but with just four quality links.
I haven't coded in a while so decided to update my coding habits by building this. It's built on Foundation 6.
There's a lot of hip hop being published every day. Franklins will attempt to collect the four tracks of highest quality every week. It's not made to make money, just a place for people to discover four quality tracks every Friday.
It's an attempt to curate a list of a more personal touch of music, like a sub genre in itself, by being selected by taste.
If you feel you got the time, please check it out! Cheers!
Love it, love it, love it. Only request would be embeds for other streaming services (I don't use Spotify).
+1 would be cool to have a player in browser like this - https://521dimensions.com/open-source/amplitudejs
Well that looks nice! So happy to see something creative, meaning not religiously and blindly following every trend. I see them there, but at least I don't have to look at jazz shapes and pink/green ferns with playfair display over them.
Someone already got you feedback on your performance issues and also tried to sell the fixes to you. So here are some things you can do right now, to improve your codebase:
- all your images need an alt attribute
- the width-attributes of images only accepts pixel values. That means, that you can omit it. Just writing
- Don't use an image for text. The times where we need to embed images for texts is over. You can instead style everything with CSS, or if that seems to complicated for you, take the whole text, import into sketch or illustrator or any other application that supports svg and convert it into outlines and embed this svg. You can directly embed svg code into your html. Why is that better? SVG is almost always better, and you have a baked in accessibility win with the title and desc elements.
- now, your outline is unfortunately really messed up:
there is one very simple rule about headings - they have to start at
<h1>and you cannot skip their order. You cannot just use an
<h5>, if it is not preceded by
- in html, there are elements that do not wrap any content. Those "empty" elements consist of one self-closing tag. In XHTML we used to write
<img />in html5, you should write
<img>. Doing either way is actually fine, but I suggest you get used to doing it the "correct" way. One of those empty elements is the
<br>element. It causes a line break. You cannot wrap it around other content, as you did from line 64 to line 152.
- even thought it works, you should also try to avoid elements outside of the head. There are three ways to apply css: linked stylesheets, css in the style element in , or inline style. Try to avoid it outside of these three ways.
- you have a lot of duplicate id's in your svg code. If you find yourself reusing svg over and over, you should make use of
<use xlink:href="">. ID's can only occur once per dokument, and an element also can only have one ID. This is very important to respect.
- you have a lot of stylesheets in your document in general. You should try to avoid @import at all cost and instead concatenate your stylesheets locally into one stylesheet.
- you use roboto and lato from google fonts and you use one
<link>for each of them, which means, two requests. You should instead combine them:
.backgroundHerois a background image. This is ultimately up to you, to decide weather an imag should be a CSS background image or an
<img>, BUT, the people on the background-image are not just decoration, are they? They are part of the content. And if you want an image to be content, it needs to be
<img>. So you should try and make this layout with individual images. This is not very problematic to do. I suggest you try out CSS grid. You can still fallback with the background-image for browsers that don't support it.
- You load jquery twice, which is odd.
- I suggest you get rid of foundation entirely. Not because its bad, but because your layout is very basic and very easy to do. There is no reason to use foundation or any other framework, or animate.css for that matter - it just costs you a lot of bytes.
- you can however still use them, if you use the scss versions of those libraries. That way, you can only use what you need and you omit the rest.
Hey Thomas, I'm sincerely grateful for your feedback. Thank you very much! Great that you wrote such detailed feedback, I believe I can fix all of these now because of that, so thank you. I'll probably skip Foundation next time since there's literally hundreds/thousands lines of CSS I don't use, so that will be the next quest. (The outline image you attached doesn't load for me for some reason? But I suppose it's an SVG that hasn't scaled properly due to being borders, which I'll have to fix).
Thank you again Thomas, I'll look into all of this. Greatly appreciate it!
Damn Thomas, this is great. I read this all just for personal learning.
Thank you again Thomas for all these tips and recommendations. I've followed up some, some I'm still working on. Understand you're not perhaps interested in follow-up but just wanted to drop by my updates anyhow :)!
• Added alt on images
• Added a sitemap.xml and a robots.txt
• Replaced one image that was text, but the big one on "about" I still have problems since the div with card+text goes underneath the profile image, something I'm working on.
• I've used < h1 > to < h6 > just to make them go in different font-sizes, I might need to change this later but have to create a system that differens than when there's a title
• I'm trying to locate all the CSS I've used from the foundations.css template and insert into my own css-file to limit the css amounts. I've removed 2 CSS-files and now only use two (from previously 4). Removed about 800 lines of code.
• I've searched and replaced the @import that I could find
• Updated so that it said Roboto|Lato instead of two urls to each font family. Then realised I don't need Roboto so removed it altogether and only using Lato.
• I can't find why jquery is loaded twice, but if I remove the jquery from the far bottom, jquery doesn't load for me at all. I believe it's the import of the Newsletter section that loads jquery but can't figure out how/why
• Next project I'm doing is based on SCSS, I'm getting into it now, will look into if I can redo this into SCSS when I feel more secure about it.
This is C R I S P. Love what you are doing here. Subscribed already!
Dude, thanks, really appreciate to hear that! A lot of time and effort went in. I'm glad it came to some purpose :) Cheers mate!
Hey man, props to launching and making your idea real life! Love :)
Thanks Carlos, appreciate it Went in a lot of time and love creating it but it was really fun and a nice side project to do! Cheerio!
Would be nice to also add links to Apple Music but like the curation!
True! Thanks for the feedback. I'll look into adding Apple Music / Tidal and perhaps Soundcloud/Youtube in an efficient way. As a Swede I'm enchanted by Spotify so didn't think that far! Will do now.
Thanks. You could also try the Apple Music embeds using their site: https://tools.applemusic.com/en-us/details/1243175850?country=us&media=song&term=c.r.e.a.m.+benton
Your website looks great but loads AWFULLY. I wanted to find out why so I did some digging. Your loading both v2.2.4 AND v1.8.3 of jquery, the image optimization is awful, your using @import which means css files don't get downloaded parallel(ely). 14 unused unicode ranges. No http2 and bad caching which is huge for performance. I would fix that stuff up very quickly because you got a great site there and it is a shame to see it fail this many easy performance fixes. My site weblaunchchecklist.com can help you keep track of this stuff.
Thanks Harris. As a rookie developer I'm glad you commented, I'll check these stuff and will see what I can manage to solve. Happy to learn these things, so thanks again! Cheers!
Nice. You plan on doing guest posts? :P
Thanks! Haven't really thought so far into the future, but if I do, I'll comment here if you're interested! :)
Nice work! Only real feedback is that I felt the motion was a tad overdone and could be reduced/more subtle. Loading the about page has 6 different elements that move, not counting the others that just fade in. For example the top copy block on the about page moves what feels like 500px into place. Can you achieve a similar effect by just moving up 30px or so as you fade in?
Appriciate the feedback Paul, thank you! I'm not sure how to make that happen with wow.js - I'll look into it, I agree, moves a bit long! Thank you!
Any chance for an indie shoutout week? ;)
Hey Alex, might do a theme like that one week later on!
Looks like everyone touched on what I would have brought up from a coding perspective (and probably wrote it better then what I would have) and I just wanted to say keep it up! You do good work
Thank you Stefan! Glad to hear. Working on dev part of it throughout the week :) Cheers
Thank you Erika!
Looks awesome! I love your project. Great execution.
Design-wise feedback: I'd like to see more love with the animations. I mean, big block of section looks kinda odd when it's animated as a whole. Maybe tha'ts me - but it's just a feedback :)
Great project overall :) Kudos!
Hey Andrew, happy to hear, thank you!
Agree, could put in more love to have them not pop in as a big chunk. Will look into! Thank you, Cheers mate!
Like it - nice and clean style. The wording is a little off though in various places -
'Franklins locate and select four links of hip hop' - doesn't read well. The service name is 'Franklins' not 'Franklin', so the text should be 'locates and selects...' or 'Franlinks can/will locate and select...'
Might be worth proofreading your content. Otherwise, good job!
Thank you Ed! I've corrected the grammar and will upload later tonight when home. Thank you for checking that. English isn't my primary language, hence it'll be slighly off here and there unfortunately. This is a good way to practice! Thank you, will proof read everything again!
Really like the site design and great to see your idea come to fruition! If I had one piece of feedback, it'd be that the 'This weeks theme' section could maybe be broken up a bit. It seems like a lot of unformatted text and looks out of place. The text at the section below it (A Collection of HipHop) looks better with the narrow width so perhaps laying it out in the same way might make it more readable. It would also draw your attention more to the Spotify cards below the text as you could keep those as they are and it would appear to break out of the grid. (see https://postimg.org/image/rz4b9d3y5/). Really like the font choice, big fan of Avenir of here :)
Hey Alan, Thank you for your comment, I appreciate it! And thank you for the feedback. I completely agree with you. it's too many words on one row as well, hard to read when it's above 10. I've fixed according to your feedback and it's now live. Thank you sir :)
yeeeboiii nice ... put me down for a guest post if you ever do it
Thanks mate, will do!
Cool, subscribed! Reminds me of a site I started a couple of years ago called 1SONG. I'd have people subscribe and then send them one hand-picked song per day by email. They could then stream it on all the services I could find. It leaned toward electronic and hip-hop music. I had it all automated once I selected the songs to send the emails and load the content into the html emails by RSS.
You can see its remnants at http://1song.co. All the artist images are missing currently on the Wordpress site so it doesn't look the same. I even wrote up little blurbs on each song.
Sweet, thanks man! Checked it out, cool, same concept, I like it! Impressed that you did it daily! Nice automation.
The site is gorgeous and I love your music taste. Just followed the weekly playlist.
Nice work all around!
Thanks Alex, glad to hear! I appreciate it :)!
Perfect idea and fantastic execution. Love it.
Thank you Todd, I really appreciate the comment and for checking it out! Hope it'll come to use, cheers!
Loved the logo and the animations. Did you code this from scratch?
Thanks sir! Was hoping the wave would feel like a soundwave somehow. I've used Foundation 6 but then built a minor custom framework on top of that in html/css.
More animations than a Disney film
It's true. I downloaded wow.js/animate.css and couldn't stop myself. Will remove some after a while; there's a danger to add stuff like that and just add it everywhere :) I do like Disney though ;) Thanks for your feedback
Very pretty tho. forgot to say. cheers
Thanks mate (Y)
This is great! Would love to do this for techno/house
Thank you! Just do it! ;)
Brockhampton's album is truly excellent. However, the group is from Texas and now lives in Southern California. Maybe seperate them from "Atlanta" or you could have a new artists section.
Awesome site though!
True! This is a slip from me, thank you for checking the site and the feedback. I'll have to fix this somehow hehe. Thanks mate!
Thanks Warren, appreciate it!
Nice! Looks really slick, and I like the concept.
A while ago I used to run an online hip hop magazine (broken-culture.co.uk) and when the workload got too much (in terms of content writing) actually considered doing something a lot more like this, but you've pipped me to the post!
Really well done though, looking forward to seeing what tunes come up.
Sweet, thank you very much!
Checked your page, I understand it had to be tough running that while working! Nice one mate!
Yeah, I was thinking about a "Daily" post, a more news feed focus like yours (broken-culture) but realised that I won't have time for neither, hence this cut down one. If I get more time one week, perhaps focus even more on the text etc, or refine parts of the website. We'll see :)
Anyhow, thanks mate! Cheers!