DEV Community: yashboura303

Design responsive website with little or no media queires.

yashboura303 — Fri, 16 Apr 2021 07:33:04 +0000

First of all, let's understand why do you need a responsive website.

The goal of responsive design is to make the user experience as good as possible across those devices, even though the design may look slightly different. For instance, you may present information in one column on a smartphone and two columns on a laptop, but the branding and content will remain exactly the same.

Creating a great user experience is essential to any business’s longevity. And believe it or not, your website is an extension of your physical business. Additionally, Google considers whether or not a website is mobile-friendly as part of its search engine algorithms.

The following are the ways to have responsive design without media queries:-

- Setting minimum and maximum values in CSS

The min() function lets you set the smallest value from a list of comma-separated expressions as the value of a CSS property value. This function proves really useful in terms of helping text sizes to properly scale across different screen sizes, like never letting fluid type drop below a legible font size. Similarly, the max() function lets you set the largest value from a list of comma-separated expressions as the value of a CSS property value.

Example:

body {
  font-size: max(1em, 12px);
}
div{
  font-size: min(14x, 22px);
}

- Use Clamp

CSS clamp() offers the best of CSS min() and CSS max() combined. CSS clamp() essentially clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Example:

body {
  font-size : clamp(1rem, 40px, 4rem)
}

- Use responsive units for font sizes

The way you start to make your site fluid is by using percentages for your height and width instead of static pixel sizes.
In CSS, you can determine sizes or lengths of elements using various units of measurements, and the most used units of measurements includes: px, em, rem, %, vw, and vh.

The text size can be set with a vw unit, which means the "viewport width".That way the text size will follow the size of the browser window.Note that relative units are more responsive compared to absolute units.

This way when someone resizes their browser window, your HTML tags will shrink or expand accordingly instead of breaking the page.
The following will scale based on the percentage of your screen.

Example:

div{
   width: 25%;
   height: 50%;
}

- Use picture tag

Did you know that in modern browsers you can change an image source depending on your page width? That’s what srcset is made for!
HTML offers the element that allows us specify the exact image resource that will be rendered based on the media query we add.

Example:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg">
</picture>

Introduction to Redux-Saga

yashboura303 — Sat, 05 Dec 2020 18:27:04 +0000

Recently I joined an internship, the project I was assigned was written with redux-saga however, I had only known redux-thunk so I read some documentation and watched some videos on the saga, this article is to explain redux-saga in my own and easy way.

What is Redux-Saga and why to use it if we have Redux Thunk?

Redux Saga is a redux middleware that allows you to manage your side effects (for eg. reaching out to the network) just like Redux Thunk.
Redux Saga offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.

Know Generator Function before knowing Redux saga

Redux Saga uses generator functions a lot. Generator functions allow us to pause our functions and wait for a process to finish, which is similar to the thought process behind resolving promises.

function* myGenerator() {
     const result = yield myAsyncFunc1()
     yield myAsyncFunc2(result)
}

We will look at a high-level overview of how we would plan out these sagas within our app’s architecture.

The Root Saga

Similar to how reducers in Redux are organized in that we have a root reducer which combines other reducers, sagas are organized starting by the root saga.

function* rootSaga() {
  yield all([
    menuSaga(),
    checkoutSaga(),
    userSaga()
  ])
}

Let’s first focus on the things that might jump out at you.
rootSaga is our base saga in the chain. It is the saga that gets passed to sagaMiddleware.run(rootSaga). menuSaga, checkoutSaga, and userSaga are what we call slice sagas. Each handles one section (or slice) of our saga tree.

all() is what redux-saga refers to as an effect creator. These are essentially functions that we use to make our sagas (along with our generator functions) work together. Each effect creator returns an object (called an effect) that is used by the redux-saga middleware. You should note the naming similarity to Redux actions and action creators.
all() is an effect creator, which tells the saga to run all sagas passed to it concurrently and to wait for them all to complete. We pass an array of sagas that encapsulates our domain logic.

Watcher Sagas

Now let’s look at the basic structure for one of our sub-sagas.
import { put, takeLatest } from 'redux-saga/effects'

function* fetchMenuHandler() {
  try {
    // Logic to fetch menu from API
  } catch (error) {
    yield put(logError(error))
  }
}
function* menuSaga() {
  yield takeLatest('FETCH_MENU_REQUESTED', fetchMenuHandler)
}

Here we see our menuSaga, one of our slice sagas from before. It’s listening for different action types that are dispatching to the store. Watcher sagas listen for actions and trigger handler sagas.
We wrap the body of our handler functions with try/catch blocks so that we can handle any errors that might occur during our asynchronous processes. Here we dispatch a separate action using put() to notify our store of any errors. put() is basically the redux-saga equivalent of the dispatch method from Redux.

Let’s add some logic to fetchMenuHandler.

function* fetchMenuHandler() {
  try {
    const menu = yield call(myApi.fetchMenu)
    yield put({ type: 'MENU_FETCH_SUCCEEDED', payload: { menu } ))
  } catch (error) {
    yield put(logError(error))
  }
}

We are going to use our HTTP client to make a request to our menu data API. Because we need to call a separate asynchronous function (not an action), we use call(). If we needed to pass any arguments, we would pass them as subsequent arguments to call() — i.e. call(mApi.fetchMenu, authToken). Our generator function fetchMenuHandler uses yield to pause itself while it waits for myApi.fetchMenu to get a response. Afterwards, we dispatch another action with put() to render our menu for the user.
OK, let’s put these concepts together and make another sub-saga — checkoutSaga.

import { put, select, takeLatest } from 'redux-saga/effects'
function* itemAddedToBasketHandler(action) {
  try {
    const { item } = action.payload
    const onSaleItems = yield select(onSaleItemsSelector)
    const totalPrice = yield select(totalPriceSelector)
    if (onSaleItems.includes(item)) {
      yield put({ type: 'SALE_REACHED' })
    }
    if ((totalPrice + item.price) >= minimumOrderValue) {
      yield put({ type: 'MINIMUM_ORDER_VALUE_REACHED' })
    }
  } catch (error) {
    yield put(logError(error))
  }
}
function* checkoutSaga() {
  yield takeLatest('ITEM_ADDED_TO_BASKET', itemAddedToBasketHandler)
}

When an item is added to the basket, you can imagine that several checks and verifications need to be made. Here we are checking if the user has become eligible for any sales from adding an item or if the user has reached the minimum order value needed to place an order. Remember, Redux Saga is a tool for us to handle side effects. It shouldn’t necessarily be used to house the logic which actually adds an item to the basket. We would use a reducer for that, because this is what the much simpler reducer pattern is perfectly fitted to do.
Image for post

High level visual of the saga flow
We are making use of a new effect here — select(). Select is passed a selector and will retrieve that piece of the Redux store, right from inside our saga! Note that we can retrieve any part of the store from within our sagas, which is super useful when you depend on multiple contexts within one saga.

What’s a selector? A selector is a common design pattern utilized in Redux where we create a function which is passed the state and simply returns a small piece of that state. For example:

const onSaleItemsSelector = state => state.onSaleItems
const basketSelector = state => state.basket
const totalPriceSelector = state => basketSelector(state).totalPrice
Selectors serve as a reliable and consistent way to reach in and grab a piece of our global state.

Conclusion

Redux Saga is an excellent framework for managing the various changes and side effects that will occur in our applications. It offers very useful helper methods, called effects, which allow us to dispatch actions, retrieve pieces of the state, and much more.

Guide to internships

yashboura303 — Thu, 12 Nov 2020 17:44:10 +0000

Who am I?

I am a final year student of computer science engineering at Mumbai University. I have done 3 internships and would like you to give some tips on how to grab the same.

Get comfortable in first year

Don't try too hard for an internship in the beginning. First, get used to your daily college classes, get familiar with exam schedules, and most importantly make friends. But if you are new to coding, then start learning any language (would recommend python) and keep practicing it regularly till you get a hold of it.

Explore your domain

By the 2nd year, you'll be familiar with your daily college schedule and have so much time. Use your time to explore various domains in computer science like FrontEnd, BackEnd, Full-Stack, ML & AI, Cybersecurity, etc. Watch good youtube channels, search & read a lot and choose one domain in which you would like to grab an internship.
Check out The Odin Project (a free online coding Bootcamp) if you're into web development

Start making projects

Once you have chosen a domain, start making projects in it. Simply make a clone of existing projects or build anything which you can present and requires some challenges that you need to learn on the go. Host them to Github, Netlify, or Heroku and every project should be unique in some way. A portfolio website is a must for web developers!

Make a resume and apply to internship platforms

You should have at least two good projects to showcase and explain. Since you don't have any internship experience, projects will be the only means to judge you so focus heavily on it. Build a one-page resume mentioning your projects, education details, your achievements related to your domains and technical committees you have worked in. Projects hosted publicly would be great and a good CGPA would help too. Apply on various platforms, my favorites are LinkedIn and Internshala. It would take a lot of time and luck to get your first call, have patience, and keep updating your resume with good projects.

You have done it!

Once you grab your first internship, it would be easier to get more internships later and you would be more experienced on how to improve your profile further. Join internship as a learning opportunity and most of the time you'll be doing things the first time so don't hesitate to ask for a guide and help from the intern manager.