About me

Davey Brown - Freelance Web Developer

Hey, my name is Davey Brown, I’m a Freelance Web Developer. I build clean/professional websites for people and businesses.

I specialise in responsive websites and build engaging designs/layouts. I use WordPress, this means that it is super easy to update/manage content.

When I’m not wearing my coding cap and reading the latest web blogs/articles/magazines/newsletters I enjoy spending my free time walking outdoors/learning Welsh/with family/learning permaculture.

I’ve just moved to Cardiff, go me! I’m open to hearing about freelance web development opportunities; Cardiff Bay, city centre or Penarth would be ideal. Scroll down to find out more.

Web development
with a difference

As a web developer I’m conscious of my responsibility to reduce my impact on the environment. I am a proud owner of solar panels with the capacity to generate 306KWh per year. That’s enough to power my laptop, monitor and desk lamp (with cool energy saving bulb) for the whole year with some left over (206KWh) to help offset the servers.

Portfolio

For the past year I’ve been working in Angel, London as part of the cookie and coffee loving team that is Pixeled Eggs. I’ve worked on exciting builds such as the Rochambeau Smart Jacket for evrythng.com and high profile websites for MacMillan (Game Changers and Summer Lights). 

The work that I've done at Pixeled Eggs varies from building complete websites from scratch to completing additional phases of work on existing websites.

In many cases I worked as part of a team with other developers, usually 2 splitting the workload 50/50, or working on websites where I was responsible for everything. Most projects were agile; with progress discussed in daily stand-ups and tracked online with Jira.

I’ve also worked on several freelance projects including websites for charities and small businesses. 

Below are a few examples, check out the tabs for a preview of what my work looks like and some of the code behind the scenes

Personal Group website build

">
.hero {
  position: relative;  
  color: $white;
  
  // Rounded hero
  // ----------------

  &.rounded {

    h1 {
      text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    }
    .carousel {
      overflow: hidden;
    }
    
    @include breakpoint(xlarge) { 
      max-width: rem-calc(1600);
    }
    
    // Curve at bottom
    // ----------------
    
    .curve {
      &:before {
        content: '';
        display: block;      
        position: absolute; 
        // avoid background image leaking through 
        bottom: rem-calc(-2);      
        left: 50%;      
        width: 100%;
        z-index: 20;
        // set height by padding 
        height: 0;
        padding-top: 25px;
        padding-bottom: 11%; /* curve image file ratio */    
        transform: translate(-50%, 0%);        
        background: url(../img/concave_curve.png);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }

    // Gradient left and right
    // ----------------------
    
    &.row:before, 
    &.row:after {
      content: ' ';
      display: block;
      position: absolute;
      z-index: 12;
      right: 0;
      top: 0;
      height: 100%;
      width: 150px;
      opacity: 0;
      transition: opacity 400ms ease;
    }
    &.row:before {  
      left: 0; 
      background: linear-gradient(to left, rgba(255, 255, 255, 0), $white);
    } 
    &.row:after {   
      right: 0;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), $white);
    }
    
    @include breakpoint(xxlarge) {  
      &.row:before, 
      &.row:after {  
        opacity: 1;
      }
    }
    
  }  
}
">
.nine-icon-unit__details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 500ms, max-height 0ms 500ms;
  
  // pure css fade in and fade out of element
  // better than jQuery hide - uses native browser transitions
  &.active {
    opacity: 1;
    max-height: 9999px;
    transition: opacity 500ms 500ms, max-height 0ms 500ms;    
  }
}
">
// Increase stats from zero on pg_in_action_header module
// Used on how-we-do-it page
function doStat(statNumber) {

  if (statNumber == 4) {
    return false;
  }
       
  var element = $('#stat-' + statNumber);    
  var dataTo = (element.data('to') + ',' ).replace(/,/g, '');
  element.removeClass('stat-hide');
  
  element.countTo({
    from: 0,
    to: dataTo,
    speed: 1000,
    refreshInterval: 50,
    formatter: function (value, options) {
      return value.toFixed(options.decimals).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    onUpdate: function (value) {
      //do nothing;
    },
    onComplete: function (value) {
      doStat(statNumber + 1);
    }
  });
    
}
// hire me :)

I worked as part of a 2 developer team to build a flexible website for the the employee benefit company Personal Group. The flexibility that was built into the custom WordPress template meant that the team at Personal Group had the freedom to build pages from modules in any arrangement; without the constrains of a typical rigid template.

Build of BRIGHTBMBR by Rochambeau website & web app

">
<!-- Tags for Facebook sharing -->
<meta property="og:url" content="https://brightbmbr.nyc/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BRIGHT BMBR" />
<meta property="og:description" content="The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences." />
<meta property="og:image" content="https://brightbmbr.nyc/wp-content/themes/rochambeau/assets/img/facebook_share.png" />
<!-- Tags for Twitter sharing -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="BRIGHT BMBR" />
<meta name="twitter:description" content="The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences." />
">
<!-- Responsive Vimeo video -->
<section class="wrap--video-cta">      
  <div class="row row--full row--video-cta collapse" data-equalizer  data-equalize-by-row="true">          
        <div class="small-12 medium-6 medium-push-6 columns split-video" data-equalizer-watch >      
      <div class="bg" style="background-image: url(https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg)"></div>
      <img src="https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg" />
      <a href="#" alt="Play" data-open="reveal--video"></a>
    </div>        
    <div class="small-12 medium-6 medium-pull-6 columns split-cta text-center" >
      <div class="wrap--cta-split" data-equalizer-watch >
        <div class="middle--cta-split" >
          <h1>BRIGHT BMBR</h1>
          <p>The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences.</p>
    	    <a class="button button--roch" href="https://shop.thenewstand.com/collections/frontpage/products/rochambeau-evrythng-jacket">Order</a>
          <a class="button button--roch" href="/app">Jacket Owners</a>
        </div>
      </div>
    </div>       
  </div>        
</section>

<div class="reveal small-no-fullscreen reveal--video large" id="reveal--video" data-reveal data-reset-on-close="true">
  <div class='embed-container'>
    <iframe data-src="https://player.vimeo.com/video/189112049?autoplay=1" 
            width="100%" height="360" 
            frameborder="0" 
            webkitallowfullscreen="" 
            mozallowfullscreen="" 
            allowfullscreen="">
    </iframe>
  </div>
  <button class="page-close page-close--white" data-close aria-label="Close modal" type="button"></button>
</div>
">
// Video - use canvid to animate sprite sheet for video on mobile
var canvidControl = canvid({  
 selector : '.video', 
 videos: {
   clip1: { src: '/wp-content/themes/rochambeau/assets/video/0140frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip2');
  }},
   clip2: { src: '/wp-content/themes/rochambeau/assets/video/4180frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip3');
  }},
   clip3: { src: '/wp-content/themes/rochambeau/assets/video/81120frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip4');
  }},
   clip4: { src: '/wp-content/themes/rochambeau/assets/video/121147frames.jpg', frames: 26, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip1');
  }},
 },
 width: 414,
 height: 736,
 loaded: function() {
   canvidControl.play('clip1');
 }
});

BRIGHTBMBR is an exploration into wearable smart technology. Building the website was an exciting opportunity to be part of something so new and unique. I was responsible for the front-end build (including the homepage), and worked closely with the backend developer to integrate our work seamlessly. The result is a product (website & web app) that has been successfully demo’d at conferences to promote the technology behind it, and is an integral part of the BRIGHTBMBR experience (video).

Design & build of Peas Please micro site

">
.microsite {  
  .columns {
    margin-bottom: rem-calc(20);
    overflow: hidden;
    
    .micro-bg {
      position: absolute;
      opacity: 0.4;
      // browser prefixes are added by autoprefixer
      transition: all 400ms;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;  
    }
   
    &:hover {
      // background image zoom in effect on hover
      .micro-bg {
        opacity: 1;
        transform: scale(1.1);
      }
    }   
  }
}
">
<div class="microsite">
  <div class="row expanded squares small-up-1 medium-up-2 large-up-3 xxlarge-up-4">
    <div class="columns">
      <!-- tiles are organised into template parts -->
      <?php include('micro-about.php'); ?>
    </div>
    <div class="columns" style="position: relative;">
      <?php include('micro-signup.php'); ?>
    </div>
    <div class="columns">
      <?php include('micro-publications.php'); ?>
    </div>
    <div class="columns">
      <?php include('micro-events.php'); ?>
    </div>
    <!-- more tiles ... -->
  </div>
  <!-- /.row -->
</div>
<!-- /.microsite -->

Food Foundation’s brief asked for a micro site (think one main page with some secondary pages) to convey all information regarding their new (Autumn 2016) project. I was supplied with the logo (it had a twirly, curved and colourful hand drawn look to it) and was tasked with the design and build of a micro site with a look and feel that complimented the logo.

Build of evrythng website

">
<nav class="top-bar" data-topbar="">
   <ul class="title-area">
      <li class="name middle-box">
         <a class="middled" href="/"><img class="top-bar__logo" src="https://evrythng.com/wp-content/themes/evrythng/img/logo-2x.png" alt="Evrythng"></a>
      </li>
   </ul>
   <section class="top-bar-section">
      <ul class="right">
         <li class="has-dropdown menu-item not-click">
            <a href="https://evrythng.com/platform/">Platform</a>
            <ul class="dropdown">
               <li class="title back js-generated">
                  <h5><a href="javascript:void(0)">Back</a></h5>
               </li>
               <li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/platform/">Platform</a></li>
               <li class="menu-item first"><a href="/platform">Overview</a></li>
               <li class="menu-item"><a href="https://evrythng.com/platform/features/">Features</a></li>
               <li class="menu-item"><a href="https://evrythng.com/activate-digital-identities-for-products/">Digital Identities</a></li>
               <li class="menu-item"><a href="https://evrythng.com/platform/ecosystems/">Ecosystems</a></li>
               <li class="menu-item"><a href="https://evrythng.com/platform/enterprise-data/">Enterprise Data</a></li>
               <li class="menu-item"><a href="https://evrythng.com/securing-the-internet-of-things/">Security</a></li>
               <li class="menu-item last"><a href="https://evrythng.com/platform/developer-tools/">Developer Tools</a></li>
            </ul>
         </li>
         <li class="has-dropdown menu-item not-click">
            <a href="https://evrythng.com/solutions/">Solutions</a>
            <ul class="dropdown">
               <li class="title back js-generated">
                  <h5><a href="javascript:void(0)">Back</a></h5>
               </li>
               <li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/solutions/">Solutions</a></li>
               <li class="menu-item first"><a href="/solutions">Overview</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/connected-devices/">Connected Devices</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/consumer-engagement/">Consumer Engagement</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/brand-protection/">Brand Protection</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/inventory-management/">Inventory Management</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/product-registration/">Product Registration</a></li>
               <li class="menu-item"><a href="https://evrythng.com/solutions/product-reordering/">Product Reordering</a></li>
               <li class="menu-item last"><a href="https://evrythng.com/solutions/evrythng-services/">EVRYTHNG Services</a></li>
            </ul>
         </li>
         <li class="has-dropdown menu-item not-click">
            <a href="https://evrythng.com/partners/">Partners</a>
            <ul class="dropdown">
               <li class="title back js-generated">
                  <h5><a href="javascript:void(0)">Back</a></h5>
               </li>
               <li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/partners/">Partners</a></li>
               <li class="menu-item first"><a href="https://evrythng.com/partners/">Overview</a></li>
               <li class="menu-item last"><a href="https://evrythng.com/partners/become-a-partner/">Become a Partner</a></li>
            </ul>
         </li>
         <li class="has-dropdown menu-item not-click">
            <a href="https://evrythng.com/about/">About Us</a>
            <ul class="dropdown">
               <li class="title back js-generated">
                  <h5><a href="javascript:void(0)">Back</a></h5>
               </li>
               <li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="https://evrythng.com/about/">About Us</a></li>
               <li class="menu-item first"><a href="https://evrythng.com/about/">Mission</a></li>
               <li class="menu-item"><a href="https://evrythng.com/about/team/">Team</a></li>
               <li class="menu-item"><a href="https://evrythng.com/about/investors/">Investors</a></li>
               <li class="menu-item"><a href="https://evrythng.com/about/news/">News</a></li>
               <li class="menu-item"><a href="https://evrythng.com/about/events/">Events</a></li>
               <li class="menu-item"><a href="https://evrythng.com/about/jobs/">Jobs</a></li>
               <li class="menu-item last"><a href="https://evrythng.com/locations/">Locations</a></li>
            </ul>
         </li>
         <li class="menu-item top-bar__seperator-left"><a href="https://evrythng.com/contact-us/">Contact Us</a></li>
         <li class="menu-item"><a href="https://dashboard.evrythng.com/login">Login</a></li>
      </ul>
   </section>
</nav>
">
// AJAX pagination
// Anon function - source https://premium.wpmudev.org/blog/load-posts-ajax/
(function($) {
	
	$( document ).ready(function() { 	
		
		// Detect click
		var flag = false;
		$('.pagination a').bind('touchstart click', function(){
		  if (!flag) {
		    flag = true;
				setTimeout(function(){ flag = false; }, 100);
				
				var year = $(this).data('year');
				var press_category = $(this).data('post-category');			
				var post_type = $(this).closest('[data-post-type]').data('post-type');
				var part = $(this).closest('[data-part]').data('part');
				var $clickedElement = $(this);
				var $targetElement = $('.press-coverage .press-cover-container');
				var $overlayElement = $('.press-coverage');
				
				//console.log(part);

				event.preventDefault();
				$.ajax({
					url: ajaxpagination.ajaxurl,
					type: 'post',
					data: {
						action: 'ajax_pagination',
						post_type: post_type,
						part: part,
						year: year,
						press_category: press_category
						//page: page
					},
					beforeSend: function() {
						$overlayElement.addClass('loading');
						// Scroll to the top of the press release section				
						$('html, body').animate({
				        scrollTop: $overlayElement.offset().top
				    }, 500);
					},
					success: function( html ) {				
						// Source - http://stackoverflow.com/posts/9671016/revisions
						$targetElement
			        .data('oHeight',$targetElement.height())
							.html(html) // Update content
			        .css('height','auto')
			        .data('nHeight',$targetElement.height())
			        .height($targetElement.data('oHeight'))
			        .animate({
									height: $targetElement.data('nHeight')
								},
								400,
								function(){ 
									// Run match height script on new elements
									$('.press-coverage .press-cover-container [data-mh="press-cover"]').matchHeight({
										byRow: true,
										property: 'height',
										target: null,
										remove: false
									});
									$targetElement.css('height','auto');
									// Set height of target to auto after match height has run
									$overlayElement.removeClass('loading');
									// Add class of current to clicked pagination element
									$clickedElement.closest('li').addClass('current').siblings().removeClass('current');	
								}
							);
					}
				})

		  }
		  return false;
		});
	
	});
	
})(jQuery);

Evrythng is a super innovative internet of things company, they’re pushing boundaries of what can be achieved with IoT devices (evrythng in 100 seconds). The website was built with over 30 modules (that can be used to build any page) offering truly flexible and scalable content management without compromising brand identity or design. Dynamic (AJAX) loading of stories on the news page is a smooth example of seamlessly browsing through news pages (built by yours truly).

Design & build of The Food Foundation website

">
$(document).ready(function() {
  // On slide initialisation
  $('.carousel').on('init', function(event, slick){
    // Remove hide class from relevant slides
    // Sildeshow loads smoothly without flash of un-styled content
    $(this).find('.show-on-load').removeClass('hide').removeClass('show-for-medium ');
  });  
});
">
// Queries for events
// Date is past
$meta_query_past = array(
  array(
    'key' => 'event_date',
    'value' => date('Ymd'),
    'type' => 'DATE',
    'compare' => '<='
  )
);
$meta_query_future = array(
  'relation' => 'OR', 
  // Date is future
  array(
    'key' => 'event_date',
    'value' => date('Ymd'),
    'type' => 'DATE',
    'compare' => '>='
  ),
  // Date is empty
  array(
    'key' => 'event_date',
    'value' => '',
    'compare' => '='
  )
);
">
<section class="vertical-margin">
  <div class="row">
    <div class="large-4 large-push-2 medium-6 columns">      
      <!-- schma.org markup for contact details -->
      <div itemscope itemtype="http://schema.org/Organization">
        You can contact <span itemprop="name">The Food Foundation</span> at:<br>
        Tel: <span itemprop="telephone">020 3805 4670</span>,<br>
        E-mail: <a href="mailto:office@foodfoundation.org.uk" itemprop="email">office@foodfoundation.org.uk</a>
      </div>      
    </div>
    <div class="large-4 medium-6 columns">      
      <div itemscope itemtype="http://schema.org/Organization">        
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="name"><strong>The Food Foundation</strong></span><br>
          <span>The Rain Cloud Victoria</span><br>
          <span itemprop="streetAddress">76 Vincent Square</span><br>
          <span itemprop="postalCode">SW1P 2PD</span><br>
          <span itemprop="addressLocality">London, UK</span><br>
        </div>    
      </div>      
    </div>
  </div>
</section>

Bold design with expanses of full width images (mostly news posts and delicious looking fruit and veg) and strong brand identity running throughout. An interesting and fun website to design and build; I worked closely with Alex from Food Foundation to deliver a website that did exactly what she needed. A responsive website that works well across all devices and with some nice extra touches; like schema.org markup for address and contact details and an events page that automatically moves events from ‘Upcoming’ to ‘Past Events’ after they’ve happened.

Build of Undivided website

">
<?php 
// use skrollr plugin on non touch devices 
// use more basic scroll position detection on touch devices 
if ( !is_handheld() && is_front_page() && !defined('TY_PAGE') ) : ?>
  <script type="text/javascript" src="<?php echo SITEURL; ?>/assets/js/skrollr.min.js"></script>   
  <script type="text/javascript">
    $('#menu-topbar2-menu .topbar-item--home a')
      .attr('data-anchor-target', '.Site-content').attr('data-0', 'width: 287px').attr('data-100', 'width: 130px')
      .append('<div class="logo-white-text" data-0="opacity: 1" data-100="opacity: 0" ></div>');
    var s = skrollr.init({
      forceHeight: false
    });
  </script>
<?php endif; ?>
">
<?php
// before form part 1 submission
// add dob valid status to form data
// and set session variable for thank you page variation
// if older than 30 show sorry page

add_action( 'gform_pre_submission_1', 'pre_submission_handler' );
function pre_submission_handler( $form ) {
    $status = 'Invalid';
    if (valid_age( rgpost( 'input_4' ) )) {
      $status = 'Valid';
      $_SESSION['show_sorry'] = false;
    } else {
      $_SESSION['show_sorry'] = true;
    }
    $_POST['input_23'] = $status;
}

function valid_age($date) {  
  $d = DateTime::createFromFormat('d/m/Y', $date);
  $n = new DateTime('NOW');  
  $age = $d->diff($n)->format('%R%y');  
  $s = false;
  if ($age < 30) {
    $s = true;
  }  
  return $s;  
}
">
<?php
  // query string data for represent.me iframe
  $data = array( 'showComments'=>'true',
                 'maxHeight'=>'325',
                 'cacheBust' => time()
               );
  
  if (REPRESENT_STYLESHEET_URL) :
    $data['stylesheet'] = REPRESENT_STYLESHEET_URL;
  endif;          
?>
<!-- represent.me iframe  -->
<div class="represent single--represent">  
  <div class="row">
    <div class="large-8 small-centered columns text-center">            
        <div class="wrap--represent-iframe">
          <iframe src="<?php the_field('frame_url'); ?>?<?php echo http_build_query($data); ?>"></iframe>
        </div>        
    </div>
  </div>
</div>
<!-- / represent iframe -->

A youth led organisation with a hugely important and politically relevant message. I was responsible for the build of their website. Work included smooth transitions and animations on the home page (logo and tiles), multi part forms with age verification, and seamless integration of represent.me platform.

2016 was
awesome

In the last year alone I’ve been involved in over 20 web development projects (as part of an awesome team), while the majority of projects helped build my Wordpress skill set I’ve also had the opportunity to turn my hand to: responsive emails, building a whiskey label printing solution, writing a custom IAT test for behavioural insights, and working on Bono’s iPad app (One Campaign).

Toolbox

I use the majority of these tools the majority of the time, in fact I've used 19 of them on this website.  These tools help me make better websites faster; if it doesn't do that then, it's not on the list! Hover or tap the icons to find out why I use each one.

Wordpress: Familiar and easy to use17.6+ million websites on the entire internetResponsive dashboard - Edit pages on desktop, tablet & mobileHuge plugin directory of over 47K pluginsOver 25% of top 10K websitesSecurity benefits of open source software & regular updatesSuper efficient task runnerRun build tasks asynchronouslyLike a customised relay race, you write the rules & stuff gets done ASAP!Keeps packages up to date during developmentDownloads files ready for processing, inlining, minification etc.Makes project collaboration a doddle, we're all on the same pageSaves on storage space and development timeA secure place to save project versionsFlexible, fly solo or work as a team playerWork privately or share your code with the worldSketch up code snippets in a snapDiscuss and improve code with othersShare ideas and prototypesGitHub: A (pretty great) hub for gitWrite super clean and easy to read markupHelps keep markup DRY (don't repeat yourself)Adorable logoSupercharge styles with sass, say 'see you later' to limitations of vanilla cssNesting selectors, never write #long.selector[strings]:again { // woohoo }Mixins mean sharing and code recyclingUse loops to chop css chapters to a fraction of the sizeSlack: A tool for discussion between team membersAn alternative to email discussion and an end to 'reply to all' + huge email trailsAwesome resource for programming discussion and Q+AFriendly and experienced community membersStay in control of packages and dependencies during developmentAllows multiple versions of a package if necessaryIndustry standard vector graphics editorAwesome for super sharp logos and icons (on any screen size)Smaller files mean faster page load <3 svgChange colour with code. Cool, you can't do that with jpg!An industry favourite graphics editorEasily export assets from client designsUse smart objects and Illustrator to export vector imagesLayers can be used for active, hover states etc.Mac, Apache, MySQL, PHP... all at the click of a buttonEfficient, with MAMP we don't need to start LinuxA perfect development environment for WordpressSave time on every project! Quickly switch php versions, manage hosts file etc. User friendly way to version controlCommit work and push to repo in a single clickSave time compared to typing git commandsEdit text (write code) quicker than ever beforeOpen source packages for syntax highlighting + auto comple...Multi panes, for comparison and working with related filesDynamically updates pages, on file save, during developmentSave 100s of key presses per dayRelax... no more cmd+rTrack page views, events, users etc from the intuitive dashboardIndustry standard analytics for websitesDelicious and NutritiousMmmm PizzaCustomise Wordpress in with easeCreate fields for virtually anything, from colours to date pickersTea revives youPart of the versatile LAMP stack (Linux, Apache, MySQL + PHP)Popular open source server side scripting languageLanguage used by Wordpress platformMailChimp: Manage newsletter signups like a bossSend out responsive emails in a couple of clicksAutomate emails and populate content from your news feedMeasure success of campaigns in MailChimp's dashboard Foundation: Framework for responsive websites and emailsTried and tested framework: a solid starting point for many projectsResponsive design without reinventing the wheel

This is an evolving list, as I'm always looking to improve my workflow. So don't be surprised to see new additions or changes.

Discussion

Take a look at my blog posts about the technical side of what I do, please feel free to comment and let me know your take on the subject.

Blog

Lightning talk notes: Using fonts for super sharp icons!

Hi, these are the notes to go along with the lightning talk that I gave a couple of days ago (21st Nov 2017). If you’ve forgotten the name of a plugin or want to copy and paste some code that I mentioned, sweet – you’ve come to the right place. If you didn’t catch the… read more

gzip + WordPress + 💫 = 😎

Ok, so what does the blog title actually mean? Well it’s my conclusion to some of today’s research, it means the following: gzip compression with a WordPress install and a sprinkle of magic equals… put your feet up, you’ve just made your pages load faster, and you’re in google’s good books Quick pointers on using gzip with WordPress This post is a… read more

Step by step, pure CSS animated toggle switch

For me, subtle interaction animations can be a sweet touch and can breathe life into static looking page. For a recent project, I was asked to build some fancy toggle switches as part of a form, the result turned out fairly nicely so I thought I’d share a quick how to of how I styled the switches with… read more

Can do!

Happy customers mean that I’m doing my job properly, this is the ultimate objective of every project. Alex from Food Foundation: Davey has totally transformed our WordPress website making it more professional and eye catching. He has been easy to contact, professional and has a ‘can do’ attitude, we are extremely pleased with his ability and professionalism.

Why get in touch?

Btw… I’ve just moved to Cardiff! I’m open to hearing about freelance web development opportunities; Cardiff Bay, city centre or Penarth would be ideal.

Also, do you have a great idea for a website!? Awesome, let’s talk. What I do works best when we can meet face to face to discuss things. If you’re based in Cardiff, great, give me a shout, please include the brief and a ballpark figure for how much you have to spend.

Are you a freelance web designer based in Cardiff? If you have a strong design skill set but don’t specialise in coding we could make a great team. Get in touch to talk about collaborating on small to medium size web projects, don’t forget to include a link to your portfolio.

Thanks for taking time to read about Web Shed.

Davey

Contact me