Image for post
Image for post
GraphQl queries & mutations mind map — by (Dina Khaled)

Hey, Did you dreamed one day as a Front end engineer to write your API response with yourself without a long conversation with the Back end engineer to agree on every API response schema?

FE: could you please retrieve the ID for me here? 👀
BE: oh, you need that, okay I will 👌

FE: did you change the API name? I got a not found on my request 🥴
BE: Oh, my bad yes it’s changed yesterday 🤦

No more discussions like that with GraphQl 🎇

What is GraphQl?

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. …

Image for post
Image for post

“Accessibility” generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.

Improving the accessibility with DOM


  • Alt attribute =>is a text that describes the content of the image, this helps in cases where the image fails to load, It’s also used by search engines to understand what an image contains to include it in search results.
<img alt="Dina's profile picture" src="PATH" />
  • In situations when an image is already explained with text content the img still needs an alt attribute, but it can be set to an empty string alt=””.

Image for post
Image for post

We have a series of articles about Getting started with Redux, the links at the end.

Why should we use middleware?

  1. If we need to communicate with an external API in react, the data fetching can take a while because the promise needs to resolve. Once the promise resolves, you want to dispatch a delayed action to update the state in the Redux store
  2. the middleware intercepts the action object before Reducer receives it and gives the functionality to perform additional actions.
  3. That’s where asynchronous action libraries such as Redux Saga, Redux Thunk come into play.

How it works?

[ Action ] <-> [ Middleware ] <-> [ Dispatcher…

Image for post
Image for post

NOTE: If you don’t hear before about BEM please read the attached link below before you start -> BEM for beginner

Hello everyone 👋

Today we will talking about how to implement BEM methodology with frameworks and I will start with Angular

Angular allows you to implement style encapsulation concept, so you might wonder if it is still necessary to use BEM since Angular allows scoped styling based on every component ?!

The answer is yes it also increases the re-usability concept in Angular
now how to do that?

we will imagine that we will build a new website so i need to prepare a component for the buttons hold all it’s styles like ( default— primary — secondary- outline …. ) and so on till cover all the buttons cases on my…

Image for post
Image for post
Introduction to sass

You may hear a lot about sass and many people told you that when you learn sass it will be your magic wand to style your website dynamically! that’s true and easy to learn come with me …🚶

Why SASS and what is it?

  • we need to use logic into our style
  • browsers are understanding only normal CSS files

simply this is the problem which SASS came to solve it.

SASS (Syntactically Awesome Stylesheets) is a pre-processor for CSS which introduces to you programming logic in a style dress that’s amazing right!

so you can use sass features and then it compiled to CSS to be understandable through the…


Dina Elghndour

Frontend ِEngineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store