DEV Community: Javid Mougamadou

☁️💻 My recap of AWS services

Javid Mougamadou — Wed, 30 Nov 2022 15:01:43 +0000

Notes

Here is my personal recap of AWS services.

List of Services

Most used services

EC2
Lambda
S3
RDS
CloudFront
SNS
Elastic Cache

Compute

EC2 -> virtual machine
Fargate -> serveless / Container as a Service
Lambda -> serveless / Function as a Service
Elastic Beanstalk -> EC2 orchestration
AWS App Runner -> Devops

Container

ECR -> container registry
ECS -> container manager
EKS -> managed kubernetes

Storage

S3 -> object storage / bucket
EBS -> block storage volume (for EC2)
EFS -> file storage volume (for EC2, container, etc ...)
S3 Glacier -> S3 for archives, vault, etc ...

Network

VPC -> virtual private cloud
ELB -> load balancer
Route 53 -> DNS dynamic service
CloudFront -> CDN
Direct Connect

Security / Identity

IAM -> roles, permissions, etc ...
Inspector -> vulnerabilities management
Shield -> DDOS protection service
Firewall Manager -> fireware rules

Database

Aurora -> managed SQL (Mysql/Postgresql compatible)
RDS -> advanced managed SQL (multiple SQL db)
DocumentDB -> managed noSQL document
DynamoDB -> managed noSQL key/value
Elasticache -> In memory cache
Neptune -> Graph
Timestream -> Timeseries

Analytics

Athena -> query engine
Redshift -> data warehouse
Kinesis -> streaming data system (like Kafka)
EMR -> managed big data platform (like Hadoop)
DataPipeline -> ETL
Glue -> ETL

Governance / Management

CloudWatch -> monitor alertes on AWS services
CloudFormation -> provision AWS resources (like Terraform)
CloudTrail -> log / audit

Migration

DMS -> migrate sql, nosql
Snowball -> Petabyte scale data transport
Datasync -> copy data service (like NFS)

Machine Learning

Sagemaker -> ML service (like Jupyterlab)

Developer Tools

CodeCommit -> version control service
CodeDeploy -> code Deployment service
CodePipeline -> a continuous delivery service

Mobile

MobileHub -> mobile app deployment and configuration
Cognito -> authentication to your mobile and web apps.
Device Farm -> mobile testing
SNS -> managed messaging service (notification)

App Services

API Gateway
CloudSearch -> search solution (like ElasticSearch)
Elastic Transcoder -> media transcoding service
SES -> email service
SQS -> queue service
SWF -> workflow service

Business Applications

Chime -> video conference (like Skype, Teams)
Honeycode -> quickly build mobile and web apps for teams—without programming
WorkDocs -> (like Google Docs)
WorkMail -> (like Gmail)

End User Computing

Workspaces -> fully managed desktop
AppStream -> fully managed application streaming service

Front User

Amplify -> fully managed web hosting service
AppSync -> managed GraphQL
Amazon Location Service -> geolocation
Pinpoint -> CRM

Other

AWS BlockChain
AWS Ground Station -> satellite
GameLift -> game server hosting
Braket -> quantum computing
KMS -> cryptographic keys
Robomaker -> robotics

💻 Code-server : Awesome VS Code container on browser (Useful for Fast Cloud Deploy - Fix Corporate Issues)

Javid Mougamadou — Fri, 30 Sep 2022 19:53:50 +0000

Notes

I will introduce the concept of code-server.

I am neither the creator nor the developer of the code-server.

Genesis

I ran into corporate network issues due to some limitation (proxy, firewall, powerless machine, mastered OS) since I found the opensource code-server repositories.

Concept

Coder release

coder / code-server

VS Code in the browser

code-server

Run VS Code on any machine anywhere and access it in the browser.

Highlights

Code on any device with a consistent development environment
Use cloud servers to speed up tests, compilations, downloads, and more
Preserve battery life when you're on the go; all intensive tasks run on your server

Requirements

See requirements for minimum specs, as well as instructions on how to set up a Google VM on which you can install code-server.

TL;DR: Linux machine with WebSockets enabled, 1 GB RAM, and 2 vCPUs

Getting started

There are four ways to get started:

Using the install script, which automates most of the process. The script uses the system package manager if possible.
Manually installing code-server
Deploy code-server to your team with coder/coder
Using our one-click buttons and guides to deploy code-server to a cloud provider ⚡

If you use the install script, you can preview what occurs…

View on GitHub

Actually, Code-server is VS Code running on a remote server, accessible through the browser.

Here are the main advantages :

Access through Web UI
Code on any device with a consistent development environment.
All intensive computation runs on your server.
Preserve battery life when you're on the go.
You're no longer running excess instances of Chrome.
Easy collaboration

You can take a tour to the coder website which offers a free version and an enterprise extended version with 24/7h support and provides cloud server auto-deployment (Coder).

Linuxserver release

linuxserver / docker-code-server

The LinuxServer.io team brings you another container release featuring:

regular and timely application updates
easy user mappings (PGID, PUID)
custom base image with s6 overlay
weekly base OS updates with common layers across the entire LinuxServer.io ecosystem to minimise space usage, down time and bandwidth
regular security updates

Find us at:

Blog - all the things you can do with our containers including How-To guides, opinions and much more!
Discord - realtime support / chat with the community and the team.
Discourse - post on our community forum.
Fleet - an online web interface which displays all of our maintained images.
GitHub - view the source for all of our repositories.
Open Collective - please consider helping us by either donating or contributing to our budget

linuxserver/code-server

Code-server is VS Code running on a remote server, accessible through the browser.

Code on your Chromebook, tablet, and laptop with a consistent…

View on GitHub

The LinuxServer.io team brings a container release linuxserver/code-server. It offers more flexibility and customization than the coder release. It embeds a VS code with some layers (Docker, Python, NodeJS, Java, PHP, etc ... -> docker-mods) and some default packages.

Here are the main features :

Custom base docker image with S6 overlay (for more details : just-containers/s6-overlay)
Full customisation and docker layer mods integration (linuxserver/docker-mods)
Weekly base OS updates and regular security updates
Easy authentication setup
Domain proxying
etc ...

Here is the list of layers : https://mods.linuxserver.io/?mod=code-server.

There is also other version/repository of the code-server.

Requirements (for linuxserver/code-server)

Docker
1 GB of RAM minimum (2 or 4 GB of RAM is better)
2 CPU cores minimum

See for more details : https://github.com/coder/code-server/blob/main/docs/requirements.md

Installation (for linuxserver/code-server)

Here is a sample of the docker-compose.yml then you get started creating the container.



---
version: "2.1"
services:
  code-server:
    image: linuxserver/code-server:latest
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Europe/London
      - PASSWORD=password #optional
      - HASHED_PASSWORD= #optional
      - SUDO_PASSWORD=password #optional
      - SUDO_PASSWORD_HASH= #optional
      - PROXY_DOMAIN=code-server.my.domain #optional
      - DEFAULT_WORKSPACE=/config/workspace #optional
      - DOCKER_MODS=linuxserver/mods:python #example
    volumes:
      - /path/to/appdata/config:/config
    ports:
      - 8443:8443
    restart: unless-stopped

Parameter	Function
`-p 8443`	web gui
`-e PUID=1000`	for UserID - see below for explanation
`-e PGID=1000`	for GroupID - see below for explanation
`-e TZ=Europe/London`	Specify a timezone to use EG Europe/London
`-e PASSWORD=password`	Optional web gui password, if `PASSWORD` or `HASHED_PASSWORD` is not provided, there will be no auth.
`-e HASHED_PASSWORD=`	Optional web gui password, overrides `PASSWORD`, instructions on how to create it is below.
`-e SUDO_PASSWORD=password`	If this optional variable is set, user will have sudo access in the code-server terminal with the specified password.
`-e SUDO_PASSWORD_HASH=`	Optionally set sudo password via hash (takes priority over `SUDO_PASSWORD` var). Format is `$type$salt$hashed`.
`-e PROXY_DOMAIN=code-server.my.domain`	If this optional variable is set, this domain will be proxied for subdomain proxying. See Documentation
`-e DEFAULT_WORKSPACE=/config/workspace`	If this optional variable is set, code-server will open this directory by default
`-v /config`	Contains all relevant configuration files.

See for more details : https://github.com/linuxserver/docker-code-server#parameters

Getting started (for linuxserver/code-server)

You just have to run the container, open your browser and go to the url http://localhost:8443 .

My use case

I implemented a system which allows to create, edit, restart, delete a code-server instance through a WEB UI with a tiny interface and some buttons. I prepared an instance with default packages and default configuration in order to be usable in the internal corporate network.

I added a feature that allows to save, restore, duplicate and share the entire instance with extensions, code and packages through the docker commit command (ex: code-server templates). I also added custom mods which are custom docker images (like Jupyter, Django, React, etc ...).

I used the combination of Django + Ansible + Nginx + Docker for the implementation of the system (code-server generator). Thanks to Nginx with an overlay attachable docker swarm network, I can reach all instances through one route/endpoint. If you are interested, I can give more details about the entire stack.

Conclusion

This concept allows to get a readymade developer container with VS Code and desired layers/packages improving the developer experience.

For corporate usage, it allows to deploy a custom instance, which works inside the corporate network (proxy, firewall, etc ...). In my case, I deployed 100 instances in one powerful worker allowing us to reduce the cost of the single machines vs the worker. It also permits to solve most common problem and improving the time spent for the installation and the development of an application directly with the code-server instance.

For personal usage, it could be deployed locally or remotely and be used to have a single container with dotfiles and needed layers. But in fact, it is more relevant if multiple instances are used.

There are other use cases :

a fast deploy (for saving installation time)
a temporary usage (for an intern)
an event (ex: Hackaton - generate multiple code-server)
improve the developer environment
testing the code-server

And you, what do you think about this solution ?

Dev.to Posts

💬 Chatwoot : Nice open-source customer support tool, chatbot (Alternative to Intercom)

Javid Mougamadou — Fri, 23 Apr 2021 16:46:31 +0000

Concepts

Chatwoot is an open-source customer communication platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, email, etc. It is an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc. Connect your customer conversation channels and converse with your customers from a single place.

Features

Chatwoot gives an integrated view of conversations happening in different communication channels.

It supports the following conversation channels:

Website: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
Facebook: Connect your Facebook pages and start replying to the direct messages to your page.
Twitter: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
Whatsapp: Connect your Whatsapp business account and manage the conversation in Chatwoot
SMS: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot
API Channel: Build custom communication channels using our API channel.
Email (beta): Forward all your email queries to Chatwoot and view it in our integrated dashboard.

Other features include:

Multi-brand inboxes: Manage multiple brands or pages using a single dashboard.
Private notes: Inter team communication is possible using private notes in a conversation.
Canned responses (Saved replies): Improve the response rate by adding saved replies for frequently asked questions.
Conversation Labels: Use conversation labelling to create custom workflows.
Auto assignment: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
Conversation continuity: If the user has provided an email address through the chat widget, Chatwoot would send an email to the customer under the agent name so that the user can continue the conversation over the email.
Multi-lingual support: Chatwoot supports 10+ languages.
Powerful API & Webhooks: Extend the capability of the software using Chatwoot’s webhooks and APIs.
Integrations: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.

Documentation

Detailed documentation is available at www.chatwoot.com/help-center.

Installation with docker-compose

Here is the guide : Installation with Docker

You can install it with docker-compose and change the environment variables.

Here is the docker-compose.yml and the .env .



# docker-compose.yml
version: '3'

services:
  base: &base
    image: chatwoot/chatwoot:develop
    env_file: .env ## Change this file for customized env variables
    stdin_open: true # docker run -i
    tty: true        # docker run -t

  rails:
    <<: *base
    depends_on:
      - postgres
      - redis
    ports:
      - 3000:3000
    environment:
      - NODE_ENV=production
      - RAILS_ENV=production
    entrypoint: docker/entrypoints/rails.sh
    command: ['bundle', 'exec', 'rails', 's', '-p', '3000', '-b', '0.0.0.0']

  sidekiq:
    <<: *base
    depends_on:
      - postgres
      - redis
    environment:
      - NODE_ENV=production
      - RAILS_ENV=production
    command: ['bundle', 'exec', 'sidekiq', '-C', 'config/sidekiq.yml']

  postgres:
    image: postgres:12
    restart: always
    ports:
      - '5432:5432'
    volumes:
      - /data/postgres:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=chatwoot
      - POSTGRES_USER=postgres
      # Please provide your own password.
      - POSTGRES_PASSWORD=chatwoot

  redis:
    image: redis:alpine
    restart: always
    command: ["sh", "-c", "redis-server --requirepass \"$REDIS_PASSWORD\""]
    env_file: .env ## Change this file for customized env variables
    volumes:
      - /data/redis:/data
    ports:
      - '6379:6379'



# .env
# Used to verify the integrity of signed cookies. so ensure a secure value is set
SECRET_KEY_BASE=replace_with_lengthy_secure_hex

# Replace with the URL you are planning to use for your app
FRONTEND_URL=http://0.0.0.0:3000

# If the variable is set, all non-authenticated pages would fallback to the default locale.
# Whenever a new account is created, the default language will be DEFAULT_LOCALE instead of en
# DEFAULT_LOCALE=en

# If you plan to use CDN for your assets, set Asset CDN Host
ASSET_CDN_HOST=

# Force all access to the app over SSL, default is set to false
FORCE_SSL=false

# This lets you control new sign ups on your chatwoot installation
# true : default option, allows sign ups
# false : disables all the end points related to sign ups
# api_only: disables the UI for signup, but you can create sign ups via the account apis
ENABLE_ACCOUNT_SIGNUP=false

# Redis config
REDIS_URL=redis://redis:6379
# If you are using docker-compose, set this variable's value to be any string,
# which will be the password for the redis service running inside the docker-compose
# to make it secure
REDIS_PASSWORD=chatwoot
# Redis Sentinel can be used by passing list of sentinel host and ports e,g. sentinel_host1:port1,sentinel_host2:port2
REDIS_SENTINELS=
# Redis sentinel master name is required when using sentinel, default value is "mymaster".
# You can find list of master using "SENTINEL masters" command
REDIS_SENTINEL_MASTER_NAME=

# Postgres Database config variables
POSTGRES_HOST=postgres
POSTGRES_USERNAME=postgres
POSTGRES_PASSWORD=chatwoot
RAILS_ENV=development
RAILS_MAX_THREADS=5

# The email from which all outgoing emails are sent
# could user either  `email@yourdomain.com` or `BrandName <email@yourdomain.com>`
MAILER_SENDER_EMAIL=Chatwoot <accounts@chatwoot.com>


#SMTP domain key is set up for HELO checking
SMTP_DOMAIN=chatwoot.com
# the default value is set "mailhog" and is used by docker-compose for development environments,
# Set the value as "localhost" or your SMTP address in other environments
SMTP_ADDRESS=mailhog
SMTP_PORT=1025
SMTP_USERNAME=
SMTP_PASSWORD=
# plain,login,cram_md5
SMTP_AUTHENTICATION=
SMTP_ENABLE_STARTTLS_AUTO=true
# Can be: 'none', 'peer', 'client_once', 'fail_if_no_peer_cert', see http://api.rubyonrails.org/classes/ActionMailer/Base.html
SMTP_OPENSSL_VERIFY_MODE=peer

# Mail Incoming
# This is the domain set for the reply emails when conversation continuity is enabled
MAILER_INBOUND_EMAIL_DOMAIN=
# Set this to appropriate ingress channel with regards to incoming emails
# Possible values are :
# relay for Exim, Postfix, Qmail
# mailgun for Mailgun
# mandrill for Mandrill
# postmark for Postmark
# sendgrid for Sendgrid
RAILS_INBOUND_EMAIL_SERVICE=
# Use one of the following based on the email ingress service
# Ref: https://edgeguides.rubyonrails.org/action_mailbox_basics.html
RAILS_INBOUND_EMAIL_PASSWORD=
MAILGUN_INGRESS_SIGNING_KEY=
MANDRILL_INGRESS_API_KEY=

# Storage
ACTIVE_STORAGE_SERVICE=local

# Amazon S3
# documentation: https://www.chatwoot.com/docs/configuring-s3-bucket-as-cloud-storage
S3_BUCKET_NAME=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=

# Sentry
SENTRY_DSN=

# Log settings
# Disable if you want to write logs to a file
RAILS_LOG_TO_STDOUT=true
LOG_LEVEL=info
LOG_SIZE=500

### This environment variables are only required if you are setting up social media channels

# Facebook
# documentation: https://www.chatwoot.com/docs/facebook-setup
FB_VERIFY_TOKEN=
FB_APP_SECRET=
FB_APP_ID=

# Twitter
# documentation: https://www.chatwoot.com/docs/twitter-app-setup
TWITTER_APP_ID=
TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_ENVIRONMENT=

#slack integration
SLACK_CLIENT_ID=
SLACK_CLIENT_SECRET=

### Change this env variable only if you are using a custom build mobile app
## Mobile app env variables
IOS_APP_ID=6C953F3RX2.com.chatwoot.app


### Smart App Banner
# https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
# You can find your app-id in https://itunesconnect.apple.com
#IOS_APP_IDENTIFIER=1495796682

## Push Notification
## generate a new key value here : https://d3v.one/vapid-key-generator/
# VAPID_PUBLIC_KEY=
# VAPID_PRIVATE_KEY=
#
# for mobile apps
# FCM_SERVER_KEY=

## Bot Customizations
USE_INBOX_AVATAR_FOR_BOT=true



## IP look up configuration
## ref https://github.com/alexreisner/geocoder/blob/master/README_API_GUIDE.md
## works only on accounts with ip look up feature enabled
# IP_LOOKUP_SERVICE=geoip2
# maxmindb api key to use geoip2 service
# IP_LOOKUP_API_KEY=

## Development Only Config
# if you want to use letter_opener for local emails
# LETTER_OPENER=true

Prepare the database by running the migrations.



docker-compose run --rm rails bundle exec rails db:chatwoot_prepare

Get the service up and running.



docker-compose up -d

Your Chatwoot installation should be accessible with http://localhost:3000

🔨 [git]: Write better commits with Gitmoji

Javid Mougamadou — Sun, 18 Apr 2021 13:07:39 +0000

📝 Notes

Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages.

📝 Intro : How to Write a Git Commit Message

In my case, I only read commits when i would like to track commit changes or to dig commit explanation. Otherwise, I directly read the source code.

Here is an example of good git commit message semantic will look like (according to Gist Semantic Commit Messages)



<type> [scope]: "Message"

type must be one of the following mentioned below :

<build>: Build related changes (eg: npm related/ adding external dependencies)
<chore>: A code change that external user won't see (eg: change to .gitignore)
<docs>: Documentation related changes
<feat>: Introduction of a new feature
<fix>: Resolve an issue directly linked to development (bugfixes)
<hotfix>: Resolve an issue directly linked to production (patches)
<test>: Add/Update test cases
<performance>: Add code that improves performance
<refactor>: Update for code for maintainability (clean code)

scope is optional and must be a noun that represents the section of the codebase

Message should be imperative and should describe the commit with a clear message/keywords.

Example of commits :



feat(home, components): Add login button
feat(home, components): Add login modal
fix(home, components): Resolve issue with modal collapses
chore(home): Move icons folder
feat(newsletter): Add Newsletter component
feat(navbar): Add navbar container

🚀 Gitmoji

Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

Now we can replace the <type/> with an emoji :

🎨 Improve structure / format of the code.

⚡️ Improve performance.

🔥 Remove code or files.

🐛 Fix a bug.

✨ Introduce new features.

📝 Add or update documentation.

🚀 Deploy stuff.

💚 Fix CI Build.

👷 Add or update CI build system.

🔧 Add or update configuration files.

🔨 Add or update development scripts.

⚰️ Remove dead code.

Example of commits :



✨ (home, components): Add login button
✨ (home, components): Add login modal
🐛 (home, components): Resolve issue with modal collapses
🚚 (home): Move icons folder
✨ (newsletter): Add Newsletter component
✨ (navbar): Add navbar container
🔥 (navbar): Remove old navbar file
✅ (home): Add login test case
🎨 (home, component): Improve login modal
📦️ (npm): Add react-table
🔨 Update script start-server.js

Additionnal icons



🐳 Add Dockerfile
🐳 Add docker-compose.yml
☸️ (helm): Add postgres helm chart
☸️ (helm): Update frontend.yaml
☸️ (helm): Update pvc.yaml
🐎 (home): Increase speed load for navbar
🍎 (home): Fix issue with MacOS for navbar

Link: EmojiPedia

📦️ Gitmoji-CLI

A gitmoji interactive client for using gitmojis on commit messages.

Installation

With npm :



npm install gitmoji-cli

On MacOS :



brew install gitmoji

Interactive Client

Start the interactive commit client, to auto generate your commit based on your prompts.



gitmoji -c

Hook

Run the init option, add your changes and commit them, after that the prompts will begin and your commit message will be built.



gitmoji -i
git add .
git commit

Search

Search using specific keywords to find the right gitmoji.



gitmoji -s "criteria"

List

Pretty print all the available gitmojis.



gitmoji -l

Config

Run gitmoji -g to setup some gitmoji-cli preferences.



gitmoji config

🔨Extensions (Integration with IDE)

Gitmoji for Vscode

Link : https://marketplace.visualstudio.com/items?itemName=Vtrois.gitmoji-vscode

Gitmoji for Atom

Go to Settings (cmd + , or ctrl + ,) > Install and search for gitmoji-atom.

Alternatively, run the following command:



apm install gitmoji-atom

Link : https://atom.io/packages/gitmoji-atom

💻 Integration with DEV.TO ?

Do you think that we can use it while writing posts for Dev.TO ?



🐳 Docker

☸️ Kubernetes

...

Avoid Procrastination and Improve Focus

Javid Mougamadou — Wed, 14 Apr 2021 18:31:43 +0000

Notes

What is Procrastination?

People who procrastinate are often mislabeled as lazy. Many of us even engage in self talk about how lazy or unfocused we are when we engage in procrastination. But procrastination is not a reflection of someone’s work ethic or their ability to focus. There’s more to it than that.

When we procrastinate, we typically put off something that we find difficult, challenging, or uncomfortable in favor of something easier or more appealing.

Chronic procrastinators know that waiting will cause more harm than good. We know that this choice will ultimately lead to a worse outcome for us physically, emotionally, and otherwise, but we do it anyway

The Real Reason We Procrastinate

Dr. Tim Pychyl is also a professor of psychology and a member of the Procrastination Research Group at Carleton University in Ottawa. He said, “Procrastination is an emotion regulation problem, not a time management problem.” Sirois and Pychyl teamed up in 2013 to research the notion that people place a priority on their immediate emotional needs over those of their future selves via procrastination. Here’s what they concluded.

People engage in this irrational cycle of chronic procrastination because of an inability to manage negative moods around a task.

When faced with an “aversive” task, i.e. something that we find “boring, frustrating, lacking in meaning and/or structure,” we react with negative feelings and moods. Then we have a choice. We can get through those feelings and moods via “self-regulation” or we can succumb to the immediately protective choice of procrastination.

The Problem with Procrastination

We believe that when we sit down to work tomorrow, or next week, or next month before the big deadline, we will feel like doing it. But we are wrong. When we choose the temporary reprieve from boredom, frustration, or challenge and kick the can down the road to our future selves, we are only making matters cumulatively worse.

We aren’t dismissing our future selves as being unimportant or anything. We are just absolutely convinced that our future self will be better able to handle the given task.

For one thing, a constant current of anxiety and tension will be along for the entire procrastination ride. This nagging looming deadline will be churning in the background, coloring our daily mood and impacting our health and well being. The negative feelings we have about the task itself make us procrastinate. That, in turn, leads to ruminating negative thoughts about the act of procrastination itself. It’s a cycle that has a snowball effect, gathering more self blame, shame, anxiety, and stress along the way.

Techniques

1. Daily Todo List (Don't forget to read/update it daily !)

Make a list of 3-6 things that you want to get done during the day. Put them in order of the most important or time sensitive to the least important or time sensitive. Start working on the first task until it is finished. Check it off, mark it out, and move to the next item. Keep going until your the end of the day. Move any tasks that are left undone to the new list you will create for the next day.

Remember to start the day by reading the current list of tasks and update it if it is needed.

2. Digitally Declutter

Let’s face it. Distractions are very easily found these days. If you tend to wander into social media or headline news or your personal inbox instead of working on the more pressing task at hand, it’s time to digitally declutter your workspace.

The idea here is to make it harder to get distracted by removing the devices that hold those distractions. So, let’s say you need to create an outline for an upcoming presentation and you plan to work at the breakfast counter in the kitchen. Take only your laptop into the workspace. Put your phone, tablet, and any other devices you may have in another room and make sure they are on silent.

Close all tabs other than the document you are actively writing into. If you find that you cannot stop opening new windows to browse online, go old school and pull out an actual pad of paper and pen to write your outline in ink.

To take this a step further, declutter your actual devices so that distractions are not as easily accessible. Remove social media apps from your devices, delete games, and create folders to organize essential apps.

Remember to keep a specific workspace based on your task in order to avoid distractions

3. Bundle Up

We all love a package deal. Bring the bundle up benefit into your life to get things done. This technique works very well for self care and health habits as well as household chores and responsibilities that we all find so easy to put off.

We are generally only accountable to ourselves for things like working out, mowing the grass, cleaning the house, cooking healthy meals, or doing the laundry. Make these tasks less tiresome and more appealing by bundling them with something you really love.

If audiobooks are your jam, only listen to them when you are cleaning the house. Catch up on your favorite podcasts only while you cut the grass or cook dinner. Watch the latest binge-worthy show only when you are on the treadmill.

Find the trick to do annoying chores in a funny way.

4. Set a Timer (Ex: Custom, Podomoro, Flow)

People can accomplish staggering volumes of work simply by committing to show up and do the work for a set period of time, no matter what. Writers past and present have found success with time techniques but it works with a wide variety of tasks. Here’s how it works.

Pick a task that you want to get done. This can be a routine, daily responsibility or a special project or work product you need to produce on a particular deadline. Decide how much time you have to work on the task each day or in this particular work period. It could be 15 minutes, 2 hours, or 60 seconds...pick a time period that makes sense for the task at hand. Set a timer for that time period and don’t stop until the timer goes off. No matter what!

But, what if your kid comes in the room and needs help with their lesson? What if you need to take a bathroom break? What if the doorbell rings or your mom calls or the dog starts barking madly to go out? Look, life happens. We know that. Hit the pause button on the timer, take care of the immediate need, and get right back to it.

Remember to start the timer each time you pick a task.

5. Worst Thing First

This is a little psychological trick that is both effective and super rewarding. Think about all the things you want to do today or that should happen everyday. Take care of the task that is the least appealing as soon as humanly possible. Get it over with and move on to the things that are more engaging, easy, and fun, or just less frustrating, dull, or challenging.

Once that “worst thing” is finished and done, there will be an immediate lift in spirit and a real sense of accomplishment. Ride that wave of success forward knowing that things will only get better from there! Worst Thing First is motivating, rewarding, and really works.

Remember to not pick the easiest task first

20 Nice repos/tools/posts - 1st April - #1

Javid Mougamadou — Thu, 01 Apr 2021 11:37:36 +0000

Algo

Visualgo

Visualising data structures and algorithms through animation

Link : https://visualgo.net/en

Collaborative Tools

Excalidraw

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them

Link : https://excalidraw.com/

CSS

Neumorphism.io

Generate Soft-UI CSS code with neumorphism styles.

Link : https://neumorphism.io/#e0e0e0

Glassmorphism

Glassmorphism is a unified name for the popular Frosted Glass aesthetic. It has many names depending on the company using it, so we wanted to create a common ground for designers and developers to find related resources easier and faster.

Link : https://glassmorphism.com/

CSS Grid Generator

Layoutit grid is a CSS Grid layout generator. Quickly design web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Link : https://cssgrid-generator.netlify.app/

Design

Awesome-Design-Tools

Link : https://github.com/goabstract/Awesome-Design-Tools

Undesign

Collection of free design tools and resources for makers, developers and designers

Link : https://undesign.learn.uno/

Docker

Diun

Diun is a CLI application written in Go and delivered as a single executable (and a Docker image) to receive notifications when a Docker image is updated on a Docker registry.

Link : https://github.com/crazy-max/diun

K8S

Trow

Image Management for Kubernetes

Link : https://github.com/ContainerSolutions/trow

MacOS

Docker-OSX

Run Mac OS X in Docker with near-native performance! X11 Forwarding! iMessage security research!

Link : https://github.com/sickcodes/Docker-OSX

OSX Serial Generator

Generate macOS valid serials, uuids, and board serials for good-faith security research.s

Link : https://github.com/sickcodes/osx-serial-generator

React

React Static

A progressive static-site generator for React.

React-Static is a fast, lightweight, and powerful progressive static site generator based on React and its ecosystem. It resembles the simplicity and developer experience you're used to in tools like Create React App and has been carefully designed for performance, flexibility, and user/developer experience.

Link : https://github.com/react-static/react-static

Nextra

Nextra is a Next.js and MDX powered, no-code site generator.

Link : https://github.com/shuding/nextra

Other Concepts

Refactoring Guru

Refactoring.Guru makes it easy for you to discover everything you need to know about refactoring, design patterns, SOLID principles, and other smart programming topics.

Link : https://refactoring.guru/

Other Tools

Buildbase

Build internal tools on your own infrastructure in minutes

Link : https://www.budibase.com/

CodeTour - VS Code extension

CodeTour is a Visual Studio Code extension, which allows you to record and playback guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change

Link : https://github.com/microsoft/codetour

Fusuma

A tool to create slides easily for you ✍ ️

Link : https://github.com/hiroppy/fusuma

Responsively

A must-have devtool for web developers for quicker responsive web development. 🚀

Link : https://responsively.app/

Quick handle CORS with Nginx

Javid Mougamadou — Thu, 01 Apr 2021 09:56:15 +0000

Notes

In some cases, you would like to disable the cross origin requests restrictions because it is only allowed for same origin by default.

In my case, I deal with several APIs with differents origins.

Code

1) GET/OPTIONS endpoint

  location / {
      # Allow some origins
      #if ($http_origin ~* (https?:\/\/(localhost:8000|myfirstorigin:8000))) {
      # set $cors "1";
      #}

      # Allow all origins
      set $cors "1";

      # Append CORS headers to any request from allowed CORS domain, except OPTIONS
      if ($cors = "1") {
          add_header Access-Control-Allow-Credentials true;
          add_header Access-Control-Allow-Origin $http_origin;
      }

      # OPTIONS (pre-flight) request from allowed CORS domain. return response directly
      if ($request_method = 'OPTIONS') {
           add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
           add_header Access-Control-Allow-Credentials true;
           add_header Access-Control-Allow-Headers 'Origin,Content-Type,Accept';
           add_header Content-Length 0;
           add_header Content-Type text/plain;
           return 204;
      }

      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_pass https://mysecondorigin/api/;
      proxy_http_version 1.1;
      proxy_read_timeout 600s;
  }

2) POST endpoint

add_header Access-Control-Allow-Origin $http_origin;

Nice vector illustrations resources

Javid Mougamadou — Mon, 29 Mar 2021 13:49:57 +0000

Drawkit

Link: https://www.drawkit.io/

Undraw

Link : https://undraw.co/illustrations

Storyset

Link : https://storyset.com/

Icons8

Link : https://icons8.com/illustrations

Error404

Link : https://error404.fun/

Delesign

Link : https://delesign.com/free-designs/graphics/

Brooklyn

Link : https://www.streamlinehq.com/illustrations/brooklyn

Blush Design

Link : https://blush.design/fr

Control Rocks

Link : https://control.rocks/

If you know other illustrations resouces, I would be happy to hear it. 😊

YASG: The Redoc Swagger UI for Django/DRF

Javid Mougamadou — Wed, 24 Mar 2021 09:29:36 +0000

Concepts

Generate real Swagger/OpenAPI 2.0 specifications from a Django Rest Framework API.

Compatible with

Django Rest Framework: 3.10, 3.11, 3.12
Django: 2.2, 3.0, 3.1
Python: 3.6, 3.7, 3.8, 3.9

Getting started

1) Installation

The preferred instalation method is directly from pypi:

pip install drf-yasg

2) Quickstart

In settings.py:

INSTALLED_APPS = [
   ...
   'django.contrib.staticfiles',  # required for serving swagger ui's css/js files
   'drf_yasg',
   ...
]

In urls.py:

...
from rest_framework import permissions
from drf_yasg.views import get_schema_view
from drf_yasg import openapi

...

schema_view = get_schema_view(
   openapi.Info(
      title="Snippets API",
      default_version='v1',
      description="Test description",
      terms_of_service="https://www.google.com/policies/terms/",
      contact=openapi.Contact(email="contact@snippets.local"),
      license=openapi.License(name="BSD License"),
   ),
   public=True,
   permission_classes=[permissions.AllowAny],
)

urlpatterns = [
   url(r'^swagger(?P<format>\.json|\.yaml)$', schema_view.without_ui(cache_timeout=0), name='schema-json'),
   url(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
   url(r'^redoc/$', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),
   ...
]

This exposes 4 endpoints:

A JSON view of your API specification at /swagger.json
A YAML view of your API specification at /swagger.yaml
A swagger-ui view of your API specification at /swagger/
A ReDoc view of your API specification at /redoc/

axnsan12 / drf-yasg

Automated generation of real Swagger/OpenAPI 2.0 schemas from Django REST Framework code.

https://drf-yasg-demo.herokuapp.com/redoc/

Django-probes: wait until database is ready - Probes for Docker and Kubernetes

Javid Mougamadou — Sat, 20 Mar 2021 19:39:41 +0000

Concepts

Provides a Django management command to check whether the primary database is ready to accept connections.

Run this command in a Kubernetes or OpenShift Init Container to make your Django application wait until the database is available (e.g. to run database migrations).

Installation

The easiest way to install django-probes is with pip

pip install django-probes

Basic Usage

1) Add django-probes to your Django application:

INSTALLED_APPS = [
    ...
    'django_probes',
]

2) Add an Init Container to your Kubernetes/OpenShift deployment configuration, which calls the wait_for_database management command:

- kind: Deployment
  apiVersion: apps/v1
  spec:
    template:
      spec:
        initContainers:
        - name: wait-for-database
          image: my-django-app:latest
          envFrom:
          - secretRef:
              name: django
          command: ['python', 'manage.py', 'wait_for_database']

Photologue : Nice Image Management for Django with DRF Integration

Javid Mougamadou — Sat, 20 Mar 2021 10:58:43 +0000

Concepts

A powerful image management and gallery application for the Django web framework. Upload photos, group them into galleries, apply effects such as watermarks.

Dependencies

Django.
Pillow.
Django-sortedm2m. (Automatically installed with django-photologue)

Installation

The easiest way to install Photologue is with pip; this will give you the latest version available on PyPi:

pip install django-photologue

Getting Started

Prerequisites

Ensure that you have set MEDIA_URL and MEDIA_ROOT in setting.py :

#settings.py

MEDIA_URL = /media/
MEDIA_ROOT = /data/media/

Configuration

1) Add photologue, sortedm2m, django.contrib.sites in INSTALLED_APPS and SITE_ID=1.

#settings.py
SITE_ID = 1

INSTALLED_APPS = [
     ...

    'django.contrib.sites',

    # Django Image Library - Photologue
    'photologue',
    'sortedm2m',
]

2) Apply photologue migrations

python manage.py migrate photologue

3) Register photologue urls in urls.py

urlpatterns = [
    ...
    # Photologue Urls
    path('photologue/', include('photologue.urls', namespace='photologue')),
]

Models

Add the photologue Photo field in your model :

image = models.ForeignKey(
    'photologue.Photo',
    null=True,
    blank=True,
    on_delete=models.SET_NULL,
)

Then apply migrations.

python manage.py makemigrations
python manage.py migrate

Example of model :

class BlogPost(models.Model):
    uuid = models.UUIDField(
        primary_key=True,
        default=uuid.uuid4,
        help_text="The uuid4 primary key of the post",
    )
    title = models.CharField(
        max_length=255,
        help_text="The title of the post",
    )
    content = models.TextField(
        blank=True,
        help_text="The content of the post",
    )
    publishers = models.ManyToManyField(
        'auth.User',
        related_name='posts',
        help_text="The maintainers of the pods",
    )
    preview_image = models.ForeignKey(
        'photologue.Photo',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        help_text="The preview image of the appx",
    )

    def __str__(self):
        return f'Appx: {self.name}'

Gallery

You can add a Gallery field which is a M2M of Photo field.

gallery = models.ForeignKey(
    'photologue.Gallery',
    null=True,
    blank=True,
    on_delete=models.SET_NULL,
)

Photo Sizes

Go to the Django Admin Interface, then you can create new PhotoSize instances.
When a Photo instance will be created, an image will be created for each photo sizes with automatic crop and quality compression.

Here is examples of photo sizes :

thumbnail (100 x 100)
small (320 x 200)
medium (640 x 400)
large (960 x 600)

Accessors

The base of Photologue is the Photo model. When an instance is created, methods will be automatically added in order to retrieve photos at various photosizes. E.g. if you have an instance of Photo called image, then the following methods will have been added automatically:

preview_image.get_small_url()
preview_image.get_medium_url()
preview_image.get_large_url()
preview_image.get_raw_url()

These can be used in a custom template to display a thumbnail, e.g.:

<a href="{{ preview_image.image.url }}">
    <img src="{{ preview_image.get_raw_url }}" alt="{{ preview_image.title }}">
</a>

Utils

Here is an function that take an image and produce a Photo instance :

from datetime import datetime
from django.utils.text import slugify
from photologue.models import Photo


def create_photo(image):
    title = f'{datetime.now()}'
    slug = slugify(title)
    photo = Photo.objects.create(
        title=title,
        slug=slug,
        image=image,
    )
    return photo

DRF Integration

Mixins

You can define this method create_mixin_image_serializer() which produces a MixinSerializer based on a image field name.

from rest_framework import serializers
from photologue.models import PhotoSize
from collections import OrderedDict


def _get_image_factory(image_field_name, photo_size):
    def get_image(self, obj):
        request = self.context['request']
        if request and hasattr(obj, image_field_name):
            image = getattr(obj, image_field_name)
            if image is not None:
                get_url_method = getattr(image, f'get_{photo_size}_url')
                url = get_url_method()
                return request.build_absolute_uri(url)
        return None
    return get_image


def create_mixin_image_serializer(image_field_name):
    photo_sizes = PhotoSize.objects\
        .filter(id__gte=3)\
        .values_list('name', flat=True)

    class ImageSerializerMixin(serializers.ModelSerializer):
        pass

    ImageSerializerMixin._declared_fields = OrderedDict([
        (f'{image_field_name}_{photo_size}', serializers.SerializerMethodField())
        for photo_size in photo_sizes
    ])

    for photo_size in photo_sizes:
        setattr(
            ImageSerializerMixin,
            f'get_{image_field_name}_{photo_size}',
            _get_image_factory(image_field_name, photo_size),
        )
    return ImageSerializerMixin

Serializers

1) You can instanciate a mixin image serializer with the field preview_image :

PreviewImageSerializerMixin = create_mixin_image_serializer('preview_image')

Otherwise you can manually create the mixin image serializer :

class PreviewImageSerializerMixin(serializers.ModelSerializer):
    preview_image_small = serializers.SerializerMethodField()
    preview_image_medium = serializers.SerializerMethodField()
    preview_image_large = serializers.SerializerMethodField()
    preview_image_raw = serializers.SerializerMethodField()

   def get_preview_image_small(self, obj):
       request = self.context['request']
       if request and hasattr(obj, 'preview_image'):
           image = getattr(obj, 'preview_image')
           if image is not None:
               url = image.get_small_url()
               return request.build_absolute_uri(url)
       return None

   def get_preview_image_medium(self, obj):
       request = self.context['request']
       if request and hasattr(obj, 'preview_image'):
           image = getattr(obj, 'preview_image')
           if image is not None:
               url = image.get_medium_url()
               return request.build_absolute_uri(url)
       return None

   def get_preview_image_large(self, obj):
       request = self.context['request']
       if request and hasattr(obj, 'preview_image'):
           image = getattr(obj, 'preview_image')
           if image is not None:
               url = image.get_large_url()
               return request.build_absolute_uri(url)
       return None

   def get_preview_image_raw(self, obj):
       request = self.context['request']
       if request and hasattr(obj, 'preview_image'):
           image = getattr(obj, 'preview_image')
           if image is not None:
               url = image.get_raw_url()
               return request.build_absolute_uri(url)
       return None

2) Here is an exemple of serializer :

class BlogPostSerializer(PreviewImageSerializerMixin):
    """
    Serializer for BlogPost instance
    """
    class Meta:
        model = BlogPost
        fields = ('uuid', 'title', 'content',
                  'preview_image_small', 'preview_image_medium',
                  'preview_image_large', 'preview_image_raw')

3) Define create() and update() in case of uploading image :

    def create(self, validated_data):
        preview_image = validated_data.pop('preview_image', None)
        instance = super(BlogPostSerializer, self).create(validated_data)

        # Save image field
        if preview_image:
            instance.preview_image = create_photo(preview_image)

        instance.save()
        return instance

    def update(self, instance, validated_data):
          preview_image = validated_data.pop('preview_image', None)
        instance = super(BlogPostSerializer, self).update(instance, validated_data)

        # Update image field
        if preview_image:
            instance.preview_image = create_photo(preview_image)

        instance.save()
        return instance

Notes for Production

You should integrate the photologue library step by step.

1) Install the package.

pip install django-photologue

2) Add photologue, sortedm2m, django.contrib.sites in INSTALLED_APPS

INSTALLED_APPS = [
     ...

    'django.contrib.sites',

    # Django Image Library - Photologue
    'photologue',
    'sortedm2m',
]

python manage.py migrate photologue

3) Apply photologue migrations

python manage.py migrate photologue

4) If you would like to replace an ImageField with a Photo in your models.py, you have to follow theses steps :

Remove ImageField in your models.py
Apply migrations
Add Photo in your models.py
Apply migrations

If you would like to keep your images, you should keep two fields:

Add Photo in your models.py
Apply migrations
Instanciates Photo
Remove ImageField in your models.py
Apply migrations

Atomize : Simple Design System for React

Javid Mougamadou — Mon, 15 Mar 2021 14:27:30 +0000

Concept

Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly.

Features

UI design system for web apps.
Elegant and beautiful React components
Environment Support
Modern browsers and Internet Explorer 9+
Server-side Rendering

Install

npm install atomize react-transition-group
yarn add atomize react-transition-group

Usage

import { Button } from "atomize";
ReactDOM.render(<Button />, mountNode);

DEV Community: Javid Mougamadou

☁️💻 My recap of AWS services

Notes

List of Services

Most used services

Compute

Container

Storage

Network

Security / Identity

Database

Analytics

Governance / Management

Migration

Machine Learning

Developer Tools

Mobile

App Services

Business Applications

End User Computing

Front User

Other

Links

💻 Code-server : Awesome VS Code container on browser (Useful for Fast Cloud Deploy - Fix Corporate Issues)

Notes

Genesis

Concept

Coder release

coder / code-server

VS Code in the browser

code-server

Highlights

Requirements

Getting started

Linuxserver release

linuxserver / docker-code-server

linuxserver/code-server

Requirements (for linuxserver/code-server)

Installation (for linuxserver/code-server)

Getting started (for linuxserver/code-server)

My use case

Conclusion

Dev.to Posts

Links

💬 Chatwoot : Nice open-source customer support tool, chatbot (Alternative to Intercom)

Concepts

Features

Documentation

Installation with docker-compose

Links

🔨 [git]: Write better commits with Gitmoji

📝 Notes

📝 Intro : How to Write a Git Commit Message

🚀 Gitmoji

Additionnal icons

📦️ Gitmoji-CLI

Installation

Interactive Client

Hook

Search

List

Config

🔨Extensions (Integration with IDE)

Gitmoji for Vscode

Gitmoji for Atom

💻 Integration with DEV.TO ?

Links

Avoid Procrastination and Improve Focus

Notes

What is Procrastination?

The Real Reason We Procrastinate

The Problem with Procrastination

Techniques

1. Daily Todo List (Don't forget to read/update it daily !)

Remember to start the day by reading the current list of tasks and update it if it is needed.

2. Digitally Declutter

Remember to keep a specific workspace based on your task in order to avoid distractions

3. Bundle Up

Find the trick to do annoying chores in a funny way.

4. Set a Timer (Ex: Custom, Podomoro, Flow)