Photo by Claudio Schwarz | @purzlbaum on Unsplash

In the middle of 2020, I’ve got an interview suggestion from one of the German fast-growing startups to join their team. Once we started the interview, I’ve got the strict condition, “You need to relocate for this position”. I am the kind of person, who loves his country despite all and planing to live life there. But on the other hand, it’s Germany, a growing startup with a lot of new opportunities, connections, and of course, people. It’s a chance to get a blue card, travel through Europe without a visa and restrictions. When again you can get that kind…


Manage and validate environmental variables with artisan console commands, environmental rules, and facades

Photo by Christopher Gower on Unsplash

Github: https://github.com/lionix-team/envclient

Packagist: https://packagist.org/packages/lionix/envclient

Installation

composer require lionix/envclient

Artisan commands

SignatureDescriptionenv:get {key}Prints .env variable valueenv:set {key} {value}Sets .env variable if validation rules are passedenv:checkCheck all env variables for validnessenv:emptyPrint empty .env variablesmake:envrule {name}Create a new .env validation rules

Basic usage

Set an environment variable using env:set artisan command.

php artisan env:set EXAMPLE_ENV_VARIABLE "example value"

The command will modify your environment file by replacing or adding the given key to it.

Validate environment variables

If you want to apply validation rules to environmental variables before env:set command will modify the file you will have to publish command package configuration files.

php artisan vendor:publish --provider="Lionix\EnvClient\Providers\EnvClientServiceProvider" --tag="config"

The command will create…


vue-image-markup will provide you to edit uploaded images easily and save it.

GitHub: https://github.com/lionix-team/vue-image-markup

NPM: https://www.npmjs.com/package/vue-image-markup

DEMO: https://image-markup.lionix-team.com/

Installation

npm i vue-image-markup

or

yarn add vue-image-markup

Usage

First import the Editor component inside your Vue component.

import Editor from 'vue-image-markup';

Then you’ll be able to use the Editor component.

Example:

You must give your editor component ref, which will help you to call the functions to set editor mode, clean objects or undo/redo your changes.

<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>mounted() {
$this.$refs.editor.set(this.editor.mode,this.editor.options);
}

canvasWidth prop will set editor width

canvasHeight prop will set editor height

ref with the help of ref, you will…


Make complex global route middleware logic look easy and readable!

GitHub: https://github.com/lionix-team/vue-route-middleware

NPM: https://www.npmjs.com/package/vue-route-middleware

Installation:

npm i vue-route-middleware

Basic Usage:

Set middleware meta key to your route and add our component to any vue router guard hook.

import VueRouteMiddleware from 'vue-route-middleware';...const Router = new VueRouter({    mode: 'history',    routes: [{    path: '/dashboard',    name: 'Dashboard',    component: Dashboard,    meta: {        middleware: (to, from, next) => {            let auth = fakeUser.isLogged();            if(!auth){            next({ name: 'Login' });        }    }}}]});...Router.beforeEach(VueRouteMiddleware());

NOTICE: Middleware function will retrieve all the variables normally passed to the router guards Example: (to, from, next) in case of beforeEach


Photo by Priscilla Du Preez on Unsplash

LazyLoad media elements with react-lazy-props and IntersectionObserver

GitHub: https://github.com/lionix-team/react-lazy-props

NPM: https://www.npmjs.com/package/react-lazy-props

Installation

npm i react-lazy-props

Usage

Wrap the elements you want to lazyload with LazyProps component
It will unload media before components were mounted and will load them only when they are observed.

Example:

import LazyProps from "react-lazy-props";
...
return (
<LazyProps>
<div>
<h2 style={{backgroundImage: `url("${backgroundImage}")`}}>Title</h2>
<p>Some Images</p>
<img src="example.jpg" srcSet={"example2x.jpg 2x", "example3x.jpg 3x"} />
<video src="https://www.example.com/video.ogg" />
</div>
</LazyProps>
);

Unloading process:

LazyProps renders its child components with props and styles replaced according to the map:

  • src to data-src
  • srcSet to data-srcset
  • backgroundImage to data-bg-src

HTML Output (Unloaded):

<div> <h2 data-bg-src="url('background-image.png')">Title</h2> <p>Some Images</p> <img data-src="example.jpg" data-srcset="example2x.jpg 2x…


Laravel Pagination with ReactJS (customizable)

react-laravel-paginex will provide you the ability to easily create pagination from Laravel Pagination object.

Photo by BENCE BOROS on Unsplash

GitHub: https://github.com/lionix-team/react-laravel-paginex

NPM: https://www.npmjs.com/package/react-laravel-paginex

Installation

npm i react-laravel-paginex

or

yarn add react-laravel-paginex

Usage

First import the Pagination component inside your React component.

import {Pagination} from 'react-laravel-paginex'

Then you’ll be able to use pagination component.

Example:

<Pagination changePage="getData" data="data"/>

changePage prop will run the function ( in our case is getData()) when new page selected.

getData() function example with axios.

getData=(data)=>{   axios.get('getDataEndpoint?page=' + data.page).then(response => {        this.setState({data:data});   });
}

data object must be Laravel Pagination object.

Example:

{ current_page: 1 data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of…


Vue-Native

Vue-Native application starter kit.

Github: https://github.com/lionix-team/vue-native-starter-kit

Requirements

Node>=8.4.*
Android SDK>=30(for Android apps)

For start development, you need

git clone https://github.com/GHarutyunyan/vue-native-starter-kit.git
npm install
set REACT_NATIVE_PACKAGER_HOSTNAME='your-ip-address-or-hostname'
npm start

For the environment, we suggesting to use Expo.io and Genymotion emulator.

Happy Coding!

Credits


vue-laravel-paginex will provide you the ability to easily create pagination from Laravel Pagination object.

Photo by Arno Senoner on Unsplash

Github: https://github.com/lionix-team/vue-laravel-paginex

Npm: https://www.npmjs.com/package/vue-laravel-paginex

Installation

npm i vue-laravel-paginex

or

yarn add vue-laravel-paginex

Usage

First import the Pagination component inside your Vue component.

import Pagination from 'vue-laravel-paginex'

and define it

Vue.component('Pagination', Pagination)

Then you’ll be able to use the pagination component.

Example:

<Pagination :changePage="getData" :data="data"/>

:changePage prop will run the function ( in our case is getData()) when new page selected.

getData() function example with vue-resource.

methods: {
get(page) {
this.$http.get('getDataEndpoint?page=' + page).then(response => {
this.data = response.data
})
}
}

this.data object must be Laravel Pagination object.

Example:

{…


This package will provide you an interface from where you can manage all your pages metadata separately and get dynamically changing content.

Photo by Merakist on Unsplash

Github: https://github.com/lionix-team/seo-manager

Packagist: https://packagist.org/packages/lionix/seo-manager

lionix/seo-manager package will provide you an interface from where you can manage all your pages metadata separately and get dynamically changing content. Let’s see how.

Update:

Localization: https://medium.com/@karakhanyansa/localization-for-seo-manager-package-for-laravel-framework-6ac4aba7bbc0

Installation

You can install the package via composer:

composer require lionix/seo-manager

Publishing package files

php artisan vendor:publish --provider="Lionix\SeoManager\SeoManagerServiceProvider"

This command will create config/seo-manager.php file and will copy package assets directory to public/vendor/lionix.

Configurations

In config/seo-manager.php file you can do the following configurations:

return [
/**
* Database table name where your manager data will be stored
*/
'database' => [
'table' => 'seo_manager'
],
/** * Path where your eloquent…

Sergey Karakhanyan

CEO @ lionix

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