Image for post
Image for post
Next.js + Redux Setup

Next.js is awesome library for SSR(Server Side Rendering). We are developing our website with strapi and Next.js.

So, We wanted to use redux in Next.js project. Setup is easy but after redux setup, “getInitialProps” method stopped working for pages.

We did research on that and found out solution for it. Basically, we had to overwrite “App” component from Next.js.

To overwrite “App” component from Next.js, you would require to create “_app.js” file. Here it is.

_app.js

And now, getInitialProps method should call and you’ll get store in the method. Checkout index.js page.

index page (index.js)

Cool, now you you can leverage the power of redux and next.js both in our Next application.🔥🔥🔥

If you enjoyed reading this blog post, please click on the clap button below! ❤️👇

Follow RadicalLoop on Twitter, Facebook. 🚀


Image for post
Image for post

Laravel Mix is a wrapper around Webpack. Webpack has many options/configurations and little hard to configure. Here “Laravel Mix” provides huge help. Laravel Mix is easy to use and configure.

Why do you need Laravel Mix?
Let’s suppose you want to run your app on local sub-domain like http://dev.example.com for development, and you only want to watchthe file changes, without necessarily using hot reloading. The create-react-app (https://github.com/facebook/create-react-app) does not provide ability towatchchanges. It is the perfect case where you can use Laravel Mix .

Let’s see how to setup React with hot reloading using Laravel Mix.

#Install React

npm install --save-dev react…


Running multiple processes in background

Image for post
Image for post

In PHP 7.x, now we have phthread extension available to create a new thread and divide your long task in multi thread to complete it faster.

But what if you don’t have phthread extension on your server?

You will find your question answered here!

You can spawn multi processes, also know as parallel processes to complete a long task. For example, you want to send bulk 100k+ emails from application, this is the best case where you can use multi processing with PHP.

There is a component(library) “The Process Component” in Symfony which you can utilised in your PHP project…


Image for post
Image for post
Music & Productivity (www.unsplash.com)

Music is an expressive form of art, an accessible vibe no matter wherever you are! It is an entertaining resource to optimize the boring. 🎵

Speaking of which, let me ask y’all, If you can spare a minute out of your tasks to write me a line or two about your Thoughts on “Music & Productivity”?

How exactly does music help boost your mood and enhance your performance?
— Does it help push us to be more efficient at workplace? 🤔

I carried out a fun one minute task for my colleagues, asking them the same question. …


Semantic UI is a front-end development framework that is used to create beautiful, responsive layouts using easy-looking HTML.

Recently in one of our clients’ projects, we required to use Semantic UI + LESS with React. I will try to describe here what we did.

Let’s create a React project first.

npm create react-app my-app
cd my-app
npm start

Now let’s add Semantic UI with .less files.

First, add gulp.

npm install -g gulp

Install Semantic UI with npm

npm install semantic-ui --save-dev

It will ask which components you want to install. Check below screen.

Image for post
Image for post

Choose first option “Automatic (Use default…


Recently Laravel dd() function seems to have stopped working properly in latest Chrome. The dump does not render output properly. It looks like below:

Image for post
Image for post

I found a workaround here. Seems Chrome renders errors as HTML. To use this workaround in Laravel, just create a helper function and include in composer.json

> helpers.php (your_project/helpers.php)

> composer.json

Then run the command:

composer dump-autoload

That’s it! Now use _dd($data) function instead of dd($data).

Happy debugging!

Any questions or suggestions? please comment!

Follow RadicalLoop on Twitter, Facebook. 🚀


Sometimes we require to do bulk insert/update/delete operation in database, or chained database operations, and if any exception occurs at any step, it should not perform any database operation in the chain.

“Transactions” gives us power to commit a group of database operations, like bulk insert, or rollback the entire transaction if any error occurs.

Laravel provides very easy API for Transaction. Recently, we needed to parse multiple CSV files having around 50k records each, where it should delete all records first and then insert all records in database.

Laravel provides DB::beginTransaction() method to begin transaction and within try —…


Recently, while we were developing a new Laravel package, we wanted to check and ensure that everything works as expected in an “actual” Laravel project.

While developing the package, we need a quick way to check functionality.

To do so, follow below steps:
1) Add your package in Laravel project: Let’s name it “mypackage”, add it to root directory of your project.

2) Add package “repositories” block in your composer.json. For general information on how to declare repositories, please refer to the composer documentation.

composer.json

{
....
"repositories": { "dev-package": { "type": "path", "url": "mypackage", // Path to your package…


It is generally advisable to download a file with a url call, or submitting a form, instead of with Ajax. Because Ajax can not handle file downloads from server.

However, in case we still need to do it, we can use Blob.

In this post, we will see how to download a CSV file using Ajax / HTTP Service call in Angular 4.

Note: Although we are using Angular 4 in this example, this method actually works with just any Javascript code, be it vanilla Javascript or jQuery.

Let’s begin.

The TypeScript code:

let postData = [ { name …


Full Calendar is an awesome jQuery plugin which you may have required to integrate in your project.

In this post we will see how to integrate Full Calendar in an Angular 4 project.

Okay, first we need to include jQuery in our Angular 4 project:

npm install jquery --save
npm install @types/jquery --save

Great, now let’s install Full Calendar:

npm install fullcalendar --save

Add fullcalendar.min.js in scripts array of .angular-cli.json file

"scripts": [
"../node_modules/fullcalendar/dist/fullcalendar.min.js"
],

Now, let’s create a directive to use Full Calendar.

import { Directive, Input, AfterViewInit, ElementRef } from '@angular/core';
import * as $ from 'jquery';
@Directive({…

RadicalLoop

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