Mindblown: a blog about philosophy.
-
How To Use Custom Preloader In Vue.Js
Use Vue.js custom Preloader and it’s easily customizable also, without any npm plugin and without jquery. Components 1: App.vue Inside the src / App.vue file, Add the following elements. <template> <div v-if=”isLoading” class=”preloader”> <div class=”d-table”> <div class=”d-table-cell”> <div class=”lds-spinner”> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>…
-
Apply Design Thoughtfully
A big part of a UX designer’s work is problem-solving. Indeed, the wide range of principles and mindsets employed by designers can be applied beyond the limits of design. Enter the malicious problem. Basically, these are problems in the world that are incredibly difficult to solve, due to a complex web of factors. How to…
-
What skills does a UX designer need
To carry out such a varied range of tasks, UX designers need a diverse skillset: 1) Technical and design skills – wireframing and prototyping with the help of various digital tools. 2) Analytical skills – ability to interpret data and feedback correctly, problem-solving skills. 3) Empathy – the ability to step into the…
-
How to add different style blog custom widgets in elementor page builder
In this article, you will come to know how to add different styles of blog custom widgets in elementor page builder on a website! so let’s start. <?php namespace Elementor; class Post_Area extends Widget_Base{ public function get_name(){ return “Teciva_Post”; } public function get_title(){ return “Posts”; } public function get_icon(){ return “eicon-post-list”; } public function get_categories(){…
-
How to Copy WordPress Post URL to Clipboard
This tutorial is about how to copy post URL to the clipboard with JavaScript. Let’s do start Step 1: Add HTML <a href=”#” onclick=”copyToClipboard(this)” data-formatted=”<?php echo get_the_permalink();?>”> Copy URL </a> Step 2: Add JavaScript <script> function copyToClipboard(text) { var inputc = document.body.appendChild(document.createElement(“input”)); var postURL = text.getAttribute(“data-formatted”); // Get post URL inputc.value = postURL; inputc.focus(); inputc.select();…
-
How To Use Custom Mouse Cursor with Simple JS In Html
HTML: <!–Mouce Cursor–> <div class=”mouseCursor cursor-outer”></div> <div class=”mouseCursor cursor-inner”><span>Drag</span></div> <!–Mouce Cursor–> CSS: .cursor-outer { margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; border: 2px solid #000000; box-sizing: border-box; z-index: 10000000; opacity: 0.5; transition: all 0.08s ease-out; } .mouseCursor { position: fixed; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0);…
-
How To Create Stylist Services Card With HTML And CSS3
You can use these service cards to make your website beautiful. Below is the service style code on how to use them. In this article, I have provided a step-by-step guide on how to accomplish this for your own website service card. HTML COde: <!– BOX DESIGN –> <section class=”box_design text-center”> <div class=”container”> <div class=”row”>…
-
How to run existing Angular project into Windows with VSCODE
Hello there! Welcome back to another TechSolutionsHere article. Today we will run the existing Angular project into Windows with Visual Studio Code. Step 1: Open your project into the Visual Studio Code editor by going File->Open Folder and then select your project. Step 2: Open VSCODE terminal by Ctrl+~. Type npm install and hit Enter. Wait…
-
How to Create a React Fullscreen Popup Video?
Create a nice fullscreen popup video lightbox easily and make your website beautiful! Installation Run the command npm install fslightbox-react Create a Component import React, { useState } from ‘react’; import FsLightbox from ‘fslightbox-react’; const LightboxComponent = () => { const [toggler, setToggler] = useState(false); return ( <> <button onClick={ () => setToggler(!toggler) }> Toggle…
-
How to place yourself in the right niche as a UI / UX designer
Even though we often talk about how we all have our own uniqueness as designers and creators in reality most of us end up following each other. This has somewhere resulted in similarities in problems, approaches, and most importantly solutions that most designers have to offer today. What went wrong and how can we retain…
-
How To Use Custom Back To Top Button In Vue.js
Use Vue.js custom back to top button and it’s easily customizable also, without any npm plugin and without jquery. Step 1: Components <template> <div @click=”scrollToTop()” :class=”[‘back-to-top-btn’, {‘go-top’: isTop}]” > <i class=’ri-arrow-up-s-line’></i> </div> </template> Step 2: JS <script> export default { name: ‘BackToTop’, data (){ return { isTop: false } }, methods: { scrollToTop() { window.scrollTo(behavior:…
-
Top 10 Website to Download Free Images With No Copyright
If you are looking to download free images with no copyright then you are in the right place! In this article I will share the top 9 websites where you can download images freely. So let’s start! 1.Unsplash Unsplash has its own license that primarily enables you to use the photographs at no cost, in…
-
How to Get ACF Value from Main Blog Page?
If you have ACF fields on your main blog page and you are troubled with displaying the field, this tutorial will help you to sort it out. Let’s do start Let’s, we have an ACF field for the page banner title. Basically, we get and display the field like the below codes // Getting Value…
-
How To Use DownCount Time In Your HTML Template
HTML: <ul class=”live-auctions-countdown flex-wrap d-flex justify-content-center”> <li class=”align-items-center flex-column d-flex justify-content-center”> <span class=”days”>00</span> <p>Days</p> </li> <li class=”align-items-center flex-column d-flex justify-content-center”> <span class=”hours”>00</span> <p>Hours</p> </li> <li class=”align-items-center flex-column d-flex justify-content-center”> <span class=”minutes”>00</span> <p>Mins</p> </li> <li class=”align-items-center flex-column d-flex justify-content-center”> <span class=”seconds”>00</span> <p>Secs</p> </li> </ul> CSS: .live-auctions-countdown { position: absolute; padding-top: 20px; padding-bottom: 15px; bottom: 20px; left:…
-
How to calculate BMI with use simple JS
Form this tutorial you will find out how to calculate BMI Let’s start …. Step-1: HTML Code <div class=”calculate-form”> <form class=”form” id=”form” onsubmit=”return validateForm()”> <div class=”row”> <div class=”col-lg-12″> <div class=”form-group”> <input type=”text” id=”height” autocomplete=”off” class=”form-control” required data-error=”Please Enter Height” placeholder=”Height*”> </div> </div> <div class=”col-lg-12″> <div class=”form-group”> <input type=”text” id=”weight” autocomplete=”off” class=”form-control” required data-error=”Please Enter Weight”…
-
How to use your website 5 button style step by step.
Use these buttons for your website. And at the same time enjoy the beauty of your website. In the index.html file below, I’ve created the basic structure for a webpage and added a single button. HTML Code Here: <div class=”middle”> <a class=”btn btn-1″ href=”#”>HOVER ME</a> <a class=”btn btn-2″ href=”#”>HOVER ME</a> <a class=”btn btn-3″ href=”#”>HOVER ME</a>…
-
How To Add Datepicker On Template
Form this example you will find out how to add datepicker on a template So, Let’s get started! HTML Code : <form class=”appointment-form”> <div class=”form-group”> <input type=”text” class=”form-control” placeholder=”Date” id=”datepicker”> </div> </form> CSS Libraries : (jquery-ui.min.css) /*! jQuery UI – v1.12.1 – 2022-03-02 * http://jqueryui.com * Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css,…
-
Top 10 UI/UX Trends That Will Rule In 2022
We designers always have to keep updated ourselves with the trends. Today we will talk about the top 10 UI/UX design trends that will rule throughout the year. Let’s jump into these rules: Scrollytelling: Scrolling is boring. If you wish to grab attention, you would like to implement scrollytelling. Of course, you will want…
-
How To Create A Exceptional Button With Simple JS In HTML
You can use these buttons to make your website beautiful. Below is the button’s style code on how to use them. So, Let’s get started! HTML <a href=”#” class=”default-btn”>Contact Us<span></span></a> CSS .default-btn { border: none; position: relative; display: inline-block; text-align: center; overflow: hidden; padding: 15px 30px; z-index: 1; background-color: #fd9518; color: $white-color; transition: .5s;…
Got any book recommendations?