DEV Community: Mansour Mahamat

10 Best iPhone Productivity Apps to Supercharge Your Workflow

Mansour Mahamat — Tue, 06 Aug 2024 17:16:29 +0000

In today's fast-paced world, staying productive is key. Here are 10 of the best iPhone productivity apps that can help you streamline your work, boost your efficiency, and get more done in less time.

1. Todoist

Todoist is a powerhouse when it comes to task management. Its clean interface and powerful features make it a top choice for productivity enthusiasts.

Why it's a banger:

Intuitive task creation with natural language processing
Seamless collaboration features for team projects
Cross-platform synchronization
Customizable labels, filters, and priorities

Todoist's ability to integrate with numerous other apps and its smart scheduling features make it an indispensable tool for managing both personal and professional tasks.

2. Evernote

Evernote has long been a favorite for note-taking and information organization. It's much more than just a digital notebook.

Key strengths:

Powerful search functionality, including text recognition in images
Web clipper for saving articles and web pages
Rich media support (text, images, audio, PDFs)
Collaborative notebooks for team projects

Evernote's versatility in capturing and organizing various types of information makes it an excellent productivity booster for researchers, writers, and professionals alike.

3. Forest

Forest takes a unique approach to productivity by gamifying the process of staying focused.

What makes it special:

Visual representation of focus time as growing trees
Customizable focus durations
Real-world impact through tree-planting initiatives
Detailed statistics to track productivity trends

By providing a tangible, rewarding experience for staying off your phone, Forest helps users overcome distractions and improve their concentration.

4. Notion

Notion is a versatile all-in-one workspace that's gaining popularity among individuals and teams.

Standout features:

Flexible structure for notes, databases, and wikis
Customizable templates for various workflows
Powerful relational databases
Collaborative editing and commenting

Notion's ability to adapt to various use cases, from personal journaling to complex project management, makes it a powerful tool for boosting productivity across different aspects of life.

5. Things 3

Things 3 is a beautifully designed task manager that strikes a balance between simplicity and power.

Why users love it:

Clean, intuitive interface
Natural language input for quick task creation
Calendar integration for effective planning
Robust tagging system for organization

The app's focus on design and user experience makes task management feel less like a chore and more like a seamless part of your workflow.

6. IFTTT (If This Then That)

IFTTT is an automation tool that can significantly boost your productivity by connecting various apps and services.

Key advantages:

Wide range of supported apps and services
Easy-to-use interface for creating custom automations
Ability to streamline repetitive tasks
Constant updates with new integrations

By automating routine tasks, IFTTT frees up your time and mental energy for more important work, making it a valuable addition to any productivity toolkit.

7. Pocket

Pocket is a read-it-later app that helps you save and organize online content for future reference.

What sets it apart:

Clean, distraction-free reading interface
Offline access to saved articles
Tagging system for easy organization
Text-to-speech feature for listening to articles

By allowing you to save interesting content for later, Pocket helps you stay focused on your current tasks while ensuring you don't miss out on valuable information.

8. Trello

Trello is a visual collaboration tool that uses boards, lists, and cards to organize and prioritize projects.

Standout features:

Intuitive drag-and-drop interface
Customizable workflows with power-ups
Easy collaboration and task assignment
Integration with popular productivity tools

Trello's flexibility makes it suitable for a wide range of projects, from personal to-do lists to complex team workflows, enhancing productivity through better organization and collaboration.

9. Fantastical

Fantastical is a powerful calendar app that takes scheduling to the next level.

Why it's exceptional:

Natural language input for quick event creation
Beautiful, customizable interface
Integration with various calendar services
Built-in weather forecasts and travel time estimates

By streamlining calendar management and providing a more intuitive way to schedule events, Fantastical helps users make the most of their time.

10. LastPass

LastPass is a password manager that secures your digital life while saving you time.

Key benefits:

Secure storage for passwords and sensitive information
Auto-fill functionality for quick logins
Password generator for creating strong, unique passwords
Secure sharing of passwords with trusted individuals

By eliminating the need to remember multiple passwords and streamlining the login process, LastPass not only enhances security but also saves valuable time in your daily digital interactions.

These 10 apps represent some of the best productivity tools available for iPhone users. By leveraging their unique features and capabilities, you can significantly enhance your workflow, stay organized, and achieve more in your personal and professional life.

Discover new app: https://www.iosappfinder.com/

A coding challenge platform for FRONTED

Mansour Mahamat — Wed, 03 Jan 2024 12:43:47 +0000

Hi all,

I just created a coding challenge platform to practice your frontend skills everyday.

Everyday a new design and you can reproduce this design in HTML CSS JS or React JS

Take a look here :

https://coding-challenge.avocadogrowth.com

Next JS Authentication With Clerk

Mansour Mahamat — Wed, 01 Nov 2023 13:46:29 +0000

We will walk you through using Clerk and Next.js to establish authentication in your online apps in this step-by-step guide. Clerk offers a streamlined development experience as well as strong user security. You can quickly construct safe and user-friendly authentication systems when you combine it with the adaptability and efficiency of Next.js.

You can do the following using Clerk:

Allow people to check in using their existing Google, GitHub, or other social network accounts.
Allow users to log in without a password by utilizing a one-time passcode (OTP) sent to their phone.
Control user accounts, responsibilities, and permissions from just one dashboard.
Using built-in Clerk features like session management and password security, you can secure your app.

Setting Up Your Next.js Application

First, let's create a new Next.js project by running the following commands in your terminal:

npx create-next-app my-clerk-app
cd my-clerk-app

First step is to create a Clerk account. You can do this by visiting clerk.dev and signing up for a free account.

After logging in, click the Add application button. Give your app a name and pick all of the 'Social authentication' options you want your users to utilize.

Installing Clerk in the Next.js Application

We must add our API key to our project after installing Clerk.
This may be accomplished by placing a.env.local file in the root directory of your Next.js project. The following settings should be included in the.env.local file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your clerk public key>
CLERK_SECRET_KEY=<your clerk secret key>

To get our Clerk’s public and secret keys, it's on Clerk dashboard

Navigate to your Next.js project's directory and run the following command to install Clerk :

yarn add @clerk/nextjs

Adding Clerk’s authentication provider

// app/layout.jsx
import { ClerkProvider } from "@clerk/nextjs"

const Layout = ({ children }) => {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  )
}

export default Layout

Protecting your Application Routes

Once you've integrated Clerk into your application, the next step is to determine which pages should be accessible to the public and which ones should require user authentication. This is achieved by creating a middleware.js file at the project's root and specifying which routes are public and which are private. In our specific scenario, we want only the home page to be accessible to the public, while the other pages should remain hidden until the user logs in to the application. You can accomplish this by implementing the following code:

// Protects access from all the other pages except the home page

import { authMiddleware } from "@clerk/nextjs"

export default authMiddleware({
  publicRoutes: ["/"],
})

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
}

User Registration and Login

Clerk offers a range of pre-built components that simplify the integration of sign-in, sign-up, and other user management capabilities into your Next.js application.

To implement this, navigate to the "app" folder of your project and create two new directories named "sign-up" and "sign-in". Within each of these directories, you should insert the respective code for the sign-up and sign-in functionalities.

Signin

// app/sign-in/pages.js

import { SignIn } from "@clerk/nextjs"

const signIn = () => {
  return (
    <div>
      <SignIn />
    </div>
  )
}

export default signIn

Signup

// app/sign-in/pages.js

// app/sign-up/pages.js

import { SignUp } from "@clerk/nextjs"

const signUp = () => {
  return (
    <div>
      <SignUp />
    </div>
  )
}

export default signUp

To access Clerk's login page at http://localhost:3000/sign-in, make sure you have set up your Next.js application properly with Clerk and that the routes are configured correctly.

Ensure the following steps:

Verify that Clerk has been integrated into your Next.js application.
Make sure you have a route or page set up for /sign-in in your Next.js application.
Confirm that Clerk's login components are correctly imported and rendered on the /sign-in page.

If all these steps have been completed successfully, visiting http://localhost:3000/sign-in in your web browser should load Clerk's login page as intended.

SignedOut and User Profile

Clerk provides a collection of purpose-specific components, including "SignedIn," "SignedOut," and "RedirectToSignIn," designed to simplify user authentication management within our application.

These components allow us to easily integrate authentication functionality into other components.

With them, we can dynamically control our application's behavior based on the user's sign-in status. Additionally, we have the flexibility to trigger redirection to the sign-in page when necessary. These components significantly enhance our ability to seamlessly manage user authentication in our application.

Create a new component called Navbar :

//  components/navbar.jsx
const Navbar = () => {
  return (
    <nav>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <SignInButton mode="modal">
          <button className="rounded border border-gray-400 px-3 py-0.5">
            Sign in
          </button>
        </SignInButton>
      </SignedOut>
    </nav>
  )
}

export default Navbar

Update your app/layout.jsx :

<ClerkProvider>
  <html lang="en">
    <body className={inter.className}>
      <Navbar />
      {children}
    </body>
  </html>
</ClerkProvider>

Not in your app folder create a new page called protected you should not be able to access if you're not logged :

// app/protected/page.jsx
import React from "react"

function page() {
  return <div>protected</div>
}

export default page

In this article, we discussed how Clerk simplifies authentication in Next.js, offering secure sign-in, sign-up, and sign-out. We explored how to handle authentication events and protect our routes.

You should now have a fully authenticated application as highlighted below :

Clerk is a robust authentication module that offers many advantages to Next.js apps. These advantages consist of:

Ease of use: Clerk integrates well with Next.js applications and is simple to use.
Security: Clerk is an authenticating library that adheres to accepted security standards.
Flexibility: Clerk may be tailored to match the unique requirements of your application since it is adaptable. I recommend checking out Clerk if you’re looking for a user-friendly, reliable, and adaptable authentication library for your Next.js application. You can get further details on Clerk’s website for documentation and resources. Here’s the link to the finished project on Github

ORIGINAL POST

Tips on how I juggle side projects, a full-time job and family life with two children.

Mansour Mahamat — Fri, 10 Feb 2023 16:03:41 +0000

Everyone says that to start your entrepreneurial journey it is easier to do it while having a full time job, the problem is that it is not that simple especially when you reconcile it with family life.
You don’t want to neglect your full-time job, but you want to make sure your side project doesn’t die on the vine.

Join KloutUP

Create strict time for your office hours and side project hours.

Decide when you work best, and without disregarding family life, there is an order of priority.

In my opinion, it is important to take a break for lunch, do something else, for example go to the gym, clear your head, go for a walk..., which suits me perfectly. Evenings for me as a father and husband are a very bad time, I prefer to spend time with my family, watching Netflix with my wife when the kids are asleep

My routine is to get up between 5 and 5:30am, do my meditation and work until 8am, which gives me about 2.5 hours of personal work each morning, then start my full time at 9:30am, I often work remotely which allows me to take my children to school and pick them up at 3pm. I like to work for an hour when the kids are having a nap on Sunday, that makes 12 to 14 hours a week, which is a good amount of time.

Prioritise your tasks & Staying organized

Even with a solid programme, you will probably run out of time. It is important to do the tasks that have the most impact on your side project first.

Less important things will either be done as time sensitivity makes them more important, or they won't (in which case they probably weren't necessary in the first place).

Personally I have a Trello to manage my projects, every night I prioritise the tasks I'm going to work on, sometimes I get a UI bug, it's not very urgent it can wait, other times I notice for example a user's photo not showing up it's a priority.

Very important, you should never start a day without knowing what to work on, 2h-2h30 goes by quickly, this time must be beneficial

Know what you'll be working on, know the requirements and specs, and know what's up next. And bonus points if features are broken down into small tasks.

Set small targets for every week

Sometimes it's a busy week, sometimes family responsibilities or sometimes you just don't feel like doing anything and that's okay! Take your time. The important thing is to make a consistent effort.

I am often too busy with my office work and feel tired because of sport or the children. On those days, I make sure I do something related to my side project that doesn't weigh me down too much. It could be planning the next tasks, writing the remaining features, creating a tweet to post later or anything else small and light. But I make sure I'm working on something relevant.

They always say that 1% progress is still progress. Follow this rule all the time. Even if it takes you 2 hours to do a simple footer, that's progress, that's an advance, organisation goes from there, break it down into mini-tasks and move on at your own pace

Taking into account whether you have a busy or a free week, you can make a task list or a small (achievable) goal for your side project. Pursuing this goal will be fun and you will end up with something every week.

Don't expect perfection

This is for everyone who is working on anything! You will have enough time to improve it later than to make it perfect now! J

Let me explain! Let's say you are working on a simple web page, where you spent a week on just making a hero, super fun animated, responsive and very beautiful!
But after a week, you will most likely lose interest in finishing the rest of the web page.Whereas if you finish the average looking web page first and then work on improving it, you will still have something to show for it!

Motivation

The biggest difficulty for most people will be motivation. There are many things that can motivate a person. Money is a big one, passion, learning, having fun...

Whatever it is that motivates you, keep it in mind. And remember why you started. Routine can keep you going when motivation fails you.

Take care of yourself

Burn out is not fun, but it is real. And it's not good for your side project or your work. Even if you're pressed for time, prioritise good nutrition, hydration, exercise and sleep.

I work out a lot, every lunch break I do MMA, JJB or fitness, after work I like to go for a walk with my family, I always take the kids for a bike ride and most importantly I LISTEN TO MY BODY

Here are a few points that I hope will help you, take care of yourself and don't leave your family for coding nights alone in your corner.

LOVE 🫶

In case you are wondering what I am working on, an alternative to Linktree Join KloutUP

You can share your comments here and I would love to know about your passion projects too! You can also connect with me on Twitter or Buy me a coffee if you like my articles.

Share it 🙌

Git Hooks, robust commit with Husky, Prettier and ESLint

Mansour Mahamat — Tue, 19 Jul 2022 10:20:27 +0000

Have you ever had a moment when your code turned to be hard to read because of the style inconsistency like semicolon, string declaration with a mix of single-quote and double-quote, or bad indentation?

Creating code is easy, but creating great code is not.
We can stop poor code from being pushed in our repository through linting and formatting.

Git hooks are scripts that Git executes before or after events such as commits, pushes... It’s a really cool and quick way to validate your code.

You can find the GitHub repo Here

What is a hook?

A hook is simply a script that runs automatically when a particular event occurs in a Git repository. Here we will use pre-commit.

pre-commit: This hook is triggered first even before entering the commit message;

There are many others, I let you look at the documentation of Husky

### Why use ESLint and Prettier

When building apps, it's important to have a good setup of automated and manual tools that ensures the best standards and code quality. Each project must have a linting tool to fulfill these needs

Tools

🦮 Husky is a library to facilitate the creation and sharing of hooks within a project.
🎨 Prettier : Keeps code formatting consistent, based on our own preferences.
✅ ESLint is a tool for identifying and reporting on patterns found in JavaScript code, with the goal of making code more consistent and avoiding bugs
🚧 Lint-Staged : Lints code before a commit occurs to keep production code clean.

Getting Started

Let’s start with the React app, but you can use another technologies like Vue JS, Angular...

We will create a React application by the simplest way with a single command:

npx create-react-app test-husky

Now you should have the React application, you can run npm run start from your terminal and navigate to http://localhost:3000.

Adding ESLint and Prettier

ESLint is already installed in 'create-react-app` by default, but we will create custom configuration files for both ESLint and Prettier.

Let's install Prettier and eslint-config-prettier and make our config files in root project directory.

javascript npm install --save-dev --save-exact prettier eslint-config-prettier

Create an ESLint config, select JSON format

javascript npm init @eslint/config

Add this config in your .eslintrc.json file :

javascript .eslintrc.json { "env": { "browser": true, "es2021": true, "jest": true }, "extends": ["eslint:recommended", "plugin:react/recommended"], "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module" }, "plugins": ["react"], "rules": { "indent": ["warn", "tab"], "quotes": ["error", "single"], "semi": ["error", "always"] } }

A lot more errors pop in the code.
That is ESLint enforcing our selected code style based in the config file.

Before we fix these errors, let's create the Prettier config in root project.

javascript touch .prettierrc.json

Add this config in your .prettierrc.json file :

javascript .prettierrc.json { "tabWidth": 2, "useTabs": true, "printWidth": 80, "semi": true, "trailingComma": "es5", "jsxSingleQuote": true, "singleQuote": true }

Update eslintrc.json to include prettier:

javascript .eslintrc.json ..., "extends": [ "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], ], ...,

Setting Up Husky

So, now if there are some problems with the code, we know how to check them. However, we are sometimes too busy to fix it or we just miss it.

In order to force people to fix the code before commit it, we can use Husky. We need Husky to run a command before git commit runs. In this case, we use Husky to run ESLint and Prettier.

If a problem is found, Husky will stop the process and commit will fail. If no problem is found, git commit will run.

Install Husky:

javascript npm install --save —dev husky

Initialize our pre-commit hooks run:

javascript npx husky-init

This command will freshly add Husky to our project in the .husky folder.

Inside this folder, we can create files that match the git hooks we want to use.

Let's install lint-staged:

javascript npm i --save-dev lint-staged

Now go to package.json and write the following script pre-commit which runs the lint-staged in our project.

javascript package.json "scripts": { ... "pre-commit": "lint-staged", "prepare": "husky install" },

Now create file named .lintstagedrc on our root directory and let us write configuration what we want the lint-staged to do before commits.

javascript .lintstagedrc { "src/**/*.+(js|json|ts|tsx)": ["eslint"], "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"] }

Inside .husky/pre-commit add the following script :

`javascript
.husky/pre-commit

!/bin/sh

. "$(dirname "$0")/_/husky.sh"

npm run pre-commit
`

Testing Our Setup

I have this React file with a few errors inside :

I'll try to commit it, with the errors, let's see what happens.

javascript git add. git commit -m 'test commit with husky'

I can't commit it, I have to fix each error before, so let's fix that.

No more errors now, let's try to commit our code again.

javascript git add. git commit -m 'test commit with husky'

Success! 🥳 We have just committed proper code to our repository.

Your program may not bug-less, but if it is consistent and pretty, it would be easier to debug and maintain it. Those tools are only meant to reduce the chance for potential problems to arise. At the end of the day, you and/or your team are the one in charge to make sure your code is easy to read.

You can find the GitHub repo Here

Stop pushing your React API Key on GitHub 😪

Mansour Mahamat — Fri, 03 Dec 2021 07:48:07 +0000

Have you ever create an application with React, in this application you use external API’s and you pushed these API keys on GitHub ?

Oh no bad practice now everybody can use your API key.

We will see how we can avoid this and hide your API’s keys on Github, you need .env file.

How to setup .env file inside React app ?

You don’t need to install env package, this feature is available with react-scripts@0.2.3 and higher.

Make a file called .env in your project root
Inside the env file, add your variables and API keys value like this :

REACT_APP_GITHUB_API_KEY=Hello world 12345
REACT_APP_MOOVIE_API=0123456789

You should prefix all your variables name by REACT_APP if not it will be ignored

Now you need to restart your React server with npm start to access these variables
Inside your React application, you can now access these variables in using this syntax :

{process.env.REACT_APP_GITHUB_API_KEY}
{process.env.REACT_APP_MOOVIE_API}

Now you have zero excuse to push your API key in your React application.

Here you have the React documentation about using environment variables

Optional Chaining Operator

Mansour Mahamat — Tue, 30 Nov 2021 15:14:24 +0000

The idea of optional chaining is to make it easy to write code where you need to access properties or values inside an object or array that may or may not be null/undefined. Let’s take a look with this object player :

const player = {
 name: 'Marquinhos',
 team: 'Paris Saint Germain',
 country: 'Brazil',
 birth: {
   months: 'May',
   years: 1994,
 }
}

Let's try to access a value that doesn't exist or is not available.

console.log(player.number)

I'll have an error from the browser.

Let's imagine we call an API and this value should exist but we have a little problem to access this data, this error will break my code.

The Optional Chaining Operator

The JavaScript Optional Chaining Operator is coming with ES2020 that allows us to safely access deeply nested properties of an object without having to check for the existence of each of them.

All you have to do is use the “?.” operator after the property that you want to check for nullish values.

object?.property
object?.[expression]

In our code we can use it like this:

console.log(player?.number)

This operation will check if the parent value exists and if it does not, it returns undefined and we don’t have error. When retrieving data from an API, we may not be 100% sure that a certain object exists in our API response.

Array cheatsheet Javascript

Mansour Mahamat — Mon, 29 Nov 2021 14:34:10 +0000

Variables in Javascript allow only one data to be stored at a time. However, given that it is often useful to manipulate many data, the concept of variable is sometimes insufficient, because it becomes difficult to manage a great number of distinct variables.

To remedy this, Javascript proposes a data structure allowing to store all these data in a "common variable": the array.

An array, in Javascript, is thus a variable which can contain several independent data, indexed by a number, called index. The index of an array is thus the element allowing to access the data stored in it.

ARRAY LENGTH
The length method returns the length of the array.

ARRAY PUSH()
The push () method adds one or more elements to the end of an array and returns the new size of the array.

ARRAY POP()
The pop () method removes the last element from an array and returns that element. This method changes the length of the array.

ARRAY UNSHIFT()
The unshift () method adds one or more elements to the start of an array and returns the new length of the array.

ARRAY SHIFT()
The shift () method removes the first element from an array and returns that element. This method changes the length of the array.

ARRAY FOREACH()
The forEach () method iterates through the array elements one by one to perform a function.

ARRAY FILTER()
The filter () method creates and returns an array containing the elements that check the filter.

ARRAY MAP()
The map () method returns a new array containing all the elements of the initial array on which the function is called.

ARRAY REDUCE()
The reduce () method applies a function which is an "accumulator" and which processes each value in the array (from left to right) to reduce it to a single value.

ARRAY SLICE()
The slice () method returns an array, containing a copy of part of the original array, the portion is defined by a start index and an end index (excluded). The original array will not be modified.

ARRAY CONCAT()
The concat () method is used to merge one or more arrays by concatenating them. This method does not modify existing arrays, it returns a new array which is the result of the operation.

ARRAY JOIN()
The join () method creates and returns a new character string by concatenating all the elements of an array. The concatenation uses the comma or another string, supplied as an argument, as the separator.

ARRAY REVERSE()
The reverse() method reverses an array. The first array element becomes the last, and the last array element becomes the first.