Forem: codegram

Firefox, let's focus, please!

Verónica Ojeda — Wed, 10 Feb 2021 15:04:37 +0000

I've decided to share this tiny ~~miny mee~~ issue that we had in the last project that I worked on, just in case someone is facing the same problem, so they don't have to ~~waste~~ spend their time too.

As you might already know, I care about accessibility a lot, but caring is not enough, you need to learn, and there's a lot to learn in this field. Thankfully I'm in a team where everyone is really involved with this topic as well, so we're all learning together. And what a lesson we've learnt here...

But first things first, what's the focus?

Focus determines where keyboard events go in the page at any given moment. (...) Focus refers to which control on the screen (an input item such as a field, checkbox, button, or link) currently receives input from the keyboard, and from the clipboard when you paste content. (Source: Web Fundamentals)

They say an image is worth a thousand words and I couldn't agree more so here is a GIF of Codegram's site being used with the keyboard (TAB key) and each focusable element receiving the focus clearly by the blue rectangle.

The mystery of the lost focus on Firefox

We were performing some accessibility plus cross browser testing to check that the site we were building was accessible by keyboard in Chrome, Firefox and Safari. So after we finished the testing, the results were:

✅ Chrome
✅ Safari
❌ Firefox

It was not possible to navigate using the keyboard on Firefox. Focusable elements like anchors weren't accesible by keyboard, they weren't receiving the focus as they should.

We didn't know what could be causing it... was it Tailwind's fault? Maybe Nuxt? Vue? What about PostCSS pollyfill? Because when something is failing, you need to blame someone so who was guilty here, right? But the problem was that it didn't make any sense at all to be anything of the above.

Sometimes, being a software developer is not that different from being a CSI detective. I decided to begin from the most basic site I could think of and then add different things™ to find out who/what was causing/responsible for the issue.

So I tried to navigate using the keyboard with the simplest site ever, just a plain html with a few anchor elements. And it still didn't work! Instead of each link, the whole body was being focused. 🤯

The typical thing to say is "It works on my machine.", but in my case it's usually the other way around: "It doesn't work on my machine.". I have that gift, I break things. So I asked some coworkers to try it as well and surprise: it was working just for one but not for the rest. 🤯

This was the clue that I needed to determine that it definitely was something related to Firefox and not to the code or the technologies we used.

So what did you do to make it work in everyone's machine?

Well, I did what I do best, research! 🔎 But this time just focusing on the browser and nothing else, not a single technology.

And finally... 🥁 I found The Solution™.

In the end, it seems to be an issue related to Firefox and Mac since Catalina OS:

Firefox used to take the value from the user settings in System Preferences > Keyboard > Shortcuts so just by checking the "Use keyboard navigation to move between controls" checkbox you could navigate using the keyboard. But that's not working anymore.

Thankfully it has a quite easy solution:

Go to about:config
Search for accessibility.tabfocus and check that it's set to type Boolean with value true
Remove it and select Number instead
Click on the add button and then enter the value 7

After changing that option in Firefox, I checked back first my super simple html file and it worked! 🎉

Then I checked on the site we were building and indeed it was working as well. 🥳 We finally had the triple check:

✅ Chrome
✅ Safari
✅ Firefox

Mystery solved. 🕵️‍♀️

Remember, never lose hope, neither the focus! Specially you, Firefox. 🦊

Cover photo by Stefan Cosma on Unsplash

Practical React & Redux - Part 2

David Morcillo — Tue, 08 Dec 2020 13:24:08 +0000

Originally published at Codegram's blog

This is the second part of the React workshop series created by our team. Let's learn about how to create stateful components using React hooks.

It's been a while but finally awe have released the second part of our React workshop. Remember that you can download the code from the first part in here. If you want to follow along just checkout the part-1 tag and update the code as you read.

Introduction

In the first part we created our first components using React, but we ended the workshop in a bit of a cliffhanger and encountered a bug 🐛. Today we are going to continue our application and start writing some stateful components.

Stateful components with React hooks

We have created a bunch of stateless components or usually also called "dumb components". Starting now we are going to learn how to add some state to them. First we need to learn what is a React hook!

useWhat? First overview of hooks

A hook is just a function, period. We can write our hooks and the convention is that they start with the prefix use. The hooks can only be executed inside components (or other hooks) so usually the hook just return something that can be used by the component.

A common use of hooks is to reuse some business logic. First let's create a Cat 😸 component (you need to create the corresponding folder structure as we did before):

// src/cats/components/cat/Cat.js
import React from 'react'
import PropTypes from 'prop-types'

const Cat = ({ name, score }) => {
  const onClick = () => {
    score += 1
    console.log(`This is your new score: ${score}`)
  }

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={onClick}>Increase score</button>
    </div>
  )
}

Cat.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired,
}

export default Cat

Then, use the Cat component in our application to add a new cat to the view (😸 are also awesome so give them a good score!):

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
import Cat from './cats/components/cat/Cat'

const App = () => {
  return (
    <>
      <Dog name="Boira" score={13} />
      <Dog name="Black" score={13} />
      <Cat name="Uhura" score={13} />
    </>
  )
}

export default App

Nothing really fancy here! Now we have two components that are mostly identical. Let's fix this!. Let's create a pets module with a hooks folder, and we are going to create our first hook. We are going to copy the onClick function from the Dog component and use it inside our hook.

// src/pets/hooks/useScore.js
const useScore = (score) => {
  return {
    increaseScore: () => {
      score += 1
      console.log(`This is your new score: ${score}`)
    },
  }
}

export default useScore

Notice that the hook is just a function that receives some value, score in this case, and returns a new object. I added the increaseScore function to the object so now we can use it inside our components.

Let's use it in the Dog component:

// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'

import useScore from '../../../pets/hooks/useScore'

const Dog = ({ name, score }) => {
  const { increaseScore } = useScore(score)

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={increaseScore}>Increase score</button>
    </div>
  )
}

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  score: PropTypes.number.isRequired,
}

export default Dog

Do the same for the Cat component, and we are done here! We have moved some common logic to a hook so now we can focus on fixing our problem. We need to make our view aware of that change in the score or, in other words, make the component stateful!

Stateful components using useState

React already includes some hooks. We are going to use useState to add some state to our components. The difference between a prop and the state is that we can change the state to re-render our component when something changes!

Remember that we can use hooks inside other hooks so let's use the useState hook inside our custom hook useScore like this:

// src/pets/hooks/useScore.js
import { useState } from 'react'

const useScore = (baseScore) => {
  const [score, setScore] = useState(baseScore)

  return {
    score,
    increaseScore: () => {
      setScore(score + 1)
      console.log(`This is your new score: ${score}`)
    },
  }
}

export default useScore

Hold up! There is a lot to digest in the previous snippet so let's review it step by step. First, we rename the hook argument to baseScore and passed it to the useState method, this is the initial value of our state. The useState function returns an array where the first element is our state and the second element is a function to replace our state. I used the word "replace" intentionally because we need to provide a new object always, otherwise it will not be updated (embrace the immutability!).

Then I added the score to the object that our custom hook is returning, so we have access to it in our component. Finally, I used the setScore function to set a new state when the increaseScore function is called. Neat, right?

Let's see how to use it in our components. I am gonna change the Dog component, and I am gonna leave the Cat component for yourselves as an excercise:

// src/dogs/components/dog/Dog.js
import React from "react";
import PropTypes from "prop-types";

import useScore from "../../../pets/hooks/useScore";

const Dog = ({ name, initialScore }) => {
  const { score, increaseScore } = useScore(initialScore);

  return (
    <div>
      <p>{name}</p>
      <p>Score: {score}/10</p>
      <button onClick={increaseScore}>Increase score</button>
    </div>
  );
};

Dog.propTypes = {
  name: PropTypes.string.isRequired,
  **initialScore: PropTypes.number.isRequired,**
};

export default Dog;

I also changed the Dog's score prop to initialScoreso we need to update our application as well:

// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
import Cat from './cats/components/cat/Cat'

const App = () => {
  return (
    <>
      <Dog name="Boira" initialScore={13} />
      <Dog name="Black" initialScore={13} />
      <Cat name="Uhura" initialScore={13} />
    </>
  )
}

export default App

After making all the changes you can refresh your browser and test your application. The view is also updated when we press the button! 🎉

React includes a small list of hooks: https://reactjs.org/docs/hooks-reference.html but creating your own is straightforward.

Conclusion

In this article we learned about how to add state to our a React application and written our first React hooks. Our application is basic but for a bigger application is better to rely on a state management library and that's the topic for our next article!.

You can find the code examples in this repository. I also tagged the progress for part 2 in case you want to check the repository at this specific moment.

Cover photo by Henar Langa

Migrating from WebStorm to Visual Studio Code

Verónica Ojeda — Wed, 21 Oct 2020 12:58:00 +0000

My story with Visual Studio Code (aka VS Code and vscode) hasn't been the typical love story but more of a toxic relationship. We've broken up and got back together so many times I can't even tell. But after all this time and all the experience behind us, I think we're both more mature now and it's the perfect time for this relationship to finally work.

Jokes aside, it's a fact that when we get used to working with a specific tool, in the end we all tend to fall in love with it. And this is perfectly normal, you feel more productive and everything feels really easy to do. You can do the exact same thing with many different tools, but with your favourite one you just do it faster and better, it boosts your productivity.

So why the change, you might ask, right?

When I began to work as a developer, my IDE was Eclipse until one awesome day I discovered the JetBrains suite and it was love at first sight. Since then, I've been working mostly with IntelliJ for the backend stuff and WebStorm for the frontend.

I just used VS Code for personal projects mostly to try something new, both the IDE and the project itself. But every time I tried to use VS Code in my job, I ended up frustrated, but it was because I wasn't feeling productive. The truth is that I wasn't using the right setup for me.

At Codegram most of the team use VS Code, on twitter there are many people that I follow (and that I look up to) that use it too, so the real question is, why not? I had given several tries in the past, why not another one?

The migration setup

This is my setup to boost your productivity working with VS Code if you're used to working with WebStorm.

Plugins

I'm not going to explain how they work, since they have a really good description in their respective marketplace pages.

Git Lens and Git Graph

VS Code comes with no UI for git, but these two plugins are really helpful to fill some of the features.

Local History

I can't count how many times this has saved the day. With WebStorm or any JetBrains IDE you just right click on any file and go to Local History > Show History and a new windows pop ups with all the changes you've made, so if you want to back an hour ago, you can! Just a minor reminder with this plugin, add .history/ to .gitignore.

Todo Tree

With JetBrains there is always a TODO tab that lists all the TODOs in the project. This plugin is even better cause you can list the TODOs, the BUGs, etc. and it's customizable.

Terminal

You can open the terminal on VS Code with a shortcut, but in WebStorm there's always a tab for that. For once I got used to a button instead of a shortcut. This plugin does the trick by adding a toggle button to your interface.

Snippets for Code completion

With WebStorm you could create components with the UI, so you could add a new Vue component, or Angular component, with the base structure empty in the created file. There are several snippets for VS Code depending on the framework you work with. In my case, I work with Vue so I'm using Vue VS Code Snippets. I also have Vetur for Syntax-highlighting among other features to help coding with Vue.

Keyboard shortcuts

One of the things that made me go back to WebStorm in the past was the shortuts. There are some keyboard shortcuts that once you get used to them, you just can't change them. Well, you could, but you'd rather not. So what I did to make the migration process less painful was to keep the shortcuts that I use the most.

To make it more readable I'm going to use just CMD instead of CTRL/CMD since I work with a Macbook.

Duplicate line: In VS Code the setting is usually copy line up/down with SHIFT+OPTION+UP/DOWN but I prefer to use CMD+D to duplicate the current line/selection just like in WebStorm.

Delete line: From SHIFT+CMD+K to CMD+Del.

Toggle line comment: From CMD+/ to CMD+7. To be fair this one is exactly the same, but I had it modified in WebStorm as well. By default CMD+7 is the shortcut to go to your bookmark number 7 in JetBrains (you could bookmark lines), but I didn't use it so I find it more useful this way.

Navigation: Although we cannot navigate by clicking on methods/classes, there are a couple of shorcuts to go to the previous/next find match. Actually we had to override one of them when setting the new Delete line command. So in this case it would be 'Add Selection To Next Find Match' shortcut from CMD+D to CTRL+J and 'Add Selection To Previous Find Match' to CTRL+K. Why these shortcuts? Well, I used to work with Jira a lot and these were the commands to move through tickets in a search 🤷‍♀️. With these two combined with CMD+F to search in the file and CMD+SHIFT+F to search everywhere it does the trick more or less. It's not the same, it's not as fast, but it's all we have when working with with VS Code.

I must say that there is an IntelliJ IDEA keybinding plugin, but it has a huge bug in my opinion. You cannot open files with a shortcut! In the JetBrains suite you hit Double SHIFT to open a file, the equivalent in VS Code would be CMD+P. The problem is that Double SHIFT is not a possible command in VS Code, so since the plugin overrides the VS Code keymap, you end up without being able to open a file neither with Double SHIFT nor CMD+P.

My list of Pros and Cons

Although this is not a Foo vs Boo post, I always find these kind of comparing lists really useful (I love lists, I'm not going to hide it). This one is based 100% on my experience and my opinion.

WebStorm

✅ A lot of functionallity out of the box.

✅ Really easy-to-use git UI.

✅ Code completion (i.e. to import a component you just use it in the HTML and it automatically imports it on the script).

✅ Navigation. Jump to a method, function or variable definition in just one click.

⚠️ Collaborative development. People have been asking for this feature for a while (16 years to be more precise), there were some third party plugins but none of them worked as they should, and finally they have released their own plugin Code With Me (although it's still on Early Access Program).

❌ Wants all the RAM and battery all to itself and I already use Chrome, so there's no more room for another RAM eater.

❌ Private and paid.

❌ Although it has a community, every time I had a problem it wasn't easy to find a solution.

What I miss the most about WebStorm

Git UI and Navigation features. 😭

The first one wasn't doing me any good really, cause I was so used to JetBrains UI for Git that it made me dependant on it. It boosted my productivity, and I find features like Project Update (CTRL/CMD+T) really helpful. This would do git fetch && git pull just with a keyboard shortcut. But in the end you forget what's really going on and that can be dangerous.

Opening files with Double SHIFT. It might sound silly, but once you get used to the double shift everything else feels like it's taking too much time. I still hit Double SHIFT a lot of times before going with the CMD+P 😂. There is an issue open, hopefully they will pay attention to it some day! (which probably would happen once I'm used to the CMD+P command)

But the hardest feature to give up is definetly jumping to a method, function or variable definition in just one click.

VS Code

✅ Free and Open Source.

✅ Fully Customizable.

✅ Great community.

✅ Really fast, it takes less than one second to open.

✅ Shares RAM and battery with the rest of my computer.

✅ Collaborative development with Live Share to do some pair programming.

✅ Format just the modified lines.

❌ Lack of some out of the box functionallity.

❌ Code completion.

❌ Navigation.

What I like the most about VS Code

The fact that I can work without burning my fingers cause the CPU is using all the resources available 🔥and also that I can work without being plugged in all the time cause my laptop runs out of battery. 🔋

I never did pair programming before, and I have done it just a couple of times so far but it's a really nice feature to have. And especially helpful when you work remotely, so now that most people are working remotely due to COVID I think it's essential.

Even though I had it in the cons list as "lack of features out of the box", since it comes with no Git UI, I'm finding it really good for me, cause now thanks to the plugins I have all the visual support that I need but also I have control over git again through the command line. Just as I said above, I think that it can be dangerous to rely 100% on a GUI for git.

Finally, there's a tiny miny feature on VS Code that means the world to me. When it comes to formatting code, IntelliJ IDEA has so many configurable options in the .editor file, with VS Code you can just set a few of them in that file. That's why I used to think JetBrains did it better, cause it allowed you to set more options. There are other formatting options like formatting code based on ESLint or Prettier, the most used one. But in the end is usually a pain in the ass, people work with different IDEs, different formatting options and in my experience the result usually is a mess. When you do a Pull Request there are 100 changes and 99 are because of the formatting. Setting the "Editor: Format On Save Mode" to "modifications" has saved my life. With that set, it only formats the lines you modify! 👏🏻 How cool is that, right?!

If I'm being honest, this is the main reason why I decided to give VS Code another chance and this feature along with everything explained above is what made me stay.

Final thoughts

I'm not saying that switching tools is better than sticking to one or viceversa.

If you feel comfortable with a tool and don't feel like changing it, it's fine. If you want to give new tools a try, that's fine as well. You might fall in love, either with the new tool or with your previous tool all over again.

Am I going to stick to VS Code? Who knows 🤔 It will depend on my needs and how they keep evolving.

What about you? Which IDE or Text Editor is your favourite to code and why? Have you ever tried to migrate to another one? Tell us on twitter!

Cover photo by Barth Bailey on Unsplash

But Lighthouse says I'm accessible! · Part 2

Verónica Ojeda — Fri, 25 Sep 2020 11:26:22 +0000

In the previous post we saw how to score 100 in accessibility in Lighthouse but still not having an accessible site. It's quite common to leave the a11y check for the end of the project, run some automatic tools, fix almost all the bugs they report and that's it.

But at this point you should know that's not enough, not even close to enough.

So... what can we do to improve accessibility? 🤔

Instead of developing a web and then checking for the accessibility, what if we try to be a little bit more empathetic with everyone and change the way we design and develop to take all of this into account from the very beginning?

And by everyone I mean EVERYONE, from the Client, to the Project Manager, the Designer, the Developers, the QA team, your friends, your family.

✅ Test before, during and after

Test as much as you can, run the automatic tools, take into account the manual checks and have a QA team if possible.

Wait, so even though we built the site thinking of accessibility, we need to test it as well?

Of course! We're not perfect, there will always be bugs, even if you don't intend to, and with a11y it's the same.

Usually we design, develop and test a site as usual, and in the end someone says "hey, maybe we should check the accessibility". What happens? There are a lot of a11y issues, and since it's at the end of the project, they're harder, and more expensive to fix, so not all of them will be fixed.

If we build a site thinking of a11y, and we test it all along, we'll be fixing the bugs during the design and development process, which is cheaper and faster. Although there might be some a11y bugs in the final check, there won't be a million!

For instance, now I'm using Vue, so it's component based, what we're doing is checking the a11y for each component, it makes it way easier.

✅ Go beyond the "100 Accessibility"

If we pay more attention to both Lighthouse and achecker, we'll notice they both provide more information about the accessibility.

In Lighthouse there's a list of items that should be manually checked. Although they don't mention anything about any of the accessibility bugs that I've listed above, they have a more detailed tutorial on how to perform these checks in the link they provide.

Something similar happens in achecker. Sure, by default they say "Congratulations! No known problems" but there are more tabs! If we go to the "Potential Problems (39)" tab we'll see that the very first potential issue they're talking about is one of our a11y bugs, the non-descriptive alt in the image:

And there are other tools where we wouldn't have passed the automatic tests for the a11y, like the axe extension for Chrome, which is the one that we use at Codegram:

✅ And go beyond WGAG too

This is a quote from the book that I'm currently reading:

"people with dyslexia have a particular problem with reading justified aligned texts. It’s not clear where a line of text ends which makes it very easy to switch to the wrong line." — Better Web Typography for a Better Web, Matej Latin

If we resize the screen a little bit, you'll see we're failing on that too in our sample (this is because of the CSS property we've set for the body text-align: justify;), and this time neither automatic tools nor WGAG have told us anything!

What I'm trying to say is that there are so many things to take into account, but do not feel overwhelmed. This is just like any other topic in this profession, that you might feel like there's a lot to learn, so just like you would do with any new cutting edge technology, learn about this.

Read, care and learn as much as you can, you will make mistakes, so will I, but we really need to care more about everyone. There are a lot of resources out there, now it's easier than ever to be an a11y superstar!

Plus, unlike the latest frontend framework, this is a safe bet, this won't be out of fashion ever!

✅ Follow people with special needs

I've always been aware of a11y, and then I cared even more after that month that I had to become an "expert", because during that time I realized how many accessibility issues needed to be taken into account and they aren't most of the time.

But what really helps me keep up with this topic is following people like Juanjo and Julian, blind software developers, who have to suffer all the non-accessible sites and apps.

Sometimes that's been more helpful than a thousand checklists and books.

✅ Last, but not least, A level is not an option

Try always to aim AA level at least (and remember there's more beyond WGAG!).

It will depend on the site, of course. It is not the same for a portfolio page than an official government site that every citizen will need to use eventually for some admin stuff.

You'd be surprised how many sites that should be accessible, aren't: from the famous Renfe web (the old one and the new one) to the new Radar COVID app, among many others like McDonald's and even Guardia Civil.

A final quote ✍️

Quoting w3.org for the third time (because there's always a third!), let's never forget this:

Web accessibility also benefits people without disabilities, for example:

People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.

Older people with changing abilities due to ageing

People with “temporary disabilities” such as a broken arm or lost glasses

People with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio

People using a slow Internet connection, or who have limited or expensive bandwidth

As the www stands for (World Wide Web), we do live in a wide world with many different people who have many different needs. And again it is not my intention to scare you, it's just a fact that none of us is free from having a temporary or permanent need in the future, so let's try to make a more accessible web (and world) together, from people to people 💪🏻.

Just remember... "I'll be there for you, because you will be there for me too 🎵".

#FunFact 👻

I know what you're thinking, for real this time, I'm not talking about the form... "When is she going to talk about Comic Sans? Why the hell has she used that font?" Well, I just wanted to attract your ~~hate~~ attention.

I'm kidding, I just needed an excuse to tell you that Comic Sans is an accessible typeface!! Did you know that? If you don't believe me, you can read this article "The Reason Comic Sans Is a Public Good" and this other one "Designing for accessibility: The best defense for Comic Sans".

Resources 🌐

Here are some tools and interesting links (most of them I've already mentioned), and don't worry, this won't be my last post about this topic.

Tools to check the accessibility:
- Lighthouse
- Axe (official page, chrome extension)
- Manual Contrast Checker (official page, chrome extension)
- Automatic Contrast Checker extension
Learn more about accessibility:
Another interesting links:
- Dos and don'ts on designing for accessibility

Cover photo by J. Kelly Brito on Unsplash

Peeking into Elixir - Part 1

anagha vl — Tue, 22 Sep 2020 08:00:00 +0000

What is Elixir and Why I wanted to learn ?

If you don't know already, Elixir is a dynamic, functional programming language designed for building scalable and maintainable applications. It is built on top of Erlang VM and compiles down to Erlang bytecode. Elixir has become one of the most loved programming language of recent times according to stackoverflow survey making this more exciting.

Functional programming was something that I knew by definition and the idea of using it practically sounded super fun! I did hear that I'd have to "unlearn" a bunch of things to pick up elixir, but another way to look at it would be to learn a new way of thinking about problems.

Interactive Shell

Once elixir is installed, we can use Elixir's interactive shell which you can start by typing iex in the terminal. Here, you can experiment with Elixir expressions and get results. IEX also provides a bunch of helpers which you can access by typing h().

Let's take a look at some features of Elixir now.

Pattern Matching and Immutability

So, where I come from when we use = it's to assign a certain value to a variable. But now, where we're going this means something different. The operator performs something called pattern matching and hence called match operator. Here, like the name suggests both elements are compared to see if they match and if they do, the right side value is bound to the left side element.

#In OOP, this assigns value 10 to the variable a
a = 10 

#In Elixir, value 10 is bound to a
iex> a = 10

Well, hold on. What if now I reverse the expression and play around with it?

#In OOP, we get a syntax error
10 = a

#In Elixir, this is valid since both the sides match
iex> 10 = a
10

#This will throw a match error
iex> 11 = a
** (MatchError) no match of right hand side value: 10

#Here, a is rebound with 11
iex> a = 11

Let's try this on more complex elements.

#Here, a = 1, b = 2, c = 3
iex> [a, b, c] = [1, 2, 3] 

#Here, head = 1 and tail = [2, 3]
iex> [head | tail] = [1, 2, 3]

In the above example we were able to break the array into seperate elements. This is referred to as destructuring .

Now that we have that cleared up, let's try to figure out what immutability is. In Elixir all values are immutable. When a variable once references some value it will always reference that value until it is discarded or gets garbage collected (which is actually fast here since we use different processes with its own heap). Any function that transforms this data will return a new copy of it.

Eeesh, yeah, that was a lot. Let's break it down. Consider the following snippet.

iex> list1 = [3, 2, 1]

iex> list2 = [4 | list1]

Now, we'd normally expect list2 = [4, 3, 2, 1] where the value of list1 ie. [3, 2, 1] is copied into the list along with 4. But since we know that value of list1 will never change, list2 is now a new list with head as 4 and tail as list1.Another thing to know about lists in Elixir is that they're implemented as Linked Lists. This means that accessing the list length is an operation that will run in linear time (O(n)). For this reason, it is typically faster to prepend than to append.

Now that this makes a lot more sense, we can move on to writing functions.

Functions and Modules

Elixir is a functional programming language that makes functions the basic type. There are no classes here to bring structure to your program, we'll have to use functions and organize them into modules.

Modules basically provide namespaces for things we define. We can also have multiple functions inside a single module which we can reference from outside the module using the module's name as prefix.

Let's consider the following.

**Operations.exs**

defmodule Operations do
  def sum(a, b) do
    a + b
  end
  def sum(a, b, c) do
    a + b + c
  end
end
IO.puts Operations.sum(1, 2, 3)
IO.puts Operations.sum(3, 1)

# We run the program using the command
elixir math.exs
6
4

As you can see above, we were able to use mutli-clause functions, as in have multiple definitions for the same function depending on what arguments are passed into it. The notation function_name/number_of_arguments(arity) is used to represent functions. In the above example, sum/2 and sum/3 are totally separate functions as far as elixir is concerned.

Although this does allow us to invoke functions based on the number of arguments passed, let's look at what we have to do to distinguish based on arguments types.

Guard Clauses

These are predicates that we add to the function definition using one or more when keywords. Elixir now matches the number of arguments and then evaluates any when predicates, executing the function only if at least one predicate is true.

defmodule Guard do
  def what_is(x) when is_number(x) do
  IO.puts "#{x} is a number"
  end
  def what_is(x) when is_list(x) do
    IO.puts "#{inspect(x)} is a list"
  end”
end

Guard.what_is(100)
100 is a number

Recursion

Let's take a look at the following snippet.

for(i=0; i<5; i++) {
    console.log("This violates immutability")
}

As the message suggests, this violates the concept of immutability because we try to mutate the variable i . This iteration can be achieved in Elixir using recursion which we can learn about when we write functions.

Looking back at for loop earlier and knowing how to write functions and guard clauses, we can write a similar piece of code this way.

defmodule Recursion do
  def print_multiple_times(msg, n) when n <= 1 do
    IO.puts msg
  end

  def print_multiple_times(msg, n) do
    IO.puts msg
    print_multiple_times(msg, n - 1)
  end
end

Recursion.print_multiple_times("This Works!", 3)
# This Works!
# This Works!
# This Works!

Here, when the function is first called, failing the guard clause n<=1 (since n = 3) the second function is executed. The second one in-turn calls itself and the first function respectively after decrementing the value of n.This is pretty much how iteration is taken care of using recursion.

The Pipe Operator |>

There have been instances where we need output of a particular function as an input to another which we wrote like this.

output_1 = function_1(input_1)
output_2 = function_2(output_1)

Using the pipe operator we can rewrite this so we take the result of the first function as the input for the second function.

output2 = input_1 |> function_1 |> function_2

There's so much more to functions and modules which you can read about here.

Well so far, I must say it has been fun and I can't wait to dig deeper. Stay tuned for part 2 :")

Cover photo by Marcus Wallis

But Lighthouse says I'm accessible! · Part 1

Verónica Ojeda — Mon, 21 Sep 2020 11:37:03 +0000

Once upon a time I was a Quality Assurance Engineer and we had a project that needed to pass WCAG AA level in accessibility. But none of us had done accessibility testing before so they gave me one month to become an "expert" in accessibility. Guess what? I didn't become an expert, but I did learn a lot about it and how the automatic tools are super useful but still not enough.

Now I'm on the other side of the coin, I'm a developer, and developers tend to check the accessibility with automatic tools only (if it's checked at all).

Today I'm going to show you how we can pass all the automatic checks for accessibility but still not having an accessible site (and how to fix it, of course!).

Quick intro 👋🏻

What is accessibility (or a11y)?

Since there are so many definitions on the web, I'm going to quote one of my favorites from w3.org:

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

Perceive, understand, navigate, and interact with the Web

Contribute to the Web

Web accessibility encompasses all disabilities that affect access to the Web, including:

Auditory

Cognitive

Neurological

Physical

Speech

Visual

WCAG Levels

I'm going to do it again, and quote the same web (sorry):

Web Content Accessibility Guidelines (WCAG) explains how to make web content more accessible to people with disabilities. WCAG covers web sites, applications, and other digital content. It is developed by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). WCAG is an international standard.

There are three levels of conformance:

Level A is the minimum level.

Level AA includes all Level A and AA requirements. Many organizations strive to meet Level AA.

Level AAA includes all Level A, AA, and AAA requirements.

It's building time! 👷‍♀️

Enough quoting, let's get our hands dirty!

I hope you don't mind, but I've asked some Friends to help me build my cheeky and falsy accessible site, it's quite ugly I know, but it's still useful for the purpose of this post.

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8" />
      <link
         rel="stylesheet"
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
         integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
         crossorigin="anonymous"
         />
      <title>Friends</title>
      <style>
         body {
            font-family: 'Comic Sans MS';
            text-align: justify;
         }
         .form-control {
            border-color: inherit;
         }
         .form-control:focus {
            border-color: inherit;
            -webkit-box-shadow: none;
            box-shadow: none;
         }
      </style>
   </head>
   <body>
      <div class="jumbotron jumbotron-fluid">
         <div class="container">
            <h1 class="display-4">
               Let's talk about <strong>F<span class="text-danger">·</span>R<span class="text-warning">·</span>I<span class="text-primary">·</span>E<span class="text-danger">·</span>N<span class="text-warning">·</span>D<span class="text-primary">·</span>S</strong>
            </h1>
            <p class="lead">
               Because of reasons.
            </p>
         </div>
      </div>
      <div class="container" style="padding-bottom: 32px;">
         <div class="row">
            <div class="col-lg-6">
               <h2>Meet the team 👋</h2>
               <p>As you can see in the picture below, these are the people that are going to help us building the webpage, do you like their names?</p>
               <img
                  class="img img-thumbnail rounded"
                  src="https://usercontent1.hubstatic.com/12527974.jpg"
                  alt="friends"
                  title=""
                  />
            </div>
            <div class="col-lg-6">
               <h3>Did you hear that? 👂</h3>
               <p>You need to pay attention to the lyrics!</p>
               <iframe title="song" src="https://open.spotify.com/embed/track/15tHagkk8z306XkyOHqiip" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
            </div>
         </div>
         <div class="row" style="padding-top: 32px;">
            <p>Do you wanna develop an app? Puh rum pum pow! I'm the Devil, what should I do when I fail? Give myself an ice cream? Hmmm, human music.</p>

            <p>Flip the pickle over. You little monster! I thought you were masturbating! Must… continue… moving… in… ways… that… lead… to… dying… with… you. You can run, but you can't hide bitch!</p>

            <p>Nice one, Ms Pancakes. What, cover me in gasoline and spiders? Fine, yeah, I'm in. Uh ohhh! Somersault jump! Aw, c'mon Rick. That doesn't seem so bad.</p>

            <p>This aftershave made women want me, but it also made me impotent! Listen, Morty, I hate to break it to you but what people call "love" is just a chemical reaction that compels animals to breed. It hits hard, Morty, then it slowly fades, leaving you stranded in a failing marriage. I did it. Your parents are gonna do it. Break the cycle, Morty. Rise above. Focus on science. It probably has space aids. Must… continue… moving… in… ways… that… lead… to… dying… with… you.</p>
         </div>
         <div class="row" style="padding-top: 32px;">
            <div class="col-lg-12">
               <h4>If you like this page, please fill in the following form which will literally do nothing 😅</h4>
               <form>
                  <div class="form-row">
                     <div class="col-7">
                        <label for="city" class="sr-only">City</label>
                        <input id="city" type="text" class="form-control" placeholder="nothing">
                     </div>
                     <div class="col">
                        <label for="state" class="sr-only">State</label>
                        <input id="state" type="text" class="form-control" placeholder="I">
                     </div>
                     <div class="col">
                        <label for="zip" class="sr-only">Zip</label>
                        <input id="zip" type="text" class="form-control" placeholder="do">
                     </div>
                  </div>
                  <div class="form-row" style="padding-top: 16px;">
                     <div class="col-12">
                        <button onclick="alert('I told you I did nothing!')" type="submit" class="btn btn-dark">Submit</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <div class="row" style="padding-top: 32px;">
            <div class="col-lg-12">
               <h3>And last, but not least... learn some French with Joey 🇫🇷</h3>
               <iframe
                  title="episode fragment"
                  width="560"
                  height="315"
                  src="https://www.youtube.com/embed/DqwzvtjeYBQ"
                  frameborder="0"
                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                  ></iframe>
            </div>
         </div>
      </div
         >
      </div>
   </body>
</html>

I know exactly what you're thinking. What an ugly form, right?

It's play time! 🎮

Now that we have our super beautiful and accessible site, let's run some automatic tools to check if we've accomplished the accessibility requirements.

But first, we need to serve it locally in order to run those tools. So let's use http-server which is quite simple, just go to your project's folder where your index.html file is and run:

npx http-server

We're ready to go, let's run Lighthouse to make sure it it's accessible indeed:

Go to http://localhost:8080
Open the DevTools and go to the Lighthouse tab
Make sure the 'accessibility' checkbox is ticked and click on 'Generate report' (actually it's even better if you uncheck the rest of them so it is way faster)

Yay! we did it! 🥳 Wait... but, did we? 🤔

But Lighthouse says I am accessible! 😢

And not only Lighthouse, if we take our site and try to run other automatic tools that check the accessibility, we would find out that the results are quite similar.

Let's double check in achecker where you upload a file:

You can try to play a game and go back to our html file and try to spot as many accessibility bugs as you can in 1 minute (I'm like Monica in Friends when it comes to create fun games at parties, I know right?).

Or you can cheat and just keep reading because I'm going to list them below.

1.1.1 Non-text Content - Level A

We have a non-decorative image that even though it has an alt description, it is not descriptive enough.

<img
    class="img img-thumbnail rounded"
    src="https://usercontent1.hubstatic.com/12527974.jpg"
    alt="friends"
    title=""
    />

Just the paragraph above is asking the users what they think about the character names, and they are only displayed in the picture. This can be solved either by adding the names to the paragraph per se or by adding them to the alt description, e.g:

<img
    class="img img-thumbnail rounded"
    src="https://usercontent1.hubstatic.com/12527974.jpg"
    alt="Picture of all the Friends characters divided in two rows and three colums, and the rows are separated by the 'FRIENDS' title. Each character is holding their name in a sign. In the first row from left to right we have Ross, Joey and Monica, in the second row Chandler, Rachel and Phoebe."
    title=""
    />

1.2.1 Audio-only and Video-only (Prerecorded) - Level A

We have a video that promise us to learn French with Joey and that's the only way to learn French in our page. We haven't given any alternative resources for that video, like a transcript, or another video with captions.

Something similar happens with the audio for the Friends theme song. We should have added the lyrics in plain text or at least a link with the lyrics

In both cases, people with hearing impairment wouldn't be able to use our whole content of the page.

2.4.2 Page Titled - Level A

Okay we do have a title, we've set <title>Friends</title>, but the purpose of the page title is to say where we are.

Where are we? In the Home page? In the Contacts page? "Friends" talks about the content which is good but "Home - Friends" would have been even better.

2.4.7 Focus Visible - Level AA

If you try to use the keyboard to navigate through the page, you'll see that it isn't easy to tell if we're in the form or anywhere else on the page. If it's difficult for people without problem visions, it's impossible for people who suffer them.

It's because of this part of the CSS. We should remove it.

.form-control {
    border-color: inherit;
 }
 .form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
 }

3.1.1 Language of Page - Level A

We're bad people, we've set <html lang="es"> but the page is in English.

Blind people or people with several vision problems, use assistive technology to navigate through the page.

This technology reads the content depending on the language we set, so if we don't specify the language of the page, or the different sections in case we have sections in different languages (3.1.2 Language of Parts - Level AA) then it's impossible for them to understand a word.

Is that all? 🤔

No way! I've only picked a tiny miny of a way longer list of all the accessibility items that need to and can only be checked manually. If you want to see them all, checkout these checklists in the a11y project.

In the next post, we'll see a few more improvements to the sample site we've built here and what can we do to improve the accessibility in all the projects we work on. 💪🏻

Cover photo by Yomex Owo on Unsplash

Why you should hire a junior developer

Elena Maroto — Thu, 03 Sep 2020 15:38:36 +0000

If you are reading this, chances are you are either a recruiter doubting about why you should hire a junior dev, or a junior dev looking for a job and thinking "Aha, at last a post that will give me hope!". I feel your pain and I'm here with you.

So, here's the thing. When you are a junior dev, whether recently graduated (from a bootcamp or other), self-taught or reconverted, it is really complicated to get a decent job. I know it first hand. I've been there. And in my case it was even more complicated because I want it all.

I was a junior dev looking for a remote job with flexibility... Gooood luck with that. 🍀

It is hard enough to find a junior dev job, let alone looking for a remote one. Luckily for us, there's Codegram. 🎉🎉🎉

About how and why a junior dev can be hired to work remotely, Elisa gives us her point of view in this post.

But I'm here to talk about why hiring a junior dev is good. Good for your business, for you as a manager or senior dev and for the poor, desperate junior dev looking for a job.

But first things first

Let's clarify something. A junior dev is not someone with knowledge in a thousand technologies, proficient in I don't know what and a thousand more requirements working for a very low salary.

That's just an underpaid job.

This 👆👆👆 is NOT a junior job. And yes, this comes from a real junior dev job offer.

By no means I am trying to say that you should only hire junior devs. In fact, that would be a disaster for your company. But hiring junior devs comes with its share of benefits.

Impressive learning curve

The good point about being a junior is that there is so much to learn. So, there is a lot of room for improvement and the learning curve would look something like this.

Although in development there is always so much to learn, the improvement is much more visible when you start as a junior dev, for obvious reasons.

A fresh pair of eyes

Yes, a senior has more knowledge and sometimes that's all you need in your project. An expert able to get up to speed fast. But sometimes you just need another look at it, a fresh pair of eyes.

Juniors are not that biased (regarding the project, the customer, the company culture or the methodology) so they are able to ask questions or even make proposals that other more senior devs wouldn't, just because it would seem stupid or obvious to them.

Sometimes the solution comes from the simplest of the proposals and that, a junior can do.

Also, some juniors might come from other jobs and have just reconverted. Their experience in other fields can bring light and a different way of thinking to the table that can be very valuable.

Get that repetitive/ungrateful tasks done

Remember that refactoring you've been meaning to do but never had the time to? Or simply you just thought it was boring and you wouldn't learn anything new? Well, your junior dev could use some of that!

Being a junior means that almost everything is new and the most boring task for a senior could be a whole new improvement field for a junior.

Like, e.g. we've taken advantage of summer time and students holidays to reorganize our Graphql resolvers in Empresaula. Sure, after you've done it 50 times it doesn't bring anything that new to the table, but I for sure have learnt a big deal and had to deal with many issues that I wouldn't have faced otherwise.

So, it is a win-win. You get that long-awaited task done and your junior learns a lot!

Educate them into your company culture, methodology, etc.

If your junior is fresh-off-school, then the field is green all over. They do not have any previous experience, bias, etc. That doesn't mean they don't have an opinion, but they have less to compare to, and they are more willing to get guidance and follow procedures, etc.

If your junior has reconverted, it means you have someone in your team who most likely left a stable job, maybe even a well paid job, to become a developer. They were even possibly a senior in another field. That's big. Making such a change is really difficult (I know it first hand). But it also means that this person is able and willing to adapt, to learn and to question themself. So they can not only embrace your company culture, but also bring fresh ideas to the table. That has a big value.

It's cheaper and less risky

As I said at the beginning of the post, a junior dev post shouldn't hide an underpaid job. I cannot stress this enough: Experience has to be paid.

That's why hiring a junior dev is cheaper. In exchange, and if you want this to be rewarding, you need to invest in them. Mainly in coaching and technical training. Otherwise, you could end up with a junior forever. And nobody wants that. Not you as an employer and for sure not the developer. Every person wants to evolve in their job. Help them do it and you won't be disappointed.

Think of a junior dev as a longtime investment. If you take the time, interest and right approach with your junior dev, you could get yourself a very loyal, very productive employee.

What about the risks? Well, you could argue that you might educate them and they would fly away. Yes, that is a possibility. But so can your senior devs. If this happens, the effects of having a junior vs a senior leaving are way less devastating.

Ultimately, it is up to you to make your employees happy so they want to stay with you. And happiness at work is not foosball, free coffee or casual friday. There's way more to it.

There are many other benefits to bring a junior dev to your team, but the main point of this post is to show that a junior is not only someone without much experience, but someone with a lot of potential. And that is what you should be looking for.

The key to greatness is to look for people's potential and spend time developing it. Peter Drucker.

Understanding Regular Expressions once and for all [PART 4]

Svenja Schäfer — Mon, 17 Aug 2020 07:17:56 +0000

Originally published at: Codegram's blog

Here comes part 4 of the "Understanding Regular Expressions once and for all" series. Until now, you should be able to match literal characters, numbers, spaces at the end and beginning of a line. Also, you are aware of the optional character - the question mark. And you can check if a character appears minimum once or zero times thanks to + and *. So far, so good. Today, it's time to meet brackets.

DINNER WITH [FRIENDS]

Imagine some friends will come over for dinner. And you have to prepare the evening, including - of course - the dinner itself. You look through all the recipes but this time it's not super important what you cook (ingredients), but for how many people it is. Our task: only matching recipes for the number of friends coming over. Let's say, 5 friends will sit at the table tonight. We could write something like this: servings: 5. But while this is a totally accepted expression, we want to make it a bit more "regex-like". Also, there's always this type of friend who brings someone with and another might cancel, so a range would be better suited. Ranges can look like this: [0-3]. So, our expression could be: servings:\s[4-6]. With this, we would match the recipes for 4, 5 and 6 people.

But what if we run a nice vegan BBQ party? We expect to see about 12 - 16 people. How can we match that? Remember, that we match a single character. Always. If we want to match more, we specifically have to say it. We could end up with something like this: servings:\s[0-9]+ but with that, we would actually match any amount. Useless. We could, however, write this: servings:\s[1][2-6]. Nice, isn't it?

The square brackets also work with any other character. For example, if we want to match all recipes starting with a capital B (like the B in BBQ), we could use this expression: ^B, right? But what, if the recipes we are looking for are ordered under G (like in Grilling)? Easy-peasy with our square brackets: ^[BG]. You see, it doesn't have to be a range we are looking for. Any character inside the square brackets can be a match. Can, not must!

EXCEPTIONS, EXCEPTIONS

Did you see in the previous expression, that the caret character is outside the square brackets? That's not an error but has a good reason. If it were inside like this: [^BG], we would match any recipe that doesn't have a B or G. The ^ inside square brackets means not. Sure, we can use this as well. For example, like this: ^[^AC-FH-Z]. With that, we wouldn't match any starting uppercase letter besides B and G. To exclude any lowercase characters as well, we could change the expression into: ^[^a-zAC-FH-Z].

Yes, square brackets are pretty useful and like the rest of regular expressions powerful. But there are more. More brackets. Curly ones for example.

Remember, when we covered matching multiple digits in Part 3 of this blog series? We used * or + for it. But what if we don't want to end up with endless repetitions of a character but matching a specific amount? Say hello to {}. Whichever character length you want to define, this is the expression for it. So maybe we want to find all digits with the length of 4 in our recipe, like 1000 ml. Just because we want to change it into 1 litre. We could write \d{4}. Even ranges are possible with these neat brackets. To match minimum four and maximum six characters, the regular expression would look like this: \d{4,6}.

See, with only two types of brackets, you can be so much more precise. Imagine what you can do with three types. That's exactly what we will learn in the next part. But until then:
^Ke{2}p\s[n-p]+\slearning$.

Photos by Jessica Ruscello on Unsplash

Crawling websites with elixir and crawly

Codegram — Thu, 13 Aug 2020 12:00:00 +0000

In this post, I'd like to introduce crawly which is an elixir library for crawling websites.

My idea for this post is to be a quick introduction to how we can use crawly. For this little example we're going to extract the latest posts titles on our website and write it to a file, so let's do it.

First of all, we need elixir installed, in case you don't have it installed you can check this guide.

Once we have elixir installed let's create our elixir application with built-in supervisor

mix new crawler --sup

In order to add the crawly dependencies to our project, we are going to change the deps function in the file mix.exs and it should look like this

defp deps do
    [
        {:crawly, "~> 0.10.0"},
        {:floki, "~> 0.26.0"} # used to parse html
    ]
end

We need to install the dependencies that we just added running the command below

mix deps.get

Let's create a spider file lib/crawler/blog_spider.ex that is going to make a request to our blog, query the HTML response to get the post titles, and then returns a ParsedItem which contains items and requests. We are not going to leave requests as an empty list to keep it simple.

defmodule BlogSpider do
  use Crawly.Spider

  @impl Crawly.Spider
  def base_url(), do: "https://www.codegram.com"

  @impl Crawly.Spider
  def init(), do: [start_urls: ["https://www.codegram.com/blog"]] # urls that are going to be parsed

  @impl Crawly.Spider
  def parse_item(response) do
    {:ok, document} = Floki.parse_document(response.body)

    items =
      document
      |> Floki.find("h5.card-content__title") # query h5 elements with class card-content__title
      |> Enum.map(&Floki.text/1)
      |> Enum.map(fn title -> %{title: title} end)

    %Crawly.ParsedItem{items: items, requests: []}
  end
end

Now that we have our spider created it would be nice to save what we're extracting into some file. To do this we can use a pipeline provided by crawly called Crawly.Pipelines.WriteToFile. For that, we need a config folder and a config.exs file:

mkdir config # creates the config directory
touch config/config.exs # creates an empty file called config.exs inside the config folder
mkdir -p priv/output # creates output folder inside priv where we are going to store our files

Now let's create the configuration to save the response from our spider into a file.

use Mix.Config

config :crawly,
  pipelines: [
    Crawly.Pipelines.JSONEncoder, # encode each item into json
    {Crawly.Pipelines.WriteToFile, folder: "priv/output/", extension: "jl"} # stores the items into a file inside the folder specified
  ]

Now that we are good to go, we can open the elixir repl

iex -S mix

And then we can execute our spider

Crawly.Engine.start_spider(BlogSpider)

The spider is going to be executed by a supervisor and then we should see a new file inside priv/output folder. In my case the lasts posts showing in the first page are

{"title":"\"High tech, high touch\": A communication toolkit for virtual team"}
{"title":"My learning experience in a fully remote company as a Junior Developer"}
{"title":"Finding similar documents with transformers"}
{"title":"UX… What?"}
{"title":"Slice Machine from Prismic"}
{"title":"Stop (ab)using z-index"}
{"title":"Angular for Junior Backend Devs"}
{"title":"Jumping into the world of UX 🦄"}
{"title":"Gettin' jiggy wit' Git - Part 1"}

This is just a simple example of what is possible to do using crawly. I hope you enjoyed this introduction and remember to be responsible when extracting data from websites.

My learning experience in a fully remote company as a Junior Developer

Codegram — Tue, 14 Jul 2020 08:00:00 +0000

Three years ago I decided that I wanted to change my profession and look for better opportunities. I’m an Industrial Engineer and IT was, among other sectors, the one that since the beginning drew my attention the most, in particular the world of application development. I could still remember some of my development skills from my studies at university, so I decided to give it a try and start studying a language called Ruby.

The first steps were not easy, I couldn’t understand many concepts, and my English skills back then slowed down my progress. After improving my English skills and completing some courses and books and after a lot of effort and frustration, I managed to land my first job 2 years ago.

Due to my personal situation I needed to find a remote job, but I would usually get the same answer: "with your profile you must work in the office", another unattainable job for me.

I started wondering what was the difference between talking to a person next to you, or someone on the other side of the screen when they can both hear you and see your code?. My conclusion was, after speaking with experienced remote developers, that there was none… if they really want to work with you.

My very first job wasn't remote, the office was located a 5-minute walk from my place and that's why I decided to give it a try, but in the end, it only lasted one month, a really long month. They didn't know how to work as a team, which led them to use strange work methodologies and management also had a weird relationship with the employees that thankfully, I never saw again. It wasn't a good place to start my professional career and I didn't have the feeling that anything that I did couldn't be done remotely, so I decided that my next job has to be fully remote no matter what.

During the next months, I rejected a good number of offers, where working from home with my profile was not an option. Finally, I managed to find a company where they wanted to try remote work with juniors!

It was much better than my previous experience, but it wasn't my place either. I worked for this company for more than 6 months, but we couldn’t figure out how to make it work. The company managed to sign a bunch of deals with new clients and they didn't have resources to help me to grow. I felt stuck and not performing as I would like to so we decided that it was time to move.

Those first experiences didn’t help me to clearly see my future in development, but everything changed when I joined Codegram…

The Interviews

I met the three founders, Oriol, Josep, and Txus, through 3 very pleasant and entertaining interviews that managed to get my attention for the company.

I admit that it was not the first time I heard some of the things they told to me; everyone wants to teach you and help you to improve, but there is a long way between wanting to do something and doing it. Nevertheless, the way they behaved and how openly they spoke gave me more confidence than my previous interviews, so I decided to follow their hiring process. Finally, I managed to get the job!

My first days at Codegram

The evening before my first day of work, I was eager to get started as well as worried about what I might find in this new adventure. If it went wrong, I had lost nothing, but I wanted it to go well.

The big day came and when it was over I felt I had nothing to worry about.

Day 1

For me, the hardest thing about working remotely is the feeling of being alone in front of something unknown. When I start a new job, a feeling of being lost usually invades me and the days turn into a research job. This time I had my new computer ready to start working, and in my email a document with the first tasks to be performed within the company, in addition to the name of the person who was going to help me whenever I needed it, that seemed like a dream!

Having a reference person, Arnau in my case, is very useful. Of course, there are other people I can ask for help, but, especially at the beginning, I didn't know who was the right person for different topics, or if they have a high workload and you are bothering them. In addition to this, the existence of a person who knows your defects and your strengths at work can help you to learn faster. Something I did not expect that day was a meeting with Josep and Oriol, to find out how my day had gone, it was the first time that a C-Level cared about how I felt at work. In this sector, it is very important to know if the people in your company are happy. I have know companies that have suffered massive developer losses, with the risk that this entails for their own existence.

The first day of work gives you a fairly accurate idea of what your day to day will be like and my day ended with a desire to learn more.

My first months

In my day to day, there are many concepts that I do not know, and my big problem when learning as a Junior is having too many open fronts and not knowing what I should study.

As I discover this world I am more aware of how vast it is and of everything that I do not know, which is really overwhelming, that is why I need an easy goal to achieve so as not to block myself and continue learning. I have different meetings in which I explain what I would like to improve or what is a problem for me, and in this way, I can direct my work and my learning in the same direction.

Currently, my job is to fix small bugs or add small features, without the obligation to be productive from day one, it helps me to discover new concepts and acquiring better practices in my day to day, such as learning to research, debug or manage repositories with agility.

One of the most efficient ways of learning is to alternate studying something new by working on what you have learned, for which I have 5 hours each week to study whatever interests me. Also, every 2 weeks we enjoy listening to our colleagues talk about an interesting topic, what better way to discover something new than when someone explains it to you from their own experience!

Nowadays

After 4 months I am still curious to know how much I will be able to grow here, I am learning new things and improving my coding speed, although not as fast as I would like.

After this experience, I no longer doubt my future as a developer.

Lessons learned

This is what I have learned from my experience:

It is possible to work as a junior remotely if the company is willing to help you.
Having a dedicated mentor you can turn to at any time increases your learning speed and reduces downtime.
Carrying out small tasks makes you aware of your strengths and weaknesses, letting you establish a more targeted training plan.
To learn at a higher speed, it is important not to have the obligation to be productive at the beginning, since that only frustrates you. It is more important to acquire a stable knowledge base to gain more speed over time.
A disgruntled worker does not learn, or does so at a reduced speed.

In short, remote work can be facilitated and also help improve your career plan, provided you are lucky enough to find a company willing to make it possible.

📌 Codegram is always looking for great talents. Visit our career page.

Cover photo by Veronika Hradilová

Fighting impostor syndrome in four easy steps

Núria — Mon, 13 Jul 2020 08:16:37 +0000

If you are anything like me, you have experienced impostor syndrome at some point in your life. If you are really like me, you have to deal with it pretty often. And we both know that sucks. So, for this week's lunch talks, let's try and get rid of it once and for all! *

* Ok, let's be honest. It probably won't work 100%. But if we can reduce it a teeny-weeny bit, we'll have succeeded 🙌

What makes a developer? | Ivana McConnell (29:33 min)

First, repeat with me: "I am a developer". No matter where your background is, no matter what languages you know. Ivana McConnell insists on that, and puts focus on consciously pull away from perceptions that devaluate certain languages or paths into development. It's not you, it's them. You are a developer.

Attitude Determines Altitude: Engineering Yourself & Your Teams | Randy Shoup (43:02 min)

Ok, you now believe you are a developer. Great! But, I know, it's not easy to keep the confidence up. Randy Shoup focuses on the psychological aspects of how our mind works and talks about getting into a growth mindset and gaining trust and confidence.

Mejorando como desarrolladores | Belén Albeza (42:24 min)

Hopefully confidence is building up on you, and you want to keep improving as a developer. But, what to learn next? Many new shiny things come up every day, and it's hard to know what to focus on. Belén Albeza gives us concrete advice (in Spanish) on what to do to keep learning effectively, and how we can make our teammates better as well.

Why you should make useless things | Simone Giertz (11:58 min)

Yay! You are a confident developer and you know how to keep improving. What's next? It's likely your career will be bumpy, and you will fail a lot, but that's ok because you will succeed on other things too. You don't need to build a rocket and save the human race by terraforming Mars to be a great developer. Simone Giertz talks about the importance of making useless things, how it will relieve you from pressure and how it can lead to unexpectedly awesome results. Plus, she is wearing a googly eyes t-shirt.

Slice Machine from Prismic

Anna Collins — Mon, 29 Jun 2020 08:00:00 +0000

In May my colleagues Aitor, Núria and I attended our first virtual conference, Jamstack Conf. Check out Núria's blogpost here on the virtual conference experience! Amongst other talks was a lightning talk by Renaud Bressand, a project manager at Prismic. If you don't know, Prismic is a CMS. We often use it in our JAMStack projects at Codegram so we were super interested to hear what they had to say. Prismic announced in the talk the release of their new open source project Slice Machine! Well it sounds pretty cool, right? Let's take a look at what exactly it can do for us.

So as I said, Prismic is a CMS where we can handle content for our websites. To look at a simple example, we could take an entry for a news article. We might know that every article has a title, a headline and a main image so we can add those fields to the article content type in Prismic, but what about the rest of the article? We don't want to restrict the editor to stick to a rigid predefined template. And we want to make the editing experience as visual and intuitive as possible. That's where Prismic slices come in. Enter Slice Zone...

Slice Zone is a section you can add to your content types to give the editor more freedom when entering content. You are able to define a number of different content types which the user can then select from, in the order they wish. Let's take our example of a news article. Maybe a news article can be composed of: text, images, quotes, videos, subtitles, tweets, CTAs etc. Slice zone lets the user select the types and input content in the order they wish.

So that's Slice Zone, what about Slice Machine? Slice Machine takes Slice Zone to the next level by making it super easy for editors to build pages made up of component sections without any help from developers. Prismic describe it as "In it’s most basic form, Slice Machine is an open-source CLI and a component library". Let's see how it works.

First of all we need to install the Prismic CLI

$ npm install -g prismic-cli

Currently Slice Machine is only available for Nuxt.js projects, so we'll also need to create one of those

$ npx create-nuxt-app annas-slice-machine

And now from inside the project, run the Slice Machine setup command

$ prismic sm --setup

This will connect the default component library and add dependencies (you will see these extra configurations added to your nuxt.config.js file along with a sm.json file). This command will ask you to login to an existing Prismic account or to create a new one and will create a new repository in the account with a standard "Page" custom type for starting out.

You can add the Slice Zone to an existing page but here we're going to create a new page _uid.vue with the following code

<template>
  <slice-zone type="page" :uid="$route.params.uid" />
</template>

<script>
  import SliceZone from 'vue-slicezone'

  export default {
    components: {
      SliceZone
    }
  }
</script>

The Slice Zone component has two props here, the type, which at the moment we only have the page type that comes out of the box, and uid which is the unique identifier for the page and will be the name of the route.

In your newly created Prismic repository add a new page type. You'll see here the Slice Zone and all the possible premade components you can add to your page. You can go on over to the storybook to see what these components look like. They've been created by Sara Soueidan and are accessible and responsive too!

Once you've added a uid and a slice for your page, you can run npm run dev and go over to [localhost:3000/uid-of-page](http://localhost:3000/uid-of-page) and see that a page has been created with the route of the uid you just added in Prismic. That was easy peasy right!?

So you might be thinking it's cool, but that you need more control over the design of your page. Well Slice Machine provides ways to customise the default library by using themes, allowing you to make small changes such as colors and text align. But better than this, it also allows you to easily create your own custom slices via the CLI

$ prismic sm --create-slice

This command will prompt you to provide the name of your slice, and the custom types that you want this slice to be available, for example the page type, which is currently the only type we have.

In your project a new folder slices will have been created and inside that a folder with the name of your new component containing two files, index.vue and model.json. Your new slice will also appear in the Slice Zone for the page type where you can update and add/remove entries from it via the Prismic dashboard. Due to still being in beta, you will need to update the model.json file manually but Prismic say they are working on a Custom Types API where you will be able to send custom types to the repo with a CURL request 🎉

We've only scratched the surface but I think Slice Machine could be a great tool for making developers lives easier and for giving more freedom and control to editors with JAMStack websites!