FreeAgent 10% discount Referral Code – ’48ebvyrs’ 👍

Here at Jupiter and the Giraffe we like to keep things trim. That includes the way we run our business. It’s important that we understand the ins and outs of things before we hand it off. Accountancy was a big one for us as, with technology, this skill that was once an anomaly to the every-person can now be achieved with the right tools. We use FreeAgent. FreeAgent integrates perfectly with our business bank account Revolut (more on that later).

Just give me the code? Sign up by following this link to claim

With FreeAgent (and Revolut), we can assign finances coming in and out of our account as expenses and/or to invoices that we can generate from within the software.

The regular chores that come with owning a company like Corperation Tax, directors tax are part of something called “Tax Timeline” in which I can monitor the dates all these things are due. It of course also helps put them together for us and makes it super simple.

Payroll is also handled from within the software and is a breeze to set up. It will also set up Employment Allowance for us which removes an extra headache.

That’s all we need it for for now, but i’m sure there’s plenty more to it. Check out their website for more information and whether it suits their needs.

All in all it’s a great piece of software and is really cheap! Using our FreeAgent referral code you can get it even cheaper.

The code

48ebvyrs

Did our agency just get scammed?! 🤔

There are some very smart people in the world. Unfortunately, some people use that intelligence to do terrible, deceptive things. The story I’m about to tell isn’t a 100% confirmed scam but it sure as hell looks like one to me and I’ll let you be the judge of that. The idea of this post is to help others be more vigilant when they are interacting and doing business with strangers over the web.

It all started when we received a polite email to our address on our website simply asking if we do website design. The grammar wasn’t great and a few formatting things but otherwise, it looked like a human had written it. The address it came from was a bit ambiguous but it contained letters (albeit 3 of them) of the person’s name. For context, I won’t reveal the email but let’s assume his name was “John” and his email was “jeabhsn[at]gmail[dot]com”. I responded and offered some of our other services like branding, logo design and website development as sometimes clients do simplify all those services into just “design”. They responded the very next day with a short introduction to his company. They were a small active sportswear company based in Manchester looking to import and export sportswear and to expand in the future. It wouldn’t be an eCommerce site and he would be working with a private consultant who had the website content and logo already sorted. I thought it was weird that he didn’t want an eCommerce site, it would be a worthwhile investment but in an age of “Lean Startup I understood why he wouldn’t want to spend a lot up front. That last point though, about the private consultant, would become ever more important later on in the story…

WHAT I WANT

Written as such, in all capitals. The brief was followed by a set of very specific deliverables. They were sensible too! 4 pages, a “Products” page which would be a gallery of 4 sections (men, women, boys, girls) which we would have to update every month or so and a contact form. All this with a deadline of 3 months seemed straightforward. Then followed a list of pretty convincing notes;

Note:
1. I want only English language
2. You will be updating the site for me.
3. I will be proving the images, logos and content for the site.
4. I want the site up and running before ending of next two month.
5. My budget is X
6. No shopping ability
7. The site will be mobile friendly
8. I don’t want sitemap
9. I have 25 product to be on it.

Kindly get back to me with:
(1) an estimate
(2) your cell phone number
(3) And will like to know if you are the owner ??
(4) Do you accept credit cards as payment ?

John

The agreement

The project itself was a bit low for us in terms of budget but the potential to scale sounded very appealing. The potential to grow a client and support them along the way is something we love at Jupiter and the Giraffe so we agreed to give it a shot. I responded with something along those lines and suggested, in time, we revisit a lot of the workshop-type stuff we’ve missed on this occasion as its something we normally do with our clients so that we can establish a more solid brand later down the line.

Credit Cards though. Something stood out about that so I inquired with a couple of friends who are lawyers. Although alarming, I had a resounding thumbs-up from them both for reasons that many people just starting out won’t have the money and will either be getting a loan or using credit cards to give them a head start. Also, I was told it’s not as simple to reverse a transaction from credit cards as most issuers need evidence that the product or service was not received. As long as I had very clear contracts stating that they agree to the fees and that 50% would be owed up front (a very important thing to do, especially with new clients) then all should be well.

We scheduled a call with him to get further clarification on the requirements. I tried calling and it was not a British ringing tone. His answerphone message was a typical one that defaults with your carrier but it was in an American accent. Again, in this modern age of remote working and worldwide connectivity, I didn’t think anything of it. When I eventually got through, my designer and I joined the call. He seemed polite and was clear on his requirements. His English was not perfect but he could articulate himself well enough. A few points of interest is that he was not hesitant when it came to the price of our service and that he would be covering all credit card fees. He was also fine about paying 50% up front. Once again, a refreshing thing to hear! We left the call saying we’d need to get a SOW and contract signed with everything we agreed on the call and that we’d be good to go. We’d also need the work the consultant had already done to help guide us.

He signed the SOW promptly and we were all set. All I needed was an address for the invoice to send him the 50% upfront fee. The address he sent was indeed from Manchester. I sent the invoice and a link to pay through PayPal where he could pay it. His response was that he did not have a PayPal and that his card did not work with it, so he suggested Stripe. I thought this was odd but I pursued to set up a Stripe account and generated the invoice. That’s when things turned strange.

Things turned strange

He responded with something very queer. He asked if he could amend the amount on the credit card. The reason for this is as follows…

I understand the content for this site would be needed so work can start asap but i will need a little favor from you regarding content and logo.
And also want you to know that am still at the hospital due to my current state of health. So don’t mind me replying late, it’s will be because my doctor is attending to me.

John

I was confused by what was being asked of us here. I also thought the bit about the hospital was a little strange, as, although terrible to hear, we were dealing with business and that was a little too personal given our brief encounter. A follow-up email was sent by him as if he pressed ‘send’ too early, as I suspected there was missing information in this email.

The favor i need is that i will be making upfront deposit payment for the project and i want you to add the sum of X to the amount you will run on my card plus 3% Cc company charges. So when you receive the fund in your account, you will send the X to the project consultant that has the text content , imagery and the logo for my website.
Once he receive the fund, he would send the imagery and logo needed for my website to you immediately.

John

The reason for the above is that the third-party consultant didn’t take credit card so he was asking us here if we could take the credit card payment and pay the consultant ourselves so that they could then send the logo and website content and we could begin work (something stated in our SOW). He also said he could’nt go to the bank himself because of his health. I said I’d get back to him.

Getting legal advice

The advice I received was to treat it like Jupiter and the Giraffe are sub-contracting for this logo and content and that a new contract will need to be written in order to get all parties on the same page and talking. I asked for the consultant’s details and called with no answer. I contacted them via email and left it at that. I also checked out “Bethesda Media” online but could not find them anywhere. I wanted to avoid this hassle so I took my time with things in case his health got better. I also suggested that he could send drafts and concepts of everything (something I would expect from an engagement) and that we could use these to help our design. I really pushed to get drafts while I sought assistance from a legal perspective and I got quite short responses reminding me that all I need to do is pay the consultant to release the assets.

A weekend went by and I received a chirpy email from him saying that he tried calling me (he hadn’t) and asking if I had got anywhere with the contracts. I responded saying that I tried contacting the contractor and am waiting on a response. I also reminded him that all we needed was the concept for the final logo and that we could proceed with that.

At this point I grew impatient. Many of the above emails mentioned his own state of health and all I wanted was an answer. I didn’t mind that I hadn’t heard from the consultant as I was looking for some hint that work had been done, even in concept form. We could have proceeded without this stuff fine but my gut feeling was that something wasn’t right and I wanted evidence. I finally sent an email after waiting for the consultant to get back to me.

We need to push forward with things. We have decided we can no longer facilitate the invoice of your consultant. This puts our own company at risk as well as slowing down the progress of the project which we need to get moving on. We have enough information from you to proceed with the design and can do so once the initial invoice is paid.

Me

The invoice I generated through Stripe was still valid so I insisted we proceed once that is paid. I didn’t feel comfortable being paid by credit card and then paying cold, hard cash to a consultant that seemed non-existent. I recieved an email begging me to help and once again reminding me of his health. Sympathetic as I was, I needed to focus on the business and the security of my company. I provided him with some advice on how he could pay the consultant himself but that would be a separate matter between them. I chased it up a week later after hearing nothing and I still haven’t heard back.

In summary

There are so many subtle stages to this deceit. The timing of everything seemed perfect. Waiting until the last moment to tell us the consultant does not accept credit cards, the co-work space, the accuracy of his brief containing evidence he knew what he was talking about. The curveballs that we threw as a company were responded with confidence and composure. I had my doubts but most things checked out, even with professional lawyers!! For shits and giggs I contacted the address that he said his company was based at. It did indeed exist on Google and was a co-work space. I asked the receptionist if she’d ever heard of “John” and she said she does not know anyone by that name. I really should have done this at the time because that was the final straw.

One final point is that here at Jupiter and the Giraffe we run the following payment schedule and I’d advise you to do the same, especially with new clients. 50% upfront, 25% 3/4 of the way through the project and then the remaining 25% on delivery. This remaining 25% should be your profit margin so you’re never waiting for your company to break even on a project.

I’d like to create a conversation below. Do YOU see any red flags that I didn’t spot? Have YOU had anything similar happen to you? Is there any advice on how we can prevent this or spot this in the future? Pop a comment below. All the responses to the emails I’ve copied in full; spelling mistakes and all. Is there anything in that we could look out for in the future?

Zeplin – A Developers Perspective

In my time helping Talk Talk Group build their CMS and front-end capabilities, I worked closely with their design and UX team. They introduced me to Zeplin. Zeplin is a tool we use heavily at Jupiter and the Giraffe and it’s essential in building pixel-perfect websites by allowing us to see exact HEX codes or pixel dimensions in our designs amongst many other things. Although primarily used by designers, developers can benefit immensely from it and I hope I can shed some light on how I use it.

Cost

Zeplin is a paid-for tool allowing you to host multiple website projects within a team but they do offer a free version in which you can host only one project. For developing businesses that normally have one project on the go at any one time this is fine but when you start to grow, you may need to dig into those wallets and fork out a little per month. As a developer though I don’t need to pay for this tool. I can view many sites and inspect the designs as much as I want. So there’s the first bonus.

Size/Spacing

When first looking at a design my number one need for Zeplin is spacings and dimensions. Whether I’m looking at images, icons, paddings or margins — with Zeplin I can hover over an element and see those dimensions. This is super useful. But what is even more useful is that if I click on an element to highlight it and then move my mouse to another element, I get the distance between the two objects too!

CSS

I love writing CSS/SASS. I take great pride in writing clean, maintainable CSS and I’m part of a few developers who’ve been around the block and understand the many little hacks, tips and tricks when writing CSS. But we all get lazy. Although I wouldn’t say it’s perfect, Zeplin allows me to inspect many different aspects of the CSS markup that makes the design. This can be pretty useful, especially when trying to match border-radius or box-shadow. More on the specifics below…

Colour

Was it #e6e6e6 or #f2f2f2?? Colour can be a tricky one at times especially with true toned displays and night modes. Often optical illusions can skew our perspective on colour. From the CSS panel, I can clearly see what HEX value to use and if you’re keeping track of your variables using SASS (which I highly recommend you do!), store that bad boy and name it sensibly to never have to worry about it again.

Fonts

Fonts are another gotcha in front-end development. Sometimes a design will use regular/bold/light versions of the same font. Zeplin allows you to inspect the actual font in the CSS inspector so no more guessing.

Extensions

Extensions can be added to a project to help you work in the technology that you’re using. SASS is a no-brainer on every project for me and you guessed it, there’s an extension for that. This extension allows for mixins and variables and all that SASS goodness. There’s even an HTML snippet generator from layer styles. The Extensions ecosystem just came out of BETA so great news all-round.

Exporting images

When you have an artboard open, at the top right of your window you’ll see some little tools. Clicking on what looks like a dagger, you are actually able to export individual or entire groupings of assets. If the designer has created these as SVG’s then you can even download the raw vector image (and that means icons!). Super handy rather than waiting for the designer to send them and I’m sure you’ve been in situations where you’ve been sent ‘all’ of the icons and then one is missing. This means you can go grab it yourself!

One extra wee tip is that you can even export them in the convention of your choosing. Click on the slider icon next to ‘Assets’ and there you’ll see an extra menu!

Styleguide

Possibly the most powerful feature of Zeplin can definitely only exist with a well-organised designer but it pays! Pressing CMD + G, you switch to the styleguide. Every website should have a styleguide for many, many reasons (maybe an idea for a future post) but here you can see every colour and font choice made in a design. Simply set all these as variables in your project and away you go. If your designer uses symbols, the styleguide even imports them as components meaning there’s a little context around elements and their relationships to each other. This is so helpful to me.

Communication

Overall, a bi-product of Zeplin is that it drastically speeds up communication. Sometimes it completely removes the need to wait for a designer to get back to me about a colour or font choice. Using the techniques described above I can easily recreate a design in no time at all. Although I don’t think it completely removes the need for a designer to be on hand for some clarification or if a developer needs to challenge something but it’s a great leap forward in workflow speed and accuracy of a design.

That’s about it from me and my usage of Zeplin. I can’t recommend this tool enough so go ahead and get your team using it!

If you’d like to hear more from me, give the article a few claps. You can follow me on most other things @fakesamgregory or if you’d like to check out my company Jupiter and the Giraffe, you can visit our website. If you’re interested in our nomadic business adventures, stay tuned to Tumbling Outwardscoming in 2019.

Cost

Zeplin is a paid-for tool allowing you to host multiple websites within a team but they do offer a free version in which you can host only one project. For developing businesses that normally have one project on at any one time this is fine but when you start to grow, you may need to dig in to those wallets and fork out a little per month. As a developer though I don’t need to pay for this tool. I can view many sites and inspect the designs as much as I want. So there’s the first bonus.

Size/Spacing

When first looking at a design my number one need for Zeplin is spacings and dimensions. Whether I’m looking at images, icons, paddings or margins – with Zeplin I can hover over an element and see those dimensions. This is super useful. But what is even more useful is that if I click on an element to highlight it and then move my mouse to another element, I get the distance between the two objects too!

zeplin dimensions
Highlighting one element and hovering another unleases more capability!

CSS

I love writing CSS/SASS. I take great pride in writing clean, maintainable CSS and being part of a few developers who’ve been around the block and understand the little hacks, tips and tricks when writing CSS that is widely supported in terms of browser support. But we all get lazy. Although I wouldn’t say it’s perfect, Zeplin allows me to inspect many different aspects of the CSS markup that makes the design. This can be pretty useful, especially when trying to match border-radius or box-shadow. More on the specifics below…

Colour

Was it #e6e6e6 or #f2f2f2?? Colour can be a tricky one at times especially with true toned displays and night modes. Often optical illusions can skew our perspective on colour. From the CSS panel I can clearly see what HEX value to use and if you’re keeping track of your variables using SASS (which I highly recommend you do!), store that badboy and name it sensibly to never have to worry about it again.

Fonts

Fonts are another gotcha in front-end development. Sometimes a design will use regular/bold/light versions of the same font. Zeplin allows you inspect the actual font in the CSS inspector so no more guessing.

Extensions

Extensions can be added to a project to help you work in the technology that you’re using. SASS is a no-brainer on every project for me and you guessed it, there’s an extension for that. This extension allows for mixins and variables and all that SASS goodness. There’s even an HTML snippet generator from layer styles. The Extensions ecosystem is in BETA so expect more from this soon!

Zeplin extensions

Exporting images

When you have an artboard open, at the top right of your window you’ll see some little tools. Clicking on what looks like a dagger, you are actually able to export individual or entire groupings of assets. If the designer has created these as SVG’s then you can even download the raw vector image (and that means icons!). Super handy rather than waiting for the designer to send them and I’m sure you’ve been in situations where you’ve been sent ‘all’ of the icons and then one is missing. This means you can go grab it yourself!

Export assets

One extra wee tip is that you can even export them in the convention of your choosing. Click on the slider icon next to ‘Assets’ and there you’ll see an extra menu!

Styleguide

Possibly the most powerful feature of Zeplin can definitely only exist with a well organised designer but it pays! Pressing CMD + G, you switch to the styleguide. Every website should have a styleguide for many, many reasons (maybe an idea for a future post) but here you can see every colour and font choice made in a design. Simply set all these as variables in your project and away you go. If your designer uses symbols, the styleguide even imports them as components meaning there’s a little context around elements and their relationships to each other. This is so helpful to me.

Communication

Overall, a bi-product of Zeplin is that it drastically speeds up communication. Sometimes it completely removes the need to wait for a designer to get back to me about a colour or font choice. Using the techniques described above I can easily recreate a design in no time at all. Although I don’t think it completely removes the need for a designer to be on hand for some clarification or if a developer needs to challenge something but it’s a great leap forward in workflow speed and accuracy of a design.

That’s about it from me and my usage of Zeplin. I can’t recommend this tool enough so go ahead and get your team using it!

If you’d like to hear more from me, give the article a few claps. You can follow me on most other things @fakesamgregory or if you’d like to checkout my company Jupiter and the Giraffe, you can visit our website. If you’re interested in our nomadic business adventures, stay tuned to Tumbling Outwards coming in 2019.

Front-End Development in 2019

Every year brings new trends in front-end development and these trends really shape the landscape of work produced by the industry. Last year we saw a continued explosion of Vue.js, NPM JavaScript library downloads, a re-emergence of PWA’s and Serverless architecture continuing its relevance in the web world.

VueJS in 2018 Github

As we approach 2019, I look forward to seeing if we can get the upper-hand ahead of projects, getting familiar with technologies well before the client knows about them.

Typescript/Flow

Thoughtworks‘ technology radar vol.19 highlighted Typescript as something to ‘trial’ but I’d like to extend that on to Flow as well. As JavaScript applications grow both in size and complexity the need for more stable codebases becomes evermore important. This is where these two technologies come in. Although proven not to reduce bugs, we mustn’t forget, tools aren’t there just to reduce bugs in production. Many are often produced to make working with teams efficient, to make our code more readable and development tools more productive and consistent. Like it or loath it, JavaScript is a loosely typed language which, if you know how, can be harnessed into very powerful applications. Most of the time though, in this fast-paced world with code changing hands many times and ideas or intentions getting lost, unless we write documentation or comment our code applications can easily become unstable. I think the necessity to add static typing with technologies like Flow or Typescript will become evermore important next year so start learning!

Typescript or flow…

GraphQL/Apollo

I’m not going to claim to have used GraphQL extensively but I can already see its power and can see its relevance growing even further in 2019. GraphQL is a middleware between your application and your API’s. It allows you to query your API but specify exactly what data you need in JSON format. This is so powerful given the somewhat slow development of API’s and the format they output often not suiting how the front-end wants to consume them. When requirements change no work is needed on the backend, you just ask GraphQL to return you a different set of data. My advice is that you’ll be left behind if you haven’t picked up the basics of GraphQL. GraphQL will become the new norm. Apollo is a library simplifies and extends the power of GraphQL as a client. There are many others in many different languages but Apollo seems to be leading the charge in the JavaScript world. I think looking into some of these libraries will help enhance your GraphQL application.

Image result for graph ql logo
GraphQL will become the new-norm.

Ramda

Ramba is a very curious library. If you’ve used React, you may have come across the term Higher Order Component (HOC). These components allow you to wrap any other component in a common piece of functionality. The easiest example I can give is a call to a specific API. Ramba introduces the concept of a Higher Order Functions library which can do incredibly powerful things. They are much more lightweight than building a HOC as the overhead of a component is unnecessary. I think this library will become crucial in stripping back those essential kb’s and speeding up your app. I also think it’ll change the way you architect the application.

Communication/Remote

Although not strictly a tool, communication skills amongst development teams will be an important skill to harness in 2019. Efficiency, trust and transparency are three important aspects to great communication but there are many more resources to help learn what makes for great communication. With the inevitable advent of remote working becoming the new norm we need to be aware of how we communicate but also how we appear to others when 90% of what we say is over chat. NLP, self-awareness, how to listen and language are just some areas to consider when starting out to becoming a better communicator and ultimately a better remote worker. I strongly suggest the book ‘How to Win Friends and Influence People‘ by Dale Carnegie. It teaches you the subtlety of communication and how to harness it.

Image result for how to win friends and influence people

And with that slight tangent, I hope you found this useful. Let me know your thoughts. I’m on most things as @fakesamgregory. If you want to hear more from us, follow my company where we discuss development, design and business on Twitter @jupiter_giraffe and if you’re curious about how we cope with being a nomadic agency, check out tumblingoutwards.com where we will be launching in 2019.

How we moved from hourly to fixed pricing

Jupiter and the Giraffe established itself in 2016. Since then, we priced ourselves at an hourly rate. A rate for development and a separate rate for design. We were convinced that it offered the best of both worlds; low prices that the client loved because they only paid for the work we produced and (for us) a reduction of trigger-happy requests from the client – they only asked for what they believed was necessary. One of the reasons we were wary of using fixed pricing when we first started out was that we knew we needed to accommodate the many unknowns in a project. This meant we often had to quadruple what we thought it would cost if we charged at an hourly rate. That felt very uncomfortable at the time so we would often use this as an argument to the client of why we felt hourly rates worked best.

Two years in and with the experience gained from working on many varied projects within a diverse client portfolio, we soon began to realise the downside to charging hourly. We came to the conclusion that although our original inclination to charging hourly had its positives, it also severely undermined us as experts in our field and punished us for our efficiency. Here’s why.

The simplest way to describe this is that if we were feeling particularly productive one day, we have been known to set up a WordPress website in just four hours. If someone charging the same rate did not have the expertise or efficiency to do this in this amount of time, but took two days, they would be paid a lot more, whereas we would just charge for two hours. “But why don’t you just charge more per hour”, I hear you ask? To illustrate this, let’s take a website design. With a few workshops under our belt with a client, we could spend weeks perfecting the design; the right font choice, the perfect complimentary colours, the perfect layout. We could easily charge tens of thousands for a website with that amount of work and that’s just for the design alone. On the flip side, we’ve been in an initial one hour preliminary meeting where in this meeting, we have scribbled what became the final design for Boombocs’ website. We still have that initial sketch somewhere! Although, on this piece of work, we did do many iterations to come to the final design, this is indeed an occasion where our experience really can allow us to create great work in just a short amount of time. Should we really be punished for this for when it takes so little time? It takes years of experience to hone this skill, the education, the tireless hours of study and craftsmanship to get to this point and we need to factor that into our rate. We began to see a hole in our hourly logic.

Since then, we charge with what we believe to be ‘value based’. This means we tailor our prices to how much value our work is likely to bring the client. Nike is likely willing to pay millions for their branding because they are a world recognisable brand and will gain a lot of exposure for their campaigns. This doesn’t mean the campaign is any better than what someone else could produce. The branding agency is also not likely to charge this sort of money to their other clients. Here, it’s priced on value.

We also believe setting a fixed rate means we can offer a process and a promise that the work we produce is of the best calibre. We’ve experimented with a tier system that offers the client different options at different price brackets that will result in the same product but with shortcuts made so that we can offer it for less and more advanced features can be added at a cost. We found the client often doesn’t have the reasonable amount of technical expertise to understand what paying more will get them and the lower tiers will of course get them what they desire so will choose the cheaper option. During the production of work, working to this lower tier, we felt like we were cheating them. That we KNEW they had made the wrong choice. We were transparent in why they should pay for certain features but they opted out so this is something we had to reconcile with. We WANT to produce the best work we possibly can but when we want to go that extra mile, we often thought “the client hasn’t paid for that service” so would hold back. We’re proud of every piece of work we’ve done but sometimes we’ve had to restrict our output for financial reasons given the client chose not to receive that service.

One last point is that we hate saying “no” to things. We never want to let the client down and we want to be as accommodating as possible. This means if a new request comes in or a change at the last-minute needs to be made, we should always answer “yes” with a smile on our face. The only way we can guarantee this is by pricing ourselves and our expertise at a reasonable rate. This promise, along with our guarantee for the best means we now price ourselves at a fixed fee whereby we follow a formula in the way we produce work. We scope out what the client needs based on our findings and we decide what we need to do to get them there and we give them a price.

We’ve made a few mistakes along the way but it’s all in the name of experimentation and discovery and it’s through these learnings we were able to establish how we work and what we need to do to make our clients happy and produce the best work possible. Hopefully, this will serve as a lesson to agencies first starting out and get them pricing themselves efficiently from the start.

Check out our portfolio and follow our journey so far!