Forem: Charlotte

How And When To Use Git Reset

Charlotte — Tue, 26 Nov 2019 23:19:58 +0000

Most of us avoid dreaded git reset command — but actually it can be really useful, as long as you know how it works!

What does git reset do?

To put it simply, git reset will take your branch back to a certain point in the commit history, but there are 3 different levels to this:

soft: Moves the head back to the commit specified but leaves all the updated files in the index and working directory —all of the files after the commit that you’ve moved to have been tracked (like doing git add) and are ready to be committed as a new commit.
mixed: Moves the head and index back to the commit specified but leaves the files in the working directory — all of the files after the commit are in your working directory as untracked files. If you add them all now, you’ll be at the same stage as a soft reset above.
hard: Moves the head, index and working directory back to the commit specified — all of the updated files after the commit specified are now *GONE*!!! (uncommitted files are unrecoverable at this point)

Why would you need this?

Here are a few examples so that you will have a better idea of when to use each. You should only ever do this on your own branch, or when you're sure no one has already pulled any of the commits that you will be removing.

Soft

Let’s say you have done a few tiny commits and you want them to all be put into 1 more descriptive commit.

A -> B -> C -> D

git reset — soft A

Your branch head is now pointing at A

git commit -m “my new merged commit” git push origin branch --force-with-lease

We now have a new commit, E but it contains all of the files that were committed in B, C, D. Note: the force-with-lease flag is because otherwise git will complain that your local branch is behind the remote. (This is a safer version of force)

A->E

Mixed

You’ve just pushed a few commits, but you want to go back and remove a couple of files in a previous commit.

A->B->C

git reset --mixed A

Your branch head and index is pointing at A

git status

This will show that all of your changes in B and C are there, but are untracked

Now you are free to add the files that you wish to add into a new commit

git add <files> git commit -m "updated commit" git push origin branch --force-with-lease

A->D

Your head is now at the new commit D, and any files that you’ve not staged will still be in your working tree, ready to add into another commit or to do what you want with.

Hard

When would you possibly want this? Usually when things have gone wrong because it’s VERY RISKY. I’ll talk you through a scenario where I’ve needed it.

I’ve been working on my own branch, testing out a feature and I’ve changed many files, but it’s been a fail and I want to go back a few commits and get rid of every change I’ve made since.

If I’ve not made any commits or pushed any commits. I can just reset back to commit A and my working directory is now clear, all of my updated files are gone from history.

git reset --hard A

If I’ve actually pushed these commits to my remote branch, then, before doing this, you need to make sure that no one is working from those commits because they will be orphaned. But if you know that it’s safe to do, then run the command above. The only difference here is that you will need to do a FORCED push afterwards to push the remote branch to that state, otherwise it will tell you that your local branch is behind.

git reset --hard A git push origin branchname --force-with-lease

This will delete your commits from the remote branch history, so you can see it could be very dangerous.

I have used this to get me out of reverted merge commit hell recently. I did a pull request to merge a branch into another branch, it had merge conflicts and the conflicts were not resolved correctly, so I reverted the merge. This however meant I couldn’t do the pull request again because it saw no updates, so I tried to revert that and it ended up in a bit of a mess. I then used git reset --hard to take the branches back to before this situation and get rid of these ugly reverts in the history!

Hopefully now you will see that git reset is very powerful and can help you in some situations, used with care!

Originally posted on Medium

Why I've started asking companies about their technical interviews before proceeding with them

Charlotte — Tue, 19 Nov 2019 15:46:07 +0000

This is a quick a follow up to an article I wrote a few months ago Could your recruitment process be discouraging female developers? and what I'm doing to try to make a change in the industry.

I'm currently looking to move back into a permanent role and so I've recently been applying to jobs and interviewing. As a developer with over 11 years' industry experience, I've seen a huge shift in interview techniques and I really feel like many companies are losing out on great candidates because of their interview styles. I've decided that rather than just backing out of interviews and making an excuse, that I will be extremely honest with them so that they can then hopefully make their processes more inclusive.

One process does not fit all

I know that people will say that interviews need to be consistent, but the reality is that people are different. Some people will thrive in whiteboard interviews, others will have a panic attack just thinking about this scenario. Some people will feel comfortable spending time doing a take home test, others might have no free time to do this. Why don't we give people the choice in technical test?

An interview should be to try and get the best out of someone, not to put them on the spot and catch them out.

Test for things that are actually needed in the role

I've seen people post about this many times. Why are companies testing for things that will never be used in their job? An understanding of algorithms is important; solving an algorithm in 20 minutes with someone watching you on a whiteboard is not. I feel like some smaller companies just mindlessly follow the processes of those big well known corporations.

Expecting multiple rounds of interviews from a candidate

Companies seem to think that it's OK to put a candidate through multiple rounds of interviews (I've seen 5/6 at some places). That's a huge investment in a candidates time, especially if they then get rejected at the final round. I've also noticed many companies not offering expenses for travelling to interviews.

Ignoring previous experience

Many developers are getting frustrated because it often seems like experience doesn't count for much in industry nowadays. If a company wants to give me a technical test before even talking to me or through my technical experience then I won't proceed.

Relying on personality tests

If you're rejecting candidates based on tests such as Predictive Index then your process is extremely broken. These tests are old fashioned and they'll likely reject women from leadership positions for not fitting the male leader stereotype.

How can you help to fix the issues?

If you are the one applying for jobs, don't be afraid to ask about the process before proceeding. Interviews are a two way process and if you know that a certain style of interview is not for you then be honest because if enough people say the same thing, things will change! I've brought this up with companies and they'll either not proceed or they'll take it on board and try to make the interview process work for you. Also, glassdoor is a great resource for checking out interview processes at companies and seeing if candidates are having positive or negative experiences.

If you are an interviewer, try to make sure that your processes are flexible. Be aware of the time investment that you're expecting from your candidate. If you're splitting into multiple rounds, candidates often have to prepare for each round and there are travel expenses to consider too. Take the time to talk about previous experience and consider this alongside technical tests. If they don't perform how you want in a part of the test, they might have other invaluable experience that you've missed because you've been too focused on specific tests.

I'd love to know your thoughts and any additional suggestions too.

Enabling CORS On A Magento 2 Site Using An Nginx Server

Charlotte — Sun, 17 Nov 2019 21:33:57 +0000

After spending a while fighting CORS issues using a headless Magento 2 setup, here is how I solved the issue using nginx.conf

Before jumping into a solution, I think it’s important to understand what is happening and why

What is CORS?

CORS stands for Cross-Origin Resource Sharing and it basically controls which sites can access the resources of another site. If you are running applications on different subdomains and/or domains and they need to talk to each other, then you will need to setup CORS.

How do we setup CORS?

You will need to send specific headers from the application that is being accessed. So for example, if your front end application is on one domain and it needs to access an API on another domain, you must setup the access headers on the API server.

Docker Setup

This tutorial is only for a server running Nginx. If you already have Magento up and running and you just want to look at the final configuration file settings then you can skip this section.

For my setup I user docker compose using Mark Shust’s configuration and Magento community edition is installed via composer. By default the docker-compose.dev.yml will mount the default Magento nginx.conf.sample file as your default configuration file. As we need a custom configuration file, copy the contents of nginx.conf.sample into a nginx.conf file in your root Magento folder. Update docker-compose.dev.yml replacing

./src/nginx.conf.sample:/var/www/html/nginx.conf:delegated

With

./src/nginx.conf:/var/www/html/nginx.conf:delegated

Now this will be the configuration file that will be used on the nginx server.

Nginx Configuration Settings

CORS Preflight Request

When a site tries to request access to resources from another site, it will first of all send a preflight request. This basically just asks the server if it will allow the request and it’s sent in the form of an OPTIONS request. This is why if you sent a POST request to another server, you will also see an OPTIONS request sent first.

So, we need to make sure that when an OPTIONS request is sent to our Nginx server, that we respond back with the correct headers. Here is an example:

Access-Control-Allow-Origin: the domain allowed, * allows ALL domains. You cannot put multiple domains here (how to restrict to multiple domains is explained further down)
Access-Control-Allow-Methods: the methods to allow CORS requests for. You might need PUT and DELETE too if you’re using the REST API, as I’m using GraphQL, I’m only using POST, GET and OPTIONS.
Access-Control-Allow-Headers: the allowed request headers. If you were for example to send an Authorization header without it being listed here then your request will be rejected.
Access-Control-Allow-Credentials: I’ve not included this in my configuration but I want to explain what this does. It will allow cookies to be sent with the request, for example if you need to authorise using a session cookie.

Where do we put this code?

You’ll notice entry points within the nginx.conf file. Most of the time you would put it in the root location, however in the Magento setup, this won’t work.

location / {

try_files $uri $uri/ /index.php$is_args$args

}

This is because it uses try_files and if you set the headers above this then they get ignored because it checks for the index.php file and redirects if it exists. So you need to find the entry point for php files.

You’ll notice that I’ve set the cors origin url in a variable, this is because we also need to set the Access-Control-Allow-Origin outside of the OPTIONS request block, for all other requests. This has to be repeated because if you set headers in an if block, it overwrites the previous add_header statements, see if is evil for an explanation.

If you restart nginx (bin/restart if you’re using the same docker configuration as me) then you’ll now be able to do CORS requests. However, it’s not very secure as it’s using * so it’s accessible to any domain! let’s restrict that!

Restricting CORS to certain domains

As I mentioned above, sadly we can’t use multiple domains within the Access-Control-Allow-Origin header. So we have to do the logic outside of the header setting. Thankfully this is possible with simple regex:

Here, we’re simply setting the $cors_origin to the current request origin if it matches either https://localhost:8000 or https://mywebsite.com. You can modify this to allow multiple domains and subdomains.

Putting all of that together, here is my php entry point (note: the configuration below the final add_header is the default magento configuration and may change with updates, so please do not just copy and paste everything)

Originally posted on Medium

Using Netlify lambda functions to send emails from a GatsbyJS site

Charlotte — Fri, 18 Oct 2019 17:52:45 +0000

I’ve recently created my website using GatsbyJS and it’s brilliant. I come from a full stack background, with a lot of back-end experience in PHP so the JAM stack is a different way of thinking for me. However, I’m all about embracing new technology!

My website is fairly simple and doesn’t really need a back-end so it seemed silly to use a CMS with a database; as a developer, I can easily add new information without the need for a fancy admin area. I do however have a contact form, so I needed to decide how I was going to send emails without a backend server.

Netlify does offer built in form handling but I was struggling to get this to work. It actually turns out that Gatsby wasn’t generating the static markup for this form so Netlify didn’t know about it (something to watch out for if your components are being hidden based on state). Also, I wanted the messages to go direct to my inbox, rather than checking on the Netlify site, so I decided lambda functions were the way to go.

Lambda functions basically allow you to create API endpoints without setting up a server. So I just needed to create an endpoint to send emails and call this endpoint when the form is submitted. I decided to use Sendgrid to send out my emails as I really like how you can keep track of activity and they have a really simple node library.

Setting up Netlify functions with Gatsby is really simple and there is already an amazing post on this, so I won’t go into details. Once you’ve ran through the steps in that post, you then just store all of your functions as js files in your lambda directory. Each file must export a handler method with 3 parameters, event, context and callback.

event — is an object that contains details about the request, such as body and headers
context — contains information about the context in which the function was called, e.g. identity user information
callback — is a function that should be called to return either an error (as the first parameter) or a response object. (Although this actually isn’t needed for async calls)

So, to create my lambda function was really simple. I first of all installed and saved the sendgrid dependency using npm and then created a new function called sendmail.js within the lambda folder. One of the reasons why you shouldn’t send things from the client side is because tokens can be stolen easily. Therefore, we need to store the sendgrid API token within Netlify. I also decided to store the email address to send the email message to here, so that it can be updated easily. To access environment variables, go to your Netlify site dashboard, click on settings and click on build & deploy and then environment.

Ok, now we have the environment variables, let’s look at the code

For this function, you can see that we actually only use the event parameter and environment variables (from process.env). The form body is sent as JSON, so we simply parse this and get the values that we need from it. I decided to make it dynamic too and to send all of the fields within the body of my email, this means that if I decided to add another field to the form in future, the function won’t need updating.

The sendgrid documentation doesn’t mention error handling, however I didn’t want to just assume that the message had been sent. I’d rather tell a user that it failed so that I don’t miss out on an important message. I used async await and this caused me a bit of pain as I was getting errors such as UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'statusCode' of undefined when using the callback. It took a bit of hunting around to realise that if you are using an async function, you don’t use the callback, but simply return the response object!

So now we have the function, how do we call it? First of all I created a state object to store all of my form fields. I’m using React hooks, so I’ve written mine this way, however if you are using React classes, simply add to your this.state object.

I then attach a function onto the onChange event for each input element that will update this state.

Finally I created the submit handler below and attached it to onSubmit on my form element. This is just a skeleton, you can do whatever you need to do if the form sends or fails. On my site, I pop up a modal.

And that’s it! simple! Now this is very basic lambda function usage without authentication, etc. If you have functionality that requires authentication, I’d highly recommend reading this post.

Originally posted on Medium

Could your recruitment process be discouraging female developers?

Charlotte — Thu, 17 Oct 2019 10:44:18 +0000

There’s a huge push for technology companies to hire more women but as female developer myself, I really haven’t seen much change in the past few years. If you speak to a female in technology, they’ll likely tell you that they don’t actually want special treatment; they just want to just have the same opportunities as their male colleagues.

Why is diversity important?

I’m hugely passionate about my job and I really believe that a diverse workplace is the best workplace. I don’t believe that any gender is better suited to a particular role, but I do think that we possess different skills and that skills that are often associated with males are more valued, especially higher up in business. Women are made to feel like they need to change their personalities to become more assertive, competitive and to not show emotion in order to be taken seriously. But in reality, emotional intelligence is an amazing additional team and management skill. How many times have you seen management decisions made that don’t even consider how this will affect employees? Often it’s not that management meant to upset employees but the correct mix of skills weren’t in the room to foresee this happening. This isn’t just a gender issue either, we need people from all backgrounds in order to make the best decisions.

How could the recruitment process be to blame?

It’s been found that women will only apply for a job if they meet 100% of the job requirements but men will apply if they meet 60%. That’s a huge difference! Your job description alone could knock out all of the prospective female applicants. I personally think that this is even more true when the woman is in a male dominated industry because our fear of failure is greater; we worry that we’ll be judged more harshly due to our gender. Sadly there is evidence to show that this is true too, with female developers at Facebook getting their code rejected 35% more than their male colleagues but with code being accepted at a higher rate for females when their gender is hidden.

Then we have the interview process. I myself have not responded to recruiter emails for large corporations because I don’t want to go through their extremely intensive interview process. Solving algorithms on whiteboards, having to memorise syntax perfectly for multiple languages is not a real life job scenario and puts off many people, especially minorities. This robotic style hiring process will only hire a certain type of employee and not necessarily the best employees.

How can this be improved?

Women are a minority in technology and this isn’t going to change overnight, however companies can definitely attract more women and other minorities with changes to their recruitment process.

Don’t be so black and white with job descriptions. Make it clear that you will be taking their skills as a whole into consideration and that they do not have to tick every single box.

Don’t expect every candidate to possess the same skills during interviews. Many large corporations will expect perfect interview performance, thinking that they’re setting a high bar. In reality they are hiring candidates that are good at exam like conditions and have spent a lot of time memorising algorithms, rather than varied skillsets.

Test the candidates how they’ll be tested in their jobs. Developers come across things every day that they haven’t used before. A good developer uses their skills to research and solve problems in the best way possible. Exam-like conditions are not a good indication of how a candidate will perform in every day scenarios. Give them the freedom that they would have in their job to really get the best out of people.

Treat candidates like humans. Don’t treat them like your time is worth more than theirs. I’ve heard of people even getting through to final stages of interviews after months worth of preparation and then never hearing back. Although larger companies may think that this doesn’t matter as they always have applicants, they will be losing out on hard to come by minorities who may be a good fit in the future. They could also lose out on prospective applicants who hear about the bad experience from others.

It’s not about lowering the bar, it’s about being more inclusive.

Originally posted on Medium and Women Who Code

Why great developers/software engineers suffer from imposter syndrome

Charlotte — Thu, 17 Oct 2019 10:25:31 +0000

I remember when I first heard the term imposter syndrome at a conference and it was a real revelation for me; in a room full of hundreds of talented lead developers, only a handful had never experienced this.

Imposter syndrome is essentially the feeling that you’re not good enough and you’ve got to where you have by accident. It sounds ridiculous when you say that; how could you have faked years of experience and delivering great projects? But it’s a very real feeling.

The thing I’ve learnt during my time in industry, is that imposter syndrome is usually the sign of a great developer. A developer can never know everything, technology is constantly changing, there are multiple correct ways to solve problems and we’re surrounded by people who know things that we don’t. A developer that thinks that they know everything isn’t usually someone that you want to work with.

Although imposter syndrome usually means a person is aware that they need to keep learning, it can also really hold people back. I’ve had friends who are amazing developers that I’ve really looked up to tell me that they fear interviews and that they don’t think they’re good enough for roles. It’s not simply a confidence thing either, as these are people who are really confident when they’re working on projects. It’s the awareness that people will know more than you on particular topics.

So how can we overcome this feeling? I’m not sure we can ever overcome it completely, it’s the price we pay for being in an industry surrounded by really intelligent people and endless things to learn. One thing that’s really helped me over the years though is to embrace the knowledge of others, learn from them and you’ll find that they also learn from you. I remember years ago doing pair programming for the first time in a large company and I was terrified because I thought I’d look stupid in front of them. In the end we had great fun and we learnt from each other.

Tell your colleagues and friends that they are great, go to them for help when they know something you don’t and don’t be afraid of someone being better than you. A collaborative environment is far better than a competitive environment that just exacerbates imposter syndrome.

Originally posted on Medium

The Most Common Developer Web Accessibility Mistakes & How To Solve Them

Charlotte — Thu, 17 Oct 2019 10:03:30 +0000

Sadly, accessibility is not often given the priority that it should be. It’s harder to make a website accessible at the end of development than during development.

Accessibility is so important and unfortunately, it’s not often seen as a priority in companies unless a client requires it, e.g. for government sites. The fact is that all sites should be inclusive and you could even find yourself facing a large fine if a disabled user is unable to access your services.

The World Wide Web Consortium (W3C) has a set of Web content accessibility guidelines with 3 levels of conformance: A (lowest), AA, and AAA (highest). AAA is quite difficult to achieve, however I’d always recommend aiming for the highest, so then your site should end up at least AA, which is required by most government sites.

It’s also important to note that these guidelines are not just for developers, a lot of consideration needs to be taken at the design stage when choosing colours, font sizes, etc too. Here are a list of things that I’ve noticed come up a lot during development and how you should think about doing them in future. It’s by no means a full list though, so please still familiarise yourself with the guidelines.

Removing focus styles

This is a HUGE mistake that people make. We all know that the default focus styles can really ruin a design, but they are there for a reason. Some users are not about to use a mouse due to disabilities, so they need to use a keyboard to navigate through your site. If you remove these styles then they will not know what action that they are about to perform.

So how can we maintain accessibility and aesthetics? :focus-visible is a pseudo class created, similar to :focus that is meant to solve the issue of focus styles also being visible when a user clicks with a mouse. Sadly it’s not widely available on browsers yet as it’s part of the CSS4 working draft.

I personally use the focus-visible polyfill. I am then able to turn off default focus styles:

{ 
  outline: none;
}

Then I can style every element that requires a focus separately, or all elements using the new .focus-visible class that the polyfill adds. For example:

.focus-visible
{
  outline: 1px solid $brilliant-rose;
}

or styling a specific element:

.top-link{
  border-bottom: 1px solid transparent;

  &.focus-visible
  {
    outline: none;
    border-bottom: 1px solid $brilliant-rose;
  }
}

Not making elements tabbable

It’s all very well styling the focus but we need to make sure that users are actually able to tab to elements that have an action. This is where it’s important to select the correct HTML element to use. Both anchor links and buttons are automatically tabbable, however the button is also triggered using the space bar. The general rule I use is:

Buttons — use when triggering an action on the page, such as a javascript action like opening a menu, or submitting a form
Anchors — use these to take a user to another page or another part of the page

If you use other elements such as a div then you will have to add in both a tabindex attribute AND ensure that the event is called on enter. For example:

<div tabindex="0">Test Element</div>

Would make the element tabbable in the order that it appears in the DOM, but if you have an onClick action then the user will not be able to hit enter. There are multiple ways of doing this, for example if you use React

<div tabindex="0" onKeyPress={keyPress}>Test Element</div>

The even then checks for the enter key

  if (event.key === "Enter") {
    //action here
  } 
}

There are very few scenarios I’ve come across where this would be needed over a button.

One gotcha I’ve recently had come up too is that an anchor without a href value is not tabbable. This was due to a library I used to scroll to another part of the page. You can add in a # as a fix but really you should consider if it’s actually more suited to a button element if it’s only using javascript. There’s no definite answer here.

Having an illogical tab order

Sometimes, especially when using content management systems (CMS), the markup may be added in an usual order. The styling is then done in such a way that it looks fine, but when you tab, the order is incorrect. Really you should always try to put elements in order, but if you are in this situation then you will manually have to use the tabindex attribute to set your order.

Not hiding tabbable elements correctly

Another important thing to remember is that just because an item is hidden from view, it doesn’t always mean that it can’t be tabbed to. This is the case if you are using CSS attributes such as opacity: 0. The element is technically still able to be focused on and this can be really confusing if you’re a keyboard only user. **Make sure that you use display: none or visibility: hidden **which will stop users being able to focus on that element. If this affects an animation then a trick you can use is to apply the style after the animation.

Using icons as buttons

This is something that we see on pretty much every site nowadays. The problem is that a lot of sites are not considering screen readers users as they won’t have a description of this icon. Some people add in a title attribute to links or buttons, but you should not be relying on title attributes for
accessibility. Unfortunately it’s not consistent across devices, browsers and screen reader software. Even aria-label should not be relied upon.

The easiest way is to add in some text that is hidden off the screen and will only be read out by screen readers. There are a few ways to do this, here is one example. Do not use display:none because then it will not be read out either.

{
  clip-path: inset(100%);
  clip: rect(1px 1px 1px 1px); 
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

An example of this in use

<button>
  <i class="fa-times"></i>
  <span class="visually-hidden">Close Menu</span>
</button>

I personally have started using inline svg icons over font icons. Inline SVGs can have a and a tag, so if you are able to add those within the SVG then you do not need to add extra text that is visually hidden. The same is the case if you use functional elements, you can use the alt attribute.

One scenario I’ve come across too is that I had a reusable inline SVG that required different descriptions. In this case I used aria-hidden attribute on the SVG element and used the visually hidden text as a description. It’s important not to confuse screen reader users with multiple descriptions.

There is also the case that maybe we should be adding more text for all users. I’ve read a few articles on here suggesting that actually icons alone aren’t very user friendly.

Using unsuitable link text

Imagine that you are a screen reader user and you’re tabbing through a long list of links. “Click here” or “read more” for every link isn’t very informative is it? We need to ensure that link text is descriptive on its own.

There are scenarios where it would look really bad to add long descriptive text. I’ve worked on a site that listed events using a CMS and we had a book tickets link next to each event. It would have really ruined the look of the site to add the whole event description onto the link that was styled like a button.

This is where visually hidden text comes into play again. We can add an extended description for screen reader users without ruining the aesthetics of the site.

<button>
  <span>Book Tickets</span>
  <span class="visually-hidden"> for X event on the DD of MM YYYY</span>
</button>

Make accessibility testing part of your standard testing!

As you can see, these are very simple little things to do at the time of developing, but if you had to go back through a website and add these in, it would take a long time. Make this part of your standard process.

Originally posted on Medium