# Smakosh — Complete site contents
> Smakosh: A self-taught designer and developer dedicated to creating tech solutions that make a difference. Passionate about open source, startups, and building impactful side projects.
This document contains the full text of every long-form essay, talk summary and project description on https://smakosh.com, intended for ingestion by AI systems. The canonical URL of each piece is included so it can be cited correctly.
Last generated: 2026-09-09T12:33:44.229Z
---
# About
# About — Ismail Ghallou (Smakosh)
> Self-taught designer & developer from Morocco. Currently based in Lund, Sweden.
I'm **Ismail Ghallou**, also known as **Smakosh** — a self-taught designer and developer, originally from Morocco and residing in Lund, Sweden at the moment.
Not available for work atm but open for new opportunities!
## What I do
I design and build digital products — from one-off side projects to client work for startups. I care deeply about the craft: thoughtful interfaces, performant code, and shipping things that actually solve a problem.
I've worked across the full stack but lean toward the frontend, where design and engineering meet.
## Outside of work
When I'm not coding or designing, I'm reading books and manga, [playing video games](https://rawg.io/@smakosh/games), or [watching anime](https://anilist.co/user/smakosh/animelist). Lately I started hitting the gym to build some strength, burn calories — and I'm enjoying it so far.
## Get in touch
- Email: [hello@smakosh.com](mailto:hello@smakosh.com)
- X (Twitter): [@smakosh](https://x.com/smakosh)
- GitHub: [smakosh](https://github.com/smakosh)
- LinkedIn: [Ismail Ghallou](https://www.linkedin.com/in/ismail-ghallou-630149122)
- Resume: [https://smakosh.com/resume](https://smakosh.com/resume)
---
Canonical URL: https://smakosh.com/about
---
# Essays
---
title: DevPass: growing an AI coding subscription with a passport
date: 2026-08-01T10:00:00.000Z
edited: 2026-08-01T10:00:00.000Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/devpass-growth-branding
reading_time: 8 min (1742 words)
Tags: ai, growth, branding
---
# DevPass: growing an AI coding subscription with a passport
In [my last post about LLM Gateway](/building-llm-gateway) I mentioned DevPass in passing as "the single biggest inflection" in the company's growth. This post is the zoomed-in version: how a flat-rate subscription for AI coding tools went from 11 subscription starts in April to 909 in July — hitting the thousand-subscriber mark as I write this — and how an intentionally weird brand — a literal passport, with visa stamps — did a surprising amount of the work.
## What DevPass is
[DevPass](https://devpass.llmgateway.io) is a flat-rate plan for developers who live in AI coding tools. Instead of juggling per-token API billing, you pay $29, $79, or $179 a month and get one key that works in Claude Code, OpenCode, Cline, our own DevPass Code agent, and any OpenAI-compatible tool — with access to every model on LLM Gateway, metered transparently at provider rates.
The core pitch is a value multiplier: every dollar you pay turns into $3 of model usage. No token math, no anxiety-watching a usage meter, switch or cancel anytime. Those three prices and that 3× multiplier have been constant since day one — every "pricing change" in the product's history was packaging and framing, never the number.
## From "LLM Gateway Code" to DevPass
The product launched quietly in January 2026 as **"LLM Gateway Code"** — a generic dev-plans page with a Lucide code icon and a hero that said "Dev Plans for AI-Powered Coding." It sold a handful of subscriptions a month.
The turning point wasn't a feature. At the end of March we renamed it **DevPass**, and in May it moved to its own domain. The name came first, and the entire visual identity was reverse-engineered from it over the following three months: if it's a _pass_, then agents are travelers, tools get stamped in like visas, and your subscription is a travel document. In May we launched on Product Hunt — "One subscription. Every coding model. Three flat prices." — and tore the launch banners down 24 hours later, recycling the hero slot into an evergreen cost calculator.
## The brand: a passport for your agents
Most AI dev tools ship the same visual language: dark mode, terminal green, a bento grid. DevPass got its own system — Bricolage Grotesque display type, an always-dark interactive terminal, and ink. Lots of ink. The passport metaphor became the organizing principle for the entire product:
- **The PassportBook** on the landing page is an interactive passport you can flip open. DevPass Code — our first-party terminal agent — is the _bearer_; Claude Code, OpenCode, Empryo, Cline, SoulForge, and Autohand appear as hand-placed ink stamps with rotation and blend modes, each with its own border shape and sub-label: "ADMITTED · 2 ENV VARS", "BUILT-IN · /CONNECT". Any OpenAI-compatible tool gets "VISA ON ARRIVAL." There's a proper machine-readable zone at the bottom.
- **Reset Passes** — consumable add-ons that reset your weekly premium-model allowance — render as visa-extension stamps you collect, with unused slots drawn as faint dashed outlines like the empty squares of a passport page.
- **Public profiles** carry a full **3D passport in three.js**: a navy booklet with guilloche paper you flip page by page, where your plan is the visa sticker, model families are airports with IATA-style codes, coding harnesses are the airlines you fly, and each model you've used gets entry/exit stamps with first-used and last-used dates. Plus a barcode and MRZ strip, because if you're going to do the bit, do the bit.
- **The Model Census** survey scores models with 1–5 stamp ratings and APPROVED/DENIED recommendation stamps.
- The stamp-in animation eventually became the standard success motion across all our apps, and when our chat product rebranded as "Lounge," it extended the same travel grammar — boarding-pass plan cards, tier codes, a bar-receipt top-up dialog.
At one point someone tried to "clean up" the Reset Pass card into our plain design system, and the revert commit message became the brand's mission statement: _"The stamp animation and visa-extension styling are deliberate DevPass brand identity, not decoration."_
The lesson I keep re-learning: a distinctive metaphor, executed consistently, compounds. Every new feature had an obvious visual home ("what does this look like as a passport artifact?"), the brand became instantly recognizable in screenshots on X, and none of it required a design team — just commitment to the bit.
## The growth machine
Branding made DevPass memorable; a sequence of deliberate growth features made it grow.
**Positioning against the meter.** The landing page runs a "price check" ledger: $29 of pay-as-you-go API credit buys $29 of usage; Cursor Pro's $20 buys about $20; DevPass Lite's $29 buys $87 at provider rates. We shipped programmatic comparison pages against every rival coding plan — OpenCode Zen, Fireworks' FirePass, z.ai's GLM Coding Plan, Qwen — each with structured data and a "Switch in 60 seconds" migration section.
**A first-party agent as the front door.** DevPass Code, our OpenCode fork, ships with LLM Gateway as its only provider and a one-click browser login — CLI loopback auth, Claude Code style, no key ever shown. It's listed first on every DevPass surface. Owning the default tool means onboarding friction is ours to fix, not a third party's.
**A guarantee instead of a free tier.** DevPass has no free plan — a real constraint when your product is literally API credits. Instead: a 7-day first-month guarantee (cancel within 7 days, we refund the month minus metered usage), repeated under every CTA. The same release replaced every inflated marketing claim sitewide with a single source of truth — numbers went _down_ to defensible floors, "SOC 2 in progress" became SOC 2 Type II only once it was true, and fair-use limits moved onto the plan cards as "no hidden throttling."
**Viral loops on profiles.** Public developer profiles (tokens routed, streaks, a GitHub-style heatmap) grew a public leaderboard, a screenshot-ready "Coding Wrapped" card, share actions with stats-prefilled copy, and a copy-paste README badge — four distribution loops, each riding developer status games and backlinks.
**Reset Passes: monetizing the cap honestly.** When subscribers hit their weekly premium-model cap, the exhaustion screen offers a Reset Pass ($9/$29/$79, tier-bound, higher tiers include 1–2 per cycle) instead of a dead end. The gates run in both directions: we refuse to sell a pass late in a usage cycle when it can't pay for itself, and show an upgrade prompt instead. A fair-use constraint became a second revenue line _and_ an upsell surface.
**The Model Census: community data as marketing.** Quarterly, subscribers rate the coding models they actually pay for. Ratings are usage-verified (you need 50+ requests on a model in 30 days to file), models only publish at five or more responses, and filing an entry earns a free Reset Pass "stamped into your passport." The results are public at [devpass.llmgateway.io/data/2026](https://devpass.llmgateway.io/data/2026): a value-ranked registry backed by 458 verified entries from 377 developers in the first wave. It's honest data competitors can't fake, it gives AI search engines something citable, and the reward loop feeds retention.
**Paid acquisition, tested skeptically.** We ran a small Google Ads search test with proper conversion tracking wired through Stripe before deciding whether to scale. The feedback loop did its job twice: keyword quality scores flagged that ads for "claude code alternative" were landing on a homepage that never said those words — so that query got its own honest comparison page ("The Claude Code alternative that keeps Claude Code," complete with a counterpoint section). Then the traffic report showed 191 paid visitors and zero signups, so paid traffic got a dedicated single-scroll, noindexed landing page. Instrument first, spend second.
**Lifecycle work.** Cancellation-feedback surveys, subscriber email campaigns, a win-back campaign to churned subscribers, rollover credits on upgrades (killing the "I'll lose my remaining balance" objection), and duplicate-card abuse blocking. None of it is glamorous; all of it shows up in the numbers.
## The numbers
Subscription starts by month, from our PostHog events (unique Stripe subscriptions):
| Month | Subscriptions started |
| ---------- | --------------------- |
| April 2026 | 11 |
| May 2026 | 83 |
| June 2026 | 230 |
| July 2026 | 909 |
- **1,007 active DevPass subscriptions** as of August 1, verified directly against Stripe — Lite 602, Pro 335, Max 70 (997 fully paid up, 10 in dunning)
- **1,250 subscriptions started** since launch
- **5,270 unique visitors** to the DevPass site in July alone — top sources: direct, Google, the main LLM Gateway site, and X
- **458 census entries** from 377 developers in the first Model Census wave
- **44 Reset Passes purchased** and 215 redeemed (including census rewards) in their first month
- LLM Gateway overall passed **$700K all-time revenue with $55.9K MRR**, independently verified via Stripe on [TrustMRR](https://trustmrr.com/startup/llm-gateway) — with DevPass as the fastest-growing line
## What I took away
**A name can be a roadmap.** "DevPass" was chosen months before anyone drew a passport. Once the name existed, the whole visual system — stamps, visas, the 3D booklet, the census, even the sibling product's lounge motif — was sitting inside it waiting to be unpacked. Pick names with room in them.
**Sell certainty, not tokens.** Developers didn't want cheaper tokens; they wanted to stop thinking about tokens. The 3× multiplier, flat tiers, and the guarantee all sell the same thing: predictability.
**Honesty is a growth tactic, not a constraint.** Walking back an over-claimed partner-boost message, revising marketing stats downward, publishing fair-use limits, refusing to sell a Reset Pass that won't pay for itself — every one of these made the next claim more believable. Trust compounds faster than hype.
**Make your users generate your proof.** The Model Census turned subscribers into a dataset nobody else has, and paying for it with Reset Passes cost us almost nothing. The best marketing assets get more valuable as you grow.
**Instrument before you spend.** The difference between "ads don't work" and "broad match plus the wrong landing page was eating the budget" is a conversion event and an afternoon of auditing.
DevPass went from a renamed side-page to the fastest-growing part of [LLM Gateway](https://llmgateway.io) in about four months of focused work. If you're building something similar — or want to argue about whether visa stamps belong in dev tools — [reach out](https://smakosh.com/contact).
---
_Originally published at https://smakosh.com/blog/devpass-growth-branding_
---
---
title: Building LLM Gateway: from zero to $470K in 12 months
date: 2026-06-11T00:10:01.889Z
edited: 2026-06-11T00:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/building-llm-gateway
reading_time: 6 min (1342 words)
Tags: ai, web-development, career
---
# Building LLM Gateway: from zero to $470K in 12 months
In May 2025, [Luca Steeb](https://github.com/steebchen) and I started building [LLM Gateway](https://llmgateway.io), an open-source API gateway for Large Language Models. Twelve months later, it has processed over $470K in verified revenue, served 34 million API requests, routed 214 billion tokens, and grown past 8,800 signups with 714 paying customers — all from a standing start, with no funding and no audience to launch to.
This post is the story of how we built it, the technology choices we made and why, and the growth work that actually moved the numbers.
## What is LLM Gateway?
If you build anything on top of LLMs today, you end up juggling API keys from OpenAI, Anthropic, Google, and a dozen smaller providers, each with their own dashboards, billing, rate limits, and slightly incompatible APIs. LLM Gateway sits in the middle: one OpenAI-compatible API that routes requests to 270+ models across 40+ providers, tracks token usage and costs in real time, caches responses, and falls back to a healthy provider when one goes down.
We positioned it from day one as the open-source, self-hostable alternative to OpenRouter, LiteLLM, Portkey, Helicone, and Vercel AI Gateway. The core is AGPLv3 with a dual license for enterprise features, and the whole thing is public at [github.com/theopenco/llmgateway](https://github.com/theopenco/llmgateway) — currently sitting at 1,293 stars and 144 forks.
What started as one API turned into four customer-facing surfaces:
1. **The main app** ([llmgateway.io](https://llmgateway.io)) — the gateway itself, plus the dashboard for API keys, usage analytics, and billing
2. **The docs** — a full documentation site with integration guides and an AI assistant that answers questions using our own gateway
3. **DevPass** ([devpass.llmgateway.io](https://devpass.llmgateway.io)) — a flat-rate subscription for developers using AI coding tools like Claude Code, OpenCode, and Cline, at $29/$79/$179 per month
4. **The chat playground** ([chat.llmgateway.io](https://chat.llmgateway.io)) — chat, image, video, and audio generation, canvas, and side-by-side group chat across 210+ models
## The tech stack, and why
The whole project is a TypeScript monorepo managed with Turborepo and pnpm workspaces. Strict mode everywhere, no `any`. Here's how it breaks down:
**The gateway and API are built with [Hono](https://hono.dev).** When your product _is_ an API proxy, the framework overhead on every request matters. Hono is tiny, fast, and runs anywhere, and combined with Zod for validation we get an OpenAPI spec generated straight from the route definitions. That spec then generates a fully typed API client for every frontend app — change a route's response shape and TypeScript breaks in the UI at build time, not in production. This one decision saved us from an entire category of bugs.
**PostgreSQL with Drizzle ORM, and Redis for caching.** Postgres holds everything: users, organizations, projects, API keys, usage records, billing. Drizzle gives us typed queries and sane migrations without the magic of heavier ORMs. Redis caches gateway responses (keyed on the request body) and handles the hot-path lookups that need to happen on every single proxied request — checking an API key shouldn't cost a Postgres round-trip 34 million times.
**Next.js App Router for every frontend.** The dashboard, playground, DevPass site, and docs are all Next.js apps with React Server Components, TanStack Query for client-side data, and Radix UI with Tailwind for components. Sharing one component language across four surfaces meant shipping each new surface got cheaper than the last.
**Better Auth for authentication, Stripe for billing, Vitest for testing.** Better Auth gave us passkey support out of the box. The e2e suite runs real requests against real providers — when you're the middleman between someone's app and a dozen LLM providers, mocked tests lie to you.
The division of labor was roughly: Luca drove the gateway core and infrastructure, and I spent most of my time across the product surfaces, billing systems, the playground, and everything growth-related.
## How we grew it
The honest answer is: lots of small compounding bets, not one viral moment. The revenue chart makes that obvious — five months of nearly flat lines before anything happened.
### Programmatic SEO
We built provider pages, model comparison pages, and migration guides ("switching from OpenRouter", "LiteLLM alternative", and so on) as first-class pages with real content, not thin doorway pages. The models directory alone — every model with live pricing, context size, and capabilities — became one of our biggest organic entry points.
Over 16 months, that grew into 33.4K clicks from 2.33M impressions in Google Search, with the curve still pointing up:
We also started tracking AI search visibility across 50 monitored prompts — when developers ask ChatGPT or Perplexity for "open source OpenRouter alternatives", we want to be in the answer. That's where a growing share of developer discovery actually happens now.
### Ecosystem distribution
Instead of shouting into the void on social media, we went where developers already were: LLM Gateway shipped as a built-in provider in [OpenCode](https://opencode.ai/docs/providers/#llm-gateway), got listed on [models.dev](https://models.dev/providers/llmgateway/) and [OpenAlternative](https://openalternative.co/llm-gateway), and we [sponsored AI Hack Night](https://x.com/Andy_AJT/status/1969173545419767811?s=20). Each integration is a permanent distribution channel that keeps working while you sleep.
### DevPass: meeting a wave when it arrived
The single biggest inflection was [DevPass](https://devpass.llmgateway.io). AI coding tools exploded, and developers wanted predictable flat-rate pricing instead of anxiously watching a usage meter. DevPass turns one key into access to every model at three flat prices, working in Claude Code, OpenCode, and any OpenAI-compatible tool with no SDK changes. It launched in January 2026 and grew to 179 subscriptions started with 135+ active within six months.
### Monetization as a product, not an afterthought
Once we had paying customers, I led a monetization redesign that shipped five revenue features in a single release: an auto-topup nudge, low-balance alerts, a burn-rate and runway dashboard, a second-topup bonus tier, and an admin view for payment failures. None of these are glamorous. Together they target one thing — repeat purchase behavior — and the cumulative revenue curve visibly steepened after that release.
We also ran the boring-but-necessary trust work: I owned our SOC 2 Type II program end-to-end, including quarterly security reviews, asset inventory, incident response tabletop exercises, access controls, and coordinating third-party penetration testing. For an infrastructure product handling other companies' API traffic, this stops being optional very quickly.
## The numbers, 12 months in
Everything below is independently verified — revenue through [TrustMRR](https://trustmrr.com/startup/llm-gateway), which connects directly to our Stripe account:
- **$470K+** all-time revenue, verified via Stripe
- **$8.4K MRR** across 142 active subscriptions
- **34.4M+ API requests** served, routing **214B+ tokens**
- **78,000+ unique visitors** and **8,800+ signups** in the first 12 months
- **714 paying customers** across 2,000+ credit purchases
- **1,293 GitHub stars** and 144 forks on the open-source core
- **33.4K clicks / 2.33M impressions** from organic search
If you want the full picture of what shipped along the way, the [changelog](https://llmgateway.io/changelog) tells the story better than I can summarize it.
## What I took away from this
**Boring technology, chosen deliberately, is a superpower.** Postgres, Redis, TypeScript, Next.js — nothing exotic. The innovation budget went into the product, and the typed OpenAPI pipeline meant two people could maintain six deployed apps without drowning.
**Distribution is built, not found.** Every durable growth channel we have — SEO pages, ecosystem integrations, the open-source repo itself — is something we constructed deliberately and that compounds. The flat first five months weren't failure; they were the part of the compounding curve that looks like nothing is happening.
**Revenue features deserve the same craft as product features.** The monetization release did more for the business than any model launch. Most engineers (me included, for years) treat billing as a chore. It's the product.
**Open source is a business model, not charity.** Being self-hostable and AGPLv3 is exactly why developers trusted us over closed alternatives — and the dual license keeps the lights on.
Building LLM Gateway with Luca has been the most complete thing I've done in my career so far: architecture, product, growth, security compliance, and revenue, end to end. If you're working on something where this experience would help — or you just want to talk LLM infrastructure — [reach out](https://smakosh.com/contact).
---
_Originally published at https://smakosh.com/blog/building-llm-gateway_
---
---
title: Attending Next Conf 2023
date: 2023-10-31T00:10:01.889Z
edited: 2023-10-31T00:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/next-conf-2023
reading_time: 1 min (266 words)
Tags: web-development
---
# Attending Next Conf 2023
Next Conf is an annual conference that is organized by the team at Vercel during which they showcase what’s new in Next.js, what has been done so far and what’s coming in the future. We get to attend other experts talks both in person and virtual talking about a variety of topics related to Next.js
This was my first in-person attendance of Next Conf but have attended all the previous online confs.
So what's new in Next.js 14?
- No new APIs in Next.js 14
- Next.js compiler: Improved the local dev performance using `next dev --turbo`, you can keep track when this will be ready at: [areweturboyet.com](https://areweturboyet.com)
- Server actions are now stable
```tsx
import { sql } from "@vercel/postgres";
function Bookmark({ slug }) {
return (
);
}
```
- A preview of PPR (Partial Pre-Rendering)
```tsx
export default function Page() {
return (
My Store
}>
}>
);
}
```
The `ShoppingCart` and `Recommendations` will not be rendered as they are dynamic components that need data based on the user personal data. With Next.js App Router, if you add a `loading.tsx` file, it will render that loading component until both `ShoppingCart` and `Recommendations` are done fetching data (on the server). With PPR enabled, you can wrap those dynamic components with React Suspense and it will render the loading skeleton as fallback for each dynamic component.
End user will see the following initially with loading shells for those dynamic components until they have fetched the necessary data (again, this is happening on the server, so we’re talking in milliseconds here), No round trips are made from the client to our API/external service like we used to do in SPAs.
- New [Nextjs/learn](https://nextjs.org/learn) , my favorite chapter is [Streaming](https://nextjs.org/learn/dashboard-app/streaming)
- Metadata improvements, worth taking a look because some breaking changes were introduced: https://nextjs.org/blog/next-14#metadata-improvements and https://nextjs.org/blog/next-14#other-changes
---
_Originally published at https://smakosh.com/blog/next-conf-2023_
---
---
title: 2021 year in review
date: 2022-07-17T00:10:01.889Z
edited: 2022-07-17T00:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/2021-in-year-review
reading_time: 6 min (1405 words)
Tags: career, web-development
---
# 2021 year in review
> Photo by [Kelly Sikkema](https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/2021?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
2021 was an immersive year for me, After quitting my full time job at 4D in early November 2020, I was actually in a tough spot, I had only a few bucks on my bank account and as I was living alone, I had to find a new job to get food on the table but at the same time I didn’t want to commit the same mistake and quitting once again quickly.
So I started working on a few open source projects like ontwik-ui which is this headless UI library like Tailwind’s headless UI but doesn’t require the usage of TailwindCSS and uses a different architecture. I also made a Next js version of my Gatsby portfolio template, upgraded most of my boilerplates/starters.
On the side, I consistently worked on Ontwik and used to be active on Ben Awad’s Discord server where I spotted a job post from Florian (who’s now one of my best business partners that I enjoy working with) who was looking for a React Native developer and decided to give it a try, we had a short call and I started working with him, few weeks later, I started exchanging technical emails with Greg who found my profile on YC’s work at a startup website. At the beginning of December 2020, he decided to hire me part-time to help the team maintain and rebuild The Landing which later on turned into a full time job.
During the same month, Greg introduced me to his friends at Parafin who decided to hire me part-time to help build an early prototype web SDK in React. It was stressful but I really loved it and it was fun to work on lots of different projects at the same time.
At The Landing, I had to implement sign in with Google, but to my surprise the app depended on Shopify a lot including saving users as customers on Shopify, which made it hard to implement Google sign in, after a long discussion with the team, we decided to bring in my good friend Jeffery who’s my co-founder at Ontwik as well, he’s the one who built all the micro services, dockerized them and automated their deployments. After Jeffery joined us, we picked the hype beast stack (TypeScript, GraphQL, Next js, typeORM, type-graphql, postgres, redis, Apollo server/client) and started rebuilding The Landing from scratch, it took us ~40 business days to complete the scalable MVP to launch it to the public and The Landing managed to raise $2.5M in a seed round. The public launch was super cool and it was really fun at that time to be working at The Landing.
After the launch, Greg moved on to his next adventure in life and we were left without a technical manager, Greg was so friendly & had a great experience from various companies including AirBnb. On top of being a good manager, he used to write code too and all of us enjoyed working with him. After Greg left, there was a missing piece in the board, as a result, some bad decisions were taken by the board members which affected us negatively and impacted the platform. And started hiring profiles based on specific criterias like their geolocation and gender rather than targeting skilled and passionate developers no matter what their race or gender is. All of this contributed to my decision of quitting after spending 11 months working on the platform.
At Parafin, things were cool until the team decided to bring in a junior developer who was arguing more than working, I decided to quit though I really enjoyed building the SDK web prototype, my dad helped with some maths too, it was fun nonetheless. I’ll never forget that useSlider hook & all the integration tests I wrote.
With Florian, we worked on a mobile app using React native and TypeScript, then a Gatsby js website, we completed the work on those projects and eventually had to take a break.
I also kept working on Ontwik with my co-founder and managed to launch the public beta, Greg was actually our first customer as he hired a good frontend developer to help us at The Landing, though we didn’t charge Greg anything, we got his testimonial and word of mouth did help to attract another customer which I’ll talk more about later on.
I also joined Cosmic for a month, I fixed some bugs on the documentation website, setup the codebase of the new Cosmic dashboard, implemented authentication though I was against storing JWT on localStorage, but the backend didn’t want to go with a secure http only cookie even tough this has some security vulnerabilities, after implementing few features I decided to move on but recommended a friend of mine who took over my work.
Also a quick reminder that all these events were happening at the same time on parallel.
I then joined Rare things which needed help on their Next js app that fetches products from certain Shopify stores and used Stripe checkout, their app was targetting indie artisans and showcased their work and products in a good UX. Emily was also our second customer on Ontwik and the first one to process the first successful transaction. She hired two developers from Ontwik and we worked on the auction feature which unfortunately never went live even though it was all built up and ready for launch. Few weeks later, the project shut down and each of us moved on.
After I left The Landing, I got some good offers offering relocation to Europe, I decided to go with Burda and passed lots of interviews, it turns out both Burda and its company Jameda wanted to hire me, I decided to go with Jameda because of a previous experience with digital health products. They did their best and took care of my relocation to Germany, it did take more than 3 months but everything worked out and I’m expected to be in Munich on 1st March 2022.
During that period (the 3 months), I worked few part time jobs like Dopewars and LinksDAO and most of them were in the crypto space, I’ve been following the space since 2017 but nowadays there are lots of cool products to build on like Hardhat, ethers js and tons more, some are open source, others are backed by their tokenomocis while others are profitable businesses backed by VCs and their revenue.
I also joined Formspree to work part time with them, I initially worked on their Vercel integration, then moved on to work on their dashboard and later on started working on implementing Stripe on their core library, to then adding support to that as well on their React library with a fork of Vercel’s conference starter kit but tickets have to be purchased.
Here's a summary of things I learned, created, earned and shared.
## Learning
### Dev
- More TypeScript
- Type-graphql
- GraphQL Codegen
- typeORM
- Switched to TailwindCSS in few projects
- Ethers js
- Hardhat
- Web3-react
- React-query
- Redux toolkit
- Core web vitals
### Life
- Real estate
- Stocks
- Crypto
- Personal finance
- More about taxes
### Design
- Started the switch to Figma from Adobe XD
## Creating
- Contributed in building 2 platforms and a mobile app at my previous job which I'm not allowed to disclose as they are still not public.
- Co-built [Ontwik](https://ontwik-dev.com)
- Recruited folks either directly or by a recommendation
- Started working on [Ontwik-ui](https://github.com/smakosh/ontwik-ui)
- Updated my Gatsby starters and theme
- Made a [CRA boilerplate](https://github.com/smakosh/CRA-boilerplate)
- Contributed in building [The Landing](https://landing.space/)
- Built an early web SDK for [Parafin](https://www.parafin.com/)
- Worked on Rare things
- Worked on [Cosmic](https://www.cosmicjs.com/) docs and the new CMS codebase
- Few other products I’m not allowed to disclose
- Worked on [Dopewars](https://dopewars.gg/), my contributions are visible since it's an open sourced project
- Built [LinksDAO](https://linksdao.io/) SXSW event registration
- Continued work on [Ontwik Beta](https://ontwik-dev.com)
- Built [Mintify](http://mintify.smakosh.com/), it's open source too.
- Built [React hot pagination](https://github.com/smakosh/react-hot-pagination)
- Started work on [Ontwik UI](https://ontwik-ui.smakosh.com/)
- Started work on my [new portfolio](https://new-portfolio-inky-nine.vercel.app/)
- [Next js boilerplates](https://github.com/smakosh?tab=repositories&q=next&type=&language=&sort=)
## Earning
- Bought another apartment which is rented right now
- Replaced my Google Pixel 2 with an Iphone 13 Pro
## Sharing
- Gave 4 talks, 1 public, rest were private
## Data about this blog during 2021
- 67,045 page views 👀
- 27,499 users 📈
- 27,119 new users 📈
- 10,936 are based in 🇨🇳
- 3,326 🇺🇲
- 2,977 🇨🇳
- 1,306 🇮🇳
- 1,167 🇪🇪
- 15,629 use Chrome
- 3,033 use Safari
- 6,616 use Windows
- 3,775 use Macintosh
- 2,018 use Linux
- 11,081 use Android
- 3,429 use iOS
> Apologies for being late publishing this article, both 2021/2022 have been busy years so far.
---
_Originally published at https://smakosh.com/blog/2021-in-year-review_
---
---
title: How to make an NFT
date: 2021-11-23T15:10:01.889Z
edited: 2021-11-23T15:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/how-to-make-an-nft
reading_time: 3 min (647 words)
Tags: web-development, web3, javascript
---
# How to make an NFT
> You can collect this article as an NFT [Here](https://mirror.xyz/smakosh.eth/eLXmQJ0Rb1Ahd1Pi3TpnSOzpVytCJB1kxcO2WXnF4uI)
As there is a new trend these days and as I’ve been working on this area recently, I thought of writing this article to explain what an NFT is and how can you make one.
NFT stands for Non fungible token which basically means that this kind of token is unique and cannot be split unlike a fungible token. You can think of this as an Art piece like the Monalisa that is unique and loses its value once it gets split. While money for example can be split and exchanged as it’s not something unique.
> Photo by [Atahan Guc](https://unsplash.com/@ataguan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/monalisa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
This trend started earlier in 2017 when a project known as Crypto kitties launched, which lets you connect your Crypto wallet and create an NFT in the form of a cute kitten which has some associated attributes like what the kitten is wearing, color etc...
And correct me if I'm wrong, but I think the folks behind that project are the ones who pioneered the ERC-721 smart contract which lets you mint NFTs, as it acts like an API or a link between the owner of the NFT and the NFT itself.
So with this out of the way, let us explore how to make one, what do you need to do that and how?
Before you get to this point, you do need to have a basic understanding of the blockchain, especially Ethereum’s blockchain and smart contracts, I’m not going to explain that here but you can let me know if you’re interested in a deep dive explanation.
An NFT can be any digital asset, whether it’s an image, audio or 3D model file, as long it carries with it an object with the right attributes which we call “metadata”.
Once your digital asset has been created, you need an ERC-721 (or ERC-1155) smart contract’s address to use it to mint that NFT.
```solidity
pragma solidity ^0.8.4;
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "hardhat/console.sol";
contract NFTFactory is ERC721URIStorage {
using Counters for Counters.Counter;
Counters.Counter private _tokenIds;
address contractAddress;
// Note that you don't have to do this, only if you want to pass the name and symbol of the ERC-721 token when you'd like to deploy
constructor(string memory name, string memory symbol)
ERC721(name, symbol)
{}
function createToken(string memory tokenURI) public returns (uint256) {
_tokenIds.increment();
uint256 newItemId = _tokenIds.current();
_mint(msg.sender, newItemId);
_setTokenURI(newItemId, tokenURI);
setApprovalForAll(contractAddress, true);
return newItemId;
}
}
```
Once your contract is ready, you have to compile and deploy it, there are tools that help with that like [Hardhat](https://hardhat.org/) which I do recommend.
You can compile your contract running `npx hardhat compile`, you can deploy it using Hardhat or build the frontend and deploy from there like I did on my Minting app:
```ts
import { ethers } from 'ethers'
// We're importing the contract's artifacts here
import NFTFactory from '../../../artifacts/contracts/NFTFactory.sol/NFTFactory.json'
// Get the user signature
const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner()
// Prepare contract facotry
const factory = new ethers.ContractFactory(NFTFactory.abi, NFTFactory.bytecode, user.data.signature || signer)
// Deploy the smart contract (ERC 721)
const deployedContract = await factory.deploy('Much wow', 'WOW')
await deployedContract.deployed()
```
Once the contract is deployed, you can take its address, use the mint function to create a non fungible token.
You may be wondering where the digital asset and the metadata object will be hosted at? That’s indeed a good question, the answer might be different, as each of us has their own opinion, but that gets hosted off-chain or on-chain.
Off-chain, meaning on a centralized database or service like AWS S3, while on-chain means directly on the blockchain using decentralized file system services like IPFS or other alternatives, keep in mind files on IPFS are not permanent and might be deleted if not needed later on automatically.
In this article, I will go with the on-chain approach and use [Infura](https://infura.io/) (a premium service) to host the files using IPFS but never loose them. You get up to 5Gb for free.
```ts
import { create as ipfsHttpClient } from 'ipfs-http-client';
// You can grab those keys from Infura.io
const auth = 'Basic ' + Buffer.from(`${INFURA_IPFS_PROJECT_ID}:${INFURA_IPFS_PROJECT_SECRET}`).toString('base64');
const client = ipfsHttpClient({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
// Upload image to IPFS (getting blob from url, might not needed if you already have the blob)
const blob = await fetch(values.image).then((r) => r.blob());
const image = await client.add(blob);
const data = JSON.stringify({
attributes: [],
description: 'description'
external_url: 'external_url'
name: 'name'
image: `https://ipfs.infura.io/ipfs/${image.path}`,
});
// Upload the rest to IPFS
const added = await client.add(data);
const metadataUrl = `https://ipfs.infura.io/ipfs/${added.path}`;
```
Once the files are uploaded, you get an url as response from IPFS and that’s the url we will pass when creating an NFT.
```ts
import { ethers } from 'ethers';
import NFTFactory from '../../../artifacts/contracts/NFTFactory.sol/NFTFactory.json';
const provider = new ethers.providers.Web3Provider(window.ethereum);
// Ask for user signature
const signer = provider.getSigner();
// Mint the NFT using the deployed smart contract
const contract = new ethers.Contract(, NFTFactory.abi, signer);
// Token gets created
// metadataUrl is the url returend by IPFS above
const transaction = await contract.createToken(metadataUrl);
await transaction.wait();
```
Now that your NFT has be minted, you can list it for sale on different marketplaces like OpenSea or Foundation or directly trade via your wallet which is not recommended.
That’s all. Comment down below if you have any questions!
Forgot to plug an open source minting platform I'm currently working on called [Mintify](https://github.com/smakosh/nft-mint-app)
### Credits
Thanks a lot to [Nader Dabit](https://www.youtube.com/c/naderdabit)'s videos and articles that helped me a lot to quickly grasp and understand this and of course dozen of other online content from amazing creators.
Also thanks for Greg for minting an NFT for me to join [Developer DAO](https://www.developerdao.com/) where I'm more active these days.
---
_Originally published at https://smakosh.com/blog/how-to-make-an-nft_
---
---
title: 2020 year in review
date: 2020-12-30T00:10:01.889Z
edited: 2020-12-30T00:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/2020-in-year-review
reading_time: 5 min (1198 words)
Tags: career, web-development
---
# 2020 year in review
I haven't published any article during this year which is unfortunate as it's been an overwhelming one for me but not exactly due to the pandemic, it was mainly due to the amount of client work I had to deliver during this year.
Though, this doesn't mean I won't be writing this one as I'm traveling back to visit my parents & get to walk a bit as I have been spending most of my time sitting on my desk.
So as usual, I'll cover things that I have managed to learn, create & earn but I've decided to add a new category this year of things I shared as well.
This year started for me in late December when I was working a normal well paying job in a city known as Casablanca here in Morocco, though the workload wasn't heavy, my skills weren't been used the right way and as a result I wasn't learning anything new on that job except few soft skills like mentoring new members, talking face to face with clients & I got to know few stuff related to business.
So I decided to accept an offer as a remote JAM Stack developer for a NYC startup as a part time job from which I learned a lot actually, though I understood the JAM stack well but I was heavily using Gatsby js rather than alternatives which weren't that many nor as good as Gatsby when it comes to statically generate pages at that time, so I had to pick up & learn Next js the canary version at that time which added support to SSG & provided a new API for SSR as well, along with [ISR](http://2020.wth-isg.talks.smakosh.com/).
My task was to build a statically generated Ecommerce website with i18n and multi currency support and does include the checkout step as well while the content is managed from a headless CMS.
Though there were some obstacles & performance issues with the GraphQL API I was using to fetch data & other security flaws I can elaborate more on, I managed to get it done in March which was open sourced, it was a good experience nevertheless as I got to work with good developers from all the parts of the world & I learned a lot from them & from the Next js core team which were really helpful & didn't get bothered with my questions on both Next & Vercel.
I was also handling some client work to the point that I started outsourcing the work to fellow developers and designers I know and trust.
That was the moment I come up with the idea of building [Ontwik](https://ontwik-dev.com?utm_source=smakosh) which is a platform that connects developers directly with founders anywhere in the world without taking a % cut from the developers hourly rates but by charging the founder a small fee to get the contact details of the developers they decided to hire.
> The small fee covers the work we do to filter good developers based on our previous work experience with them and a personal & technical interview which doesn't include leetcode along with the servers cost and our design and engineering work.
And this is why I couldn't publish any articles thus far. But I did give more talks this year than the previous one & one of the best ones was done remotely for the first edition of an [amazing conference](http://blablaconf.com/?utm_source=smakosh), though it was in my locale language, I would recommend checking out [the slides](http://2020.wth-isg.talks.smakosh.com/). as they are in English.
Early in March, the startup decided to invite me to NYC to meet the whole team including investors & the board as I got an offer to work for them full time, as I passed through the airport checking, I checked my phone to notice that everything was canceled & I was asked not to come though I wasn't able to retrieve my luggages nor cancel my flight. As a result I had to spend 1 night in a hotel nearby the airport & come back the next day. I'm grateful that everything was covered by the startup.
Few months later, the company collapsed for reasons I cannot disclose.
The Moroccan company got impacted by the pandemic as more clients weren't used to remote work hence we (employees) were asked to let go of a specific percentage of our salary which was fine with me as it will be paid back later on, as I was in my parents house I decided to let go of 80% but in a condition to raise the precentage for other employees who are living independently and have a family to take care of, not sure if the CEO did as I requested but I trust his words.
A month later, we were asked again to let go of half of our salary but this time it won't be paid back and any new employee shall be laid off until the company gets more work on the table, so I decided to mark myself as open for the market.
I got a numerous amount of offers which I'm grateful and thankful for, along with the support from anyone who reached out with an offer, help or a recommendation. I passed few interviews and decided to go with a Moroccan company based in Rabat by a recommendation from a friend of mine who runs a [recruiting company](https://www.diaaland.com/?utm_source). Though I decided to quit after being summoned to the office later in November.
Throughout 2020 I got to meet Jeffrey who's my co-founder of Ontwik and has been doing amazing work powering up the micro services of [Ontwik](https://ontwik-dev.com) and I registered Smakosh as an LLC in the US as well which made it easier for me to work with amazing founders in the states.
Here's a summary of things I learned, created, earned and shared.
## Learning
### Dev
- Next js
- React native navigation v5
- ISR
- TypeScript
- BitPay
- Stripe API
- I tried Prisma v2
- I tried Tailwindcss
- Sequelize
- Postgres
- FaunaDB
- Docusaurus
### Life
- More cooking
- Selling an idea
- Living independently
- Taxes
- the majority of people still cares about status
### Design
- Started playing with Glassmorphism recently
- Redesigned this website, will be live anytime soon
- more about Design systems
## Creating
- Contributed in building 2 platforms and a mobile app at my previous job which I'm not allowed to disclose as they are still not public.
- Co-built [Ontwik](https://ontwik-dev.com)
- Recruited folks either directly or by a recommendation
- Started working on [Ontwik-ui](https://github.com/smakosh/ontwik-ui)
- Updated my Gatsby starters and theme
- Made a [CRA boilerplate](https://github.com/smakosh/CRA-boilerplate)
## Earning
- Bought an apartment where I'm living right now
- Bought my own Macbook Pro 2019 16"
- A Guiness world record
- A new work setup
- Finally fast internet, I started livestreaming, go follow me on [Twitch](https://twitch.tv/smakoshdev)
## Sharing
- Gave 5 talks
- Have been a guest in 3 podcasts episodes
- Joined/Created/Moderate few good Discord servers where I seek and share help
## Data about this blog during 2020
- 63,036 page views 👀
- 20,268 users 📈
- 20,032 new users 📈
- 3,833 are based in 🇲🇦
- 3,203 🇺🇲
- 1,836 🇮🇳
- 1,378 🇨🇳
- 1,178 🇪🇪
- 14,131 use Chrome
- 1,974 use Safari
- 6,310 use Windows
- 4,683 use Macintosh
- 2,180 use Linux
- 4,610 use Android
- 2,022 use iOS
> Will keep editing this article until January ends I usually do.
---
_Originally published at https://smakosh.com/blog/2020-in-year-review_
---
---
title: 2019 year in review
date: 2020-01-03T00:10:01.889Z
edited: 2020-01-03T00:10:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/2019-in-year-review
reading_time: 2 min (517 words)
Tags: career, web-development
---
# 2019 year in review
I managed to achieve in 2019 much more of [what I've done in 2018](/2018-year-review), here's an overview of what I have learned, created & some random facts.
## Learning
### Dev
- React hooks
- React native navigation
- React native config
- Fastlane
- SSR, static SSR, CSR, Pre-rendering
- Styled-system
- Theme UI
- ZEIT now
- Semantic commits
- Removed redux & recompose, switched to Hooks & Context API.
- Tried React VR (360)
- Tried Ruby and Ruby on rails
- Configuring Nginx, redirecting http to https after generating and adding the SSL cert
- Circle & Travis CI
- Detox and cypress for e2e testing
- testing-library (for React and React native)
- Apollo client
- Airtable
- Contentful
- GraphQL
- Tried Docker
- Pagination with mongoose-paginate
- tried Redis
- Mixpanel
- tried Sinatra
### Life
- Decisions are made based on:
- The environment
- Experience
- Bias & intuition
- Team & project management
- Laundry & cooking
- Negotiating
- Saying "No"
- Expenses/Income management
- Being rich isn't being wealthy
- Giving a good feedback
### Design
- UX can be improved based on analytics & user behavior using tracking events
- Wireframing is an important milestone
- Design systems
- [Little experiment I did, CSS in GraphQL](https://github.com/smakosh/gatsby-design-system-experimental)
## Creating
- Contributed in building 3 platforms at my previous job, Barmej, Pawp & a foundation's website that support up to 6 languages using Gatsby & Contentful as a headless CMS while working for Obytes.
- Continued adding features, fixing bugs & improving Beaf until I decided to shut it down and [open source the code bases](https://github.com/smakosh).
- Built & shipped [Ai Hashtags](https://ai-hashtags.com), an Android & iOS app to generate precise hashtags from your pictures & Instagram posts.
Contributed more to Gatsby & few other JavaScript libraries, got some free swag in return.
- Decided & managed to write an article a month, that's a total of 12 articles!
- Gave 3 talks about Gatsby js, in Casablanca & Penang island.
- Mentored few folks on Twitter who managed to get their first jobs.
- Created [react-flex-ready](https://github.com/smakosh/react-flex-ready)
- Created a Gatsby theme [gatsby-theme-portfolio](https://github.com/smakosh/gatsby-theme-portfolio)
- Bunch of Gatsby starters
## Random facts
- Resigned from my first job, after 2.3 years working as a remote front-end developer
- Replaced my Nexus 6p phone with Google Pixel 2
- Traveled to Southeast Asia for 2.5 months, visiting Kuala Lumpur, Penang in Malaysia and Bali in Indonesia.
- Visited grandma
- Joined a new company as a full stack developer.
- Fell in love
- Got the opportunity to talk with ZEIT's CEO who's also the creator of mongoose & socket.io along with his team, to try out ZEIT now & share my honest feedback, then they decided to sponsor one of their community meetups here in Morocco.
- Moved from my parents' basement to a new place, got a new monitor, desk (adjustable height), chair & macBook pro.
- Got many offers which I declined in a respectful way but recommended my friends who I trust could do a great job.
- First time invited to speak at a Moroccan podcast about the JAM stack
- Made 2515 contributions on GitHub
## Data about this blog during 2019
- 57 312 page views 👀
- 20 508 users 📈
- 5032 are based in 🇺🇲
- 2536 🇫🇷
- 1630 🇩🇪
- 15 501 use Chrome
- 2460 use Safari
- 5992 use Windows
- 4882 use Macintosh
- 3721 use Linux
- 3483 use Android
- 2276 use iOS
> Will keep editing this article until January ends I usually do.
---
_Originally published at https://smakosh.com/blog/2019-in-year-review_
---
---
title: Get paid while you're learning, working at a startup
date: 2019-12-23T08:50:01.889Z
edited: 2019-12-23T08:50:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/get-paid-while-you-are-learning-working-at-a-startup
reading_time: 4 min (831 words)
Tags: javascript, web-development, career
---
# Get paid while you're learning, working at a startup
## Life update
If you haven't read my [previous article about the visas rejections](/visa-rejections-stories), I'd recommend you to do so as I mentioned there that I switched my job and the reasons behind such decision.
## Caution
⚠️ Please be aware that this doesn't apply or might not work for everyone, luck and other factors play a huge role in this to workout and I'm grateful for being very lucky that it did.
### Students loan debt
We all know and aware of the student loan debt issue in the US, it exceeded \$1.2 trillion in 2014 according to [Wikipedia](https://en.wikipedia.org/wiki/Student_debt#Statistics).
Middle class families are the most impacted ones, as a result, most end up having financial issues even after the graduation of their kids, same applies in other countries but differently.
> you could do your own research for the reasons and causes behind the issue
### Avoiding student loan debt
I will share the approach I took but keep in mind that there are other better and bad approaches, I don't recommend any and I'm just sharing my experience. And keep in mind that I'm based in Morocco which offers the option of a low cost education and you're not forced to study at private schools.
What I basically did is working with international clients while I was studying in a public school after high school, what I could learn today, will apply it tomorrow in exchange of cash. But I had to learn most of the stuff at home as I mentioned in [my previous articles](/visa-rejections-stories).
> I had to sleep at 4am most of the time.
I kept following that approach but in an exponential way when it comes to the technical side of the work I was doing, meaning that I've almost never done something repetitive and I try to learn to use something new when ever I get a task to work on.
## FAQ
I'm pretty sure most of you will be questioning these questions:
But how would you get those clients without any work to showcase?
- I followed few tutorials, made an Intro using After Effects, posted it on YouTube, a videographer based in Canada left a comment which turned into a work I had to deliver.
From making the same intro into making 2 brand logos for him and that's how this started. TL;DR, worked on my personal projects, showcased them and that's how it launched.
Based on what do you know what to learn next?
- I've been up to date on what's happening on the web community, I bet entirely on JavaScript and CSS, few factors contributed in that, which made me take that decision, here are a list of those factors:
- A friend of mine
- I started learning the front-end first
- The rise of Node js that made JavaScript the first cross-platform language
- It wasn't taught and fully neglected by our educational system, which meant more chances of landing a job in the future.
> If you have more questions, you can add a comment below or DM me on [Twitter](https://twitter.com/smakosh)
## Why working at a startup?
> This is a part 2 of [this article](/one-year-working-remotely)
My second year of working remotely was so fun & hard as I had a part time job as a React Native developer, working a total of 12 hours a day.
I've been learning React Native on my spare time during the first year while working for Obytes, I had built and shipped few Android & iOS apps.
> Notice the pattern? Build your own projects, showcase them with your skills and that eventually will contribute in landing a job.
As I was living in my parents basement, it was like getting funded by a Startup to learn and acquire new skills, I didn't care about the financial side at all but focused on learning and acquiring knowledge.
> [It was honestly like a seed investment with unlimited runway](https://twitter.com/smakosh/status/1211686250782040064)
## When to exit?
As few startups exit (sellout) aka getting acquired by a large company, I did the same at the right moment as I've learned a lot compared to someone who has just graduated and joined a company.
I had to decline many offers during those 2 years, even if they were offering double and triple the salary I was getting, I never mentioned them to anybody including my family as they'd most likely influence me to accept them.
I had to support ageism and bullshit comportement of a board member working at the startup, until the time was right to exit and I resigned.
## When not to exit?
If I got the stock options I was offered by one of the board members and if they were valuable, I wouldn't have quit especially if:
- The startup was about to get acquired by a large corporation
- The startup was highly profitable
Otherwise, those assets will be considered just like an annual bonus.
> Avoid getting brainwashed at all costs.
## Conclusion
I would have taken other approaches and done things differently to end up with better results but let's leave that to an upcoming article on which I'll try to send a letter to my past self.
---
_Originally published at https://smakosh.com/blog/get-paid-while-you-are-learning-working-at-a-startup_
---
---
title: Webview native authentication in React Native
date: 2019-12-01T07:50:01.889Z
edited: 2019-12-01T07:50:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/webview-native-authentication
reading_time: 5 min (1110 words)
Tags: mobile-development, javascript
---
# Webview native authentication in React Native
TL;DR:
- React Native App:
- React web app:
- REST API:
## Theory
Before you start reading and getting into this article, you must be aware that only the minority of mobile developers get into this use case and due to that, I decided to write this article to guide you through on how to implement authentication within a native app that has a webview part included.
You may be wondering why going through this while you could have just converted the web app into a fully native app or just go fully with the webview.
Well to answer the first question, sometimes your client wants a quick & cheap MVP to deploy to TestFlight or the Beta track on the Play Store for their customers to test and share feedback.
The reason we want to have at least the authentication part being fully native is because your submitted app on the App Store unlike Google gets tested by humans, and they reject the app if it uses the webview only.
Before we move into to the practical part in this guide, let me explain how we will deal with authentication first:
1. User has to register or sign in
2. A request is sent to our REST or GraphQL API returning a JWT token
3. Token gets stored within the device storage
4. User gets redirected to the webview screen being authenticated as we pass the token to the web app using a great library called `react-native-webview-invoke`, that lets us pass values and functions to be executed within the web app.
5. When the user signs out within the webview screen, a function will be invoked from the web app that logs out the user on the native app as well
> This way, when the user opens up the app once again, they will start from the authentication process
6. We will be getting the stored token and verifying that it is still valid, if it is, the API will return user's data, else user has to login once again.
## Practice
So let us begin by initializing a new React Native project using `npx react-native init authApp`
> ⚠️ I'll be using React Native `0.61.5`
Let us install all the libraries we will be using in this example:
- Navigation: react-native-navigation
- HTTP requests: axios
- Webview: react-native-webview
- Storage: @react-native-community/async-storage
- Forms & validation: formik + yup
- Styling: styled-components
## Configuring RNN
As I'm using React Native 0.61.5, it's way easier to configure react-native-navigation now, you can follow these steps to get it configured:
### for iOS
1. `cd ios`
2. open the `Podfile`
3. add this line to your Podfile
```ruby
pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'
```
4. open your xcworkspace project in Xcode
5. In Xcode, you will need to edit this file: `AppDelegate.m`
6. Its content should look like this
```swift
#import "AppDelegate.h"
#import
#import
#import
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
return YES;
}
@end
```
7. Open `AppDelegate.h` and make sure its content looks like below
```swift
#import
@interface AppDelegate : UIResponder
@property (nonatomic, strong) UIWindow *window;
@end
```
### for Android
You might want to check [the official guide](https://wix.github.io/react-native-navigation/#/docs/Installing?id=android)
> ⚠️ Make sure to create `react-native.config.js` file on the root of your app and put this content:
```js
module.exports = {
dependencies: {
'@react-native-community/async-storage': {
platforms: {
android: null,
},
},
'react-native-webview': {
platforms: {
android: null,
},
},
},
}
```
We basically want to avoid auto linking those two libraries on Android.
## Registering our screens
Let's start by opening up our `index.js` file and removing its content, then we will import `Navigation` from react-native-navigation, along with our registered screens under `src/config/index.js` and initialize our app using the `registerAppLaunchedListener` callback.
> `index.js`
```jsx
import { Navigation } from 'react-native-navigation'
import { registerScreens } from './src/config'
registerScreens()
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: 'Initializing',
},
},
})
})
```
We set `Initializing` as the first screen to render.
Let's now register the rest of the screens
We have:
- **Initializing** screen, which has been explained above ☝️
- **Home** screen which will contain the webview of our web app
- **Login/Register** screens are self descriptive
> `src/config/index.js`
```jsx
import { Navigation } from 'react-native-navigation'
import Home from 'src/screens/Home'
import Initializing from 'src/screens/Initializing'
import Login from 'src/screens/Login'
import Register from 'src/screens/Register'
export const BASE_URL = 'http://localhost:5000/api'
export const REACT_APP = 'http://localhost:3000'
export const registerScreens = () => {
Navigation.registerComponent('Home', () => Home)
Navigation.registerComponent('Initializing', () => Initializing)
Navigation.registerComponent('Login', () => Login)
Navigation.registerComponent('Register', () => Register)
}
```
> `BASE_URL` is our REST API and `REACT_APP` is our React web app.
Now let's move on creating our screens
> `src/screens/Initializing.js`
This screen is the one that will appear to users first while fetching and validating their tokens
```jsx
import React from 'react'
import Layout from 'src/components/Layout'
import Initializiation from 'src/modules/Initializiation'
export default () => (
)
```
Initialization is where the logic exists which lives under `src/modules/Initializing`
```jsx
import React, { useContext } from 'react'
import { Text, View } from 'react-native'
import Container from 'src/components/Container'
import CustomButton from 'src/components/CustomButton'
import useGetUser from 'src/hooks/useGetUser'
import { Context } from 'src/providers/UserProvider'
export default () => {
const { user, dispatch } = useContext(Context)
const { loading, isLoggedIn } = useGetUser(user, dispatch)
return (
{loading ? (
Loading
) : isLoggedIn ? (
Welcome back {user.data.user.username}! goHome(user.data.token)}>Go Home
) : (
Welcome! goToRegister()}>Register goToAuth()}>Sign In
)}
)
}
```
> Notice that I'm using a custom hook `useGetUser` that contains all that logic and I'm passing the `user` object and `dispatch` function from the User Context.
Layout is a wrapper component that wrapps the passed children with the User Provider as shown below
> You can add the header and more components that are meant to appear on all your screens
Layout lives under `src/components/Layout`
```jsx
import React from 'react'
import UserProvider from 'src/providers/UserProvider'
export default ({ children }) => {children}
```
And I'm using React Context API to manage my global state, here's the User Provider component and reducer
It lives under `src/providers/UserProvider`
```jsx
import React, { createContext, useReducer } from 'react'
import UserReducer from 'src/reducers/UserReducer'
export const Context = createContext()
export default ({ children }) => {
const [user, dispatch] = useReducer(UserReducer, [])
return (
{children}
)
}
```
the user reducer lives under `src/reducer/UserReducer`
```jsx
export default (user, action) => {
switch (action.type) {
case 'SAVE_USER':
return {
...user,
isLoggedIn: true,
data: action.payload,
}
case 'LOGOUT':
return {
...user,
isLoggedIn: false,
data: {},
}
default:
return user
}
}
```
And here's the `useGetUser` hook which lives under `src/hooks/`
```js
import { useCallback, useEffect, useState } from 'react'
import { verifyToken } from 'src/modules/auth/actions'
export default (user, dispatch) => {
const [loading, setLoading] = useState(true)
const [error, _setError] = useState(null)
const fetchUser = useCallback(() => verifyToken(dispatch, setLoading), [dispatch])
useEffect(() => {
if (!user.isLoggedIn) {
fetchUser()
}
}, [user.isLoggedIn, fetchUser])
return {
error,
loading,
isLoggedIn: user.isLoggedIn,
}
}
```
I'm importing `verifyToken` from the auth actions, the action simply verifies that the token hasn't expired yet, [see Step 6 above on the Theory section](/webview-native-authentication#theory)
> It lives under `src/modules/auth/actions.js`
```js
import AsyncStorage from '@react-native-community/async-storage'
import axios from 'axios'
import { BASE_URL } from 'src/config'
import setAuthToken from 'src/helpers/setAuthToken'
export const verifyToken = async (dispatch, setLoading) => {
try {
const token = await AsyncStorage.getItem('token')
if (token) {
const { data } = await axios({
method: 'GET',
url: `${BASE_URL}/user/verify`,
headers: {
'Content-Type': 'application/json',
'x-auth': token,
},
})
setAuthToken(data.token)
await dispatch({ type: 'SAVE_USER', payload: data })
AsyncStorage.setItem('token', data.token)
}
} catch (err) {
setError(err)
} finally {
setLoading(false)
}
}
```
More actions will be added as we move on through this guide through.
Next, let's prepare both the `SignIn` and `Register` screens:
Login lives under `src/screens/Login`
```jsx
import React from 'react'
import Layout from 'src/components/Layout'
import Login from 'src/modules/auth/Login'
export default () => (
)
```
And Login module lives under `src/modules/auth/Login`
```jsx
import React, { useContext } from 'react'
import { Formik } from 'formik'
import { View } from 'react-native'
import Container from 'src/components/Container'
import CustomButton from 'src/components/CustomButton'
import DismissibleKeyboardView from 'src/components/DismissibleKeyboardView'
import ErrorField from 'src/components/ErrorField'
import InputField from 'src/components/InputField'
import { login } from 'src/modules/auth/actions'
import { Context } from 'src/providers/UserProvider'
import * as Yup from 'yup'
import { Label } from '../styles'
export default () => {
const { dispatch } = useContext(Context)
return (
{
try {
login({ dispatch, setErrors, setSubmitting, values })
} catch (err) {
setSubmitting(false)
}
}}
>
{({ isSubmitting, handleSubmit, errors, touched, values, handleChange, handleBlur }) => (
{touched.email && errors.email && {errors.email}}
{touched.password && errors.password && {errors.password}}
Login
)}
)
}
```
I'm using the newest version of Formik with yup for validation, there is one action called `login` being dispatched there when the form is submitted.
login action lives under `src/modules/auth/actions`, the same file where `verifyToken` lives
```js
import AsyncStorage from '@react-native-community/async-storage'
import axios from 'axios'
import { BASE_URL } from 'src/config'
import { goHome } from 'src/config/navigation'
import setAuthToken from 'src/helpers/setAuthToken'
export const login = async ({ dispatch, setErrors, setSubmitting, values }) => {
try {
const { data } = await axios.post(`${BASE_URL}/user/login`, values)
setAuthToken(data.token)
await dispatch({ type: 'SAVE_USER', payload: data })
await AsyncStorage.setItem('token', data.token)
setSubmitting(false)
goHome(data.token)
} catch (err) {
setSubmitting(false)
setErrors({ email: err.response.data.error })
}
}
export const verifyToken = async (dispatch, setLoading) => {
try {
const token = await AsyncStorage.getItem('token')
if (token) {
const { data } = await axios({
method: 'GET',
url: `${BASE_URL}/user/verify`,
headers: {
'Content-Type': 'application/json',
'x-auth': token,
},
})
setAuthToken(data.token)
await dispatch({ type: 'SAVE_USER', payload: data })
AsyncStorage.setItem('token', data.token)
}
} catch (err) {
setError(err)
} finally {
setLoading(false)
}
}
```
We will add three more actions later on as we move on.
The `setAuthToken` function simply adds a `x-auth` header to all upcoming requests
It lives under `src/helpers/setAuthToken`
```js
import axios from 'axios'
export default (token) => {
if (token) {
axios.defaults.headers.common['x-auth'] = token
} else {
delete axios.defaults.headers.common['x-auth']
}
}
```
Register is following the same logic, you'll be able to find the source code on the repositories as everything will be open sourced, so let's move on to the important screen which is the **Home** screen
It lives under `src/screens/Home`
```jsx
import React from 'react'
import Layout from 'src/components/Layout'
import Home from 'src/modules/dashboard/Home'
export default ({ token }) => (
)
```
the actual logic exists within `src/module/dashboard/Home`
let's start by creating an invoke from the native side and add the webview of our React app
```jsx
import React, { Component } from 'react'
import { SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'
import createInvoke from 'react-native-webview-invoke/native'
import { REACT_APP } from 'src/config/'
class Home extends Component {
webview
invoke = createInvoke(() => this.webview)
render() {
return (
(this.webview = webview)}
onMessage={this.invoke.listener}
source={{
uri: `${REACT_APP}`,
}}
bounces={false}
/>
)
}
}
Home.options = {
topBar: {
title: {
text: 'Home',
},
visible: false,
},
}
export default Home
```
We want to pass one function and value from React Native to the React web app:
1. Passing the token as url param, not sure if it's a good approach to follow, feel free to enlighten me if you know any better approach to achieve this.
2. A function that will log the user out from the React Native app, remove the token from the device storage and redirect them back to the `Login` screen, triggered/invoked from the React web app.
So let's add that to the **Home** module
```jsx
import React, { Component } from 'react'
import AsyncStorage from '@react-native-community/async-storage'
import { Alert, SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'
import createInvoke from 'react-native-webview-invoke/native'
import { REACT_APP } from 'src/config/'
import { goToAuth } from 'src/config/navigation'
class Home extends Component {
webview
invoke = createInvoke(() => this.webview)
componentDidMount() {
this.invoke.define('onLogout', this.onLogout)
}
onLogout = async () => {
try {
AsyncStorage.clear()
goToAuth()
} catch (err) {
Alert.alert('Something went wrong')
}
}
render() {
const { token } = this.props
return (
(this.webview = webview)}
onMessage={this.invoke.listener}
source={{
uri: `${REACT_APP}/?token=${token}`,
}}
bounces={false}
/>
)
}
}
export default Home
```
Let's now see how can we handle that from the React web app.
> I'll skip right into the part where we handle the passed function to invoke it, the source code will be able available for you.
First of all, let's import `invoke` from `react-native-webview-invoke/browser`
```js
import invoke from 'react-native-webview-invoke/browser'
```
All we have to do to access the function and invoke it is binding, checking if it exists and invoking it.
```js
const onLogout = invoke.bind('onLogout')
if (onLogout) {
onLogout().then(() => {})
}
```
That's basically the guide through to implement authentication within a native app that has a webview section.
If you managed to make it until the end, make sure to subscribe to the news letter down below in order to get the latest articles delivered right to your inbox!
- React Native App:
- React web app:
- REST API:
---
_Originally published at https://smakosh.com/blog/webview-native-authentication_
---
---
title: Getting my third visa rejection
date: 2019-10-22T02:50:01.889Z
edited: 2020-10-22T02:50:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/visa-rejections-stories
reading_time: 7 min (1468 words)
Tags: travel, career
---
# Getting my third visa rejection
My application visa into the Schengen territory has just got denied for the third time in a row, before I mention the reasons and their stupid claims on why it got denied, let me walk you through all the stories behind every each visa application that got denied.
I, like any other Moroccan citizen, am thinking of relocating to a better sustainable and well developed country, but while I'm still in Morocco, I've been trying my best solving my issues in my own ways, like teaching myself how to code to successfully land a job as a front-end engineer and later on as a full-stack engineer instead of making excuses and blaming the educational system.
Or instead of making excuses of the low salary software engineers get in Morocco and blaming the employers, I was working remotely for US based startups to cover my expenses as we're not really getting paid well here in Morocco.
And due to the low quality of our educational system, I spent a year and half teaching myself many skill sets like Graphic, UI/UX Design, web and mobile development and much more... while attending boring classes to get an associate degree as it is still required especially when moving abroad.
I used to sleep 4 hours a day in order to:
- Attend useless classes from 8am-12pm and from 2pm-6pm everyday except the weekends.
- Learn and practice by building my side projects or working as a free lancer, from 7pm until 4am.
- I was always stuck to my laptop all the time including summer vacations.
I used to sleep during classes when I get really tired, or skip them to over study what I was interested into at some cafe or library, I was using the school's computer which wasn't that great but it did the job, until I pitched to my dad the idea of investing in me by purchasing me a solid laptop and in return, I promised myself to give it back once I graduate. In order to achieve that, I used to participate in Hackathons - competitions that award the 3 most good ideas with a working prototype -, I've won 2 or 3 out of 4 Hackathons I took part in.
At the end of the year (2017), I [declined a job offer](/getting-my-first-job-offer), [won first prize at a hackathon](/first-time-first-prize) and one of my teachers informed me of my graduation, later that day, I got an email from Obytes CEO, offering me a job as a remote front-end developer which I ended up accepting and I wrote about it [here](/one-year-working-remotely), this all happened during August, 2017.
> Yup, I did give back the laptop.
I was then hired as an independent contractor which means that I could attend university and study for my bachelor degree in software engineering, after attending few classes, I decided to drop out for many reasons but here are few of them:
- The program was useless for both engineering and academic research
- I was more interested in JavaScript on the engineering side and ML on the academical side
During 2018, I got a job offer from a German company based in Frankfurt that wanted to hire me as a front-end developer, This was my first time applying for a Schengen visa, - [I did travel abroad before, I traveled to Istanbul to attend a conference]('/istanbul-trip') - I had to sign the contract, legalize it and send it back to Germany which was really absurd, I traveled from my small city to Rabat in order to submit all the necessary documents, I headed back home and I got a letter after a whole "month" that states that my visa application has been denied by the employment department in Germany, that my degree wasn't recognized.
> Which is now recognized...
Few months later, I got a new job as a full stack engineer at Maltem Africa, it was a long term contract with health insurance and retirement plan covered by the company, the salary was higher but it required me to work on site unlike my secondary job which was fully remote, it wasn't easy but I could manage to work for both until a tech lead joined the new company and he was that type of people who claims to know a specific tool but has no idea really about it, he wasn't good with any of us and had to rant me out as he couldn't figure out how to use the tech stack we used to develop one of the company's products. He even insulted me via emails which I still have until this day. So I decided to abandon my job as the CEO and few other employees were able to read the emails but the CEO didn't take any actions.
I shouldn't have quit, but I rushed out and decided to quit, the CEO, CTO and few other members tried to reach out to make me re-consider but I refused to, few days later, the guy was fired.
During this period, there was a Hackathon in Finland, organized by [Junction](https://www.hackjunction.com/), I signed up and got accepted, I somehow knew that the visa will be denied once again but I applied anyway and got the same negative response, ended up wasting my time and money once again.
Anyhow, I decided to switch my contract with Obytes from an independent contractor to CDI which basically means that the company will offer a health insurance and retirement plan and that I'll be considered officially as a worker, but the salary was really low and one of the board members who was Moroccan was an ageist and was discriminating me all the time for being so young and having such skill sets, when ever I used to ask for a pay raise, he'll make fun of me or offer only a 10% raise. I was training a new employee who was getting paid more than me due to his age according to that board member.
During 2019, I decided to try out [the nomadic lifestyle and traveled to Southeast Asia for 2.5 months](/15-days-working-from-bali) while working, I wrote about my experience on my recent articles, it was an amazing experience which I highly recommend to try out before going all in into this lifestyle, as it turns out to be really exhausting and unhealthy for me.
Once I got back from my trip, few months have passed and I decided to resign my current position and join Maltem Africa once again as I had a discussion with the CEO, we managed to forget the past to start a fresh new beginning and I apologized for my rush of quitting, he also apologized and explained to me why he couldn't fire the guy right at that moment.
I could have resigned right from the end of September but there was another Junction Hackathon in Budapest, I applied and got approved, I was so happy to represent my home country Morocco, I flew from my small city to Casablanca to move my stuff as I'll be living there from now on, prepared all the necessary documents and applied for the Schengen visa for the third time.
They required that I book my rebound flight and hotel stay, so I did, after few weeeks, I tried to reach out by email as my flight was scheduled at 24th October at 7am, they weren't really good responding in English on emails and they requested me to come pick up my passport during holidays, I wasn't sure if that was legit and I went a day before, turns out that Monday was a day off which wasn't really mentioned anywhere on their building or website, but that was fine even though I got a fever that day as the weather wasn't really well, but I made sure that they will be there the day after.
On the next day, my fever hasn't gone any better but I had to go out to pick up my passport, it was heavily raining and I got all wet waiting for them to open their doors, once I got my passport to my surprise, my visa application has been rejected for the third time in a row.
They neglected my words and wanted me to appeal which by the way requires at least 8 days and an additional fee to pay, I reached out to the organizers and the CEO tried to get in touch with them by email as they don't have any phone number unfortunately, the organizers apologized for such embarrassment as such borders still exist in the 21st century.
Even though all of this has occurred and made me sad, I'll keep going and moving forward, when there's a will, there's always a way.
## 2020 update
I managed to get a B1 USA visa that expires after 10 years, meaning it will expire in 2030.
Also turns out you don't really need to migrate to a well developed country to leverage your knowledge and business.
---
_Originally published at https://smakosh.com/blog/visa-rejections-stories_
---
---
title: 15 Days working from Bali
date: 2019-07-16T07:50:01.889Z
edited: 2019-07-16T07:50:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/15-days-working-from-bali
reading_time: 3 min (766 words)
Tags: travel, freelancing, web-development
---
# 15 Days working from Bali
I'm writing this article in my room back home, thankfully I arrived safely and I had to take some rest by calling on my grandma in a not so far village from my small city.
Before Bali, [last time I was in Penang where I shared my monthly experience there](/penang-was-way-better) and I made sure not to forget anything important to help you out.
## Planing
I didn't plan to visit Bali after Penang, but I couldn't resist since it was nearby and I wanted to go there since I've seen [this prediction from Arthur C Clarke in 1964](https://youtu.be/wC3E2qTCIY8) about being able to work remotely from Bali, so I decided to spend 15 days there.
## Flight (rebound)
I booked my flight from Penang to Bali via Singapore, then the return flight from Bali to Kuala Lumpur via Singapore again, you might have guessed the airlines correctly, if not it was Singapore Airlines, one of the best airlines with a large and amazing airport.
Since I got earlier to the airport, they offered me if I want to take the next flight instead of waiting for my flight, I agreed and I got extra 4 hours to spend in a productive way at Singapore airport.
> Te total cost of the flight was about ~ $440
## Housing
As you might know, Bali has 3 most known areas, Denpasar, Ubud & Canggu, almost no tourist stays in Denpasar as it's nearby the airport and it's full of companies and people who work there, most go to stay in Canggu, I preferred a more natural environment and that's why I stayed in Ubud, I booked a [traditional wood house](https://www.airbnb.com/rooms/18625567) with a swimming pool nearby, it cost me $192.92 for 15 days. The other reason of my decision is a nearby co-working space called Dojo Bali which wasn't that far from my stay.
## Transportation
If you don't have a suitcase, don't bother riding a taxi or booking a grab car when you get out from the airport, the cheapest way is to book a grab bike or Go-Jeck bike to get you out of Denpasar, in my case, I was carrying my suitcase with me, so I had no other choice than booking a taxi as it was too late and couldn't wait for the Grab driver to get to the airport.
the day after, I booked a bike for $20/week at [Bali Transport Motorbike Rental](https://www.google.com/maps/place/Bali+Transport+Motorbike+Rental/@-8.5298499,115.2618019,17z/data=!3m1!4b1!4m11!1m5!8m4!1e1!2s105998720729319403773!3m1!1e1!3m4!1s0x2dd23d9cc03c030f:0xfa11da049cd107cb!8m2!3d-8.5298552!4d115.2639906).
It was the first time I drive such a scooter, it was automatic and it was easy to learn how to drive it, you do require an international driving license to drive it which I didn't have, but because I look like an Indonesian, I don't speed up and I used to wear my helmet all the time, the police didn't suspect me.
Be careful driving it during early mornings, make sure the breaks are working and recognize/memorize where each break is, the reason I'm telling you this is because I did fail during an early morning while going back home, the floor was wet and I forgot that the left handle was controlling the front brakes, so I slipped with my scooter, the injuries weren't that dangerous and one Balinese guy checked if I was doing fine and he kindly guided me to a nearby hospital to fix my injuries.
That didn't stop me from going around riding my scooter at all, but that taught me to be careful.
## Work
For work, I used to go to Dojo Bali co-working space, I prefer working from home, cafes and co-working spaces because I'm surrounded by strangers and they never bother me while working which I really like.
> I paid $120 for 120 hours
## Weather
The weather in Bali depends on the season, I'm not sure how is it on the other seasons but during my stay, it was hot but really not as hot as in Malaysia. The same applies to the rain, it wasn't raining all the time like in Kuala Lumpur.
## Tourism
### Natural spots
I visited all these places
- Luwak Cafe
- Bali Swing
- Batu Bolong Beach
- Monkey Forest
- KelingKing, Broken and Crystal Beaches
- Rice Field
You can check out the pictures on my Unsplash account, I made a collection just for Bali:
KelingKing beach is located in Nusa Penida, I will write a separate article about that experience and how can you get there as well if you're in Bali or planing to visit it. So make sure to subscribe to the news letter to be amongst the first ones to get the article delivered to you as soon as it's published.
---
_Originally published at https://smakosh.com/blog/15-days-working-from-bali_
---
---
title: Handling SEO in React apps
date: 2019-06-13T07:00:01.889Z
edited: 2019-06-13T07:00:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/seo-in-react-apps
reading_time: 2 min (425 words)
Tags: javascript, web-development
---
# Handling SEO in React apps
I have landed successfully in Bali, rented a scooter and been enjoying my ride from my place to Dojo Bali where I'm currently writing this article.
## SEO definition
Search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic, increasing visibility of a website or a web page to users of a web search engine.
> Taken from Wikipedia
## The SPA issues with SEO myth
All React apps built using CRA (create-react-app) or Gatsby to serve dynamic content are single page apps, meaning that there is one index.html file that renders the content of your app, which means that all your meta tags within your components won't be crawled for indexing on search engines, or it used to be! As of May 2019, [Google announced](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html) that its crawler can now crawl JavaScript just like the Twitter/Facebook/Slack/Telegram crawlers, so when ever a non technical person mentions this SPA SEO myth, make sure to enlighten them.
## What we used to do before crawlers turned out to be able to crawl JavaScript
Most React developers used Next Js as it offers server side rendering, meaning that the pages are generated on demand when the user visits a certain url or use a technique called Pre-rendering which is basically server side rendering during build time, Gatsby still uses this approach to generate the pages for your static content but doesn't offer that feature for dynamic content unlike some services such as Netlify that offers pre-rendering for your dynamic content.
## SEO component
Inspired from [this GitHub repository](https://github.com/joshbuchea/HEAD) which contains all you need to include in your header tag, I made this SEO component that I re-use almost on all my Gatsby/React apps to handle SEO
> I added few comments within the code explaining each part
```jsx
import React from 'react'
import Helmet from 'react-helmet'
// This is the thumbnail that appears when someone shares your website
import Thumbnail from 'assets/me.jpg'
import {
url,
defaultTitle,
defaultDescription,
social,
socialLinks,
address,
contact,
legalName,
foundingDate,
logo,
author,
} from 'data/config'
export const SEO = ({
title,
type,
description,
articleBody,
datePublished,
dateModified,
cover,
location = '',
readTime,
}) => {
```
I had to separate the snippets for a11y concerns
```js
// This is Structured data that is recommended to have according to Google
// You can read more about it on Google's own documentation about structured data
// The first string is for the Article schema and the second one for the organization schema
const structuredDataArticle = `{
"@context": "http://schema.org",
"@type": "${type}",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "${description}",
"image": "${cover ? `https://smakosh.com${cover}` : `https://smakosh.com${Thumbnail}`}",
"datePublished": "${datePublished}",
"dateModified": "${dateModified}",
"author": {
"@type": "Person",
"name": "${author}"
},
"articleBody": "${articleBody}",
"publisher": {
"@type": "Organization",
"name": "${author}",
"logo": {
"@type": "ImageObject",
"url": "${logo}"
}
},
"description": "${description}",
"url": "${url}${location}/?ref=smakosh.com"
}`
```
```js
const structuredDataOrganization = `{
"@context": "http://schema.org",
"@type": "${type}",
"legalName": "${legalName}",
"url": "${url}",
"logo": "${logo}",
"foundingDate": "${foundingDate}",
"founders": [{
"@type": "Person",
"name": "${legalName}"
}],
"contactPoint": [{
"@type": "ContactPoint",
"email": "${contact.email}",
"telephone": "${contact.phone}",
"contactType": "customer service"
}],
"address": {
"@type": "PostalAddress",
"addressLocality": "${address.city}",
"addressRegion": "${address.region}",
"addressCountry": "${address.country}",
"postalCode": "${address.zipCode}"
},
"sameAs": [
"${socialLinks.twitter}",
"${socialLinks.google}",
"${socialLinks.youtube}",
"${socialLinks.linkedin}",
"${socialLinks.instagram}",
"${socialLinks.github}"
]
}`
```
```jsx
return (
// Notice I'm using react-helmet to inject these elements within the header tag
{/* The description that appears under the title of your website appears on search engines results */}
{/* The thumbnail of your website */}
{/* Opengraph meta tags for Facebook & LinkedIn */}
{/* You can get this id when you create an app id on Facebook of your Facebook page */}
{/* These tags work for Twitter & Slack, notice I've included more custom tags like reading time etc... */}
{type === 'NewsArticle' && (
)}
{type === 'NewsArticle' && (
)}
{type === 'NewsArticle' && (
)}
{type === 'NewsArticle' && (
)}
{/* Structured data */}
{/* Not sure if this is still relevant as Google shut down their Google+ paltform */}
{/* The title of your current page */}
{title ? `Smakosh | ${title}` : defaultTitle}
{/* Default language and direction */}
)
}
```
And I include it on each component that is meant to act like a page like so
```jsx
import React from 'react'
import SEO from './SEO'
export default () => (
Home page
)
```
> You can get this component from the code source of this blog.
## Tips & tools to rank your website higher on search results
If your website is a blog like this website, it's highly recommend to have a RSS feed like [this one](https://smakosh.com/rss.xml) as some apps and extension do crawl the feed and will bring you more visitors that will boost your ranking on search results.
Having a sitemap helps as well and you have to submit it to your [Google Search console](https://search.google.com).
> You can test your structured data [here](https://search.google.com/structured-data/testing-tool)
Feel free to drop your questions down in the comments section and I'll do my best to answer them all.
---
_Originally published at https://smakosh.com/blog/seo-in-react-apps_
---
---
title: Penang was way better
date: 2019-06-06T08:00:01.889Z
edited: 2019-06-06T08:00:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/penang-was-way-better
reading_time: 5 min (1027 words)
Tags: freelancing, travel
---
# Penang was way better
As promised before when I shared [my experience spending one month in KL as a remote developer](/one-month-in-kuala-lumpur-as-a-remote-developer), It's time to share with you how was Penang compared to KL.
## Planning
Some of you asked me on [Instagram](https://instagram.com/smakosh19) about why did I choose to visit this Island, well the truth is that I didn't actually, but a friend of mine suggested it as it was the most known city in Malaysia for digital nomads. Meaning that I came here knowing nothing about this place and wanted to know as much as I can about it once I get there which is why I didn't search anything about it while being in KL.
## Flight (one way)
I booked 2 weeks earlier one way ticket from KL to Penang Island with Air Asia which I recommend as they are the best airlines here in Asia, the ticket cost me about \$ 17.85 with extra luggage that didn't get lost.
## Housing
I Booked 2 weeks earlier as well, and I used [AirBnb](https://www.airbnb.com/c/ismailg745?currency=USD) once again, the rent cost me approximately ~ \$ 420 for the entire big apartment which has:
- 2 rooms, one has a 2 persons bed
- 2 bathrooms with hot water
- Large salon with a large couch and a TV
- A balcony and a large kitchen
- [High Speed Wi-Fi](https://www.speedtest.net/result/a/4921524385)
Here's a link if you want to have a look at the listing: [Here](https://www.airbnb.com/rooms/21373724)
> I booked it as 1 adult.
## Transportation
I didn't know that there are free buses with free Wi-Fi here in Malaysia until I rode one in Penang which actually used to take me to Queensbay mall where I could make groceries, the good news were that Grab finally worked after I changed my SIM card twice from Umobile to Celcom and eventually Maxis which I highly recommend.
## Work
The place I booked didn't have a desk nor any comfortable chair, so I used to work from my bed or at the kitchen, often times I visited [@Cat penang](https://acatpenang.com/?ref=smakosh.com) co-working space which was the affordable one and the nearest, there was a React/Ruby event there and I requested to give a talk about building dynamic/static apps using Gatsby which they accepted and loved.
## Tourism
Turns out, Penang is the most touristic Island here in Malaysia due to many reasons but the most known one was food, it had so many different types of food which I'm personally not interested in as I was learning to cook my own food. Still you won't find further away places like beaches to be full of tourists.
## Weather
The weather is much better than it used to be in KL, it's not polluted, less hotter and wasn't raining all the time.
### Modern spots
I visited two modern spots:
- Escape theme park:
The most known water park in Malaysia, that has more activities such as wall climbing, adventuring, hill riding etc.., I had some difficulties making the decision to visit it as I didn't have any sleep at all the night before, but after checking it online, I didn't want to miss the chance to have some fun, so I purchased the ticket online which gives you a pass code that you can use to get in, you can topup using their ATM look alike machines if you would like to buy some food or drinks inside the park as bringing your own stuff is not permitted.
> They do refund your buses tickets if you came by the bus, in my case I booked a Grab drive which I don't recommend except if you want to save time.
- 3D Museum:
The best 3D Museum you could find in Penang, it costs X (insert price) for the ticket.
I didn't know that there were workers inside who would gladly take pictures of you with the art, so I suggested the idea of going in together with a total stranger who turned out to be a solo traveler as well named Natalia, she was friendly and laughed at my suggestion but gladly accepted, it was a nice evening as it's always good to know strangers and their mission in life.
- Penang Hill:
if you like places full of tourists and pricey, go ahead and pay a visit to the place, I don't recommend it at all.
### Natural spots
#### Beaches
The first thing you might want to visit is more likely: the beaches, Penang has some amazing beaches such as Batu Ferringhi and Monkey beach where you can swim or just sit at the beach and enjoy the sunset.
I suggest taking the bus to get to Batu Ferringhi which is the cheapest option unlike I did which was booking an expensive Grab ride.
As for Monkey Beach, I highly recommend hiking inside the forest directly to it or to Kerachut Beach in case the bridge was blocked then take the fury (small boat) to Monkey beach which will cost you about \$ 3.5, make to negotiate if they suggest touristic prices, you will have to pay the same price to get back to National park.
### Traditional spots
- Thean hou Temple (not free):
This is a Chinese temple with an old museum that contains the history of Penang Island, I would recommend it if you're curious like me about the history of this Island which was habited by Chinese at first between the 18th and 20th centuries, the Island got colonized as well by the British army and was founded by their king Francis Light who named it George Town but eventually it got renamed to Penang.
- Kek Lek Si:
The biggest Buddhist temple in Penang, I tried to visit it but unfortunately it was closed already, so make sure to get there earlier before 6pm.
To conclude, Penang is a must visit place for remote developers like me, the cost of living is cheaper than KL, you get fast Wi-Fi & mobile data for an affordable price, you could ride the free or \$ 0.4 Bus to get anywhere you want on the Island, you can order food with affordable prices and the rent is really cheap compared to the West. Shout out to the strangers I met during my month there, it was nice meeting you all!
---
_Originally published at https://smakosh.com/blog/penang-was-way-better_
---
---
title: One month in Kuala Lumpur as a remote developer
date: 2019-04-23T08:00:01.889Z
edited: 2019-05-02T08:00:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/one-month-in-kuala-lumpur-as-a-remote-developer
reading_time: 5 min (1161 words)
Tags: freelancing, travel
---
# One month in Kuala Lumpur as a remote developer
I won’t consider myself a digital nomad yet, but I admit that I was a bit influenced to try out that lifestyle, but as I don’t like traveling a lot as I mentioned in my [previous article](/istanbul-trip), I wasn’t really engaged into the idea of continuously traveling & working remotely from anywhere as I’m not sure if I would be able to focus in that way.
Personally, I prefer to settle down in one place for a long period of time to focus, plan, acquire & practice new skills before I move on to another place.
Therefore, I decided to spend the longest period of time in a country in Southeast Asia that doesn’t require any visa as I seriously hate bureaucracy and I'm too lazy to prepare any necessary documents. After searching on the web, I chose to travel to Malaysia in order to spend 3 months there (2 months and 17 days to be precise), I knew that Kuala Lumpur’s weather wasn’t healthy, so I decided to spend the first month there, then move on to Penang Island for the second month then finally get back to KL to eventually move back to my home country.
I actually had other ideas, like going to Bali to spend half of the second month there, but due to Bali’s weather, I decided to spend the whole second month in Penang.
So as a remote developer, I’d like to share my experience of spending a month here in KL with you covering most of the parts that you might worry about before coming here.
> There will be an upcoming article about Penang Island as well, make sure to subscribe to the news letter in order to get my latest articles delivered right to your inbox!
## Planning
Before you start packing your stuff & booking your flight, you must plan everything way earlier in order to avoid touristic seasons, so don't rush things out and don't forget to check the weather as well, in my case I had planned to get here since January, I targeted the season in between April & June as after June, everyone is in holidays and the area becomes so touristic and the cost of living raises way higher than during the normal seasons.
## Flight (rebound)
I made a mistake booking my flight late, I should have booked a couple of months earlier to get the price down in between $ 500 - $ 700 from Casablanca, Morocco to Kuala Lumpur, Malaysia instead of the actual price I paid which was in between $ 800 - $ 900 with Oman Air. I had to change the plane in Muscat, Oman. Same when I'll be returning back home.
## Housing
The second thing you will look up to is housing, feel free to use what ever you think is better for you, in my case I used [AirBnb](https://www.airbnb.com/c/ismailg745?currency=USD) to book the first month in Shah Alam which is far from KL's center as I wanted to focus on my work & personal side projects a lot more.
Because I rented away from KL's center, the rent cost me approximately ~ \$ 330 for the entire apartment.
You can have a look at the place by visiting [this link](https://www.airbnb.com/rooms/16269315?guests=1&adults=1)
## Cash
Malaysia is known as a cash only country so you should consider bringing some cash with you along the way, but you can still pay few services like commuting, food, mobile data top up and few more with your credit card.
## Transportation
Now that you've planned everything, booked your flight and exchanged your money, the first thing that comes in mind is transportation and obviously the first thing you will find online is the numerous warnings to avoid taxis what so ever, as they are expensive and they offer touristic prices & I do confirm that is true.
You might have read that you can use Grab as it is the popular ride sharing mobile app in Southeast Asia, but if you ever ran into the same issues I ran into, which were that Grab wasn't working properly and it couldn't verify my selfie nor accept my credit card and didn't let me book a ride with a Malaysian phone number.
In that case, there are alternatives, like a competitor app called myCar which simply offers the same service for a lower price.
As for other kind of transportation, KL has 5 different trains/subways that operate in different areas in the city, they are the best to commute for long distances.
## Work
Maybe the place you booked doesn't have a nice chair, fast Wi-Fi or a comfortable desk, no worries, KL has many awesome co-working spaces that you can work at, in my case I worked few times from [Worq](https://worq.space/coworking-space/subang/) co-working space located in UOA Business park near Subang Jaya KTM station, it's not cheap but it's worth it if you love working within a group of strangers. Starbucks are everywhere you go as well, fully equipped with outlets but few only have fast Wi-Fi, fortunately for me, my host offered me a Hotspot pocket Wi-Fi that I can carry with me anywhere I go.
## Tourism
During the weekends, I used to visit some touristic spots and maybe you'd love to check them out as well, I made sure to take some shots of all the spots I visited and everything is available on my [Instagram account](https://www.instagram.com/smakosh19/) and you can download them on my [Unsplash account](https://unsplash.com/@smakosh) for free.
I personally prefer natural & traditional spots but I made sure to cover modern ones as well for the sake of my family, friends and followers on social media who might prefer to visit them in the future.
## Weather
KL feels pretty hot than the actual degree you might see online or on weather channels, It's more hot than my home city where it's sometimes up to 40°C. Air conditioners are everywhere which makes the city pretty noisy, if you're that type who likes peaceful & calm places, KL is the wrong place to go to.
## Internet
Internet is fine but not sure if you will be able to live stream or upload smoothly, but you can use 4G which I end up doing as well, you can get a local SIM card right at the airport, then top up online or from any nearby store.
### Modern spots
- Petronas Towers (Make sure to check online if they are not in maintenance mode)
- Menara KL Tower (costs about \$ 24 to get to the top level and get into Skybox)
- Upside down house (just before you get to Menara KL Tower, forgot how much it costs)
### Natural & Traditional spots
- Batu caves (Free)
- Thean hou temple (Free)
- Taman Tasik Shah Alam Park
And that summarizes everything I wanted to share with you, I didn't mention food and many other things to make the article as short as possible and I'm sure there are other online articles and videos that dig deeper in the other things you might want to know about.
---
_Originally published at https://smakosh.com/blog/one-month-in-kuala-lumpur-as-a-remote-developer_
---
---
title: Solving hashtags problems
date: 2019-04-14T01:00:01.889Z
edited: 2019-04-23T01:00:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/solving-hashtags-problems
reading_time: 3 min (559 words)
Tags: javascript, mobile-development
---
# Solving hashtags problems
Hashtag ~hashtags is the plural noun~ is any phrase or word that has a '#' sign at the beginning, it is mostly used on social media platforms to target a specific topic and to gather users interested in that same topic.
As we're targeting "hashtags" as a topic, you could use the "#hashtags" hashtag as the topic of this article.
hashtags themselves have no issues so far but the way few users use them, whether they are overusing or faking them, at the end all users will get annoyed, like when you're scrolling through posts related to "tech" for example and you end up finding lot of unrelated posts, doesn't that annoy you?
The same goes when you're trying to read someone's post's description but it's full of hashtags they overused, that's why it's better to have some line breaks or put them as the first comment.
the overusing of hashtags issue has been solved by few platforms, by warning the user and eventually banning them, unlike the issue of using unrelated hashtags, it hasn't been solved yet, that's why I built [Ai Hashtags](https://ai-hashtags.com/?ref=smakosh.com) in order to solve it!
Ai Hashtags generates hashtags using Artificial intelligence, and here's how it works:
1. Upload your picture or paste the link of your Instagram post
> you can share your post directly from Instagram and works with any other platform.
2. Hit Generate hashtags button
3. Select specific hashtags to copy or copy them all
4. Paste them into your post
You can create a new group for your hashtags to reuse them in the future, each group can be edited or deleted.
The app supports English, Spanish, simplified Chinese & Arabic languages (We will add more languages soon), it is available on the [Play Store](https://play.google.com/store/apps/details?id=com.aihashtags) and [App Store](https://itunes.apple.com/us/app/ai-hashtags/id1460674572?mt=8).
The Android app is free but comes with user friendly ads while the iOS app is ad free but costs \$0.99.
This was a fun project to work on and the reason I built it goes way back when I & my team [won the second prize of the online JAMStack FreeCodeCamp Hackathon](https://medium.freecodecamp.org/winners-from-the-2018-freecodecamp-jamstack-hackathon-at-github-2a39bd1db878), we used [ClarifAi](https://clarifai.com) API to automatically generate hashtags from the pictures of the products you're trying to sell, so that you could easily share it on Social media and gather actual users who are interested in that specific product. ClarifAi let me use their community API Key that offers generously the first 5k requests for free, then I'll have to use the essential plan that costs \$1.20 / 1k operations which is a reasonable price in my opinion.
## Tools
- I used Adobe Illustrator to design the mobile icon
- Adobe XD to design the wireframes & user interfaces
- Kanban lean method to better handle project management using Trello
- Developed with React Native: (0.60.5)
- Navigation: react-navigation (since the app is not that large otherwise I would have used react-native-navigation)
- Styling: styled-components
- Deployment: Fastlane
- Env variables: react-native-config
- State management: ~~redux~~ useReducer and useContext!
- HOCs: ~~Recompose~~ no more HOCs
- HTTP Requests: axios
- Forms: formik
- Form validation: yup
- Ads: react-native-admob
- Toast: react-native-simple-toast
- Upload: react-native-photo-upload
- Swiper: react-native-swiper
- Middleware: ~~redux-thunk~~ not anymore
- Prettier & Eslint for linting & formatting my code
- VSCode as code editor
- Image recognition: clarifai
- i18n: react-intl
- Analytics: react-native-mixpanel
Feel free to download Ai Hashtags and leave your feedback on the app or down in the comments: [Download Ai Hashtags](https://ai-hashtags.com/?ref=smakosh.com)
---
_Originally published at https://smakosh.com/blog/solving-hashtags-problems_
---
---
title: How To add dark mode easily with a custom React hook
date: 2019-03-22T05:35:01.889Z
edited: 2024-08-03T01:59:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/how-to-add-dark-mode-easily-with-a-custom-react-hook
reading_time: 1 min (179 words)
Tags: javascript, css, web-development
---
# How To add dark mode easily with a custom React hook
> 2024's Update: just use [Next themes](https://github.com/pacocoursey/next-themes)
In this quick article, I will be implementing dark mode to a quick React app with a custom React hook,
Before we start, let's see how is this supposed to work in three easy steps:
1. We will check first if the chosen theme isn't stored on localStorage
2. If it exists, we will simply set it as the default theme
3. Otherwise, we will have to use the light theme as the default one
So let's get started!
Let's start by setting up the custom hook first, we will be using `useEffect` & `useState` imported from React, we will check localStorage when the component mounts for the first time, then we'll follow the second step!
```jsx
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
useEffect(() => {
const localTheme = window.localStorage.getItem('components/theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
}
```
Let's setup a function now that toggles in between themes and stores the selected theme in localStorage
```jsx
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
if (theme === 'light') {
window.localStorage.setItem('theme', 'dark')
setTheme('dark')
} else {
window.localStorage.setItem('theme', 'light')
setTheme('light')
}
}
useEffect(() => {
const localTheme = localStorage.getItem('components/theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
}
```
All good now, we only need to return the theme value along with the function so we can access it when we import the custom hook!
```jsx
import { useEffect, useState } from 'react'
export default () => {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
if (theme === 'light') {
window.localStorage.setItem('theme', 'dark')
setTheme('dark')
} else {
window.localStorage.setItem('theme', 'light')
setTheme('light')
}
}
useEffect(() => {
const localTheme = window.localStorage.getItem('components/theme')
if (localTheme) {
setTheme(localTheme)
}
}, [])
return [theme, toggleTheme]
}
```
Finally, let's see how we can use it when we import it
```jsx
import React from 'react'
import useDarkMode from './useDarkMode'
export default () => {
const [theme, toggleTheme] = useDarkMode()
return (
)
}
```
You can find the full example [here](https://codesandbox.io/s/mjm4zy7pm8)
---
_Originally published at https://smakosh.com/blog/how-to-add-dark-mode-easily-with-a-custom-react-hook_
---
---
title: 2018 year review
date: 2019-01-13T10:38:01.889Z
edited: 2019-01-13T10:38:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/2018-year-review
reading_time: 2 min (516 words)
Tags: career, web-development
---
# 2018 year review
2018 was for me the most productive year so far, so I've decided to write an article at the beginning of each new year highlighting few achievements to improve over the upcoming years.
So let's first get started about the stuff I learned during 2018:
- Dev:
- CSS core concepts like different methods to setup a grid system...
- JavaScript core concepts like Hoisting, static typing, execution context...
- React, React-router-dom, Redux, Formik, Yup, Recompose, Thunk
- React Native, React Navigation
- Jekyll, Pelican, Gatsby
- SSR & SR/Pre-rendering
- Different design patterns, architectures & the BEM methodology...
- CSS in JS specially libraries like CSS modules & Styled-components
- Express, Mongoose
- Firebase, Netlify, Heroku
- SEO techniques & how web crawlers work
- ESlint & Prettier
- Life:
- We make decisions based on many previous variables
- I'm the result of the env I interact the most with
- Real social life matters more than the online one
- A human being can continue learning unlike studying
- Sharing what I know and seeking more answers to my questions makes me more curious and makes life fun
- my LCE life framework is working good so far which stands for "Learn, Create & Earn"
- Materialism is a huge issue we need to address ASAP
- Keeping myself always busy makes life fun as well
- Skipping sport activities is really bad for my health
- Lack of sleep has side effects
- Every decision I take at every moment will have an impact on someone's else decisions
- Design:
- Lazy loading images improves the UX
- ARIA, a11y & i18n
- loading spinners & empty state skeleton
- minimalist UIs
- forms UX
Let's get into things I built & delivered as "creating" is the second step of my LCE life framework:
- migrated & open sourced this blog from a php/mysql app to a Gatsby site
- Contributed in building [Barmej](https://barmej.com) with my co-workers at [Obytes](https://obytes.com)
- [Cleanify](https://smakosh.com/from-failure-to-launch-hajj-hackathon):
- A platform for the government to keep track of trashcans to save time & fuel while collecting the trash from the filled ones.
- React app: React, Redux, Sass
- Node API: Express, Mongoose, Passport...
- Built in 3 days
- [Ai Hashtags](https://play.google.com/store/apps/details?id=com.aihashtags)
- Get precise hashtags extracted from your pictures
- Built with: Adobe XD, React Native, ClarifAi API
- Built in less than 8 hours
- [Beaf](http://beafapp.com)
- The community platform for making decisions
- Landing page: Gatsby, Styled-components...
- React app: React, Redux, Styled-components...
- Node API: Express, Mongoose...
- First iteration was [livestreamed](https://www.youtube.com/watch?v=5tw8Gn16fJM&list=PLT9g4Q9oGxhBiflqRWQF6no8DYj1lQoKd) on Twitch and built in less than 24 hours
- Contributed to Gatsby by building a [source plugin](https://github.com/smakosh/gatsby-source-dribbble) & few starters that are available on my [GitHub profile](https://github.com/smakosh)
Last but not least, I've earned bunch of good stuff this year:
- By contributing to Gatsby, they shipped some [free awesome swag](https://www.instagram.com/p/Bmpf4t4BL7i/)
- Completed the [Hacktoberfest](https://hacktoberfest.digitalocean.com/) challenge, as a reward from Digital Ocean, I got some [free awesome swag](https://www.instagram.com/p/BsIdPO-BE1u/) as well
- By winning second prize of the [FreeCodeCamp online hackathon](https://medium.freecodecamp.org/winners-from-the-2018-freecodecamp-jamstack-hackathon-at-github-2a39bd1db878), I & my team got some Amazon gift cards & a cash prize
The achievement I'm most proud of this year is the 2,343 contributions on GitHub, looking forward to contribute more in 2019.
And that's it folks!, a quick recap of the things I learned, created & earned during 2018.
> I'll keep editing this article when ever I recall something else before the end of January
---
_Originally published at https://smakosh.com/blog/2018-year-review_
---
---
title: One year working remotely
date: 2018-09-18T10:38:01.889Z
edited: 2018-09-18T10:38:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/one-year-working-remotely
reading_time: 3 min (636 words)
Tags: web-development, career
---
# One year working remotely
Remember the last time I shared with you [my story when I declined the job offer as a front end developer](https://smakosh.com/getting-my-first-job-offer) then [won the first prize at a hackathon](https://smakosh.com/first-time-first-prize) which was hilarious because I got the same amount of money they offered me in 36 hours instead of 30 days & 8 hours a day of work?
Well after the event, I headed back home and the next morning I woke up to an email from a great CEO who offered me a job as a front end engineer at [Obytes](https://obytes.com/?ref=smakosh.com) which I accepted due to many aspects: (keep in mind these are pre-experience aspects)
- I wanted to experience remote work.
- Some amazing products they built like Paribus that got \$2.2M investments (which got recently acquired by Capital one).
- Working with cutting edge tech tools.
- Experiencing decentralized team work.
When I started my remote job, I was only coding user interfaces with plain html, sass & vanilla js, which we call “slicing the UI” as I was still learning React/react-router-dom & redux, also I was working on side projects during my free time such as:
- [Unnamed](https://unnamed.smakosh.com) (css framework) | Open source
- Free-videodownload (PWA & Native app)
- [Tomorrow Todolist](https://firebaseapp.smakosh.com) (PWA) | Open source
After I got back from [my trip to Istanbul](https://smakosh.com/istanbul-trip), I received an email that I should contribute in the react app as well or they may take serious actions, if it wasn’t my co-worker [Ismail Mechbal](https://www.ismailmechbal.com/?ref=smakosh.com) who taught me how to act in that situation, my whole career wouldn’t have gone this far. So I took full responsibility and convinced the team that I will start contributing.
Really thanks to my two team mates [Saad](https://saadaouad.net/?ref=smakosh.com) and [Abumalick](https://twitter.com/abumalick0) who supported me through out that period of 3 months while contributing to the react app, as sometimes I get tasks related to landing pages built with static sites generators such as Jekyll, I spent some time looking up if there is any SSG based on node js instead of ruby, then I discovered Gatsby js.
While I was also learning Gatsby as I find it better than Jekyll & Pelican as I tried them all. I built some static sites with it.
- [My personal blog](https://smakosh.com) | Open source
- [SharkCloud](https://staging.sharkcdn.net) static
- [Couscous.bot](https://couscous.bot) landing page
I was also restudying Calculus, Algebra linear & digging into understanding how does a single artificial neuron work as I'm really interested in machine learning. As well as learning the basics of making a rest API with Express js & Mongoose, learned about routes, models, http requests (Post, Get, Patch & Delete), middlewares & more… . I learned to deploy it on Heroku and used Mlab to host my database there. Later on, I built my personal rest api boilerplate.
I started getting into native apps when I first tried React native, I really enjoyed it even though it wasn’t perfect but better. I made a simple video downloading/converting app for my friend.
Forgot to share that I was learning Angular 5 back then when the company was using it on the front end but they switched to React later on.
I learned linting & formatting my code using Eslint & Prettier, I didn’t like using tachyons at the beginning but afterwards, I really liked it.
Here are facts that really encouraged me to decline other job offers
- An amazing team who truly love helping each other & never stop learning.
- Amazing projects owners who are technical and value our tasks & jobs.
- Learning & working with cutting edge tech tools.
- The love of sharing knowledge.
I know most of you are waiting for me to give tips on how to get a remote job but seriously, just start working on side projects specially open source ones so that your employer gets to see your code’s quality, app performance, git workflow etc.. so make sure to write clean code and be a fast learner.
As for the question, am "I enjoying my current job?" well yeah I do, I even work during weekends sometimes.
---
_Originally published at https://smakosh.com/blog/one-year-working-remotely_
---
---
title: From failure to launch - Hajj Hackathon
date: 2018-08-06T12:38:01.889Z
edited: 2018-08-06T12:38:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/from-failure-to-launch-hajj-hackathon
reading_time: 4 min (851 words)
Tags: web-development, travel
---
# From failure to launch - Hajj Hackathon
While travelling to Rabat in order to visit the Moroccan office of [Obytes](https://obytes.com) (the company I work for), I got invited to participate in Hajj hackathon which was looking for people who would like to solve some main problems related to [Hajj](https://en.wikipedia.org/wiki/Hajj), especially these nine topics:
- Waste management
- Food and beverage
- Transportation
- Crowd management and traffic control
- Travel and accommodations arrangements
- Public health
- Housing
- Communications solutions
- Financial solutions
The hackathon's organizers covered all our expenses including the flight (economy class at [Saudi airlines](https://www.saudia.com/?ref=https://smakosh.com)), it was so nice as they provided an awesome service, the hotel stay was also covered and each group was staying at different hotels, I was staying at Hotel [Salsabil](https://warwickhotels.com/salsabil/)).
I started coding a boilerplate rest api as soon as I got into the plane, I used express js, mongoose, mongodb, postman and I was working offline, I set up my models (user, post) and an authenticated middleware so not everyone could access some private routes, I forgot to add another middleware so only admin user can send requests to some post routes.
Once I arrived to the hotel, my friends were checking out the rooms, while I was just sitting on a couch at the reception setting up my react app (a simple auth app that redirects you to your profile once registered or logged in), I used `create-react-app` boilerplate but as I usually do, I had to eject it to add sass, setup my react-router v4, the private and public routes, structure of my project, reducers, actions and the redux store etc...
I didn't sleep that night and the next day they took us to a stadium where we registered as participants, we got our badges and an idea about the program, then they carried us to where the event will be hosted.
I couldn't support the crowd and went back to my hotel room to finish the progressive web app and while I was taking a shower, I got more ideas of what I was willing to make which was to show nearby trash cans on a map to users, reward those who help improving the platform by reporting full trash cans. The worker (second type of user) get a notification when a single trash can gets a number of reports that is full, then goes to check with a trash vehicle, if true, all first reporters get points which they can use to get rewards, else, they get penalties.
The admin (third type of user) subscribes to a plan (basic or pro) to be able to manage the platform, admin is the one with the privileges to manage trash cans and workers.
The next day was the second day of the hackathon when [they successfully broke a Guinness world record for most participants in a hackathon with 2950 person](http://www.arabnews.com/node/1350066/saudi-arabia).
I spent that day redesigning my progressive web app, making it more UX friendly, designed a simple logo and some avatars, prepared the presentation as well as my pitch, then I went to sleep in the hotel after 2 sleepless days while my whole team was playing around.
I was looking for an adapter USB type C to HDMI during the last day of the hackathon but sadly one of the organizers told me that I won't even make it to the finals so why asking for the adapter. I got mad and went back to my table over thinking why did he say that until I went into of the rooms to pitch then I understood that the whole event was just for the sake of the media, as no one was listening to my pitch nor paying attention to my demo when I was presenting the idea and the working app to the judges, you can check my slides [here](https://docs.google.com/presentation/d/1NT1ganL9jGxdlnRllixDjfvApM3hcC2IyXvP9zncLNo)
During the last day of my stay in Jeddah, while walking near the red sea, I come up with better ideas, I wrote them down and started thinking critically and comparing my idea to other business models of successful startups and I could come up with a better idea that uses maps as well, a SAAS platform that offers a online reservation for restaurants on the go, user can see nearby restaurants on the map, filter or sort by specific params, add items to his reservation, choose the time and table number then pay half the price to confirm it.
The issue with my idea is it requires a lot of money but I’ve decided to build a fully working app and seek investments from VCs or angel investors.
Here are the pros and cons of Hajj Hackathon in my opinion:
Pros:
- Well organized
- They solved internet problems by providing ethernet cables to each table
- Free food and drinks
- Covered our flights and accommodations
Cons:
- Lack of adapters
- Rules of the hackathon haven't been respected by the judges and the organizers as the winners didn't have a working app
- They should have picked 9 winners as there were 9 problems to solve
- Lack of designers and developers, I had to design, code and prepare the pitch alone
You can subscribe to the news letter down bellow to get early access to the app and latest posts delivered right to your inbox.
---
_Originally published at https://smakosh.com/blog/from-failure-to-launch-hajj-hackathon_
---
---
title: We are truly living in a simulation
date: 2018-06-29T12:06:01.889Z
edited: 2018-06-29T12:06:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/we-are-truly-living-in-a-simulation
reading_time: 1 min (271 words)
Tags: career
---
# We are truly living in a simulation
Not that kind of simulation you’ve seen on the matrix movie but a different one, keep on reading to understand more.
The simulation I’m talking about is actually simulated by ourselves not by some highly intelligent being(s), each one of us including other living beings (nature, animals etc…) are influencing each other to a level where we’re responsible of others’ decisions & their way of thinking.
Just go to your instagram feed to check what your friends are sharing, then compare their decisions of sharing those kind of posts to what they actually like (yeah you can see what your friends are liking & following on Instagram, after clicking on the heart icon on the app, swipe right to see the left tab). You can even interact with them in real life & be able to predict what they will talk about, their answers etc…
Don’t get depressed knowing that you are a variable on this huge network of influence but be optimistic because a variable does change & can adapt to each environment it’s in, don’t live your whole life as a constant that never changes through time.
Now that you know about this simulation you’re part of, use it in your favor as a self aware being to take more control of your influence, know with who you’re spending more time with, are they people with goals in mind, or are they some failures just playing around not caring about themselves neither others, keep doing daily or weekly reports of your decisions & actions to adapt, evolve & to finally change to a better person than you were yesterday.
---
_Originally published at https://smakosh.com/blog/we-are-truly-living-in-a-simulation_
---
---
title: The tech tools I use
date: 2018-02-27T16:45:01.889Z
edited: 2024-06-01T17:11:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/the-tech-tools-I-use
reading_time: 2 min (423 words)
Tags: web-development
---
# The tech tools I use
A list of tools I use for:
- Personal side projects
- Full time job
- Working with clients
## Design tools
- Midjourney for logo, icon and illustration design
- Figma for designing user interfaces & wireframes
- Final cut pro for editing videos
- Dribbble/Behance for inspiration and work showcase
## Code
The code editor I'm currently using is VSCode
I share my code & look for inspiration on:
- X
- GitHub
- Codepen
- CodeSandbox
If I’m simply coding an interface that I might integrate into a web app I use plain HTML/CSS & vanilla JavaScript.
But if I'm working on a landing page, documentation website, blog or even a large web app I use:
### Primary stack
- Language: TypScript
- Web framework: Next.js
- Styling: Shadcn-ui, Radix-ui, Tailwindcss
- Forms: React hook form + zod
- Payments: Stripe
- Web3: Rainbowkit, WAGMI, SIWE, Ethers
- Server state: React-query
- Client state: Context, useReducer, useState, useContextSelector or libraries like Jotai/Zustand etc...
- Headless CMS: Contentful, have to explore Basehub
- Databases: Sqlite, Postgres, Redis
- ORM: Prisma, Drizzle
- API framework: Express.js
> Side note for CSS, I’m cool to use what ever tech available out there that makes my task done quickly & well, I have personally used Bootstrap 3 & 4, Bulma, Lostgrid, Materliaze, Skeleton, Tailwindcss, Styled-components, emotion, CSS modules, Tachyons & made my own micro CSS framework called [Unnamed](https://unnamed.smakosh.com/) that has over 200 stars on GitHub. Still I prefer using Tailwindcss.
### Deployment
- [Vercel](https://vercel.com/?utm_source=smakosh&utm_campaign=oss)
- Digital Ocean
## Issue, expenses/income tracking and project management
- Google sheets - for calculating expenses/income
- [Notion](https://notion.so/?utm_source=smakosh.com) - for tracking everything
- [Linear](https://linear.app/?utm_source=smakosh.com) - for tracking issues on some serious personal projects
## Bank
- Attijariwafa Bank
- Mercury
- N26
## Setup
### Laptop
> I no longer ask for work laptop, it's frustrating to have to give it back.
- MacBook Pro (14-inch, 2021)
- Display: 14-inch (3024 × 1964) Built-in Liquid Retina XDR Display
- Apple chip: Apple M1 Max
- Ram: 32 GB
- SSD: 2 Tb
### Equipment
- Monitor: LG UltraWide 34WP85C
- Keyboard: Keychron K2 (Hot-swappable) Wireless Mechanical Keyboard (Version 2)
- Main Headset: Sony WH-1000XM5
- Microphone: Blue Yeti X
- Desk: TROTTEN Ikea desk
- Mouse: Logitech MX Master 3
- Trackpad: Apple Magic trackpad 2 gray
- Mousepad: Sidorenko XXL Gaming Mousepad
- Chair: Steelcase Gesture office chair with cover in onyx black with headrest
- Webcam: Razer Kiyo
### Phones
- iPhone 13 Pro
- Google Pixel 2
### Cameras
- GoPro hero 7 black edition limited edition
### Drone
- DJI mini 2
### Gaming
- Nintendo Switch Oled with a Pro controller and a wirelss horipad
- PS5 CD edition with 2 controllers
- A PC Gamer:
- MSI MAG CODEX X5 12TD-868DE
- Intel® Core™ i7 i7-12700KF Prozessor
- 32 GB RAM
- 1 TB SSD
- NVIDIA GeForce RTX™ 3070
- Windows 11
---
_Originally published at https://smakosh.com/blog/the-tech-tools-I-use_
---
---
title: My trip to Istanbul and why I hate traveling
date: 2017-12-25T16:45:01.889Z
edited: 2017-12-25T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/istanbul-trip
reading_time: 3 min (619 words)
Tags: travel
---
# My trip to Istanbul and why I hate traveling
I wanted to visit Istanbul 3 years ago and even told my friends about it, but 2 years after that moment, I didn’t really want to travel anywhere anymore because in my opinion, the Internet (even if it’s not decentralized) saves us money & time and so we don’t really need to travel anymore, I buy all my stuff online on Ebay, I work remotely at Obytes as a front end engineer, I learn at Udemy or YouTube, I read articles on Medium, Dev & Codementor, I watch movies/series on Netflix & I attend any event or conference via YouTube or Facebook live….
Which is why I think we don’t really need to travel anymore but that doesn’t make me wanna stay in Morocco due to many reasons and the most important one is the lack of funding & a bad educational system. But I wanted to really experience travelling to see if it’s really worth it. So as a nerd obviously I have to get prepared using tech, so here are the stuff I used to get ready, walk around…:
- Google trips: .
- Booked my Hotel room on Booking.
- Downloaded Uber & Istanbul offline map.
- Booked my flight via: Google flights.
- Packed up my laptop/Phone/GoPro/headset/earphones/cables etc…
First time taking a flight, I coded at the airport for the first time, the flight was nice during take off but sucks during landing! once arrived at Istanbul, I exchanged a little amount of money and booked an Uber directly to the Hotel. After checking out social media & the room, I got to sleep. As I’ve already marked the places I wanted to visit there on Google trips, I got up the next day and went outside (and yeah I went alone and got an idea to make this shirt), tl;dr I walked around Taksim square, boat tour, ate Chawarma & got back to my hotel. Here are some pictures I took.
Day 3: I went to checkout the Startup Istanbul conference, the first day was boring so I won’t talk about it but rather I’ll jump into Day 4 when I went to check more places out! tl;dr here are the pictures I took there:
Nothing special happened and I didn’t really enjoy walking around, as you can tell I kept simply taking pictures with my Nexus 6p, I was impatient getting back to my room to learn Angular Js which I was learning during this travel. on my way back to the hotel, I visited this weird modern museum and took some pictures.
Day 5: was the second day of the conference which I actually enjoyed because they brought Tim Draper & some folks from 500 startups & YC who declined I & my friend’s application to Winter 2018 program, they kept speaking about the blockchain, ICO & Ai.
At that night I met with some great people, one of them was also from Morocco and so we visited a nice place & viewed Istanbul in 3D.
Day 6: was the day before the last day there in Istanbul and so I woke up early, took my breakfast & went back to that view to take more pictures.
Day 7: I prepared my stuff and booked an Uber directly to the airport, the driver got a tip from me & was so happy, funny they check the laptops too in the airport, I spend some time coding at the airport again and then got back to Morocco.
You can check out all the pictures I took [here](https://unsplash.com/@smakosh)
I learned to never go on vacation again, stay inside my room & learn to build useful products.
---
_Originally published at https://smakosh.com/blog/istanbul-trip_
---
---
title: Why I created Unnamed
date: 2017-09-20T16:45:01.889Z
edited: 2017-09-20T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/unnamed
reading_time: 1 min (269 words)
Tags: css, web-development
---
# Why I created Unnamed
I hate when I use a known css framework like Skeleton or Bulma… and specially frameworks like Bootstrap or Foundation…
Because of many reasons but here’s the main reason: “since I’m also an UI designer, I always have to rewrite the entire css code of the UI elements like buttons, forms, cards…”.
So I started going deep in css, like the trick to style a radio or checkbox button (hiding the input and styling the span tag), learned a lot about flexbox, about the standard way to make a grid system (floats & widths), flexbox grids & also cssgrid & a lot more…, and so I started posting pens of each styled element on my [codepen](https://codepen.io/smakosh) until one day I was designing an UI kit at 2 am — lol — and I thought about coding each element & that’s when I started coding the framework, I didn’t think about sharing it or open sourcing it but then I thought why not? some would love to use it too right? & so, I published it, made it open source & included everything on the github repository for the front end developers who would love to edit everything.
Unnamed is easy to use & to edit!, there is also a npm module
nmp i unnamed
& import it if you're using webpack
import 'unnamed'
There is also a CDN if you're not used to the node eco-system
https://unpkg.com/unnamed
I got a positive & negative feedback on Product hunt that really made me go forward and make more useful products so expect more soon!
Docs:
On github:
---
_Originally published at https://smakosh.com/blog/unnamed_
---
---
title: Build your perceptron neural net from scratch
date: 2017-08-12T16:45:01.889Z
edited: 2017-08-12T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/build-your-perceptron
reading_time: 3 min (595 words)
Tags: ai
---
# Build your perceptron neural net from scratch
> “ In the late ’50s, a Cornell scientist named Frank Rosenblatt had proposed the world’s first neural network machine. It was called the Perceptron”
Let’s start by defining the terms first, Ai (Artificial intelligence), ANN (Artificial neural networks), Machine learning & Deep learning.
## Ai
> The field of AI research defines itself as an area of computer science that deals with giving machines the ability to seem like they are intelligent, which we haven’t yet reached since neuroscience haven’t solved intelligence yet.
## ANN
> ANN or a neural net is a computing system inspired by the biological neural networks that constitute biological brains but they look so different.
> ON the left: The biological neuron graph & on the right: the artificial neural network
## Machine learning
> Machine learning is a field within Ai that focuses on the design of algorithms that can learn from a given data and results which we call “training data” to make a prediction based on that given data from new input data.
## Deep learning
> Deep learning is a sub-field within Machine learning which focuses on the same goal but which uses neural networks & deep neural networks.
So what’s the perceptron then ? Well the perceptron is an algorithm for supervised learning (which means we know the result we’re trying to get, say like feeding the size & location of a house to predict the price, in the other hand there is unsupervised learning which is used to draw results from datasets consisting of input data without labeled responses).
The perceptron receives input data multiplied by random weights and adds a bias value, put in an activation function to get a result, if the result value is wrong, it uses back propagation & gradient descent to go back & tweak the weights to get a correct result.
> It can be more than 2 inputs!
I know there are some terms there you didn’t get, so let’s go ahead and explain that slowly, let’s say you’re a farmer and you want to classify two types of flowers manually, the best way to do this manually is to take the length & width of each flowers’ paddle and represent them on a graph just like shown bellow:
> Data was taken from
Notice the unknown flower we’re trying to figure its type, as you can see on the graph it’s represented among the type 2 of flowers which means it is a type 2 flower.
What you’ve just did manually is called linear regression, you’ve represented as many flowers you have on the graph as a training data, then you noticed that pattern and drew a line between the two types.
So now let’s automate it using our own perceptron built from scratch, the activation function we’ll be using is Sigmoid, here’s how it looks like on the graph:
> Sigmoid function
Now let’s understand how back propagation & gradient descent work, and to do so we will need:
- The cost function or also known as squared error function
- The derivative of the sigmoid function
- The derivative of the cost function
- The slope of the cost function is: the derivative of the cost function multiplied by the derivative of sigmoid.
- Learning rate: we will go with 0.2
- For the derivatives of the weights, it’s the inputs’ values, — because the derivative of a constant multiplied by a non constant is the constant — & for the derivative of the Bias it’s 1.
- Then we’ll be able to get the new weights & bias values like shown bellow:
> And we're done
Check the code on [Github](https://github.com/smakosh/Perceptron-neural-net-from-scratch/blob/master/Linear_regression_perceptron.ipynb) & [Kaggle](https://www.kaggle.com/smakosh/perceptron-neural-net-from-scratch/notebook)
---
_Originally published at https://smakosh.com/blog/build-your-perceptron_
---
---
title: First time getting first prize at a hackathon
date: 2017-07-08T16:45:01.889Z
edited: 2017-07-08T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/first-time-first-prize
reading_time: 2 min (367 words)
Tags: web-development
---
# First time getting first prize at a hackathon
As I always do, to arrive at time I stay awake the whole night, so I spent that night coding & designing like most of my days.
So after [I declined the job offer](/getting-my-first-job-offer), I was invited once again to participate in a great hackathon organized by [Lematin](https://lematin.ma) by partnering with Screendy, but this hackathon was a bit serious since they invited only ideas holders at the beginning to select the good ones, then they invited us : designers, developers & marketers to help them make a prototype.
The event took place in [Smart Center](https://smartcenter.ma/), a great co-working place which I recommend you to visit if someday you visited Casablanca city, Morocco.
Anyway as every other hackathon, the CEO of Lematin introduced & declared the start of the hackathon, ideas holders started pitching their ideas so that we choose the one idea we got interested in, so once I heard the COOP 360 idea from a great guy, I immediately asked him to join the team as a designer & developer as the same time & he accepted instantly after showing him off my works.
Since it was an E-commerce platform I had to use my own github repo — — of a starter kit E-commerce app built with php/mysql — yeah it lacks many things but it does the work as a prototype — anyway I started designing the logo, illustrations, changing sass color variables & adding more pages since we needed more features because it wasn’t only an online shop, I didn’t sleep since I was focused on finishing that prototype, after 36 hours non stop of work, the jury then came in and projects’ holders started pitching their ideas with a demo of the prototype.
To be honest I didn’t believe that we were going to win as I told my friend that we wouldn’t win this when the Jury was about to announce the winners of the first prize, but yeah I was wrong, we actually won & got invited to assist to a conference where we’ll receive our prizes.
[News coverage](https://lematin.ma/express/2017/remise-des-trophees-aux-gagnants-du-hackathon-laquo-morocco-social-tech-raquo-/274777.html)
As a conclusion, what I really learned during this hackathon is to never give up and just do your best & go beyond your obstacles!!
---
_Originally published at https://smakosh.com/blog/first-time-first-prize_
---
---
title: Getting my first job offer without a degree at a startup
date: 2017-06-07T16:45:01.889Z
edited: 2017-06-07T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/getting-my-first-job-offer
reading_time: 3 min (590 words)
Tags: web-development, career
---
# Getting my first job offer without a degree at a startup
It all started on facebook, I was reading Tech crunch news until a notification popped up, my friend [Med Bouasria](https://medium.com/@medbouasria) tagged me on a job announcement on a facebook post of [Hidden Founders](http://hiddenfounders.com/), they were looking for a front end developer, I wasn’t really sure If a self-taught undergraduate person like me will get a job, so I left a reply on the comment section saying that “they will ask me for a degree”, but surprisingly Hidden Founders themselves replied to my comment clarifying that they don’t really care about degrees, so obviously I applied. After some days, I got a reply asking me for an interview and because I wasn’t living in the same city I asked if there is any possibility for a skype interview, and yes they nicely accepted.
It was nice speaking with Zakaria Braksa who’s VP of engineering at HF who asked me by the way direct questions like “what can you do? have you ever faced any problems ? if so how did you solve them ?..”. I got accepted for one month paid internship. when time has come to travel so that I start my internship, I had four different opportunities :
- A friend’s of my brother who asked me to join them
- Screendy which offered me a free flight to help them organize a hackathon in Abidjan
- Gamacom which is a networking company
- Hidden Founders which I accepted to join them for one month internship with passion
But really thanks to Med Bouasria who kept saying good things about them and which motivated me more to join them ASAP. The first thing that surprised me during the first day is their CEO who wasn’t wearing a suit, He also offered me a free nespresso coffee the first 2 days and everyone welcomed me on Slack, they invited me into Trello boards, Invision and Github repositories. The CTO Adil Haizoune gave me an UI that I had to code from scratch using flexbox which I learnt that day, also learnt about Gulp & Yeoman thanks to Reda. Med Bouasria helped me explaining to me Vue js components then I started working on the node web app. there was some issues on the workflow, but the CEO along with the CTO managed to solve them to avoid such issues in future projects.
The day before my internship ended, Adil Haizoune invited me to join them as a full time front end developer which made really happy because finally I can prove to my parents and the people I know that you can actually get a job without a degree, second thing is that everyone there get the same salary no matter what degree you do have.
During the last day, I spent most of it preparing a nice UI kit along with a 960 grid system for Ahmed — a new intern — who joined us too, I explained everything he needed while I’ll be absent for a week to pack my stuff from home and get them to this city I’ll be living in.
In a nutshell, **I’ve never thought this would happen someday but it did happen, getting a full time job offer as a front end developer without any degree but for being self taught.**
Days after I started working with the folks at HF, I resigned due to the low salary I got offered knowing that I get paid more than that working as a free lancer and that is the difference between getting paid per project/work and getting paid per hour.
---
_Originally published at https://smakosh.com/blog/getting-my-first-job-offer_
---
---
title: HPS Hackathon
date: 2017-04-10T16:45:01.889Z
edited: 2017-04-10T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/hps-hackathon
reading_time: 2 min (408 words)
Tags: web-development
---
# HPS Hackathon
After winning the second prize at the Lydec Hackathon organized by Screendy.
I got invited to join the student partner program of Screendy — thanks to Mehdi Alaoui (the Founder & CEO of Screendy) — to help the participants during the international HPS hackathon hosted in Marrakesh. Two of my friends who live in my hometown got an invite to participate too, so we took the road to Marrakesh, we arrived after 12 hours of travel lol, we took some pictures of some great places there.
We waited for others at the train station, we then got transferred to the Palmeraie resorts Hotel. I met again the SSP team who were really amazing & nice to me, we prepared everything (badges, shirts….) to welcome 80 participants from 20 countries, 20 HPS clients & partners, 30 HPS employees, After we collected more than 40 ideas from the participants, we chose 15 ideas which were interesting and the ideas’ holders made their teams of 4 to 5 members (Designer, Developer, Entrepreneur, Marketer & a HPS employee) then the hackathon started which ended after 48 hours, thanks to HPS for offering to the SSP team 3 nights at the Wazo Hotel which was really good.
I helped more than 2 teams on the Design part & on explaining to them how to use the Screendy Platform & I explained to my friends’ team that it’s all about the pitch & to clarify the idea to the jury is the most important part, 48 hours ended and it was time to pitch in public, the decision was made that night but privately and everyone was sent to the Wazo Hotel to have some rest until the day after on the morning when the Powercard users meeting has started is when the winners were announced & got their prizes :
- First prize : 10 000\$ won by Pic & Pay (the bixby feature on the samsung s8)
- Second prize : 5000\$ won by Fill me Up (the team I helped, providing gas stations with best prices on the map)
- Third prize : 3000\$ won by Mybills (pay your bills instantly with one click)
- Fourth prize : 1000\$ won by EPS (my friends’ team, the Iris recognizer to confirm payment)
In a nutshell, that was the best hackathon so far powered by Screendy in Morocco, here’s a video that shares more details:
---
_Originally published at https://smakosh.com/blog/hps-hackathon_
---
---
title: How I learned Design and Dev in a year and half
date: 2017-03-10T16:45:01.889Z
edited: 2017-03-10T16:45:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/how-I-learned-design-and-dev
reading_time: 3 min (703 words)
Tags: css, web-development, career, freelancing
---
# How I learned Design and Dev in a year and half
## I started Learning Design 1st
- I learned Adobe Illustrator & Photoshop --Then Adobe XD later on-- easily since I was playing with Adobe After Effects when I was a little boy.
- I started practicing by Designing stuff for myself like, logos / User interfaces / business cards / social media banners / illustrations & editing pictures…
- Some of my friends have suggested sharing my work on Behance which I did so & once I made a twitter account, I started getting clients from all over the world.
## Dev
Then I started learning web development, of course I started with front-end development:
- I learned the basics of HTML, CSS and JavaScript in order to make an unresponsive one page website, then a responsive website with my own grid system which was based on floats & widths.
- Then I learned few JavaScript Libraries mainly Jquery and then in 2017 I learned Angular 4 but switched to the React eco-system in the begining of 2017.
- I learned some UI frameworks as well like Bootstrap, Materialize, Bulma, Lostgrid, Material UI, Tachyons and I made my own little css framework called [Unnamed](https://unnamed.smakosh.com).
- I learned Sass, Pug (named Jade in the past) & ES6 as well.
- I launched several versions of my personal website using different tech stacks & different looks.
I started getting some clients work but unfortunately seeking for Wordpress templates from scratch which was really hard at that time as I was still learning PHP & MySQL anyway I took the challenge and designed the UI, coded it & then converted it to a wordpress template, I used plugins all over to let the client edit stuff easily but that made the website really slow, he then paid me more to remove my copyrights but still you can find my name on the style file :D
I also made other Wordpress websites using premium templates but I really hated it. I'm not a fan of CMS but I recently became a fan of headless CMS.
I wanted to get into mobile dev too but I had no idea how to make a mobile app, so after a little research I found out that there is a software called Build Box that lets you make mobile games without any programming skills, you only need to design all the stuff & the drag n drop will do the work and your app is done, which was the tool I used to make [Catch it 1.0](https://play.google.com/store/apps/details?id=com.smakosh.atchit) .
I wanted to get into the native dev world but I was too lazy to learn Java or Swift so I played with the Ionic framework which isn't native but hybrid but I wanted to get my hands dirty and I made a little portfolio app which I'm planning to delete soon.
1 Year has passed and I decided that to get into back-end dev as well, It was so hard to choose between php or nodejs (which is simply server side javascript) & at the end I went with php and MySQL due to the decision of my dad --who didn't let me drop out from university at that time-- because it was in the program (php/mysql).
So I started learning it by practicing once I understood the core language (variables, loops, statements...) then I started making some web apps like a forum, [E-commerce](https://github.com/smakosh/Smartshop), an [image resizer](https://github.com/smakosh/image-resizer) etc....
While learning back-end dev, I made some works too like this [responsive website](https://luca-steeb.com) for my friend Luca Steeb & it was my first time using Git, Github & Ubuntu since the website's back end uses Nodejs & I learned some stuff about npm & CLI commands :D
But late 2017, I started learning the MEAN stack and made some apps which are open sourced on my [Github account](https://github.com/smakosh).
Currently --early 2018-- I'm still learning so much stuff like Express, Mongoose, Gatsby, Neural networks, Python, Flask, Tensorflow, Keras....
I really want to thank the people on the internet who taught me these things and the folks who open source so many great products. Also thanks to the friends who helped me through my early learning career.
> "The purpose of education is to help you learn by yourself"
---
_Originally published at https://smakosh.com/blog/how-I-learned-design-and-dev_
---
---
title: Never work for free
date: 2017-03-02T16:45:01.889Z
edited: 2019-04-02T02:00:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/never-work-for-free
reading_time: 2 min (465 words)
Tags: freelancing, career
---
# Never work for free
It was the first time I work for free since it was my English teacher for whom I promised to make an entire dynamic website in which he would post his quotes -he thinks he invents them from scratch even though it is obvious that we cannot create something from nothing because we have no idea what nothing is to begin with- but who am I to judge what he does with his free time.
I started by making a simple logo for a short time using Adobe Illustrator (since everything was for free), I designed the wireframes on a piece of paper and then designed the UI using Adobe Photoshop which took quite some time.
This caused me to neglect revision for my exams & other clients’ work. Whilst working on the project he kept hurrying me and pestering me if I finished making it yet -which really pissed me off because it felt like he was the boss of me-.Anyways, I ended up receiving bad marks on the exams, but I at least finished the static part of the website.
I used html5/SCSS, some JQUERY & of course a framework called Materialize CSS which takes care of the responsive media queries, then I started preparing the database & started coding the backend using PHP/MYSQL, I asked for some help from my friend Anas Mazouni to help me make the like button work, make a views counter and overall make the website more secure.
The teacher paid for the domain name & the host, and I published it on my Behance portfolio: [Here](https://www.behance.net/gallery/46963503/Quotes-of-Boss-web-app) & Instagram twice : [First](https://www.instagram.com/p/BO0f_O_AhC7) & [Second](https://www.instagram.com/p/BPIBhn5gn6h).
He then asked me to add other things like social media accounts, PayPal & Patreon accounts, Google Ads & analytics, the Facebook comments box, and another page where his YouTube videos would be posted. I accepted and did as he asked.
A few weeks later he asked me to add a search bar, poems & other pages for quotes & poems in Arabic & French, but this time I informed him that what he was asking for would cost him a lot –thousands of dollars kind of a lot-, but I was ready to do it for only 200 bucks. Mr English teacher ends up refusing my ever so generous offer, blocked me from all Social Medias and asked another student to add everything for him for free.
The student –who was a classmate of mine- backstabbed me and claimed that I downloaded everything & that I had never created anything on my own. The teacher later on came to me, insulted me & started spreading lies and rumors about me.
To conclude, if you’re good at something, never do it for free.
2 years later, Mr English teacher apologized for what he did.
---
_Originally published at https://smakosh.com/blog/never-work-for-free_
---
---
title: About me so far...
date: 2016-12-02T16:45:01.889Z
edited: 2019-06-21T11:29:01.889Z
author: Ismail Ghallou (Smakosh)
canonical: https://smakosh.com/blog/about-me-so-far
reading_time: 3 min (673 words)
Tags: career, web-development
---
# About me so far...
## The story of my nickname "Smakosh"
I’m Ismail Ghallou also known as Smakosh, a nickname which was given to me since I was 8 years old by one of my childhood friends' father.
Many teachers told their colleagues, my parents and sometimes me personally, that I was a good student during primary school, that was achieved by playing a lot of offline video games that really taught me problem solving like how to figure out the way out in Prince of Persia, Assassin's Creed & the Tomb Raider trilogies etc...
## Primary school
I was a typical nerd since primary school, wearing socks and sandals, everyone used to laugh at me but I never noticed that or felt different from the others, I also never brought any food with me to eat during the break while almost everyone else did so, I did get bullied but I used to always win the fights.
## Mid school
At the last year of primary school I decided to move out to a public school rather than a private one, and during that time I got heavily addicted to Basketball, especially in the streets (AND1), I liked to instantly try out the tricks I learned from YouTube.
Here’s a picture of some medals I got by winning few tournaments I & my friends both on Football & Basketball.
During middle school, I started exploring more activities like drawing, graffiti, biking, skateboarding & watching Anime while I was still getting good marks even though my daily schedule was heavy with those activities, during high school I got addicted to Parkour & Free running and it was really a good experience “not to be able to do a backflip and then after a long period of training to actually do it without any excuses like not having gyms in your small city” it was something really amazing, I spent like 2 years practicing and have recorded some videos that you can watch and enjoy [right here](https://www.youtube.com/@IG-SM/videos).
## Gaming
During the last year of high school I got a gaming PC that my dad bought for me since I've been bugging him since mid school, unfortunately it made me get addicted to gaming and as a result I graduated from high school with a bad mark.
At that time, even the "lowest" nearby university didn't accept me to get in, I actually enrolled in a private school to stay up to date with the lessons so that I can retry passing the final test hoping that I'll get a better mark.
## Restart
Fortunately after just 3 days of attending that private school, I actually got accepted in some sort of school which is equivalent to university & at that moment everything has changed, I started educating myself at home, learning, practicing by doing side projects & working as a free lancer from November 2015 until early 2017 when I got a job as a front-end developer at [Obytes](https://obytes.com/?ref=smakosh), working remotely without a degree and with the knowledge I taught myself at home as it has nothing in common with what I had learned at school, luckily I was always digging more knowledge and skipping sleep while stuying like that 2 years after high school.
I still remember most of the teachers laughing at me when ever I publicly stated that you can land a job without a degree as a developer, turns out that I was right and I managed to influence two of my class mates who dropped out as well from university to work full time with a high paying job as software engineers.
> Oh yeah, university welcomed me for the bachelor in software engineering which I never bothered to care about and I was writing JavaScript during a Java test which was funny as they didn't recognize JavaScript at all
To be continued...
you can view all my works on my website & more down bellow:
- Behance:
- GitHub:
- Twitter:
- Facebook: (I'm not on Facebook anymore)
- YouTube:
- Dribbble:
- LinkedIn:
- Codepen:
---
_Originally published at https://smakosh.com/blog/about-me-so-far_
---
# Talks
## Handling Server & Client State in your React App
_2023-02-23_
At an offline event in Berlin, I gave this tech talk about handling client and server state in your React apps, in which I started with an introduction of state management, how important is it to manage state properly, different types of state, different ways to manage both types of states and ended up with a little introduction to Tanstack-query with some examples of fetching and mutating data.
- Slides: https://pitch.com/public/0632c507-3ca0-4a56-8b36-0582bb9e2ff6
---
## Learn to implement authentication cheaply and securely
_2021-03-31_
An online workshop on which I shared my knowledge about the different approaches to implement authentication, the pros and cons of each with a demo at the end implementing session http only cookie authentication using the hype beast.
- Slides: https://2021.custom-auth.talks.smakosh.com
- Watch: https://www.facebook.com/Opensdays/videos/158209136082880/?story_fbid=158209136082880&id=1381978402047509
- Demos:
- https://github.com/smakosh/auth-ts-boilerplate
- https://github.com/smakosh/auth-ts-next-boilerplate
---
## WTH is static site regeneration
_2020-10-22_
Quick explanation of Icremental Static Regeneration using Next js, I explained the difference between SSG vs SSR vs CSR vs ISR, gave an introduction about Next js, I went through Next's 3 API functions one by one and showed a demo of Ontwik.dev and how are we using ISR for listing approved developers and their profiles.
- Slides: https://2020.wth-isg.talks.smakosh.com/
- Watch: https://youtu.be/p7yLbnxGvlw
- Demos:
- https://github.com/smakosh/blablaconf-talk-2020
---
## Gatsby js talk and workshop
_2020-03-08_
In this talk, I re-introduced Gatsby as a modern web framework for building blazing fast websites and apps, answered the "what? why and how?" questions with a demo at the end, built a blog and deployed to ZEIT now.
- Slides: https://docs.google.com/presentation/d/10UJ2G8CbcZK6EUHKA-MHsNxJwDgLPYH6C06sceeVPAw/edit?usp=sharing
- Demos:
- https://github.com/smakosh/wtm-blog
---
## Build a blog with Contentful and Gatsby
_2020-02-29_
talked about headless CMS, why it's better than traditional CMS, micro introduction to Gatsby, what's the JAMStack...
- Slides: https://2020.headless-cms.talks.smakosh.com/
- Demos:
- https://github.com/smakosh/test-i18n-contentful
---
## The evolution of grid systems on the web
_2020-02-27_
talked about CSS Grid systems, the reason we need them, life before/after CSS and the clearfix hack, flexBox and CSS Grid
- Slides: https://2020.css-grids-talk.talks.smakosh.com/
---
## Introducing Gatsby, — The modern web framework for building blazing fast websites and apps.
_2019-12-17_
In this talk, I re-introduced Gatsby as a modern web framework for building blazing fast websites and apps, answered the "what? why and how?" questions with a demo at the end of a static website consuming data from a single YAML file and deployed to ZEIT now in less than 10s.
- Slides: https://zeit-gatsby-talk.smakosh.com/
- Watch: https://youtu.be/nXRmOrN7m9o?t=1465
- Demos:
- https://github.com/smakosh/saham-events-demo
---
## Building static & dynamic apps with Gatsby
_2019-05-14_
In this talk, I covered the same points I mentioned in my previous Gatsby talk as most of the attendees haven't any idea what Gatsby was, then I jumped into the dynamic Not Todo app I built during that morning which is connected to a REST API built quickly with express & mongoDB, I went through how to setup the routes using reach-router & how to use the "createPages" Gatsby API to create that page (since it's a SPA, there is only one page generated).
- Slides: https://building-apps-with-gatsby.netlify.com/
- Demos:
- https://github.com/smakosh/devc-blog
- https://github.com/smakosh/gatsby-app-starter-rest-api
---
## Introducing Gatsby, the best SSG for React developers.
_2019-02-14_
In this talk, I introduced Gatsby to developers, which is one of the three choices you'd consider when building a React app, it offers pre-rendering, has a huge community who have shipped many Gatsby plugins that help make the process easy, I discussed about what's so awesome about it, how it renders content & built a blog with markdown files in 5 minutes live coding with the attendees.
- Slides: https://introducing-gatsby.netlify.com/#0
- Demos:
- https://github.com/smakosh/devc-blog
---
## The Perceptron - Understanding the maths under the hood
_2018-04-03_
During this talk, I covered a brief history about Ai, defined ML/DL & explained the difference between the two, started by recognizing an unknown type of flower from basic data we collected and how intuition managed to draw a line between the two types of flowers from our dataset, then I moved on to automate what we manually did and ended up making a Perceptron from scratch.
- Slides: https://docs.google.com/presentation/d/1YTl4g36z22bJJmzfHtNd9QEibeotgNmieikO6G7gK3U/edit?usp=sharing
- Demos:
- https://github.com/smakosh/Perceptron-neural-net-from-scratch
---
# Projects
## Heron Finance
The returns of stocks, the consistency of bonds.
Link: https://www.heronfinance.com
---
## Diagonal Finance Landing page
Diagonal is the the most powerful API for crypto payments. Integrate crypto subscriptions in just a few lines of code, and get paid on multiple chains and in multiple tokens
Link: https://www.youtube.com/watch?v=VXy_Ur1dfJQ
---
## Diagonal Finance Checkout page
Diagonal's Checkout page
Link: https://www.youtube.com/watch?v=VXy_Ur1dfJQ
---
## Diagonal Finance Demo
Diagonal's Demo, Diagonal is the the most powerful API for crypto payments. Integrate crypto subscriptions in just a few lines of code, and get paid on multiple chains and in multiple tokens
Link: https://www.youtube.com/watch?v=VXy_Ur1dfJQ
---
## Links DAO Landing page
A global community of golf enthusiasts in web3 reimagining the modern golf and leisure club
Link: https://linksdao.io/
---
## Ontwik
Hire skilled remote developers easily.
Link: https://ontwik-dev.com
---
## Links DAO Clubhouse
A global community of golf enthusiasts in web3 reimagining the modern golf and leisure club
Link: https://clubhouse.linksdao.io/
---
## The Landing
A community for visual inspiration, curation, and design.
Link: https://landing.space
---
## Mintify
Easily deploy your ERC 721 smart contract and mint NFTs from different sources like Unsplash
Link: https://mintify.smakosh.com
---
## Ai Hashtags
Generate Hashtags using Artificial Intelligence
Link: https://ai-hashtags.com
---
## Uvohealth
Free telemedicine software. See patients anywhere anytime.
Link: https://www.uvohealth.com/
---
## Unnamed CSS
A colorful CSS framework
Link: https://unnamed.smakosh.com
---
## Obytes
Obytes landing page
Link: https://obytes.com
---
## Joincoded
The First Coding Bootcamp in the Middle East
Link: https://www.joincoded.com
---
## Couscous
Slack bot inspired by HeyTaco
Link: https://www.couscous.bot
---
## Catch it 1.0
Fun Android game I made in one night
Link: https://play.google.com/store/apps/details?id=com.smakosh.atchit
---
## Barmej
An Arabic online learning platform that offers courses in different programing languages.
Link: https://www.barmej.com
---
## Diagonal Finance Subscriptions Dashboard
Diagonal's Subscriptions Dashboard, Diagonal is the the most powerful API for crypto payments. Integrate crypto subscriptions in just a few lines of code, and get paid on multiple chains and in multiple tokens
Link: https://www.youtube.com/watch?v=VXy_Ur1dfJQ
---
## LLM Gateway
Open-source alternative of Openrouter
Link: https://llmgateway.io?ref=smakosh.com
---
## DevPass
One subscription, every coding model — fixed-price dev plans for Claude Code, Cursor, Cline, and any OpenAI-compatible tool.
Link: https://devpass.llmgateway.io?ref=smakosh.com
---
## Starlink Prices
Browse global Starlink plans and prices in your local currency.
Link: https://starlink-prices.com?ref=smakosh.com
---
## Clanker Support
Open-source AI support agent that answers from your docs — one script tag.
Link: https://clankersupport.com?ref=smakosh.com
---