DEV Community: Vigowebs

Episode 03 - Find the number of 1s and 0s from the array

Vigowebs — Mon, 24 Jul 2023 19:20:16 +0000

You have been given an array of integers that consists only 1s and 0s. Your task is to find the total number 1s and 0s in the array.

Example Input:
[1, 0, 1, 0, 0, 1, 1, 0]

Expected Output:
Total 1s are 4.
Total 0s are 4.

Sounds easy, right?

But wait, there is one condition that you should not use any conditional operators like if or ternary operator. Interesting right?

The easiest way to find the solution is sum all the numbers in the array and subtract it from the array length. Since we only have 0s and 1s, the sum of the array is equal to the number of 1s and the difference from array length is equal to the number of 0s. Sounds easy, right? lets code it now.

const findOnesAndTwos = (array) => {
  const sum = array.reduce((acc, num) => acc + num, 0);
  console.log(`Total 1s are: ${sum}`);
  console.log(`Total 0s are: ${array.length - sum}`);
};

findOnesAndTwos([1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0])
// Total 1s are: 7
// Total 0s are: 6

Check it in our YouTube

Miranda - Responsive Tailwind CSS Portfolio Template

Vigowebs — Sun, 16 Jul 2023 16:40:42 +0000

Miranda is a responsive portfolio HTML template built with Tailwind CSS.

Template Features:

Build with Tailwind CSS v3.3.2
Fully Responsive and easy to customize
Compatible with all modern browsers
W3C Validated Code
Clean code with comments

Template contains

Hero section with social icon buttons
On scroll animated service section
Portfolio section
Skills section with skills or tools icon buttons

Testimonial section with Swiper JS slider

Blog section
Contact form

Download Miranda tailwind CSS template for free

Episode 02 - Best time to buy the stock

Vigowebs — Sun, 09 Jul 2023 05:52:59 +0000

In this episode, we are going to explain one of the famous question asked in JavaScript interview. You will be given an array of integers which represents the prices of a stock in each day. Your task is to find the best buying and selling price that will give you maximum profit.

The array will be like [6, 1, 2, 5, 7] and the output will be 6. The lowest price of the stock is on the 2nd day which is 1 and the highest price is on 5th day which is 7. So buying at the price of 1 and selling at 7 will give us the profit of 6.

Now lets explore the way to find this in JavaScript.

function findMaximumProfit(prices) {
  const length = prices.length;
  let buyPrice = prices[0];
  let maxProfit = 0;

  for (let i = 1; i < length; i++)  {

    if (buyPrice > prices[i]) {
      buyPrice = prices[i];
    } else {
      maxProfit = prices[i] - buyPrice;
    }    
  }
  return maxProfit;
}

console.log(findMaximumProfit([6, 1, 2, 5, 7])); //6

Code Explanation:

We will first declare few variables: length to store the length of the variable, declare buyPrice and assign the first price from the array, and maxProfit to 0. We will start the iteration from the first index since we already assigned the 0th value to the variable. In each iteration, we will check if the buyPrice is greater than the current price. If so then, we will modify the value to that price. Otherwise, we will check the profit buy subtracting both values. At the end of the loop we will return the value of maxProfit.

This array returns the profit as 6. We need to buy the stock at the price of 1 and sell at the price of 7.

There is also another variation of this questions where the interviewer might ask for the buying and selling date instead of the profit. We can solve that also easily, by tweaking this same code.

function findBuySellDate(prices) {
  const length = prices.length;
  let buyPrice = prices[0];
  let maxProfit = 0;
  let buyDate = 0;
  let dates = [];

  for (let i = 1; i < length; i++)  {
    if (buyPrice > prices[i]) {
      buyPrice = prices[i];
      buyDate = i;
    } else {
      maxProfit = prices[i] - buyPrice;
      dates = [buyDate, i];
    }    
  }
  return dates;
}

console.log(findBuySellDate([6, 1, 2, 5, 7])); // [1, 4]

Running this function with the same code now, will return the indices for the buy and sell.

Check it in our YouTube

Episode 01 - How to check the Palindrome in JavaScript

Vigowebs — Sat, 24 Jun 2023 18:05:45 +0000

One of the famous JavaScript interview questions. How to check the palindrome in JavaScript. A palindrome is a word or phrase that reads same in the reverse order also. Some of the examples are civic, rotor, noon, level, mom, madam and racecar.

Now lets see how to solve this in JavaScript. Most of the programmers would go on in a straight-forward way and uses for loop to solve this. Lets explore that way first:

const isPalindrome = (string) => {
  const length = string.length;
  if (!string) return false;
  for (let i = 0; i < length; i++) {
    if (string[i] !== string[length - i - 1]) {
      return false;
    }
  }
  return true;
}

// isPalindrome('madam') prints true
// isPalindrome('hello') prints false

This is good and solves the problem at our hand. But can we improve anything in this program. If you see, to confirm if the string is a palindrome or not, we only need to check half of the string. For example, if the string is 10 characters in length, we can check and compare only 5 characters to verify the palindrome. If the string length is an odd number, lets say 5 characters, we need to check only 2 characters. The string is palindrome regardless of the mid character if rest of the characters

Now applying this to our program, we can reduce the loop iteration to half.

const isPalindrome = (string) => {
  const mid = Math.floor(string.length / 2);
  const length = string.length
  if (!string) return false;
  for (let i = 0; i < mid; i++) {
    if (string[i] !== string[length - i - 1]) {
      return false;
    }
  }
  return true;
}

// isPalindrome('rotor') prints true
// isPalindrome('hello') prints false

As usual this is one of the way to solve the problem. Comment below your solution.

Check Palindrome in our YouTube

Popular Technology for building Mobile, Desktop and Web Applications

Vigowebs — Fri, 30 Dec 2022 17:59:57 +0000

Mobile Application

Mobile apps are developed specifically for a particular mobile platform, such as Apple’s iOS or Google’s Android operating system. Mobile apps are typically designed to be user-friendly and easy to use, and they can be customized to meet the needs and preferences of individual users.

Kotlin Multiplatform

Kotlin Multiplatform is a toolkit for building cross-platform applications that allows developers to write code in Kotlin that can be shared across multiple platforms, such as Android, iOS, desktop, and the web. It is reducing the need to maintain separate codebases for each platform. This can save time and effort, and make it easier to build and maintain applications that run on multiple platforms.

Kotlin Multiplatform is an official feature of the Kotlin programming language, and is fully supported by JetBrains, the company behind Kotlin. It is a powerful tool for building cross-platform applications and can be used with a variety of tools and frameworks, such as Android Studio, IntelliJ IDEA, and Gradle.

Flutter

Flutter is an open-source mobile application development framework created by Google. It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter is built using the Dart programming language and features a fast development cycle with hot reload, a visual design tool called Flutter Inspector, and integrated testing support. It also includes a rich set of customizable widgets and tools for building beautiful and responsive user interfaces.

One of the main advantages of Flutter is that it allows developers to create high-quality, visually attractive apps that have a native feel on both Android and iOS platforms. Flutter is widely used by developers to build a variety of applications, including social media apps, e-commerce apps, and messaging apps. It is also popular for building prototypes and MVPs (minimum viable products) due to its fast development cycle.

React Native

React Native is a JavaScript framework for building native mobile apps. It was developed by Facebook and is often used for building cross-platform apps for iOS and Android.

React Native is based on the popular JavaScript library React, which was developed for building user interfaces for web applications. It allows developers to use React and its declarative components to build native mobile apps that have a native feel and performance.

One of the main advantages of React Native is that it allows developers to build native mobile apps using the same concepts and patterns they use for building web applications. It also allows developers to reuse code between platforms, reducing the need to maintain separate codebases for iOS and Android.

React Native is widely used by developers to build a variety of applications, including social media apps, e-commerce apps, and messaging apps. It is also popular for building prototypes and MVPs (minimum viable products) due to its fast development cycle and ability to reuse code between platforms.

Desktop Applications

Flutter Desktop

Flutter Desktop is a version of the Flutter framework that allows developers to build native desktop applications for Windows, macOS, and Linux using the same codebase. It is an extension of Flutter, which is primarily designed for building mobile apps, but has been extended to support desktop platforms as well.

Flutter Desktop uses the same design principles and core concepts as Flutter for mobile, including the use of the Dart programming language, a rich set of customizable widgets, and a fast development cycle with hot reload. It also includes tools and APIs for building desktop-specific features, such as support for native menus and notifications, and integration with the host operating system.

One of the main advantages of Flutter Desktop is that it allows developers to build native desktop applications that have a native feel and performance, while still being able to reuse code between platforms and take advantage of the fast development cycle and visual design tools provided by Flutter.

Flutter Desktop is still in an experimental phase and is not yet fully supported by the Flutter team. However, it has a growing community of developers and is being used to build a variety of desktop applications.

Kotlin Multiplatform (Desktop)

Desktop app development using Kotlin Multiplatform typically involves writing code that can be shared between the desktop and other platforms, such as mobile or web. This code is typically written in Kotlin, and can include things like business logic, data models, and other reusable components.

To build a desktop application using Kotlin Multiplatform, you will need to use a framework that supports it, such as Ktor or TornadoFx. These frameworks provide the necessary tools and APIs for building desktop applications, and can help you to easily integrate your shared Kotlin code into your desktop application.

Overall, Kotlin Multiplatform is a powerful tool for building cross-platform applications, and can help you to save time and effort by allowing you to write code once and use it across multiple platforms. It is especially useful for building desktop applications, as it allows you to reuse code from other platforms and to take advantage of the many benefits of the Kotlin language.

Tauri

Tauri is an open-source framework for building secure, lightweight native applications using the Rust programming language and the webview framework. It allows developers to build native desktop and mobile applications that can interact with web technologies, such as HTML, CSS, and JavaScript, and access native APIs and functionality.

One of the main advantages of Tauri is that it allows developers to build applications that have a native feel and performance, while still being able to leverage the power and flexibility of web technologies. It also has a strong focus on security, providing features such as content security policies, sanitized HTML rendering, and automatic updates.

Tauri is built on top of the webview framework, which provides a web runtime environment that can be embedded in native applications. It uses the Rust programming language to provide a high-performance and reliable backend for the application.

Tauri is primarily designed for building cross-platform desktop applications, but it also supports building mobile applications for Android and iOS. It is a relatively new framework and is still in active development, but it has a growing community of users and is being used to build a variety of applications.

Electron

An Electron app is a desktop application that is built using the Electron framework. Electron is an open-source framework developed by GitHub that allows developers to build cross-platform desktop applications using web technologies, such as HTML, CSS, and JavaScript.

Electron apps are built using a combination of web technologies and native code, and are distributed as standalone applications that can be installed on a user’s computer. They have access to the native operating system’s APIs and functionality, and can be used to build a wide variety of applications, including productivity tools, games, and developer tools.

One of the main advantages of Electron is that it allows developers to build desktop applications using the same technologies and skills they use for building web applications, making it easy to build cross-platform applications that have a native feel and performance. It also has a rich ecosystem of third-party libraries and tools, and is supported by a large and active community of developers.

Some examples of popular Electron apps include Visual Studio Code, Slack, and Discord.

Neutralinojs

Neutralinojs is an open-source framework for building cross-platform desktop applications using web technologies, such as HTML, CSS, and JavaScript. It allows developers to build natively compiled applications that can run on Windows, macOS, and Linux, and provides a range of APIs and tools for accessing native functionality and interacting with the host operating system.

One of the main advantages of Neutralinojs is that it allows developers to build desktop applications using familiar web technologies, while still being able to access native APIs and functionality. It also has a lightweight runtime and a small footprint, making it well-suited for building applications that need to be fast and efficient.

Neutralinojs is built on top of the Node.js runtime and uses the Electron framework under the hood. It also includes a range of tools and libraries for building and packaging applications, as well as a command-line interface for managing projects and building applications.

Neutralinojs is a relatively new framework and is still in active development, but it has a growing community of users and is being used to build a variety of applications.

Web Applications

Svelte + Sapper

Svelte is a JavaScript framework for building web applications. It is a modern, lightweight framework that is designed to be fast and easy to use.

Sapper is a framework for building web applications with Svelte. It is built on top of Svelte and provides a set of tools and libraries for building server-rendered and statically generated web applications.

Sapper is designed to be easy to use and lightweight, with a focus on developer experience and performance. It includes features such as automatic code-splitting, offline support, and server-side rendering, making it well-suited for building modern web applications.

Sapper is built using the same principles as Svelte, with a focus on simplicity and performance. It is a relatively new framework, but it has a growing community of users and is being used to build a variety of web applications.

Vuejs

Vue.js is an open-source JavaScript framework for building web user interfaces. It is a progressive framework, which means that it can be used to build small, self-contained components or large, complex applications.

Vue.js is designed to be easy to use and lightweight, with a focus on developer experience and performance. It uses a template-based syntax and a reactive component model, which makes it easy to build interactive and responsive user interfaces.

Vue.js has a strong ecosystem of third-party libraries and tools, and is supported by a large and active community of developers. It is well-suited for building a variety of web applications, including single-page applications (SPAs), progressive web apps (PWAs), and mobile-optimized web apps.

Some examples of popular applications built using Vue.js include the 9GAG social media platform, the GitLab version control system, and the Xiaomi shopping website.

Laravel + Inertiajs

Laravel is a free, open-source PHP web application framework that is designed for web application development. It follows the model-view-controller (MVC) architectural pattern, and is known for its expressive syntax, which makes it easier to write and maintain code. Laravel includes a range of features and tools that make it easier to build and maintain web applications, including routing, authentication, sessions, and caching.

Inertia.js is a JavaScript library that allows you to build single-page applications (SPAs) using server-side rendering (SSR). It is designed to be used with Laravel, and provides a simple and elegant way to build SPAs that are powered by a Laravel backend.

Inertia.js works by sending requests from the client-side JavaScript application to the server, which then renders the appropriate view and returns it to the client. This allows you to build SPAs that feel more like traditional server-rendered applications, while still taking advantage of the benefits of a SPA.

Laravel and Inertia.js are both powerful tools for building modern web applications, and are often used together to build high-quality, feature-rich applications.

Django

Django is a free and open-source web framework written in Python. It is designed to be fast, secure, and flexible, and is well-suited for building complex, data-driven websites and web applications.

Django follows the model-template-view (MTV) architectural pattern and is based on the principle of “don’t repeat yourself” (DRY), which means that it encourages developers to build reusable code that is easy to maintain and update.

Django includes a range of features and tools that make it easy to build web applications quickly and efficiently, including a powerful ORM (Object-Relational Mapper) for working with databases, a built-in web server for testing and development, and support for internationalization and localization.

Django is used by a wide range of organizations and companies to build a variety of web applications, including content management systems, e-commerce platforms, and social media websites. Some examples of popular applications built using Django include Pinterest, Instagram, and The Washington Post.

Angular

Angular is a JavaScript-based front-end web application framework that is primarily used to build single-page applications (SPAs). It was developed and maintained by Google, and is widely used for building complex and interactive web applications.

Angular uses a declarative approach to building web applications, meaning that developers describe what they want the application to do, rather than writing imperative code that tells the application how to do it. This makes it easier to build and maintain large, complex applications, as well as to reuse code across different parts of the application.

Angular follows the Model-View-Controller (MVC) architecture, which separates the application into different components that handle specific tasks. The model represents the data and business logic of the application, the view is the user interface (UI) that the user interacts with, and the controller is the glue that connects the model and the view.

In addition to its core features, Angular also provides a range of tools and services for testing, debugging, and deploying applications. It is a popular choice for building modern web applications, and is used by many companies and organizations around the world.

You should be aware of TALL Stack and it’s resources

Vigowebs — Tue, 13 Dec 2022 17:20:51 +0000

TALL Stack

TALL stack is a full-stack development solution used for building powerful, modern, and reactive web applications. TALL stacks are a set of frameworks such as Tailwind CSS, Alpine JS, Laravel and Livewire.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides single-purpose utility classes that we can use directly inside our markup to design a page.

Alpine JS

Alpine.js is a tiny, declarative JavaScript framework that allows you to create simple interactive components on the page.

Laravel

Laravel is a web application framework with expressive, elegant syntax. A web framework provides a structure and starting point for creating your application, allowing you to focus on creating something amazing while you sweat the details.

Livewire

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

TALL Stack’s Resources

Filament

The filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

Admin panel — A full-featured Laravel admin panel with interactive tables, sort, search and filter functionalities.
Form builder — An intuitive Laravel form builder which generates date pickers, searchable select menus, a rich text editor and file upload fields just with one line of PHP code.
Table builder — Build custom datatables, complete with sort, search and filter functionalities, with a simple PHP interface.
Notifications — Send beautiful notifications, with animations and the full power of Livewire, using a fluent PHP interface.

Blade UI Kits

Blade UI Kit is a set of renderless components to utilize in your Laravel Blade views. In all essence, it’s a collection of useful utilities, connect the dots between different parts of the TALL stack.

Livewire Powergrids

PowerGrid creates modern, powerful and easy-to-customize Datatables based on the Laravel Livewire library.

Features:

Filters & Search
Column Sorting, Sum, Count & Average in Header/Footer
Pagination
Action Checkboxes and Action Buttons
Works with Bootstrap 5 or Tailwind CSS 3x
Livewire Modal Integration (Wire Elements Modal)

Tailwind UI

Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS.

MarkdownX

A new markdown editor built for the TALL stack. Packed with dropdowns, previews, uploads, and more.

Blade Icons

A package to easily make use of SVG icons in your Laravel Blade views. Choose from a wide selection of icon sets.

Wire UI

A simple, fast and elegant way to add blade components made with alpine.js and tailwind, ready to use, enjoy the ease. Livewire components and Tall Stack components.

Connect to me on Twitter if you have any questions.

Trending 6 Tech Stacks you should be aware of

Vigowebs — Sat, 26 Nov 2022 16:47:15 +0000

Tech Stacks

A tech stack is the combination of technologies a company uses to build and run an application or project. A tech stack typically consists of programming languages, frameworks, a database, front-end tools, back-end tools, and applications connected via APIs.

Tech Stacks Components

Tech stacks consists of two components the frontend and backend. Both work together to create a working tech stacks. This is also referred as “Application stack”.

Frontend Tech Stack

The frontend tech stack is the client side of the application. Client-side refers to the “user interface” everything in a web application that is displayed on the end user device (Client). HTML, CSS (SASS, LESS) and JavaScript or TypeScript are the three elements of the front end stack.

Backend Tech Stack

The backend tech stack is server side of the application. Server side means everything happens on the server. Database (MySQL, MongoDB, PostgreSQL), web server (Apache, IIS), programming languages (JavaScript, PHP, Python) and frameworks (Laravel, Ruby on rails) are elements of backend stack

Popular Six Tech Stacks

Here are the popular six tech stacks to consider:

LAMP

A LAMP stack is a set of open source technologies that developers use to build websites and web applications. LAMP is an acronym for the operating system, Linux; the web server, Apache; the database server, MySQL; and the programming language, PHP. LAMP stack used for backend application such as data processing software, database components, business logic in code and API for communicating with other applications.

MEAN

The MEAN stack is a JavaScript based framework for developing web applications. The four technologies make up the layer of stacks such as MongoDB; document database, Express; Node JS web framework, Angular; a client side JavaScript framework and Node; the JavaScript web server.

MERN

MERN and MEAN are similar in many ways. The difference is that React is substituted for Angular. MERN Stack is designed to make the development process easier and smoother. MERN Stack Developers can efficiently build web and mobile applications using standard processes and abilities.

MEVN

MEVN stack is the open-source JavaScript software stack that has emerged as a new and evolving way to build powerful and dynamic web applications. MEVN is an acronym of MongoDB, Express, Vue; a client side progressive JavaScript framework and Node.

PERN

PERN stack consist of PostgreSQL; object relational database, Express; Node JS web framework, React; a JavaScript library and Node; the JavaScript web server. Using this technologies, one can build a full stack web application with CRUD operations.

TALL

A new way to build rich, reactive web application using TALL Stack, which consist of awesome technologies such as Tailwind CSS; CSS framework, Alpine; a light weight JavaScript framework, Laravel; PHP framework and Livewire; a full stack framework for Laravel.

Conclusion

As a final thought, it can be challenging to choose the right tech stacks. However, this idea should guide your decision; choose technologies and tools that parallel your project’s objectives. Don’t depend on popular technologies just because they work for big and prominent companies. Weigh your options; consider all the pros and cons of your tech stacks. Remember, a wrong choice of technology stacks can end in a financial disaster.

If you like to receive development tips and resources information directly to your inbox, subscribe to my newsletter: Vigo's Weekly

Connect to me on Twitter if you have any questions.

Grow your business using awesome Artificial Intelligence(AI) tools

Vigowebs — Mon, 14 Nov 2022 18:29:08 +0000

Artificial Intelligence

The ability of a digital computer or computer-controlled robot to perform tasks commonly associated with intelligent beings. The term is frequently applied to the project of developing systems endowed with the intellectual processes characteristic of humans, such as the ability to reason, discover meaning, generalize, or learn from past experience.

Advantages of Artificial Intelligence

Deeper data analysis
Reduce human errors
Perform repetitive jobs
Digital assistance
Faster decisions
Increased efficiency

Here, I am sharing some of the artificial intelligence tools that help to grow and increase your business.

Site Search

In the past, text entered in a search box produced similar results for most users. The next generation of search is about AI-powered search have made it possible to produce more-relevant results that are adjusted in real time based on factors such as browsing history, the intent commonly associated with the words used, and high-performing content from similar searches. AI-powered search has the potential to give your site users exactly what they want, which in turn, can contribute to helping you meet your business goals for greater customer satisfaction, higher conversion rates, and increased revenue.

Popular tools: Algolia and Lucid works.

Chat bot

A chatbot is software that simulates human-like conversations with users via text messages on chat. Its key task is to help users by providing answers to their questions.

Popular tools: Dialogflow, Chatbot, Landbot, Botflow, Rasa, Chai, and kuki.

Image background remover

Currently, we are using the design tool such as Adobe photoshop or GIMP to remove the background of image. This can be done by only skilled designers. But now, using AI can remove the image background in a minute.

Popular tools: remove.bg, Magic eraser and Slazzer.

Video background remover

We are using green screens and chroma keying techniques to get rid of background free videos. But now, you can record your footage anywhere and using AI tools remove the video background in a single click.

Popular tools: Unscreen and Remove it.

Copy Writing

Copywriting is the occupation of writing text for the purpose of advertising, campaign or other forms of marketing. It is written content that aims to increase brand awareness and ultimately persuade a person or group to take a particular action. Now, AI writes the SEO friendly copies such as blog content, Digital ad, ecommerce copy, website copy and social media content.

Popular tools: Copy.ai, Mark copy, Any word, AI writer and Qopy Writer.

Grammar check

Grammar checkers are effective at correcting rule-based mistakes such as subject-verb agreement, wrong prepositions or spell error. AI based tools rephrase the sentence making your text more fluid and pleasant to read, fix word order, reduce repetitions, replace simple words with idioms, and boost your overall style.

Popular tools: Grammarly, Linguix and Trinka.

Meeting Assistant

Meeting assistant assists the meeting with all aspects of planning a live or virtual meeting for an organization. Coordinates attendee registration and post-event evaluations. AI tools perform scheduling, sharing agenda, no show remainders, automatic recording, transcription, live bookmarking, note taking, AI generated notes, snippets, playlist and comments.

Popular tools: Avoma, Fire flies and Otter.

Hiring process

Hiring or interview is a structured conversation at which somebody is asked questions to find out if he/she is suitable for a job, course of study, etc. Now, in hiring process using AI tools helps you speed up hiring with AI screening, skills assessments, video interview and code test.

Popular tools: Velents, Interviewer, Findem and Iview.

Apart from this, AI using in translation, text to speech, speech to text, image enlarger, transcription, video editing, character creation, audio editing, SEO, etc..,

Do you know any other AI uses or tools? Please share them below.

Connect to me on Twitter if you have any questions.

Gumstore - Responsive Gumroad Store Template

Vigowebs — Sun, 25 Sep 2022 16:38:26 +0000

Gumstore is a responsive Gumroad store template built with Tailwind CSS. It consists of 2 static responsive template.

Gumint - Product card with modal option to buy Gumroad product without leaving the web page.

Gummie - Simple product card page CTA link which redirect to Gumroad page.

Template Features:

Build with Tailwind CSS v3.1.8
Light and dark mode
Fully Responsive and easy to customize
Compatible with all modern browsers
W3C Validated Code
Clean code with comments
Product card with Alpine JS Modal
Detailed documentation

Download the Gumroad store template for free now

Melina - Tailwind CSS Portfolio Template

Vigowebs — Wed, 07 Sep 2022 03:32:27 +0000

Melina is a responsive HTML portfolio template built with Tailwind CSS version 3+. Some of the features of this template.

Template Features:

Build with Tailwind CSS v3.1.8
Light and dark mode
Fully Responsive and easy to customize
Compatible with all modern browsers
W3C Validated Code
Clean code with comments
Validated PHP Contact form
Detailed documentation

Check it out Melina - Portfolio template now

Flutter Ecommerce app 🛒

Vigowebs — Sun, 20 Feb 2022 12:28:24 +0000

Shoppr eCommerce App in Flutter

Shoppr is an e-commerce app build in Flutter (an open source framework by Google). This app contains many screens (listed below) for a production ready e-commerce applications.

App Features

Build with latest version of Flutter and Dart
Compatible with Android and iOS
Easy to use UI and beautiful design
Internationalization support (with 5 languages, you can also add your own)
Dark and Light theme support
Login and Registration screens
Used Riverpod (state management) features
Free icons

Screens Included

Splash Screen
Login Screen
Registration Screen
Home tab
Catalogue tab
Profile tab
Cart tab
Filter Page
Custom Filter List Page
Product Details Page
Reviews page
Add Review page
Order History Page
Order Details Page
Address List Page
Add New Address Page
Personal Info Page
Cart Page

Used Frameworks & Libraries

Flutter - >=2.15.1 <3.0.0
cupertino_icons: ^1.0.2
flex_color_scheme: ^4.2.0
flutter_hooks: ^0.18.2
flutter_rating_bar: ^4.0.0
gap: ^2.0.0
getwidget: ^2.0.4
go_router: ^3.0.1
hooks_riverpod: ^1.0.3
image_picker: ^0.8.4+6
shared_preferences: ^2.0.13
timelines: ^0.1.0

Source code

Get the full source code of this app at Gumroad

Frequently asked GOLANG Interview Questions

Vigowebs — Thu, 10 Feb 2022 18:24:54 +0000

What are string literals?

A string literal is a string constant formed by concatenating characters. The two forms of string literal are raw and interpreted string literals. Raw string literals are written within backticks (foo) and are filled with uninterpreted UTF-8 characters. Interpreted string literals are what we commonly think of as strings, written within double quotes and containing any character except newline and unfinished double quotes.

What is the static type declaration of a variable in Go?

Static type variable declaration provides assurance to the compiler that there is one variable existing with the given type and name so that compiler proceeds for further compilation without needing complete detail about the variable. A variable declaration has its meaning at the time of compilation only, the compiler needs actual variable declaration at the time of linking of the program.

What are the several built-in supports in Go?

A list of built-in supports in Go:
• Container: container/list, container/heap
• Web Server: net/http
• Cryptography: Crypto/md5, crypto/sha1
• Compression: compress/gzip
• Database: database/sql

What is a goroutine?

A goroutine is a lightweight execution thread in the Go programming language and a function that executes concurrently with the rest of the program. Goroutines are incredibly cheap when compared to traditional threads as the overhead of creating a goroutine is very low. Therefore, they are widely used in Go for concurrent programming. To invoke a function as a goroutine, use the go keyword. Syntax go foo() We write go before the function foo to invoke it as a goroutine. The function foo() will run concurrently or asynchronously with the calling function. Example We define a function foo that prints numbers from 1 to 3 along with the passed string. We add a delay using time.Sleep() inside the for loop. Without the delay, the first goroutine will finish executing even before the second one starts. The delay ensures that the goroutines are running concurrently before the results are shown.

package main
import (
    "fmt"
    "time"
)

// Prints numbers from 1-3 along with the passed string
func foo(s string) {
    for i := 1; i <= 3; i++ {
        time.Sleep(100 * time.Millisecond)
        fmt.Println(s, ": ", i)
    }
}

func main() {

    // Starting two goroutines
    go foo("1st goroutine")
    go foo("2nd goroutine")

    // Wait for goroutines to finish before main goroutine ends
    time.Sleep(time.Second)
    fmt.Println("Main goroutine finished")
}

What are the Go datatypes?

The data type is divided into four categories which are as follows:

Basic type: Numbers, strings, and Booleans
Aggregate type: Array and structs
Reference type: Pointers, slices, maps, functions, and channels
Interface type

How do you concatenate strings?

The easiest way to concatenate strings is to use the concatenation operator (+), which allows you to add strings as you would numerical values.

package main
import "fmt"

func main() { 

    // Creating and initializing strings 
    // using var keyword 
    var str1 string 
    str1 = "Hello "

    var str2 string 
    str2 = "Reader!"

    // Concatenating strings 
    // Using + operator 
    fmt.Println("New string 1: ", str1+str2) 

    // Creating and initializing strings 
    // Using shorthand declaration 
    str3 := "Welcome"
    str4 := "vigowebs"

    // Concatenating strings 
    // Using + operator 
    result := str3 + " to " + str4 

    fmt.Println("New string 2: ", result) 

}

Does Go have a runtime?

Go does have an extensive library, called the runtime, that is part of every Go program. The runtime library implements garbage collection, concurrency, stack management, and other critical features of the Go language. Although it is more central to the language, Go's runtime is analogous to libc, the C library. It is important to understand, however, that Go's runtime does not include a virtual machine, such as is provided by the Java runtime. Go programs are compiled ahead of time to native machine code (or JavaScript or WebAssembly, for some variant implementations). Thus, although the term is often used to describe the virtual environment in which a program runs, in Go the word “runtime” is just the name given to the library providing critical language services.

How does garbage collector work in Go?
What are the looping constructs in Go?
What are Lvalue and Rvalue in Golang?
What is shadowing in Go?

Explore more GoLang questions with answer, check out our Interview Questions app which contains 1600 questions from 35+ trending topic.