DEV Community: Soso Gvritishvili

Vue, Amsterdam, Rock & Roll.

Soso Gvritishvili — Mon, 13 Feb 2023 07:44:33 +0000

Amsterdam

First of all, it was my first visit to such a beautiful city, which is equally great for families, young and old people, with a lot of places for rest, active life, cultural opportunities, and great green parks. A few years ago I visited Rotterdam and I had the same feeling, but Amsterdam is a different story, it gave me a positive mood for the first Vuejs Conference Day. As you now understand the reason for visiting Amsterdam was 2 days Vuejs conference.

Conference days.

Have you ever listened to live music at tech conferences? no? Me neither, it was insane, and at that moment, I realized that I was in the rightest place in the world. And it was just beginning, after, we were listening to real Rock and roll with chuck berry.

// Detect dark theme var iframe = document.getElementById('tweet-1623630115232940035-293'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1623630115232940035&theme=dark" }

Let’s go for some “Vue talks”. First of all, it is worth visiting Vue Amsterdam. If you like team sports, for example, football or hockey, you can understand the difference between watching from the stadium and TV, or maybe you like theatre? Here is the same story can’t explain it in a different way. Creators, and collaborators, are like actors on tv, not real, but at conferences, you can see them and talk with them. It may change your mind, they are ordinary people without special superhero power… hmmm maybe you also can be like that? You just have to want :)

I want to highlight Vite, which made our life Better, Faster, Stronger. While the last talk of the first day, I don’t remember whom, but a very interesting topic was mentioned, one of Vite core members said that he never contribute to open source in his 20-year career as a developer. But for now, he is a core member and making a great job for us. I’m sure this should be an example to me and others that we can all improve the world of programming. Maybe not today or tomorrow but sooner or later we can all contribute to the common cause, and exchange experience and knowledge.

Please do not judge the photographer and models, we were just enjoying delicious food, thanks to the chefs, really good tastes.

At the conference, you also could see many sponsors’ merchandise tables with some souvenir stickers, etc. Most of them you can see in the first photo of this post. Most of the presented companies were Vjue.js related.

Afterparty was with beer, wine, dance, and many positive emotions.

// Detect dark theme var iframe = document.getElementById('tweet-1624115540334608400-211'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1624115540334608400&theme=dark" }

So we are Flightradar24 and I am Frontend (Vue.js) developer here, pretty sure you used our app at least once in your life, or maybe you are a premium user like multiple developers we met at the conference.

Our current app is written on vanilla.js, Angular, Vue, and jQuery, so we are rewriting it to Vue3 with Composition API, TypeScript, Vite, Vitest, and some other Vue ecosystem packages and tools. The app is close to a big release, and I think our new app is quite progressive and modern, but developers should always learn more and improve code quality, that's why it is very important to attend conferences workshops, etc.

My special attention was on tests, I really liked Debbie O’Brien’s speech, even though we use Cypress, but Markus was on the top for me. In the future, we are thinking about Nuxt3 or implementing SEO with Vue3 only, so talking about Nuxt also was 100% relevant for us. Our developer Bobby, made conversation with Nuxt members and we planned a meeting about migrating perspectives to Nuxt. Yes, I have to mention Bjorn and Lucie, their talks about packaging and open source are maybe most important than anything else.

That is one of the opportunities of conferences, you can talk with creators directly, face to face and make decisions very fast, collaborate, or even brainstorm.

End of Conference.

I nothing have to say, just want to add one very important thing. Use design patterns, and best practices.
For example, design pattern -> Duck face

and my best practice.

Friend.

David met me at Schiphol airport and showed me Amsterdam's beauties places. He is UX/UI designer and my ex-coworker from redberry, currently, he is based in Amsterdam and works for a fascinating startup Stackbrowser.

With collaboration, me and David, have made his personal website petro.design, and that of course was written on Vue(Nuxt), so it is somehow also Vue story in Amsterdam.

David recommended visiting Amaze Amsterdam, and I can say, that it was really “Amazing”! Little art can open the mind… Yes, I know, I know, Amsterdam can “unlock” your hidden talents in different ways 🥦 🍄, But art can change your mind to infinity and beyond.

Negative and for future.

Can you believe, that I was in Amsterdam but didn’t visit Van Gogh museum? Yes, unfortunately, it happened to me :( because of tragedy and horrible situation in Turkey and also weather conditions, my first flight from Tbilisi to Istanbul was delayed and my second flight from Istanbul to Amsterdam was changed, I lost almost a full day and couldn’t find time for rebooking the Van Gogh museum ticket. For now, it is extra motivation to revisit Vue.js Amsterdam next year.

That's all, see you this summer at WeAreDevelopers World Congress in Berlin and that is what I’m planning to visit.

Before - After - A practical guide to improving UI components, readability, and reusing code. HTML, CSS, JS, Vue.

Soso Gvritishvili — Tue, 09 Feb 2021 09:10:28 +0000

Originally posted on Medium

I want to show you a little practical job where I had to improve some listing components with multiple elements in Nuxt.js (Vue.js framework) but the principle is the same in React, Angular, or other Front-end, libraries, frameworks, or native code. This can help junior and not only developers, to make better code and improve themselves, also if you can make this imperfect Vue component better, please write in comments. It would be great to share experiences and see new approaches.

On 3 January, after holiday parties, I was tired and didn’t want to work, but found an interesting recruiting project, which was finished in half. UI and code were terrible and I looked at this like challenge. After a few words, the deal was finished with the client and the job started.
First, see screenshots I have made before, and after improving code in the simple listing component.
Before change source code

After source code improving

Design.

The difference will be visible to anyone not dealing with the website layout. Even my code has a design inconsistency, like a difference in marker size, logo, or title padding, but this was fixed at the request of the client.
Now, the most interesting is the realization of code. It was one huge component with a lot of HTML, CSS, and some unnecessary js with categoryIcon computed property (different story).

Despite the fact that the year 2021 has come, many people continue to write this way, but I ask you not to do this, do not make life difficult for yourself or other developers.

<template>
    <div class="row">
        <div class="col-lg-12">
            <div class="row job-vacancy d-none d-lg-flex">
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="vacancy-name">{{ title }}</div>
                            <div class="salary">{{ salary }} ₽</div>
                        </div>
                        <div class="col-lg-6 d-flex">
                            <div v-if="isDelete" class="icon">
                                <img src="~/static/images/delete.svg" alt=""/>
                            </div>
                            <div v-else-if="location" class="icon">
                                <img src="~/static/images/city.svg" alt=""/>
                            </div>
                            <div v-if="isDelete" class="delete">Удаленно</div>
                            <div v-else-if="location" class="geo">
                                {{ location }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 d-flex flex-wrap">
                            <div class="description">
                                <img :src="categoryIcon" alt=""/>
                                {{ category }}
                            </div>
                            <ul class="tags">
                                <li
                                    v-for="(tag, index) in tags"
                                    :key="index"
                                    class="tag"
                                >
                                    {{ tag.tag }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="company-logo" v-if="logo">
                        <img :src="logo" alt=""/>
                    </div>
                    <div class="public-data">
                        <img src="~/static/images/time.svg" alt=""/>
                        <span>{{ $moment(dataPublished).fromNow() }}</span>
                    </div>
                </div>
            </div>
            <div class="row job-vacancy-mobile d-block d-lg-none">
                <div class="col-12">
                    <div class="vacancy-name">
                        {{ title }}
                        <img v-if="isDelete" src="/images/delete.svg" alt=""/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="salary">{{ salary }}</div>
                </div>
                <div class="col-12" v-if="logo">
                    <div class="company-logo">
                        <img :src="logo" alt=""/>
                    </div>
                </div>
                <div class="col-12">
                    <div class="description">
                        <img :src="categoryIcon" alt=""/>
                        {{ category }}
                    </div>
                </div>
                <div class="col-12 d-flex mt-3">
                    <div v-if="isDelete" class="icon"></div>
                    <div v-else class="icon">
                        <img src="~/static/images/city.svg" alt=""/>
                    </div>
                    <div v-if="isDelete" class="delete">Удалено</div>
                    <div v-else class="geo">{{ location }}</div>
                </div>
                <div class="col-12">
                    <div class="public-data">
                        <img src="~/static/images/time.svg" alt=""/>
                        <span>{{ $moment(dataPublished).fromNow() }}</span>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="tags">
                        <li
                            v-for="(tag, index) in tags"
                            :key="index"
                            class="tag"
                        >
                            {{ tag.tag }}
                        </li>
                    </ul>
                </div>
                <div class="col-12">
                    <button type="button" class="btn btn-info">
                        просмотреть вакансию
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "JobItem",
        props: {
            title: {
                type: String,
                default: "",
            },
            salary: {
                type: String,
                default: "",
            },
            isDelete: {
                type: Boolean,
                default: false,
            },
            location: {
                type: String,
                default: "",
            },
            description: {
                type: String,
                default: "",
            },
            tags: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            image: {
                type: String,
                default: "",
            },
            dataPublished: {
                type: String,
                default: "",
            },
            category: {
                type: String,
                default: "",
            },
            logo: {
                type: String,
                default: "",
            },
            descriptionLogo: {
                type: String,
                default: "",
            },
            categoryId: {
                type: Number,
                default: "",
            },
        },
        computed: {
            categoryIcon() {
                switch (this.categoryId) {
                    case 1:
                        return "/images/development.jpg";
                    case 2:
                        return "/images/web.jpg";
                    case 3:
                        return "/images/marketing.jpg";
                    case 4:
                        return "/images/support.jpg";
                    case 5:
                        return "/images/design.jpg";
                    case 6:
                        return "/images/finance.jpg";
                    default:
                        return "/images/development.jpg";
                }
            },
        },
    };
</script>

<style scoped>
.job-vacancy {
    background: #ffffff;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 19px;
    margin-top: 16px;
    padding: 24px;
    margin-left: 0;
    cursor: pointer;
}
.job-vacancy:hover,
.job-vacancy-mobile:hover {
    box-shadow: 0px 2px 22px rgba(27, 32, 44, 0.12);
}
.job-vacancy:active,
.job-vacancy-mobile:active {
    color: #4d8294;
}
.job-vacancy-mobile {
    background: #ffffff;
    border-radius: 11px;
    width: 100%;
    margin-top: 16px;
    padding: 20px;
    margin-left: 0;
    cursor: pointer;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
    margin: 0;
    margin-bottom: 18px;
}
.tag {
    padding: 4px 7px;
    background: #f4fafb;
    border-radius: 99px;
    margin-right: 9px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 10.1124px;
    line-height: 12px;
    text-transform: uppercase;
    color: #38758a;
    margin-bottom: 5px;
    cursor: pointer;
}
.tag:hover {
    background: #f4fafb;
    box-shadow: 0px 2px 8px rgba(20, 25, 38, 0.12);
    color: #43afd1;
}
.tag:focus {
    color: #274a56;
}
.vacancy-name {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 20.2247px;
    line-height: 26px;
    color: #15282e;
    margin-bottom: 7px;
}
.salary {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 16.1798px;
    line-height: 20px;
    color: #313435;
    margin-bottom: 25px;
}
.geo {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    color: #313435;
    margin-left: 6px;
    padding-top: 5px;
}
.job-vacancy-mobile .geo {
    padding: 0;
}
.company-logo img {
    background: #f3f7f9;
    border-radius: 5px;
    text-align: center;
    padding: 15px;
    max-width: 200px;
    width: 100%;
}
.job-vacancy-mobile .geo {
    margin-top: 2px;
}
.job-vacancy-mobile .tags {
    margin-top: 26px;
}
.public-data {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    text-align: right;
    color: #787878;
    margin-top: 15px;
}
.public-data img {
    margin-right: 15px;
}
.job-vacancy-mobile .public-data {
    text-align-last: left;
}
.job-vacancy-mobile .public-data img {
    margin-right: 11px;
}
.delete {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    color: #15282e;
    margin-left: 8px;
    padding-top: 7px;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .delete {
        display: none;
    }
}
.description {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    color: #38758a;
    margin-right: 30px;
}
.description img {
    margin-right: 4px;
    width: 20px;
    height: 20px;
}
.job-vacancy-mobile .description {
    margin-top: 22px;
}
.job-vacancy-mobile .btn-info {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    padding: 12px 43px;
    width: 100%;
}
</style>

Compare the code above it with the component I improved. Yes, this is not JS, PHP, or other languages, but 380 lines VS 172 after a few hours of coding, think is a good result.

<template>
    <NuxtLink
        :to="{
            name: 'jobs-id',
            params: { id: job.id }
        }"
        class="container-fluid job-item d-inline-block w-100 bg-color-white border-radius-s cursor-pointer"
    >
        <div class="row">
            <div class="col-md-9 pr-md-3">
                <div class="d-flex w-100 h-100">
                    <div
                        class="job-item__left-container d-flex flex-wrap flex-md-nowrap flex-md-column w-100 h-100"
                    >
                        <div
                            class="mb-2 d-flex align-items-start justify-content-between w-100"
                        >
                            <div
                                class="job-item__title montserrat semi-bold font-size-20 color-light-black d-inline-block pr-2 pr-md-0"
                            >
                                {{ job.name }}
                            </div>
                            <Location
                                v-if="job.is_remote"
                                size="small"
                                :data="{
                                    isRemote: true
                                }"
                                is-job-item
                            />
                        </div>
                        <div
                            class="job-item__salary w-100 montserrat medium color-light-black font-size-16 mb-3"
                        >
                            from {{ job.salary_min }} to {{ job.salary_max }} $
                        </div>
                        <div
                            v-if="job.logo_url"
                            class="d-md-none job-item__company-logo--mobile mr-auto p-2 mb-3 text-center border-radius-s bg-color-bg-gray"
                        >
                            <img
                                :src="job.logo_url"
                                :alt="job.company_name"
                                :title="job.company_name"
                            />
                        </div>
                        <div class="mt-auto">
                            <div class="d-flex flex-wrap align-items-center">
                                <Location
                                    v-if="!job.is_remote"
                                    size="small"
                                    :data="{
                                        location: job.location
                                    }"
                                    class="mr-4 mb-3 mb-md-0"
                                />
                                <CompanyName
                                    v-if="job.company_name"
                                    size="small"
                                >
                                    {{ job.company_name }}
                                </CompanyName>
                            </div>
                            <div
                                class="d-flex flex-wrap align-items-center mt-4"
                            >
                                <CategoryLabel
                                    :category="job.category"
                                    size="small"
                                    class="mb-3 mb-md-0"
                                />
                                <Tags :tags="job.tags" size="small" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div
                    v-if="job.logo_url"
                    class="d-none d-md-block mb-3 job-item__company-logo p-3 text-center border-radius-s bg-color-bg-gray"
                >
                    <img
                        :src="job.logo_url"
                        :alt="job.company_name"
                        :title="job.company_name"
                    />
                </div>
                <div
                    class="d-flex align-items-center color-text-gray montserrat regular font-size-12 mt-3 mt-md-0"
                >
                    <img
                        src="~/static/images/time.svg"
                        alt=""
                        class="mr-3 ml-md-auto"
                    />
                    <span>{{ $moment(job.time_created).fromNow() }}</span>
                </div>
            </div>
            <BaseButton class="d-md-none mt-4">
                See job
            </BaseButton>
        </div>
    </NuxtLink>
</template>

<script>
import CategoryLabel from "../CategoryLabel";
import Tags from "../Tags";
import CompanyName from "../CompanyName";
import Location from "../Location";
import BaseButton from "../BaseButton";
export default {
    name: "JobItem",
    components: { BaseButton, Location, CompanyName, Tags, CategoryLabel },
    props: {
        job: {
            type: Object,
            default: () => {
                return {};
            }
        }
    }
};
</script>

<style lang="scss">
.job-item {
    margin-bottom: rem(19);
    margin-top: rem(16);
    padding: rem(24) rem(26);
    transition: box-shadow 0.3s ease;
    &__title {
        transition: color 0.3s ease;
    }
    &:hover,
    &:active {
        box-shadow: 0px rem(2) rem(22) rgba(27, 32, 44, 0.12);
    }
    &:hover {
        .job-item__title {
            color: $blue;
        }
    }
    &:active {
        .job-item__title {
            color: $gray-blue;
        }
    }
    &__left-container {
        min-height: rem(130);
    }
    &__company-logo {
        img {
            max-height: rem(80);
        }
        &--mobile {
            img {
                max-height: rem(60);
            }
        }
    }
}
</style>

To improve code, I just created reusable components, used SCSS instead of just CSS, added methodology BEM, and bootstrap utility classes. You can use some template engines like a pug or other CSS methodologies like object-oriented, create custom CSS classes, and decide to put data in components locally or store to state manager. It depends on how you and your team like to deal with it. But this is a minimum that must be done to create some normal website, and it does not matter which library(Framework) are we using, Vue (Quasar, Nuxtjs), React (Next, Gatsby), or any other.

40 Reasons Why I hate Being A Developer

Soso Gvritishvili — Mon, 08 Feb 2021 10:23:43 +0000

Originally posted on Medium

Yesterday I found a post by Dan English,40 Reasons Why I Love Being A Developer, and I thank him for posting it. It was very fun and interesting, as the author has asked, I wanted to leave my comments after the Article, but I have also found 40 reasons why I hate being a developer, so I have decided to write my own article of an angry developer. I am sure most industry people share this point of view.

1) I have to learn something new pretty much every day to hold out and not lose my job.
2) Being called every day for work by the project manager whether that be a Saturday or Sunday.
3) Being able to see technology make life easier. but still, write clumsily and in dirty own way.
4) Take part in a crazy society that thinks only about the software industry, coding and is happy with it.
5) Lots of coffee without getting any result, because yesterday you worked until 2 AM.

6) Discovering new open-sourced resources which are tons of them on the internet read all of them to understand which is better, even you already use some library you need to understand new versions like have never be used before… Spend the whole day deciding which library to use…
7) No opportunity to have our own ideas, because everyone around right, except you. Scrum masters, product owners, UX designers, UI designers, even project managers are right because they know what businesses needs and you are just a developer who has to code and code and code…
8) And there is no time for your own business or little project because you have to code and code and code.
9) Gain weight in the office without any workout, no pain - no muscles.
10) Can't be on a diet because everyone loves you in the office and asks you to taste happy birthday cakes.
11) Write 60 minutes tests, solve algorithms, data structures and get technical interviews like you are starting work in the pentagon but at the same time, in practice, the most difficult task that you are given is to deal with HTML.
12) More coffee but I still can't work.

13) Have to learn more and no time for just work and silence, work and stability, work and happiness.
14) Worries about the new version updates, which always have a lot of bugs.
15) Using WebStorm and crashing 8Gb of ram.
16) Despite the fact that Internet Explorer has died a long time ago, we still have to take it into account, because there are freaks and companies that still use this damn browser.
17) There are always new tasks, like 3 headed dragon, you finish one but get 3 times more.
18) All compliments for an excellently developed project go to the project manager and a bad code claim goes to the programmer.
19) It's not fun when you drink 3 cups of coffee but caffeine does not make itself felt.

20) In case you are a freelancer need to buy a new laptop every year and spend a lot of money on it.
21) You are unhappy with yourself every time you refactor or clean up old code that you could write better.
22) Lunchtime is just 10 minutes mealtime, no time for rest.
23) Everyone needs remote work, social contact is breaking, and the only one with who you can talk is your pet.

24) Realizing that I am not a programmer without StackOverflow.
25) The software industry is the homeland of "expectation vs reality" real-life memes.
26) The last game I have played was Half-Life 2… 10 years ago.
27) More cakes from a project manager.
28) Red Bull with disgusting taste :( but sometimes it is necessary.
29) Make a mistake that can cost billions to a bank or forgot to protect personal data and go to jail.
30) Being able to develop a website for 5 years and don't understand how this fucking crazy beautiful animations are created by others.
31) My father thinks I am working in excel.
32) Policeman neighbor thinks I am a hacker because I can upload videos on youtube… he is watching on me and whant to make a career on my arrest :)
33) More coffee?

34) The project manager knows that you are able to take the laptop to a beach and write code, that's why programmers has no life.
35) Having a job even you are the worst programmer in the world because there is a big deficit in developers.

function isEmpty(value) {
    if (value === '') {
        return false;
    } else if (value === 0) {
        return false;
    } else if (value === null) {
        return false;
    } else if (value === undefined) {
        return false;
    } else {
        return true;
    }
    return true;
}

36) Spend time on which theme to install on a new computer, and if it's Linux then decide for a week how to customize it.
37) Your brains can't stop work even you are traveling, because you understand how to fix the bug which was annoying you for 2 weeks, but it happens only in dreams because you have no energy to be excited about it.

38) Being passionate about what I do at work and forgot about my personal life.
39)There are how-to-guides to build or learn just about anything which you do need or don't need to but you can't understand without trying….
40) Finally, coffee gives effect but it's too late because already 2 AM on watches and you need to sleep… :(

Of course, it was a joke and I love being a developer, I enjoy the coding process and all the things happening around me, even posting this stupid post… :)

Thanks to Dan and all of you.

Bye.

Why, when, and how to develop WordPress with Laravel features, live examples.

Soso Gvritishvili — Mon, 27 Jul 2020 07:42:33 +0000

Whatever you think about my preferences, I will demonstrate the sites made with Laravel and WordPress. I love both technologies, they are perfect, just need to know when and what to use.

There are two types of people (programmers and non-programmers included). Some use WordPress with installation templates and minimal coding, while others, for example, Laravel or Symfony developers didn’t even read the documentation of WordPress. What unites them? Ignorance of WordPress functionality and simplicity.

Let’s imagine that we have to write a simple or Medium difficulty website, which needs an attached big admin panel with a lot of routines while the development process. Many tables, cruds, and fields per unique page (template), at the same time, no need in functionality, calculations, or other hard coding stuff. By client requirements, it is clear that the theme must be unique and created from scratch. WordPress theme installers (Person who thinks that WordPress development is just theme installation and configuration) who are changing colors and fonts cant handle such issues(don’t have PHP and WordPress skills ), Laravel, or other framework developers can build unique designs, but they need a lot of time and also won’t learn especially interesting by doing a routine, this means that their time is wasted unproductive and inappropriate. For our happiness, WordPress gives interesting low database and model work stuff, very easy admin panel development tools, like ACF(custom fields plugin), and development time reduces several times.

About WordPress

You can argue, WordPress theme structure is not developer-friendly, no MVC architecture structure, no OOP, but it’s only when first time sees WordPress (WordPress’s use event-driven (hook) architecture system) themes or plugins, you can choose any paradigm, object-oriented, procedural or functional same use any structure you want and like. WordPress is very tolerant of the developer’s whims. Whole software companies or independent programmers already created very good and useful starter themes and projects, which can be used by anyone.

Mostly, I prefer using roots products, starter project - Bedrock and theme — Sage9, roots also offer WordPress server — Trellis. Sage is the most stable theme(bug fixing, updates), with a big community and quality team. Sage has the ability to use dependency managers like composer, restructured theme files, dry templates, image optimization, webpack with live reloading, SASS, separated controller, and View with comfortable ACF registration and e.t.c. There is everything for faster, cleaner, and modern developer workflow.

Sage controller

Sage view

There are also very powerful and minimalistic starter themes. For more professional and complex website is wordplate - composer, laravel mix, custom SMTP, security, debugging, simple environment and e.t.c. makes WordPress workflow more professional and comfortable for all PHP developers.

underscores is also a very old and popular starter, but I don’t like it, because can’t find enough features, of course, it doesn’t mean that this theme is bad, I just don’t like it but a lot of experienced WordPress developers recommended it. So u can check and choose what you like. If you don’t need listed above themes, research on google and I’m sure you will find what you are looking for.

And don't forget, before u start to develop with starter themes, try to build simple themes from scratch to understand WordPress structure, theme anatomy, pages, single posts, plugins, widgets, templates, functions, hooks, Rest API, Ajax e.t.c. and most important always follow WordPress Codex.

About Laravel and WordPress

Here is the most interesting part of the article, Laravel, and WordPress hybrid. If you are Laravel fan, can't imagine yourself coding in other frameworks, and have complex applications with a lot of content, Corcel is what u need for happiness. Use WordPress as admin panel and data manipulation, but code controllers, views with Laravel. Also with composer u can easily change it to other PHP Framework. Simple configuration, fastest code, and ability to write complex web applications, make Corcel one of the most interesting PHP Hybrid ever created.

About my projects

Ok, let’s move on to the next stage. Almost one and a half years ago, the project manager had shown me a new project, with more than 30 unique structure pages (templates) with a lot of content and fields. This was a real routine, functionality was low only some cron jobs, third party services, simple filters, and 4–5 forms which were solved with Vue.js and WordPress REST API, in Laravel, it would be the same. I decided to create it with Sage 9 and took this result. WordPress development was very fast, which was very important because the client wanted to get the result as fast as possible. There was nothing that u can’t make with WordPress and necessity in Laravel or another PHP framework. About security… with custom plugins and regular updates risk of malware and viruses are minimal, also no user registration.

For example, likanimw took me twice as long than to finish much bigger credobank

I saw Corcel in the real project at pdp where I just made debugging, I really recommended it.

Conclusion

WordPress is very easy to learn for beginners and makes life easier for experienced PHP developers. Even complex websites can bed builder with WordPress I just write from my experience and hope it would help you. Each project needs an exclusive approach with Cons and Pros and only after making a decision about which technology to use. Not very smart to use Ferrari on the farm.

P.S. Sometimes it is Laravel, sometimes WordPress and sometimes tasks required something else.

P.P.S. Sorry for my bad English :)

Change picker value onScroll — React Native and Expo.

Soso Gvritishvili — Mon, 27 Jul 2020 07:25:43 +0000

Default NPM package example

This was my first React native project for a property development company and the task was to highlight the selected building floor on a wheel picker scroll. (By the way, you can check the working example of this APP (IOS, Android), for now, the language is only Georgian.) U also can download this package from NPM

Working project example

But there was no hope of finding any react-native package or StackOverflow help. All custom pickers and IOS native pickers too are making callback only on scroll end. I always try to write own code and not use packages, but this time I thought that is was a difficult task which will take a lot of time. The hours and energy spent on the search told me that I had to do everything by myself. Fortunately, many React Native developers were looking for similar functionality and in their google footsteps, I found the react-native-swipe-picker package, where FlatList or ScrollView have been used as a picker, so this was a chance to fix my issue.

I have added scroll callbacks, fixed some bugs, and improved the functionality, make it more convenient for developers.

A simple example of how to use DynamicallySelectedPicker component

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import DynamicallySelectedPicker from './src/components/DynamicallySelectedPicker';
const App = () => {
  const [selectedValue, setSelectedValue] = useState(0);
  return (
    <View style={styles.body}>
      <View style={{margin: 30}}>
        <Text>Item index {selectedValue}</Text>
      </View>
      <DynamicallySelectedPicker
        items={[
          {
            value: 1,
            label: 'Item 1',
          },
          {
            value: 2,
            label: 'Item 2',
          },
          {
            value: 3,
            label: 'Item 3',
          },
          {
            value: 4,
            label: 'Item 4',
          },
          {
            value: 5,
            label: 'Item 5',
          },
        ]}
        width={300}
        height={300}
        onScroll={(selected) => setSelectedValue(selected.index)}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  body: {
    backgroundColor: Colors.white,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default App;

This is a React Native example with one big component (it could be separated into little functional components). To run it with Expo you have to change

react-native-linear-gradient package to expo-linear-gradient

import React from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, ScrollView, Platform, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import PickerListItem from './PickerListItem';
export default class DynamicallySelectedPicker extends React.Component {
  constructor(props) {
    super(props);
    // set picker item height for android and ios
    const {height, transparentItemRows, initialSelectedIndex} = props;
    let itemHeight = height / (transparentItemRows * 2 + 1);
    // In ios we have to manually ceil items height to eliminate distortion in the visualization, when we have big data.
    if (Platform.OS === 'ios') {
      itemHeight = Math.ceil(itemHeight);
    }
    this.state = {
      itemHeight: itemHeight,
      itemIndex: initialSelectedIndex,
    };
  }
  /**
   * Generate fake items for picker top and bottom.
   * @param n
   * @returns {[]}
   */
  fakeItems(n = 3) {
    const itemsArr = [];
    for (let i = 0; i < n; i++) {
      itemsArr[i] = {
        value: -1,
        label: '',
      };
    }
    return itemsArr;
  }
  /**
   * Get extended picker items length.
   * @returns {number}
   */
  allItemsLength() {
    return this.extendedItems().length - this.props.transparentItemRows * 2;
  }
  /**
   *
   * @param event
   */
  onScroll(event) {
    const {items, onScroll} = this.props;
    const tempIndex = this.getItemTemporaryIndex(event);
    if (
      this.state.itemIndex !== tempIndex &&
      tempIndex >= 0 &&
      tempIndex < this.allItemsLength()
    ) {
      this.setItemIndex(tempIndex);
      onScroll({index: tempIndex, item: items[tempIndex]});
    }
  }
  /**
   *
   * @param event
   * @returns {number}
   */
  getItemTemporaryIndex(event) {
    return Math.round(
      event.nativeEvent.contentOffset.y / this.state.itemHeight,
    );
  }
  /**
   *
   * @param index
   */
  setItemIndex(index) {
    this.setState({
      itemIndex: index,
    });
  }
  /**
   * Add fake items to make picker almost like IOS native wheel picker.
   * @returns {*[]}
   */
  extendedItems() {
    const {transparentItemRows} = this.props;
    return [
      ...this.fakeItems(transparentItemRows),
      ...this.props.items,
      ...this.fakeItems(transparentItemRows),
    ];
  }
  /**
   *
   * @param item
   * @param index
   * @returns {*}
   */
  renderPickerListItem(item, index) {
    const {itemHeight} = this.state;
    const {allItemsColor, itemColor} = this.props;
    return (
      <View
        key={index}
        style={[
          styles.listItem,
          {
            height: itemHeight,
          },
        ]}>
        <Text
          style={{
            color: itemColor ? itemColor : allItemsColor,
          }}>
          {item.label}
        </Text>
      </View>
    );
  }
  render() {
    const {itemIndex, itemHeight} = this.state;
    const {
      width,
      height,
      topGradientColors,
      bottomGradientColors,
      selectedItemBorderColor,
      transparentItemRows,
    } = this.props;
    return (
      <View style={{height: height, width: width}}>
        <ScrollView
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          onScroll={(event) => {
            this.onScroll(event);
          }}
          scrollEventThrottle
          initialScrollIndex={itemIndex}
          snapToInterval={itemHeight}>
          {this.extendedItems().map((item, index) => {
            return this.renderPickerListItem(item, index);
          })}
        </ScrollView>
        <View
          style={[
            styles.gradientWrapper,
            {
              top: 0,
              borderBottomWidth: 1,
              borderBottomColor: selectedItemBorderColor,
            },
          ]}
          pointerEvents="none">
          <LinearGradient
            colors={topGradientColors}
            style={[
              styles.pickerGradient,
              {
                height: transparentItemRows * itemHeight,
              },
            ]}
          />
        </View>
        <View
          style={[
            styles.gradientWrapper,
            {
              bottom: 0,
              borderTopWidth: 1,
              borderTopColor: selectedItemBorderColor,
            },
          ]}
          pointerEvents="none">
          <LinearGradient
            colors={bottomGradientColors}
            style={[
              styles.pickerGradient,
              {height: transparentItemRows * itemHeight},
            ]}
          />
        </View>
      </View>
    );
  }
}
DynamicallySelectedPicker.defaultProps = {
  items: [{value: 0, label: 'No items', itemColor: 'red'}],
  onScroll: () => {},
  width: 300,
  height: 300,
  initialSelectedIndex: 0,
  transparentItemRows: 3,
  allItemsColor: '#000',
  selectedItemBorderColor: '#cecece',
  topGradientColors: [
    'rgba( 255, 255, 255, 1 )',
    'rgba( 255, 255, 255, 0.9 )',
    'rgba( 255, 255, 255, 0.7 )',
    'rgba( 255, 255, 255, 0.5 )',
  ],
  bottomGradientColors: [
    'rgba( 255, 255, 255, 0.5 )',
    'rgba( 255, 255, 255, 0.7 )',
    'rgba( 255, 255, 255, 0.9 )',
    'rgba( 255, 255, 255, 1 )',
  ],
};
DynamicallySelectedPicker.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      label: PropTypes.string,
      itemColor: PropTypes.string,
    }),
  ),
  onScroll: PropTypes.func,
  initialSelectedIndex: PropTypes.number,
  height: PropTypes.number,
  width: PropTypes.number,
  allItemsColor: PropTypes.string,
  selectedItemBorderColor: PropTypes.string,
  topGradientColors: PropTypes.array,
  bottomGradientColors: PropTypes.array,
};
const styles = StyleSheet.create({
  listItem: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  gradientWrapper: {
    position: 'absolute',
    width: '100%',
  },
  pickerGradient: {
    width: '100%',
  },
});

I hope someone will use it and won’t waste time like me. Also if u have questions or remarks, please, feel free to communicate.

Contribution or issues reports in the GitHub repository (It’s a little bit different, with more props and callbacks.) would be great.

Sorry again for my bad English and thank you.

The best examples of bad code I’ve come across production mode.

Soso Gvritishvili — Thu, 23 Jul 2020 05:17:32 +0000

These screenshots are just for fun, I hope u won’t get angry with these guys.

This is only one not from production. But it is the best example of shitcode

What The Hell

2-in-1. Custom padStart and “validateAuth”

Simple navigation

Conditional statement, local language e.t.c

Vue.js like hell’s jquery. See Article

So clean

Just “isTrue”

This HTML code has written by bank developers and it is still in production:(

P.S.
I also have a lot of bad codes.
I have found this in my project, but I don’t understand what the hell is — Set language function )))))

Take care of your name, don't use nulled WordPress plugins and themes.

Soso Gvritishvili — Tue, 21 Jul 2020 07:22:19 +0000

Name is brand and value, don't use nulled WordPress themes and plugins, don't' crush your own career and future.

Does not matter what you call yourself, a developer (this article is written mostly for theme developers, who use plugins), creator, etc. If you search in google, you can find tons of technical articles about avoiding using nulled WordPress themes and plugins, which is sometimes criminal, insecure, gives no access to technical support, updates are not available, SEO will not work and the website can be blacklisted by Google, etc. Unfortunately, not everyone understands it and continues to use nulled themes and plugins.

Let's first see what WordPress is and what its idea is.

"WordPress is a software designed for everyone, emphasizing accessibility, performance, security, and ease of use.

We believe in democratizing publishing and the freedoms that come with open source. Supporting this idea is a large community of people collaborating on and contributing to this project. The WordPress community is welcoming and inclusive. Our contributors' passion drives the success of WordPress which, in turn, helps you reach your goals.
WordPress started in 2003. Today, WordPress is built on PHP and MySQL, and licensed under the GPLv2. It is also the platform of choice for over 35% of all sites across the web".

More about WordPress

Yes, WordPress is a free open source content management system. It gives us huge opportunities to make few page blogs or complex websites, popular news portals, or very high-quality promo pages with animations, interactions, and games.

Big companies can be discovered that use WordPress, like BBC, Microsoft, Toyota, etc.

BBC
TOYOTA

Or any kind of technically difficult sites, which are created on WordPress too, with a great user interface.

MCX
NEUNDEX

This is my favorite e-commerce website with beautiful animations. It was created in my former company by my colleagues.

BIOCHIMPHARM

Also with WordPress are written free or premium themes, that can be used multiple times by bloggers, self-employers, and many kinds of companies for different purposes.

THEMEFOREST

What you have to know if you are not a developer, is that thousands of developers are behind private or paid plugins and themes. WordPress developers are coding very complex programs every day, there are hundreds of thousands of written code lines and these people are paid for their job, they improve plugins and themes because people buy them and no one likes it when someone steals code or other property.

Being part of this powerful world, you can learn to create something that no one has created before, WordPress gives you opportunities for it. Find out how easy and friendly WordPress is.

I am a web developer, I write themes myself and try not to use plugins, even premium (that's another story). I don't know a lot about PRO themes that are located, for example, on ThemeForest, but giant plugins like ACF, WP-ROCKET, WPML, or others, are talking about themselves without additional information.

You should understand that you are a brand, for example, your name is Johny Silverman. If your product (website) with nulled theme or plugins will crash, or have some troubles, the client will never order anything the second time, and will write a negative review about you, as you do it on Amazon or a restaurant, where you have had a bad steak… You can't change your name, you can't rebrand yourself, you will always be Johny Silverman who uses nulled themes and plugins and has a very bad reputation. And if you use nulled themes and plugins for your own business, you are twice silly, because you will not only lose your reputation, you also must build a new website for customers.

Most times, guys who use nulled themes, can't even imagine what is going on behind UI. There could be some malware or advertising for every twentieth visitor which was included by the person who nulled the theme, there could be a script that steals personal information and you will never know about it, but once a client finds out, your reputation will crash with your site. Most of the clients, who use websites for their small business, don't understand what WordPress is, what WordPress themes&plugins and WordPress nulled themes&plugins are. Unfortunately, this can be exploited by not knowing, or what are the worst, dishonest people.

Maybe some people think that big companies specialized on WordPress development don't care about few nulled themes, but I live in a small country with a poor economy, we have companies or independent developers who get money for themes and plugins development, and for the theme, every nulled theme or plugin is a loss of tangible earnings, and for big companies, it is also loss.

No one will hire you, because, at every company, where you apply for a job, there will be someone who knows what you did, in each community, there will be a guy who knows how you get money and no one will hire you.

Reasons to pay for plugins and themes.

Developers who create plugins and themes will improve them and sites will be better, job quality will also improve and reputation will rise, there will be more customers and cash income. It is in our interest to use legal products and help authors improve them or make some contribution…

If you don't have the programming knowledge to write your own plugin, don't have money to buy, or just don't want to pay for it, you can be content with free alternatives. WordPress gives you a lot of opportunities to make full value websites for your clients or for yourself and monetize them without violating copyrights and risking name.

Thanks

How not to use Vue like jQuery

Soso Gvritishvili — Mon, 20 Jul 2020 20:02:19 +0000

There are a lot of posts on how to correctly use Vue.

But 67 times less information on how not to use Vue. There is why developers cant finds tips about bad code.

This is how generally developers and other professions search in google, "how to" but there is no guarantee that all developers understand the content well and right.
I often have questions with my self: Did I write code, right? is my code safe? Did I use the best approach to issue? Did I use the best and modern practices? and finally is my code correct?!

Sometimes, after a workday, before commit the project, I want to compare script with other experienced developers practices, find wrong ways and issues, improve code and make little refactoring. I try to find similar tasks and their solutions but all in vain.

This is the reason why any of us with not of big experience in Vue(or any other library, framework or language) can write "terrific" code.

Now, I wanna show you the worst code example of code has ever seen in Vue.js.

This code screenshot was posted on Facebook by Author (i call him Jimmy)and he was confused why this code is not working. He even doesn't understand that he used Vue not jQuery… I wanna help him, but then I didn't have time and it's very difficult to explain something in Facebook.

He doesn't understand the most important thing in Vue library - reactivity and even not use ES6 template literals. Ok, maybe he is an old fashioned developer but I don't think so. In this regard, I wrote a small example of code similar to this, with an example for newbie Vue developers.
How to simply add and remove inputs array in Vue with Vue style

Simple add and remove input arrays in Vue.js

This is what jQuery developer Jimmy wants to make with Vue.js. I hope Jimmy will like this post, I can't now find him but I wanna share to him a new experience.

After writing the code, I start thinking about jQuery. Should I write the same functionality code and show it to you? nooo, it is a horror movie, only for 18+, after Vue, I hate jQuery and don't want to waste time on it. In 2019 just you have to use jQuery and improve knowledge in Vue.js

P.S. Sorry for my bad English, I'm not a native speaker and this is my first post. Thanks for reading.