Untitled RSS Feed

Handling SEO in React apps

Thu, 13 Jun 2019 07:00:01 GMT

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 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 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

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

// 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"
  }`

  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}"
		]
  	}`

  return (
    // Notice I'm using react-helmet to inject these elements within the header tag
    <Helmet>
      {/* The description that appears under the title of your website appears on search engines results */}
      <meta name="description" content={description || defaultDescription} />

      {/* The thumbnail of your website */}
      <meta
        name="image"
        content={cover ? `${url}${cover}` : `${url}${Thumbnail}`}
      />

      {/* Opengraph meta tags for Facebook & LinkedIn */}
      <meta property="og:url" content={`${url}${location}/?ref=smakosh.com`} />
      <meta
        property="og:type"
        content={type === 'NewsArticle' ? 'NewsArticle' : 'website'}
      />
      <meta
        property="og:title"
        content={title ? `Smakosh | ${title}` : defaultTitle}
      />
      <meta
        property="og:description"
        content={description || defaultDescription}
      />
      <meta
        property="og:image"
        content={cover ? `${url}${cover}` : `${url}${Thumbnail}`}
      />

      {/* You can get this id when you create an app id on Facebook of your Facebook page */}
      <meta property="fb:app_id" content={social.facebook} />

      {/* These tags work for Twitter & Slack, notice I've included more custom tags like reading time etc... */}
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:creator" content={socialLinks.twitter} />
      <meta name="twitter:site" content={social.twitter} />
      <meta
        name="twitter:title"
        content={title ? `Smakosh | ${title}` : defaultTitle}
      />
      <meta
        name="twitter:description"
        content={description || defaultDescription}
      />
      <meta
        name="twitter:image:src"
        content={cover ? `${url}${cover}` : `${url}${Thumbnail}`}
      />
      {type === 'NewsArticle' && (
        <meta name="twitter:label1" value="Reading time" />
      )}
      {type === 'NewsArticle' && (
        <meta name="twitter:data1" value={`${readTime} min read`} />
      )}
      {type === 'NewsArticle' && (
        <meta name="author" content="Ismail Ghallou" data-react-helmet="true" />
      )}
      {type === 'NewsArticle' && (
        <meta
          name="article:published_time"
          content={datePublished}
          data-react-helmet="true"
        />
      )}

      {/* Structured data */}
      <script type="application/ld+json">
        {type === 'NewsArticle'
          ? structuredDataArticle
          : structuredDataOrganization}
      </script>

      {/* Not sure if this is still relevant as Google shut down their Google+ paltform */}
      <link rel="publisher" href={socialLinks.google} />

      {/* The title of your current page */}
      <title>{title ? `Smakosh | ${title}` : defaultTitle}</title>

      {/* Default language and direction */}
      <html lang="en" dir="ltr" />
    </Helmet>
  )
}

And I include it on each component that is meant to act like a page like so

import React from 'react'
import SEO from './SEO'

export default () => (
  <div>
    <SEO title="Home page" location="/" type="Organization" />
    <h1>Home page</h1>
  </div>
)

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 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.

You can test your structured data here

Feel free to drop your questions down in the comments section and I’ll do my best to answer them all.

Penang was way better

Thu, 06 Jun 2019 08:00:01 GMT

As promised before when I shared my experience spending one month in KL 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 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 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

Here’s a link if you want to have a look at the listing: Here

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 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!

One month in Kuala Lumpur as a remote developer

Tue, 23 Apr 2019 08:00:01 GMT

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, 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 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

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 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 and you can download them on my Unsplash account 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.

Solving hashtags problems

Sun, 14 Apr 2019 01:00:01 GMT

Photo by Jon Tyson on Unsplash

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 in order to solve it!

Ai Hashtags generates hashtags using Artificial intelligence, and here’s how it works:

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.
Hit Generate hashtags button
Select specific hashtags to copy or copy them all
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 and App Store.

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, we used ClarifAi 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 framework to implement agile software development methodology
Trello to manage my tasks and I went with a daily then weekly sprint
Developed with react Native:
- 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
- HOCs: Recompose
- HTTP Requests: axios
- Forms: formik
- Ads: react-native-admob
- Toast: react-native-simple-toast
- Upload: react-native-photo-upload
- Swiper: react-native-swiper
- Middleware: redux-thunk
- Form validation: yup
- Prettier & Eslint for linting & formatting my code
- VSCode as code editor

Feel free to download Ai Hashtags and leave your feedback on the app or down in the comments: Download Ai Hashtags

Quick tips to be prepared to go through any airport in Morocco

Mon, 08 Apr 2019 04:00:01 GMT

Here are few quick tips to go through any airport in Morocco, whether you’re a foreigner or local citizen, these tips apply for both of you, so let’s get started!

Get 4 hours earlier to the airport
Wear shoes that you can take on/off quickly
Expect that you will have to take off your belt
Once you’re in the airport, fill in this piece of paper (see image below)
Keep asking numerous people as sometimes the gate switches and the information you have on your flight ticket aren’t correct

Let me know down on the comments if I missed anything!

How To add dark mode easily with a custom React hook

Fri, 22 Mar 2019 05:35:01 GMT

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:

We will check first if the chosen theme isn’t stored on localStorage
If it exists, we will simply set it as the default theme
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!

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

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!

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

import React from 'react'
import useDarkMode from './useDarkMode'

export default () => {
  const [ theme, toggleTheme ] = useDarkMode()
  return (
    <div
      style={{
        background: theme === 'dark' ? '#000' : '#fff',
        color: theme === 'dark' ? '#fff' : '#000',
      }}
    >
      <button type="button" onClick={toggleTheme}>
        Switch theme
      </button>
    </div>
  )
}

You can find the full example here

Pixel 2 review and why Nexus 6p is a bad choice

Sat, 16 Feb 2019 10:35:01 GMT

I’ve been using the Nexus 6p for 2 years until recently as I had to upgrade to the Google Pixel 2 for various reasons which are really frustrating to a level that I highly don’t recommend buying the Nexus 6p.

I’ll walk you through the pros & cons of the Nexus 6p real quick before I move on to the Pixel 2.

Camera

Nexus 6p has a really good camera with the Google camera app built in that shots some great pictures combined with HDR, your photos will look amazing (see examples) but that uses a huge power of your battery power & your phone will end up shutting down in a short period of time.

Build quality

The build quality is good but keep in mind that it’s a big phone that you will need two hands to use otherwise your hand will eventually get tired of using it and it hardly fits on your pockets 😅.

Battery

One of the main reasons I don’t recommend buying this phone, it has battery issues which you will notice after few months of using the phone, the most frustrating thing is when it shuts down at 20% which gets really annoying over time.

Performance

Since it’s rocking the stack android, you can delete the default apps if you don’t use them and the user experience is nice & never gets slow while using it, the phone gets really hot though when you’re watching a long video or playing some games that require huge computational work.

Display

The display is a 2k LED screen with huge bezels on all sides with large ones on top & bottom.

Enough with Nexus 6p for now and let’s jump into the Google Pixel 2 now which most of my Instagram community has voted more for its review.

Keep in mind that I’m reviewing the Pixel 2 and not the Pixel 2 XL.

I’ve been using it for a couple of months so far and I’m really satisfied with my decision of getting it!

Camera

It does take amazing pictures, the portrait mode is epic and provides both the normal picture and the one with the blurring effect, it has the night sight mode that helps take good looking photos without the need to activate the flash.

Portrait mode

Night sight

Build quality

It’s a small one hand phone, light & fits right in my pocket, has rounded edges on the back unlike Nexus 6p.

I had to apply the Dbrand dragon skin to avoid getting my fingerprints all over it.

Battery

Has a 2700mAh battery that works really well and holds for a day of use while:

taking pictures
listening to music with bluetooth enabled
Data usage enabled
Instagram, Twitter, Telegram etc…

Performance

Doesn’t get hot at all even after using it for a long period of time, supports and works fine with the Google Daydream VR headset.

Display

It’s an AMOLED display with a full hd screen resolution.

Bonus

Pixel 2 is water resistant, doesn’t have an audio jack, has unlimited photo storage and will get upcoming Android updates.

Forgot to mention that both phones have a fingerprint sensor on the rear.

2018 year review

Sun, 13 Jan 2019 10:38:01 GMT

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 with my co-workers at Obytes
Cleanify:
- 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
- Get precise hashtags extracted from your pictures
- Built with: Adobe XD, React Native, ClarifAi API
- Built in less than 8 hours
Beaf
- 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 on Twitch and built in less than 24 hours
Contributed to Gatsby by building a source plugin & few starters that are available on my GitHub profile

Last but not least, I’ve earned bunch of good stuff this year:

By contributing to Gatsby, they shipped some free awesome swag
Completed the Hacktoberfest challenge, as a reward from Digital Ocean, I got some free awesome swag as well
By winning second prize of the FreeCodeCamp online hackathon, 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

One year working remotely

Tue, 18 Sep 2018 10:38:01 GMT

Remember the last time I shared with you my story when I declined the job offer as a front end developer then won the first prize at a hackathon 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 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 (css framework) | Open source
Free-videodownload (PWA & Native app)
Tomorrow Todolist (PWA) | Open source

After I got back from my trip to Istanbul, 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 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 and Abumalick 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 | Open source
SharkCloud static
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 liked 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.

From failure to launch - Hajj Hackathon

Mon, 06 Aug 2018 12:38:01 GMT

While travelling to Rabat in order to visit the Moroccan office of Obytes (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, 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), 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).

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.

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

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.

We are truly living in a simulation

Fri, 29 Jun 2018 12:06:01 GMT

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 influencers, 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.

The tech tools I use

Tue, 27 Feb 2018 16:45:01 GMT

So I thought about sharing the tools I use personally or at work, so let’s start with,

Design tools

Adobe Illustrator for logos, icons, illustrations
Adobe XD, Invision Studio or Sketch for designing user interfaces & wireframes
Adobe Photoshop for editing pictures & memes :D
Adobe After effects for editing videos (I recommend Adobe Premiere Pro for editing videos & AE to add effects).
Dribbble for inspiration and I share my work there as well as on Behance

Code

Let’s now get into the tools I use while coding:

The code editor I’m currently using is VSCode.

I share my code & look for inspirations on:

GitHub
Codepen
CodeSandbox

If I’m simply coding an interface that I might integrate into a web app I use plain html/css & vanilla js.

But if I’m working on a landing page, docs, blog or even sometimes a large web app I use:

Gatsby (highly recommended over Next js or CRA) and I deploy it on Netlify (I was & still use Jekyll sometimes for blogs but rarely)

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, Tachyons & made my own little framework called Unnamed that has over 200 stars on GitHub, but I prefer coding with vanilla CSS or CSS in JS using styled-components or CSS modules, because I enjoy styling my elements from scratch since the components are fully reusable with React.

If I’m making a web app, for the front-end I use the create-react-app boilerplate as it’s the official one from the team that made React Js but I always have to add react-router-dom or @reach/router, Redux (well not on the upcoming projects), Recompose (not needed anymore) & many other modules I use the most. So I made my own boilerplate to handle that. But recently I use one of my Gatsby starters depending on the type of the API I’m willing to request data from.

I use Git bash as my terminal when I’m on windows, iTerm2 with “oh my zsh” themes when I’m on macOS.

For the backend, I was using php/mysql which I didn’t personally like, so I switched to node js meaning that I currently use Express Js/Mongoose and Mongodb as a NoSQL database to make Restful APIs which I deploy on Heroku if it was a mvp and on a Digital Ocean droplet when it’s a fully working product. I made my personal boilerplate to speed up that process.

I sometimes use Firebase services when I’m too lazy to work on the backend.

For native apps, I use React native to build mobile apps (Ios & Android). I also have a personal boilerplate that I use to speed up the process.

Growth

For growth, I focus more on building useful products that users really need in their lives then I simply share it on this blog, Product Hunt, Hacker news, Reddit and on social media.

Setup

Laptops

MacBook Pro 2017 touchbar (belongs to the company I work for)
- Display: 13” retina screen
- CPU: 3.1 GHz Intel Core i5
- GPU: Intel Iris Plus Graphics 650 1536 MB
- Ram: 8GB LP DRR3
- SSD: 250GB
MSI GP62 Gaming laptop (Which I haven’t used since early 2018)
- MSI GP62 Leopard Pro
- CPU: i5 4210
- GPU: GeForce GTX 950M
- Ram: 8GB DDR3
- HDD: 1Tb

Gaming PC

I don’t use it anymore but here are the specs:

CPU: Intel i5 3570 @ 3.4 Ghz
GFX: Asus Nvidia Geforce GTX 660
RAM: 8GB Revenge DDR3
Motherboard: Asus H61M
SSD: None
HDD: 1 Seagate Barracuda - 500gb + 1Tb HDD
PSU: CORSAIR 550w
Case: NOX
OS: Windows 10

Equipment

Which also I don’t use anymore

Display: BenQ GL2250
Mouse: Razer DeathAdder Chroma 2016
Mouse pad: Razer large mouse pad
Keyboard: Razer Chroma X Elite
Headset: Razer Kraken Pro
Microphone: None

Phones

For Android, I’m using the Google Pixel 2 with a Dbrand dragon skin
- Android Q (10 Beta)
For iOS, I’m using the Iphone 7
- iOS 12.1.4

Previously, I was carying only a Nexus 6p which I had to stop using due to these reasons

Cameras

At the moment, I’m only carrying with me a GoPro hero 7 black edition limited edition

Ai assistant

Currently, I’m using a Google home mini

VR

Google VR 1st gen headset

Earphones

I’m using the Apple Airpods & a wired earphones when the battery runs out

Full setup with pictures can be found here.

My trip to Istanbul & why I hate traveling

Mon, 25 Dec 2017 16:45:01 GMT

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: https://get.google.com/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

I learned to never go on vacation again, stay inside my room & learn to build useful products.

Why I created Unnamed

Wed, 20 Sep 2017 16:45:01 GMT

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 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: https://unnamed.smakosh.com

On github: https://github.com/smakosh/unnamed-css-framework

Build your perceptron neural net from scratch

Sat, 12 Aug 2017 16:45:01 GMT

“ 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 https://kaggle.com

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 & Kaggle

First time getting first prize at a hackathon

Sat, 08 Jul 2017 16:45:01 GMT

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, I was invited once again to participate in a great hackathon organized by Lematin 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, 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 — https://github.com/smakosh/Smartshop — 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

As a conclusion, what I really learned during this hackathon is to never give up and just do your best & go beyond your obstacles!!

Getting my first job offer without a degree at a startup

Wed, 07 Jun 2017 16:45:01 GMT

It all started on facebook, I was reading Tech crunch news until a notification popped up, my friend Med Bouasria tagged me on a job announcement on a facebook post of Hidden Founders, 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.

HPS Hackathon

Mon, 10 Apr 2017 16:45:01 GMT

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:

How I learned Design & Dev in a year & half

Fri, 10 Mar 2017 16:45:01 GMT

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.
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, http://singaporeview.com he then paid me more to remove my copyrights but still you can find my name on the style file :D http://singaporeview.com/wp-content/themes/kgs/style.css

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://www.behance.net/gallery/38505463/Catch-it-10-My-first-android-mobile-game.

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, an image resizer etc…

While learning back-end dev, I made some works too like this responsive website 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.

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”

Never work for free

Thu, 02 Mar 2017 16:45:01 GMT

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 & Instagram twice : First & Second.

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.

About me so far...

Fri, 02 Dec 2016 16:45:01 GMT

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 friends’ dad. 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 to think how to figure out the way out like Prince of Persia, Assassin’s Creed & the Tomb Raider trilogies etc…

Primary school

I was a typical nerd since primary school, I was 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 was always eating some home made or stuff they bought early morning before coming to school, I did get bullied but nobody dared to fight with me because I used to always win the fights.

Mid school and my first love

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 and I was really a good player, especially in the streets, I liked to instantly try out the tricks I learned from YouTube.

Here’s a picture of some medals I got from some tournaments I & my friends won on Football & Basketball.

During middle school, I started exploring more activities like drawing, graffiti, biking, skateboarding & watching Anime and 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.

It was also during mid school that I fell in love with a beautiful girl who rejected me and we never spoke again since then, I’m a straight guy but I’m not interested anymore in those relationships and I’m not thinking about getting married or making a family.

Gaming

During the last year of high school I got a gaming pc that my dad bought for me since I’ve been begging him since middle school, unfortunately it made me get addicted to gaming and as a result I graduated from high school with a bad mark.

I didn’t get depressed or even wasted any time thinking what should I do as 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, 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 that 2 years after high school, I still remember most of the teachers laughing at me when I publicly state that you can get 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 http://smakosh.com & more down bellow:

Behance: https://www.behance.net/ismail16sm9991
GitHub: https://github.com/smakosh
Instagram: https://www.instagram.com/smakosh19
Twitter: https://twitter.com/smakosh
Facebook: https://www.facebook.com/Ismailghallou (I’m not on Facebook anymore)
YouTube: https://www.youtube.com/user/smakoshthegamer
Dribbble: https://dribbble.com/smakosh
LinkedIn: https://www.linkedin.com/in/ismail-ghallou-630149122
Codepen: https://codepen.io/Smakosh

And if you want to support me on Patreon, That would be really helpful :D https://www.patreon.com/smakosh