Home

Mehri Daei

creative

I have been working as front End developer since 2017. I would like to share the challenges that I've experienced during this journey and also share some related documents and course titles along with all other things I have learned these years.

people around me know me as happy person who loves to travel, listen the music. I started my career as a trainee front End developer in 2017 with an Iranian company named Tiara. for pursuing my goals and dreams I left Tiara after 6 months and have started to work with international companies named ClubCollect and TalentBridge. currently, I am working here as an official mid-level front End developer who loves to learn new topics and new technologies in my field. already, I have skills in HTML, CSS, Pug, Bootstrap, Sass, JS, Vue, React and etc. I am always looking for new challenges to improve my knowledge.

A Front End Developer is Aware

What should we know as front end developer? this article helps you find out them.

Become a Front-End Master in 2020 With These 10 Project Ideas

This article will help you to define a project to practice and improve your skills.

Build a 100% Serverless REST API with Firebase Functions & FaunaDB

Have you ever think about serverless architecture? how should we use it?

Weaving One Element Over and Under Another Element

For some of the developers is hard to create creative shape and effects. this article helps create a nice one.

Introducing Sass Modules

Sass has a feature named a module system. it is really useful, learn more about it.

Why Progressive Web Apps Are The Future of Mobile Web

Progressive web App works better and has better performance than mobile site.

Adaptive Photo Layout with Flexbox

Experience making photo layout... it is beautiful and simple.

Link Underlines That Animate Into Block Backgrounds

It is cool :) by using this effect your text is not boring anymore.

A Comparison of Static Form Providers

Do you have static website and also need to have a form? there are a lot of options for you!

Simple User Login in a Vue.js Web Application

A login form will help you to see another aspect of front end development.check it :)

Vue.js Login Component with Spinner

It is a practice for the login page. It is the first step of being professional in development.

Why "This" in JavaScript

This link will help you to understand concept of "this" better. improve your skills in java script.This link will help you to understand the concept of "this" better. improve your skills in javascript.

All the fundamental React.js concepts, jammed

This article is not a typical introduction of React.js , it is a practical introduction to fundamental of React.js.

Documentation

All of us have faced some challenges that seem to be simple but it is tough to find a solution for them. Here I shared the tricks I have taken.

Building a Custom Sitemap for Your Gatsby.js Site

One of the topics that are growing fast these days, is Building static sites with react.js using Gastsby.js.

How to Learn React — A roadmap from beginner to advanced

Do you want to start learning React? read this amazing article!

Vue.js - Basic HTTP Authentication Tutorial & Example

HTTP Authentication is very useful and we use authentication for login staff and etc.

06: Using SVG – SVG as background-image

SVG is very useful for developing. see how we can use it as a background image.

Filtering Lists Dynamically With Vue on the Server Side is Easier Than You’d Think

See how you can filter a list with vue on server side!

Implementing Infinite Scrolling

It is a good practice... Try it :)

Infinite Scroll Tutorial: Implementation, Best Practices and Examples

check this link to see some examples for infinite scrolling.

Create a Simple Todo app in React

Here you can find a roadmap of creating a ToDo list step by step. It will be a good practice for React.

Code Formatting with Prettier in Visual Studio Code

Prettier helps you to format your code. learn how we can set up it :)

Closures and Currying in JavaScript

The closure is a useful concept in javascript while it is confusing too! check this link to learn more...

Implementing a Scroll Based Animation with JavaScript

Go through how you can make your site more attractive!

Create a Bouncing Page Loader with CSS3 Animations

Do you want to know more about css animation and practice, go ahead, check it.

Implementing Smooth Scrolling in React

Smooth scrolling can make your site more attractive and a user can have a better experience!

function thisIsYourLife() {

while (time == often) {

doWhatYouLove();

};

goOut () ;

console.log('LIFE IS SHORT');

live(yourDreams);

wear(yourPassion);

} ;

Create Smooth, Performant Transitions with React Transition Group v2

By using React transition group you can write your transition element with a neat, all-new API — and no hacks insight.

React Context for State Management

Redus is a famous and popular tool for state management but some times is over skill, so in these cases, you can use React Context API.

Modern JavaScript Tooling with React

By watching this course you can make a powerful boilerplate project. also, you can understand the purpose of each tool that is used.

VR Applications using React 360

Do you think about the creation of 3D and VR experiences? In this course, you will see how to use React 360 to create amazing 3D & VR experiences.

Immutable JavaScript Data Structures with Immer

If you want to make your code easier to reason about and less prone to bugs, you can use Immutable data structures.see how can you deal with it!

Learn ES6 (ECMAScript 2015)

these days a lot of Front-End libraries are based on Javascript and ES6. check this course to become familiar with ES6 :).

Simplify React Apps with React Hooks

In this course, you can see the process of refactoring a typical class component to a simpler function component. You’ll look at state, side effects and more!

Reusable State and Effects with React Hooks

Hooks help you to add state and effects to a function component. In this course, the concepts of React hooks are introduced.

The Beginner's Guide to React

In this course, a smart component-based JavaScript library is introduced. It can seriously simplify your work.

Shareable Custom Hooks in React

With hooks, you can simplify using core features like stateful logic and use Effect for side effects. In this course, you will refactor a component to use a custom hook.

Complete React Tutorial (with Redux)

In this course, you can find all the basics of React, from the ground up, right through to creating full SPA's using Create React App, the React Router (v4) and Redux.

How to Contribute to a Project on GitHub

contributing open source is not really simple and some times it will be tricky...So check this link to learn tricks for contributing to projects.

Intro to Vue.js

For sure one of the best course that I've watched is vuemastery... enjoy it :)

Courses & videos

Here you can find some courses and videos. I tried to share free videos.

PWA Tutorial for Beginners

PWA (Progressive Web Apps) is one of the most talked-about technology shifts in the web and has gained unparalleled momentum among the practitioners in the IT world.

GraphQL Data in React with Apollo Client

This course is the best for graphQL newbies and ofcourse you should have basic understanding of React.

Develop Basic Web Apps with Vue.js

Vue.js is one of the best Java script libraries with amazing abilities. In this course you will gain a basic understanding of developing with Vue.js.

Introduction to MDX

Do you want to write .jsx in your Markdown documents? check this link :)

Implementing Authentication in Vue with AWS Amplify

For sure, one of the most important deeds in development is Authentication. Walk through creating a new authentication service in AWS Amplify.

Integration test a Vue component with vue-testing-library

In this course, you learn how to write some integration tests for counter components by using vue-testing-library and Jest.

Deploying a Vue Application to AWS Using GitHub & the Amplify Console

Do you want to deploy and host a vue application on AWS by using Amplify console? go ahead check this link:)

Convert SCSS (Sass) to CSS-in-JS

Css-in-js generate unique class names when styles are converted to css. Css-in-js helps you to think about styles on a component level.

State Monad in JavaScript

Walk through state implementation provided by crock. Crock is a library that will help you deal with stateful computation.

Asynchronous Programming: The End of The Loop

Thinking about writing programs that accept user input, run animation and send a request over the same period.

Maintainable CSS using TypeStyle

Walk through css concepts like css properties, key frames, pseduo-states and represent them in your JavaScript code by using Type style.

Design Systems with React and Typescript in Storybook

If you want to reuse your components in different combinations and ensure a consistent look and feel throughout all your screens, go ahead...

Practical Git for Everyday Professional Use

If you are a modern web developer or you want to become a web developer, you must know that one of the requirements of this profession is Git.

function thisIsYourLife() {

const have = (opportunities) => {

(function(){

seize(opportunities);

//some opportunities only come once seize them.

})();

stop(overAnalysis);

console.log('LIFE IS SIMPLE');

console.log('ALL EMOTIONS ARE BEAUTIFUL');

} ;

Philip Poots

VP Engineering of clubcollect

Mehri is a model employee. She is conscientious and hard-working and carries out even the smallest task with the required care and attention. Whether it is offering feedback on user experience, suggesting improvements to the user interface, coding up wireframes or dealing with gnarly CSS bugs, Mehri approaches her work with professionalism, energy and a good attitude.She regularly translates wireframes and UI mockups into code or writes extensions to the UI library in HTML and CSS. She is also confident and keen to learn new technologies, applying herself to JavaScript and Vue.js.In short, Mehri is someone you can trust, and she is a pleasure to work with.