Forem: Sarah Abd

TIL: Accessibility resources

Sarah Abd — Sat, 07 May 2022 10:00:00 +0000

Hi there,

I decided to start TIL (Today I Learned) series !

Rodrigo, author of Mathspp blog, give me envy to do so with his TIL series, as I told him, I will do that to help me to remind me some stuff and share what I discovered to everyone who can be interested on. I’m dedicating my first TIL of a great series to him I hope.

I started to create a dark mode for Django project and I face to an interesting issue : accessibility.

This is something I’m aware of, but I discovered I have so many things to learn ! Even my website is really bad for accessibility.. but I learned some ressources very useful which deserve to be written somewhere.

Accessibility concern many cases : Tritanopia, Deuteranomaly and so on.

Whocanuse, is based on the same purpose of Caniuse but for accessibility and contrast.

It’s really useful to see the simulation of color for each type of vision and contrast with another color. It really helps me to better adjust color contrast.

Note: you can also see color contrast and ratio in devtools of Chrome :

You also have Kontrasto, created by Thibaud Colas, which have a deep interest in accessibility 🙂

Really nice to see a way to improve accessibility with images.

I also discovered Link Contrast Checker which is a website to see the contrast for links to be sure there are no violation for accessibility.

I find accessibility checklist which can be a good start to make you website more inclusive and see some point you missed.

As I am a big fan of pipelines, there are also tools to check accessibility with desktop extension or in continuous integration:

aXe
pa11y
…

That’s it for now! I hope it will be useful for someone.

2021, year in review

Sarah Abd — Sun, 30 Jan 2022 10:00:00 +0000

Hi there, it's have been a while... First of all, I want to say happy new year to you, best wishes !!

Thank you to Katherine Michel and Dawn Wages for inspiring me to do a Year in Review blog post!

TL;DR

This year wasn't my best year but I success to do things I can't imagine do.

My highlights for the year have been:

Attending to DjangoCon Europe and US
Do a lightning talk
Pass Hacktoberfest challenge
Make a contribution to a huge project
Discover and be part of an amazing community

Learning and improvements

I learn a lot this year, by trying things, reading, and do mistakes of course. I read the book of Adams Johnson about testing, which is really interesting. I discovered I had to change some habits and improve some projects.

I'm trying to be more involved in things which I care about or I have an interest in, for example, testing or Open Source Software.

I also learn by interacting with people, even though I still have some difficulty understanding everything in English since I am not fluent but close too!

I discovered many things in 2021, there are so many resources : newsletter, podcast, twitter accounts (yeah really), let me list some of them :

Django Girls podcast
Pycoder’s weekly
Trey hunner twitter account
Adams Johnson books and blog
...

And conferences, even for past years are really interesting. I definitely recommend you to check out!

I also discovered I can inspire others, even I don't think I did something amazing as other great people of the dev world but you can inspire even on things that don't seem huge.

Conferences

I have attend to my first conference, DjangoCon Europe, and gave my first lighting talk ! I have wrote a post here, I hope I will have a chance to attend to the next one. And in real life, so many amazing people have told me that it's a different experience and I really want to see that and see the people I talk to, so many times in the virtual haha.

I also attend to DjangoCon US, it was very nice but I didn't attend so long due to hours. I wanted to help the organizers but I didn't have time to do so. If you want to contribute to the community, this is a way to do it. Many people think, it's all about code, but there are so many things to do besides coding for contribution.

I hope I will be able to do more meetups and exchange with people (in real life would be even better!).

Hacktoberfest as maintainer

I have done hacktoberfest for the second time, but this time I was contributor and also maintainer, thanks to Fum. This is a great experience, even I didn't imagine how it can be exhausting. As a contributor you want things to happen quickly, but as a maintainer, it’s nice to see the engagement of people but so many things to do and some time people answer like the project is your only life, and I can tell you: this is totally NOT the case !

Despite that, I have learned so many things by reviewing: see things in another way, or dig in some subject I didn't know much before.

Individuals contributions

I guess this is my best year for contributing to open source, I contributed to many projects. From small contributions to big ones. I contributed to a big project: Django. It was amazing, I also learned while doing it. It's not an impressive contribution, but I hope it will be useful to everyone who uses this amazing framework! I hope to make more contributions, especially in the python ecosystem this new year.

Reminder to myself

2021 I tried things I didn't think I would have done. If I have piece of advice to tell, it will be :

Be more organized
Try your best, if it's not perfect, that's fine
Contribute, help, write. Sometimes you think it's stupid or useless, but it's not for someone else
Exchange is gold. You can learn things from someone and the person can also learn from you

Thoughts on DjangoCon Europe 2021

Sarah Abd — Mon, 07 Jun 2021 12:00:03 +0000

Hi there, it has been a while since my last post, but I’ m now returning from a great conference: DjangoCon Europe.

It was my first virtual conference. Thanks to the organizers, it was well done despite the difficult circumstances. We had a gather.town to meet people, talks hosted in loudswarm, which worked great! It was very interesting. There were great talks and met amazing people!

I’m also exhausted lol. I guess it’s another experience as I imagine and due to the return of people who did it in real life. I hope to have the ability to attend to another one in person. As people said, you come for the syntax and stay for the community!

I gave my first lightning talk at the DjangoCon: “Run Django tests with GitHub Actions” which was a little introduction to GitHub Actions and how to use it with Docker services. I’m completely nervous about things like that but I did it. I’m happy I received some positive feedback. I know also what to improve if I choose to undertake the experience again :)

If you have one in mind, go for it. You will never regret and it’s a good experience. You will help someone or make someone discover something that you didn’t imagine you could. For the sprints, it was complicated for me to manage the two days, but I was able to be mentor for DjangoGirls on Saturday. It was a good experience for me.

First contribution to open source, hacktoberfest !

Sarah Abd — Tue, 03 Nov 2020 09:08:00 +0000

First participation, first contribution to open source. Yeah !

Yes, I finished my first the Hacktoberfest challenge, thanks to Digital Ocean, Dev.to and Intel. If you don’t know what I’m talking about, just check this.

I always wanted to contribute to an open source project. But there always seemed to be obstacles: first thoughts:

Which project should I choose out of the ocean of possible repositories?
How can I make a good pull request for a project?
Issues usually seem to need specific understanding of how the projects develop
…

Yeah, I know what your are thinking: she might be crazy or maybe just I feel the same.

I think it’s normal to think whenever you use a good open source project, you want to contribute to it in the future. Open source is incredible. There are so many projects that are used by so many people.

I have so much respect for open source project maintainers because many or maybe most of our personal or professional projects would fail without them.

Hacktoberfest is one of the best way to start contributing to open source projects. Their site lists an extensive resources and provides information for contributing regardless of whether you a beginner or a seasoned developer. And if you follow the specific CONTRIBUTING.md for in the open source repository, you can’t be lost (normally).

Don’t hesitate to reach out to the maintainers or other contributors to ask questions if needed, as well as checking labels, and spending some time carefully reading issues.

If you’re a beginner you can check start by checking this link which will suggest some good things to get started with:

http://issuehub.io/

Even if the Hacktoberfest has finished this year, now is still a great time to make your first contributions.

I contributed to 2 projects:

inspirezonetech / TeachMePythonLikeIm5

Teach the Python programming language using a collection of super beginner friendly tutorials and challenges.
inspirezonetech / TeachMeBashLikeIm5

Teach the Bash programming language using a collection of super beginner friendly tutorials and challenges.

This was my first Hacktoberfest event and I have loved this experience. I can’t fully explain but the satisfaction that comes from contributing to something that can be useful to others feels great. It’s also time to discover other projects, by searching or through people who share their experiences and learn new things, of course.

I will continue to contribute ❤️

Unfortunately I didn’t officially complete the Hacktoberfest challenge due to an ”intented behaviour” which now prohibits certain repositories from being eligible.

So just beware, if you have participated this year and your PRs are still in review, be careful, the flaw can still happen to you. Fum explain all just here.

⚠️ Check your Hacktoberfest profile ⚠️ A flaw could have reversed your completion of the challenge without you knowing it

Fum ・ Nov 7 '20

#hacktoberfest #discuss

Regardless this is less important than having first taken the plunge into making contributions to open source projects — which is really the thing at the core of Hacktoberfest.

See you maybe next year!

Manual trigger with Github Actions

Sarah Abd — Tue, 28 Jan 2020 15:18:20 +0000

Hi there, this blog post explains how to manually trigger builds of GitHub actions.

Why would you want to do that?

Instead of just waiting for a code change or a GitHub workflow change? Well, for example the last time your build on master ran, maybe some of the servers used by your build were down (example: npm registry, some API you're using for tests, etc..).

For now GitHub says that there's no way to manually trigger a build, while this question was asked on StackOverflow and some people are even using CURL to trigger manual builds.

But I have found a better way! With my solution, once you'll have it set up, the ⭐️ button of your GitHub repository will trigger a build every time YOU (and only you) will star the repository.
You can do that as many times as you want.

Yes, it's a VERY hacky solution but it works pretty well. ✨

How to do manual trigger

Let's dig into it.

The ⭐️ button is used to launch the workflow if it's possible, like this.

Update your workflow file to include:


on:
  watch:
    types: [started]

So the workflow will be executed each time you star, or unstar and star again the repo.

If we combine that by a useful advice from Samira in Stack Overflow, you can launch your workflow only if it's the owner who trigger the action.


    if: github.actor == github.event.repository.owner.login

It prevents to execute the action by others and only by maintainers for example.

Next you can add your job(s) to do and additional services.

At the end, we have the following workflow...

name: Test

on:
  watch:
    types: [started]

jobs:
  build:
    runs-on: ubuntu-latest

    if: github.actor == github.event.repository.owner.login

    steps:
       - name: Checkout repository
         uses: actions/checkout@v2
        #  add more ...

It's a starter, so you can adapt it for an existing workflow or start a new one with this.

Few notes

There is the possibility to combine two events.

For example you can set your workflow with the watch event and on each push, to have the both ways.

name: Test

on:
  push:
    branches:
      - master
  watch:
    types: [started]

Here it run the process for each push on master branch and on star of the repo.

Don't forget that if you want to re-run a workflow which have failed,
you can re-run all the checks with a UI button set for a failed workflow just like that...

It depends on what you really want to do.

Moreover, you can launch the full workflow with the watch event or only some particular steps if you add a conditional if on a step like this:

name: Test

on:
  watch:
    types: [started]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
       - name: Checkout repository
         uses: actions/checkout@v2
       - name: Step 2
         if: github.actor == github.event.repository.owner.login

In this case, it will run step 2 only if the repo is starred by the owner.

Don't forget that the ⭐️ button launch the workflow from the default branch (master) only.

Notice that there is permissions to avoid actions in the repository or to avoid the third party to run your actions in the settings of the repo.

Update: Suggested by Emilien in comments, we can also configure the workflow only for collaborators by creating another job which will be needed to check if it's a collaborator of the project or the workflow will fail.

jobs:
  authorize: 
    runs-on: ubuntu-latest

    steps:
    - uses: octokit/request-action@v2.0.0
      with:
        route: GET /repos/:repository/collaborators/${{ github.actor }}
        repository: ${{ github.repository }}
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

  build:
    needs: [authorize]

    runs-on: ubuntu-latest

   steps: 
     - ...

Good to know...

GitHub just released their action APIs which should allow soon either GitHub or browser extensions to add "trigger workflow" buttons on their UI.

// Detect dark theme var iframe = document.getElementById('tweet-1221851549443297280-947'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1221851549443297280&theme=dark" }

I hope you liked this post and special thanks to Vincent who pushed me to write it :)

Relation between middle/senior and junior dev

Sarah Abd — Thu, 09 Jan 2020 19:47:49 +0000

I've been a teacher and also a learner, so I've got something to tell you.

I've heard so many comments like "you're too junior", "you're not a middle/senior dev". I'm sure you've heard that too.

If you told me that something is impossible, I'm the type of woman that will try to succeed even if there is only a small chance.

Yes, I tried to achieve a proficiency level in tech close to the level of developers who inspired me despite my limited experience.

The fact is, some people believe that a junior should listen to the middle/senior dev and that's all.

The middle/senior dev is highly qualified and has experience. For sure.

But it's still an exchange.

Sharing knowledge is not easy for everyone. And when you're in this situation, you sometimes have the obligation to explain complexity with simple words and distill abstract ideas into more digestible ones.

It's an art not a science, really.

We all know that a developer is always learning, even by asking other devs. Sometimes developers ask things you didn't think about, or you just don't know about, and you also want to know the answer. So sometimes their question prompts you to research more and helps expand your knowledge base.

To you the junior dev

Don't think the dev with high skills has no time for you. If he/she is really busy, add a meeting in his/her calendar. That will show it's important for you and you really need this point. It can be the time to clarify what's good in your work and what needs to be improved.

Try to find the answer before asking but don't dedicate too much time to it. If you're stuck ask for help. You're losing time, even if it seems important to do it on your own and get the glory, you could have done so much more. And when it's solved in two seconds, it’s much better not to wait so much time to ask help ;)

To you the middle/senior dev

Some people admire you in secret, I mean really. Take time to help junior dev to grow if you have the capacity to do so. It's also time for you to challenge yourself and get to know your team better as well.

From my perspective a great middle/senior dev is not just someone who is technically proficient but also is someone who can help others to grow. An experienced dev should constantly learn to teach others with more clarity, to better organize their team, and to communicate more effectively.

And you, what do you think?

Docker services in Github Actions won't have secrets for you

Sarah Abd — Sun, 17 Nov 2019 15:21:26 +0000

I explain deeper how is structured an action and how to use docker services in an article but I will focus here more on services.

Yeah, the great fact is you can use Docker containers as services in Github Actions. 🎉

How do we do it?

Very simple, it is similar to the definition of a service in a docker-compose.yml but with far fewer parameters.

We use the keyword services with:

the definition of the Docker image to be used
the list of ports to be exposed of the service
a list of environment variables
a list of volumes

Not all of these elements are required but good to know.

In concrete terms, it looks like this, for a Postgres service:

services:
 image: postgres
  env:
  - POSTGRES_USER: postgres
  - POSTGRES_PASSWORD: postgres
  - POSTGRES_BD: postgres
  ports:
  - 5432/tcp
  options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

Example made by Chris Patterson and Mike Coutermarsh for PostgreSQL. You can find the full example with node just here.

We need the Docker image to launch, the port to expose and the name of the service. There is a way to transmit environment values or Docker options as shown in the example above. Sensitive values can be defined with secret key.

Full example

For example we want to do an action which launch tests of our Django application on each push event.

The following workflow is implemented:

name: Test Workflow

on: push 

jobs:
 tests:
   runs-on: ubuntu-latest

   services:
    image: postgres
    env:
    - POSTGRES_USER: postgres
    - POSTGRES_PASSWORD: postgres
    - POSTGRES_BD: postgres
    ports:
    - 5432:5432
    options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

   steps:
   - uses: actions/checkout@v1
   - name: Set up Python 3.5.7
   - uses: actions/setup-python@v1
     with:
      python-version: 3.5.7
   - name: Install dependencies
     run: pip install -r requirements.txt
   - name: Run tests
     run: python manage.py test

Here the job tests consist of:

install Python 3.5.7 on the Ubuntu environment
install the dependencies
start the tests with the Postgres database

In this example, we still need to override the service values in the Django settings.py for the connection to the PostgreSQL database like that :

DATABASES = {
    'default': {
       'ENGINE': 'django.db.backends.postgresql',
       'NAME': 'postgres',
       'USER': 'postgres',
       'HOST': 'localhost',
       'PORT': 5432,
    }
}

If you have multiple settings for database, you can do with env variable os.environ.get('HOST_NAME') or a conditional settings with if os.environ.get('GITHUB_WORKFLOW') for example.

Few notes

It is sometimes necessary to require a service status feedback to establish a connection. Therefore, an element is defined that checks the health of the service to know when it is operational (also called a health check).

options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

This one is for postgres but you can find multiple such as elasticsearch, mysql and so on...
In case you don’t have a health check available, we pause the process execution with the command sleep, yes it’s not great, I grant you…

To link the service with the job of the workflow, the host is needed.
In case you're running your workflow :

in the virtual machine, it will be localhost
in a container, it will be the name of the service

Don't forget, you can use Docker services only with a Linux distribution.

According to the port, to access it on your job(s), it will be like that:

${{ job.services.postgres.ports[5432] }}

In the first example, the machine port 5432 is randomly assigned a free port and accessed.

Nevertheless, it can be assigned in a fixed way:

ports:
 - 5432:5432

Here, we have the port 5432 of the service related to the port 5432 of the machine defined in the action.

Here you go, you're ready to use services in your workflow ! 💪

How to create Github Actions to run tests with services ?

Sarah Abd — Tue, 05 Nov 2019 20:05:56 +0000

I’ve been digging GitHub Actions since I received access to the beta. GitHub Actions is generally available since November 11, 2019 and I can explain to you. 🎉

French version right here.

Photo by Yancy Min on Unsplash

What is it ?

Github Action is a solution for continuous integration and continuous deployment (CI/CD). It’s a new feature from Github, which is displayed as a tab in your repository. Its operations are triggered by Git events such as a commit push. In order to create a new sequence of events to be run on a commit push, we must create a set of commands which will be carried out according to the specifications of the project. This service is designed to perform processes automatically and continuously for collaborative work on a Git repo once implemented. It should be noted that Github Action is based on Docker, so it’s recommended to have some knowledge about it to use it.

Write your action

An action contains several elements necessary to perform a process: the on event that corresponds to the Github event: push, pull request, etc. During the beta however, only the push and pull request triggers are available.

on: [push, pull_request]

It is of course possible to define the scope of your action, so it does specific tasks on certain branches of your repository but not on others. For example, this may include automatic deployment to a server from the staging branch but not from the dev branch.

on:
 push:
  branches:
  - staging

Then we have the jobs. In practice, a job is a series of steps performed in an orderly manner. It has 2 important elements: the environment and the steps to be taken by the service.

The runs-on parameter defines the environment in which the action is performed:

runs-on: ubuntu-latest

There are several possible virtual environments for the execution of your action, this can be useful so that it corresponds to the specificities of each one. From Ubuntu 19.10 to Windows 2016, you have the choice 😉

It should be noted that each job is performed in a new instance of the virtual environment.

So if you want to perform a series of actions with a link between them, you may want consider doing it in the same job. But it is possible to create job dependencies with the need parameter:

jobs:
 job1:
 job2:
  need: job1

In this case, job2 will only run when job1 has been completed.

Then, we have all the steps to perform during the process. With a view to continuous integration, the aim is to launch the tests automatically. However, a number of elements must be defined before the tests can be performed!

This set is defined by the keyword steps. Each step requires at least one element to be performed, i.e. one of its elements:

the uses keyword to use a specific element:

a public action
an action in the same repository
an action on the Docker Hub or on the Docker public register

the run keyword to launch a command in bash (knowing that there are several ways to execute a command if necessary)

Finally, we associate the parameter name to know which step it represents. An example being always more meaningful, so here is a job to test a Django project:

jobs:
 tests:
   runs-on: ubuntu-latest

   steps:
   - uses: actions/checkout@v1
   - name: Set up Python 3.5.7
   - uses: actions/setup-python@v1
     with:
      python-version: 3.5.7

   - name: Install dependencies
     run: pip install -r requirements.txt
   - name: Run tests
     run: python manage.py test

Here the job tests consist of:

install Python 3.5.7 on the Ubuntu environment
install the dependencies
start the tests

For tests in real conditions, a database is needed, hence the implementation of services.

Add a service to your action

How do we do it? Very simple, it is similar to the definition of a service in a docker-compose.yml but with far fewer parameters.

We use the keyword services with :

the definition of the Docker image to be used
the list of ports to be exposed of the service
a list of environment variables
a list of volumes

Not all of these elements are required but good to know.

In concrete terms, it looks like this, for a Postgres service:

services:
 image: postgres
  env:
  - POSTGRES_USER: postgres
  - POSTGRES_PASSWORD: postgres
  - POSTGRES_BD: postgres
  ports:
  - 5432/tcp
  options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

In addition, it is sometimes necessary to require a service status feedback to establish a connection. Therefore, an element is defined that checks the health of the service to know when it is operational (also called a health check). I took up the example made by Chris Patterson and Mike Coutermarsh for PostgreSQL.

In case you don’t have a health check available, we pause the process execution with the command sleep , yes it’s not great, I grant you…

All this is very good, but we have to make the link between the service and our application. We will do it through the port and for the host it will be localhost since the service is executed directly in the Ubuntu machine in our example. Otherwise it would have been the name of the service.

In the previous example, the machine port 5432 is randomly assigned a free port and accessed as follows:

${{ job.services.postgres.ports[5432] }}

Nevertheless, it can be assigned in a fixed way:

ports:
- 5432:5432

Here, we have the port 5432 of the service related to the port 5432 of the machine defined in the action.

The following workflow is implemented:

name: Test Workflow

on: push 

jobs:
 tests:
   runs-on: ubuntu-latest

   services:
    image: postgres
    env:
    - POSTGRES_USER: postgres
    - POSTGRES_PASSWORD: postgres
    - POSTGRES_BD: postgres
    ports:
    - 5432:5432
    options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5

   steps:
   - uses: actions/checkout@v1
   - name: Set up Python 3.5.7
   - uses: actions/setup-python@v1
     with:
      python-version: 3.5.7
   - name: Install dependencies
     run: pip install -r requirements.txt
   - name: Run tests
     run: python manage.py test

In our example, we still need to override the service values in the Django settings.py for the connection to the PostgreSQL database.

Then the trick is done, just push some code and hope it works. 😉

If you enjoyed this article, please help out with a ❤️ or a share. It will help others in the world !

Forem: Sarah Abd

TIL: Accessibility resources

2021, year in review

TL;DR

Learning and improvements

Conferences

Hacktoberfest as maintainer

Individuals contributions

Reminder to myself

Thoughts on DjangoCon Europe 2021

First contribution to open source, hacktoberfest !

inspirezonetech / TeachMePythonLikeIm5

Teach the Python programming language using a collection of super beginner friendly tutorials and challenges.

inspirezonetech / TeachMeBashLikeIm5

Teach the Bash programming language using a collection of super beginner friendly tutorials and challenges.

⚠️ Check your Hacktoberfest profile ⚠️ A flaw could have reversed your completion of the challenge without you knowing it

Fum ・ Nov 7 '20

Manual trigger with Github Actions

Why would you want to do that?

How to do manual trigger

Few notes

Good to know...

Relation between middle/senior and junior dev

To you the junior dev

To you the middle/senior dev

Docker services in Github Actions won't have secrets for you

How do we do it?

Full example

Few notes

How to create Github Actions to run tests with services ?

What is it ?

Write your action

Add a service to your action