Hello!

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!

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 width="100" is enough.
• 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 <h4>.

• 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 <symbol> and <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: https://fonts.googleapis.com/css?family=Roboto|Lato
• your .backgroundHero is 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.

Good luck!

This is C R I S P. Love what you are doing here. Subscribed already!

Hey man, props to launching and making your idea real life! Love :)

Would be nice to also add links to Apple Music but like the curation!

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.

Nice. You plan on doing guest posts? :P

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?

Any chance for an indie shoutout week? ;)

Hey William,

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

Awesome Design

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!

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!

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 :)

yeeeboiii nice ... put me down for a guest post if you ever do it

https://soundcloud.com/chrisbetrappin/likes

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.

The site is gorgeous and I love your music taste. Just followed the weekly playlist.

Nice work all around!

Perfect idea and fantastic execution. Love it.

Loved the logo and the animations. Did you code this from scratch?

More animations than a Disney film

This is great! Would love to do this for techno/house

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!

Awesome site!

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.