Where can I get a code review as a freelance?

Fenster

Question as in title.

Graham

Secret code, green cross code, da Vinci code?

i.e. what sort of code is it? :pac:

Fenster

Personal project. WordPress website. Mostly Sass and PHP with a hint of JS, built around a set of mixins of my own making.

http://www.bhalash.com/
https://github.com/bhalash/sheepie
https://github.com/bhalash/scss-helpers

A few PHP templates (the 404) are still very much in need of attention, as my rebuild is ongoing.

Graham

There's a couple of good WP devs hanging around here that you might be able to coax into looking, especially as you've GPLd your theme.

Great idea to get a code review, not because I think your code is bad (I haven't looked) but just in general it's a good idea.

Best of luck with it Fenster.

Giblet

Fenster wrote: »

Personal project. WordPress website. Mostly Sass and PHP with a hint of JS, built around a set of mixins of my own making.

http://www.bhalash.com/
https://github.com/bhalash/sheepie
https://github.com/bhalash/scss-helpers

A few PHP templates (the 404) are still very much in need of attention, as my rebuild is still ongoing.

I'll forgo the PHP, and concentrate on the Sass and frontend rendering, as well as anything I see in the github repo.

Sass is done pretty well, good use of helpers for the most part except where you use helpers for prefixing which can be done by a tool instead (ie: use the base rule, and allow the tool to add the prefixes, meaning you don't have to change the code, just the tool), hierarchy isn't too deep and not too reliant on extend which can cause issues. However, rendered CSS duplicates the same mediaquery block a few times, which generally should be avoided. There are tools to help this if you use gulp (combine-media-queries). Noticed some browser sniffing JS which is generally a no-no, not reliable and should rely on CSS and screen sizes only.
As for the page itself, jQuery should be deferred or put at the bottom with any inline code reliant on jQuery refactored or deferred. You don't need jQuery to set href for example and native QSA can do the job for selecting elements. Any third party CSS which isn't going to affect the head could also be deferred. Your image host (dropbox) is also not great with large time to first byte and almost no parallelism meaning your site is taking about 3 times longer than it should to load. Either don't use it, or try not using SSL. DNS prefetching could also help here, as the DNS lookups are slow.

<link rel="dns-prefetch" href="//dl.dropboxusercontent.com">

The page overall is 4mb, but it's image heavy blog so it's fine, but maybe try using responsive images as you are serving hires images to mobile.
http://alistapart.com/article/responsive-images-in-practice

I also did a firechart of your rendering but it's quite light on complex HTML so it's not really of use, other than to say move jQuery.

Fenster

At work, thank you for the critique, will respond in depth later. Briefly: the Dropbox content links are a problem, as are responsive images, since my site is so content heavy. I'll be moving to local images served responsively in the next few days.

manjosh

Yes you surely can, but still i will be a little bit worried about putting stuff out their to a senior coder. Freelancers a mostly individuals and not companies. So be very careful. Professional you could ask help from professional coding services. Since it just a review it shouldn't cost much.

Fenster

manjosh wrote: »

Yes you surely can, but still i will be a little bit worried about putting stuff out their to a senior coder. Freelancers a mostly individuals and not companies. So be very careful. Professional you could ask help from professional coding services. Since it just a review it shouldn't cost much.

I'm sorry, but I don't understand your objection. I mostly work and learn in isolation, which leads to a natural worry that either my quality is poor or my understanding of a subject lacks. Either negative or positive, it's great to have feedback on where I am and where I should be.

Fenster

Giblet, promised longer response:

Media
I made the suggested media and prefetch changes (from Dropbox-> local subdomain), and found a night and day difference in performance. For that alone, thank you. I used Dropbox because I was lazy.

HTML
I'll take your remark on the simple HTML structure as a compliment, because I explicitly set out to have a simplified structure. I've deal with way too many sites that fell prey to divitis or javascriptitis to accomplish the kind of things CSS is there to handle. CSS-first with JavaScript for the strictly interactive elements, which you've seen.

CSS
I agree on the lack of the extend directive, but I'll defend doing so because I've heard nothing but bad things about it from other developers. I am experimenting with it right now on a subset of the site, form elements, from which I will expand.

Altogether, thank you for the feedback! You gave me some great insights.

Giblet

Fenster wrote: »

Giblet, promised longer response:


CSS
I agree on the lack of the extend directive, but I'll defend doing so because I've heard nothing but bad things about it from other developers. I am experimenting with it right now on a subset of the site, form elements, from which I will expand.

Altogether, thank you for the feedback! You gave me some great insights.

What I mean to say that extend is bad (or rather, it can be in a lot of situations) and you are right to limit its use.

Fenster

You're right, my bad. I have a bunch defined for self-contained recycleables, and they'll probably be great for UI widgets too, but...

Giblet

Ok, so after moving your images, you have improved performance, but you can go further. You currently use ETags to invalidate cache. If you are unfamiliar with ETags, it's basically a Base64 hash of the image or something representing the image, which you send to the client. The client then sends it back on each request to say "Hey is this still the valid ETag for this image?" to which the server can reply 304 to the client to tell it to use it's own cached version instead. This is great for fine control over invalidating images, but each image needs a round trip for the ETag check. If you don't need this control, you should just send out a max-age header instead so the image is cached on the browser for x time and no roundtrip is required (also, enable gzip for SVG). You can probably configure this on your host or through wordpress somehow. Also, removing cookies from the ix domain will help. Finally! Encode all jpgs as progressive, trust me, it's awesome!

Fenster

Etags and some of the cache matters are way about my level of knowledge; I know more about Linux as a dev environment than I do from behind the wheel of a server (14 years versus 2). I can regenerate all of the thumbnail images as progressively encoded JPG files through a mogrify script, but it's crap o'clock in the morning.

Giblet

Fenster wrote: »

Etags and some of the cache matters are way about my level of knowledge; I know more about Linux as a dev environment than I do from behind the wheel of a server (14 years versus 2). I can regenerate all of the thumbnail images as progressively encoded JPG files through a mogrify script, but it's crap o'clock in the morning.

It's easier than you think, you can use a .htaccess file that looks like this

# -----------------------------------------------------------------------
# Caching for 1 Year
# -----------------------------------------------------------------------
<FilesMatch "\.(ico|svg|woff|eot|ttf)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# -----------------------------------------------------------------------
# Caching for 1 Week
# -----------------------------------------------------------------------
<FilesMatch "\.(jpg|png|gif|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

# -----------------------------------------------------------------------
# Defining MIME types to ensure the web server actually knows about them
# -----------------------------------------------------------------------
<IfModule mod_mime.c>
    AddType application/javascript          js
    AddType application/vnd.ms-fontobject   eot
    AddType application/x-font-ttf          ttf ttc
    AddType font/opentype                   otf
    AddType application/x-font-woff         woff
    AddType image/svg+xml                   svg svgz 
    AddEncoding gzip                        svgz
</Ifmodule>

# -----------------------------------------------------------------------
# Compressing output
# -----------------------------------------------------------------------
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</Ifmodule>

Fenster

Cheers again!

Giblet

I see cache-control now, second view is unbelievi-fast. Progressive images should help the user experience of the first view (images should appear to load quicker, which is nicer on mobile)

Graham

What's the performance tester you're using there Giblet?

Giblet

http://www.webpagetest.org

Atomic Pineapple

Graham wrote: »

What's the performance tester you're using there Giblet?

I believe its here - http://www.webpagetest.org/

Graham

Giblet wrote: »

http://www.webpagetest.org

Nice, a few more options than GTMetrix. Thanks