As every year I have attended ffconf down in brighton, this is a great conference that I love to go to. The talks a great, the people you meet are great so I certainly recommend it.

Engaging Empathy - Sharon Steed (@sharonsteed)

Sharon started the talk telling us the story of how in her childhood she learnt that stuttering is seen as a bad thing. She sadly felt shame for this for a huge part of her life. She sought the help of a speech therapist and it was suggested she try public speaking. She started by giving an ignite talk, was a 5 minute talk with 20 slides which changed every 15 seconds.

When defining emptathy she compared two definitions of what empathy is, the first being:

the ability to understand and share feelings of another

However another way she has seen it phrased is:

the thing you should be doing to make the environment in your office sucks less

Empathy as a noun is a idea, however it should be used aa verb, as as a verb it is a choice. We should make a choice to use empathy every day.

Empathy is very different for every single person, Sharon said the best way to give her empathy is to let her speak, allowing her to just talk.

Collaborating with empathy requires open lines of communication, so letting people work in a way that they are comfortable and being open.

To communicate openly requires a feeling of safety and inclusion. The individuals need to be able to ask for what they need.

Collabriating with empathy is putting people first.

You choose empathy by using 3 behaviours:

  • Patience - this means being present, theres so much going on the world but its important to be 100% present, to stop and engage with what is happening directly in front of you. Its important to remember why your having this conversation, always come back to ‘im having this conversation because of x’
  • Perspective - this is the root of understanding, we don’t know everything thats going on in peoples lives, this person probably has a lot going on outside of the job so their behaviours are likely to be influenced by what is going on in their lives. Think before you speak, pause and consider what your going to say before your going to say it. Its important to embrace their opinion and what they said. Elimnating as many biases as you can.
  • Connection - connection is the real reason we communicate, you want to use empathetic communication, and the way you communicate should change dependent on who you are speaking to. Speak with intention first, and impact second. When we talk we often will put emphasis on the impact our comments will have, you want to speak with intention as it will get you alot further along in the conversation and help you connect a lot better. Approach every interaction as its own situation, everytime you talk to a person you are contuniong to build that relationship so by treatting every interation as a seperate situation will help you build that connection.

Engaging empathy is:

  • Being culturally agile
  • Being agile communicators
  • Being agile thinkers and feelers

What does it take to become a developer in 2020 - Amina Adewusi (@a_adewusi)

Remy told Amina that ffconf is about how to make the web a better place and the future of the web.

11 years ago when ffconf started only quarter of world used the web while now its half the world. 11 Years ago Chrome was release as was Android, they have since become dominant platforms.

Its been 5 years since tech companies released diversity figures, with apple having 20% of staff as women in 2014, by 2018 this only increased to 23%.

In the UK the UCAS data showed that 80% of computer science graduates were male.

We have a persitant problem in our engineering community and are so many other ways we can measure diversity than ethnisity and gender as well.

Beyond building products for our diverse user groups we must build communities that foster diversity within our product teams.

Amina joined the Guardian as an engineer, when sat at her desk she looked arround her office and there were lots of developers who were happy to help. The memory of being on the outside is still with me now, I can’t feel truely happy knowing there are loads of people who are still looking to get their foot in the door.

Amina was working across Africa, working in finance roles which required lots of travel. When she started a family with her husband she thought she could continue in this role however what she thought would be 3 months off work became 12 months. She realised that she wouldnt be able to travel as much so she went to Google to search for a work from home job and found the most common roles were software engineer roles. She did some research and spoke to lots of people, with the idea that she wanted to find out whether being a software engineer would be right for her.

She learnt to code through the kindness and generosity of the engineering community. It was challeging with a job and a child. She then had to deal with how disheartening it was to receive so many job rejections.

As a non-computer sience graduate that there are 2 ways to get into the industry, self taught or bootcamps.

Bootcamps offer a curriculum along with peers to work with and alumni. There is also teachers teaching the curriculum and then the support to get a job.

Unfortunately bootcamps are not accessible to everyone. They cost approx £8000 and there is the opportunity cost of not being able to get a salary while doing the course. Bootcamps have a reputation of being fast paced and sometimes have questions of quality.

The self taught route is challenging it is the only option to many. Those who are self taught need to find their own peers and teachers. Amina found her teachers through contributing to open souce, going to meetups, and confernces through diversity scholarships. Getting a job was the hardest part, she found schemes like the Guardian fellowship were the best option but there are not many on offer. Technical tests were time consuming and fitting it in round the rest of life can be difficult.

Being self taught allows you to set your own pace and your own goals, your likely to pay less money and can do it round an existing job.

As professional developers, one of the main takeaways was that a non-conventional way into tech can be challenging. Change is in the hands of the professional developers, Amina said shes here because professional developers gave their time to help her.

We should help people because it can have an exponential impact on other peoples lives, helping one person means your likely to be helping several. Tecaching something helps you gain mastery in things, Amina has spent time with engineering managers who relish in being able to help solve a coding problem.

Engineering leaders should create more entry level roles, and support and incentivise current engineers to give their time to help people trying to get into our industry

Getting more from git - Alice Bartlett (@alicebartlett)

The aim of the talk is to get us all a bit better at git and give us an interesting 40 minutes.

10 years ago she was told to write meaningful commits however she would often be writing code until it works so she stuggled to write meaningful commit messages.

To understand what bad looks like, lets have a look at Alice’s commits from 10 years ago:

One example being that she wrote a pr with 204 aditions however the commit message was ‘sqllite stuff’, so wasn’t very clear.

What we are aiming for is atomic commits with meaningful commit messages, an atomic commit is a commit that makes sense in isolation and as a single unit of code.

Commit messages should have a nice scanable summary so its easy to scan across the commit messages, commit bodies should be used to provide the detail of why you made the change.

As engineers we do lots of things to make good code bases, we bikeshed over naming things, we write documentation of what it does. Git commit histories can be part of that. They never change, they live alongside your code and they are searchable using git grep.

If you put all your info inside GitHub pull requests its great for the review but if your company wants to save money and moves to bitbucket then you lose all that information. Putting in the ticketing system makes it then hard to find.

Second reason for writing good commits is it will make you a better software developer, firstly you will be able to debug things quicker because you will know why that code change was made. In addition to be able to explain why you made the change you will need to understand why you made the change which will help you to think about the change you are making. This is a solid investment in the future of the codebase.

Git was developed in 2005 by Linus Torvalds as a way to manage the source of linux. He is known for emails to the linux mailing list containing inapproriate content. When he created git it was described as a tool designed to make you feel less inteligent than you thought you are. The creation of Git was a bit spicy because previously they had be using a closed source application called Beekeeper.

One of the design choices of Git which was different from competitors is that it is distributed, means that you clone the whole repository so you can make changes localy and later push them to a centralised repository.

Git made branches really easy to use, while in SVN and CVS your branches are in global scope.

The git user interfece is difficult to use and the documentation is very difficult to understand which adds to the complexity.

Tips for rewriting git history, aiming for atomic commits with descriptive commit messages.

In git there are three data structures that represent your work:

  • working direction - synced with your file system
  • staging index
  • commit history

Every commit has a pointer and links back to last one.

git add –patch

If you are working in a non-linear way then you are not working atomically.

Running git add --patch will

git commit –amend

Super useful for amending just your last commit, it will create a replacement commit. This means you can fix issues in your code or commit message.

git reset

Git reset will reset to a point in time,

git reset <sha> the changes will still be in the working directory

git reset <sha> --hard will remove the changes from all the newer commits.

git rebase

It allows you to rewrite your history by replaying your changes over a branch.

git rebase --interactive turns git into a very boring text adventure game. You can then give git a instruction list of what do to with the commits.

8 unbelieveable things you never knew about tracking - Laura Kalbag

After reading an article on Pink News about strictly come dancing she saw lots of related articles that seemed relevant to her location and her being a woman.

These were provided by Taboola, she decided to look at the privacy policy and found they claim to anonomyse data. Studies have found though that you only need 15 pices of demographic infomration to identify a person.

Taboola call groups of users a data segment, and they offer data from first party data and partners. The list includes Acxiom and Oracle. You can read about what these 2 companies are doing on Cracked labs.

Taboola says it does not create segments based on what they consider is sensitive information. When Laura looked into the groups though they do appear to be very personal such as how someone deals with stress.

This profiling of users and can be used to manipulate peoples decisions. There is a really good documentary on this on Netflix called the great hack.

Many people argue that profiling and targetting can make our lives easier and more convenient.

You can avoid some tracking by not logging in however websites can track you using fingerprinting based on browser characteristics.

If you use gmail all your conversations can be used to track you by Google. Even if you dont use it, if your friends do all your interactions with them will also be read and contribute to your profile.

We shouldn’t have to be smart about what we are sharing online, we shouldnt blaim the users. Corporations are at fault for invading users privacys.

We are not consenting to the use of our information and are being asked to give up everything or lose access to what we wanted to access.

From milliseconds to millions: a look at the numbers powering web performance - Harry Roberts (@csswizardry)

First thing when working with a client is to ask the right questions to the client. The reason is that I don’t have all the answers.

Some of the most valuable questions Harry asks are:

  • How do you know the website is slow?
  • What key areas of the site should I look at?
  • What will it being faster mean for the business? - What is the companies goal, is it to get more conversions, solicit more donations.
  • How do you intend to measure this? - How do we know when we have won.

Clients are not looking for a faster website, they want a more effective website.

First thing is to gather data, capture as much as you can. Often the relevant tooling is often not already in place so often I will be forced to get redimentary information from google analytics. Its using averages while in performance we normally want to look at medians. The problem is it focusses on load times, its a proxy for performance but its not the main area we should focus.

When looking at one of a clients sites using google analytics Harry noticed that some areas of the world has much worse load times than the rest. In particular he noticed venusueala had a really bad load times, upon investigating he saw that the country had a lot of users using bitcoin. He got the developers at the client to start testing more using the internet connection of venusueala which helped them see what users experiencing.

When looking at performance it is important to understand what to focus on, moving from 1 second to 0.5 seconds is much harder than 2 seconds to 1 second.

If the focus needs to be start render you need to look at the head tags where if the problem is load then you need to look at subresources.

When Harry worked with trainline they found out that 0.3seconds performance improvement would make them £8m more. Unfortuantely he charged a day rate so he didn’t see any of that. These days he does a value based pricing model.

The first step is to determine the value of a performance project. If the company doenst know this then its very quick to add speedcurve to the website to see the performance of the site. You can also add conversion metrics so you understand the relationship between performance and conversions.

When defining a performance budget set it to the highest point in the past 2 weeks, every 2 weeks review this and see whether you need to fix performance regressions or if you can lower your performance budget further.

Finally its good to know when to stop, when is good enough. Web performance projects never finish but they move from active to passive. Don’t get obsessed but instead maintain what you have achieved.

Effortless performance debugging - Anna Migas

Anna works at castle, a security company that protects against account takeover attacks. The talk is a live debugging exercise.

The website Anna is debugging is a cat blog running on localhost so it is really fast.

To start with switch to the performance tab and set the network to slow 3g and cpu to 6x slowdown. The page will now load significantly longer, this might be something your customers experience in real life. You can now record the performance of the website and see a metrics breakdown of the site loading.

First at the top we have a timeline of the performance, then we have screenshots of how the loading progressed. In the timeline we will see red areas which are highlighting performance problems.

Below we have a section for timings which will show the different loading events as they happened. Below this is a main part which when you expand and get info about what happens as the browser renders the page.

Another part of the dev tools used for auditing is the audit tab which has the lighthouse audit. This will allow us to audit the page for performance, when run it will refresh the page and run a set of performance audits to help understand the performance of the page.

In the network tab we can see how the assets are loaded. This gives us the opportunity to see what isn’t necessary for the for the intial load. We can test whether something is needed by using request blocking to block the file being requested and if we find a script isn’t needed then we can choose to defer it by adding a defer attribute to the script tag.

When using the screenshots we can see that the images are visible before the text. This is because we are using external fonts, to fix this we can add font-display: swap to the @font-face definition so that our browser renders with a different font first.

If we reload page again with the slow connection what we will see is when the images are loaded the page jumps. As all our images are same name we can use a aspect ratio trick to allow our images have the adequate space. We set a container with a position relative, and padding-bottom with a percentage with the correct aspect ratio vs the width of image and then position the image absolutely wihtin the container.

With this in place we can then improve performance further by lazy loading the images, some browsers now support this natively however the common way to do this is using a Javascript library such as lazyload. This will mean when you scroll the page the images will be downloaded rather than all being downloaded at the start.

Moving to interaction performance, when the browser is rendering the page it renders frames. When the browser fails to render the frames fast enough it causes interface jank.

There are three different kinds of visual change browser can make, there is layout change, paint change and compositing change.

If we switch to the rendering tool in chrome devtools we can enable paint flashing which will show us when the page is being repainted. When hovering over a layout change the whole page is effected. When hovering over the paint change it will only effect that area and then using the compositing change it effects the least area.

Another helpful tool is the layers panel, this shows us all the layers that are on the page. It will give you information about why the layer was created along with giving you a 3D view to understand what is going on with all the layers.

Taking the web off the screen - Charlotte Dann (@charlotte_dann)

Firstly starting with explaining how you can do generative art with CSS. With CSS you can write code that can repeat styles and with techniques like nth-child you can start playing with randomness.

You can then print this out as art and add some permanence by materializing it into the physical world.

Another tool than a printer you can use is a pen plotter, the cool thing about a pen plotter is it isn’t 100% accurate because of ink bleeding so it adds a nice uneven ness that is otherwise hard to achieve.

You can render things to a canvas and use canvas2svg to then render that to a vector for printing.

With generative art you can then generate designs suitable for jigsaws. Then generate the design for the jigsaw pieces and then use a laser printer to cut out the unique design.

Adventures in reinventing interfaces - Suz Hinton

So your boss comes to you saying you need to build this thing that interfaces with robots. We can do this with USB apis.

When defining the protocol based on ASCII we can use ASCII to send the text however we also want to send commands. As users are not going to be using ESC key for typing text we can use that as our commane so [ESC]E could be bold, [ESC]G for strike through and [ESC]- for underline. The robot also supports three different fonts, so we can specify extra letters in the command so we can do [ESC]M for font type and then a number afterwards to specify which font is needed.

This is an existing protocal called ESC/P, it is epsion standard code for printers. This was a popular mechanism to add formatting to printed text and was widely supported in software. ESC-P supports pictures and most thermal printers use USB or Bluetoohth. We can therefore use web USB or web bluetooth to connect to them.

Using this Suz built https://progressive-web-boy.glitch.me/ which can connect to a Bluetooth or USB thermal printer and output a photo you take using your camera.

Wrapping up

Every single talk at this years #ffconf was amazing, previous years there has usually been 1 or 2 talks that haven’t realy grabbed my attention but this year its not the case.

Thank you Remy and Julie for putting together an amazing confernece year after year. Hopefully I get a ticket next year when they are released 😀.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more