In the realm of frontend development, the quest for enhancing user interaction remains a constant pursuit. Developers, inspired by innovation, often seek solutions to refine components for a seamless user experience. Today, we delve into the construction of an advanced dropdown component using Svelte — a framework known for its simplicity and effectiveness.
![](http://webcf.waybackmachine.org/web/20231211165427im_/https://habrastorage.org/getpro/habr/hub/e0d/bdc/393/e0dbdc393c996e7a628c5d051d0fcf8b.png)
HTML *
Standart language of webpages markup
All the features of modals for Vue
Vue
+ modal window
is it that simple?
In this article I will go through the most popular points that use modal windows. I’ll also tell you how to do this elegantly and highly functional. Opening multiple windows, returning a value, and integrating with vue-router
are all covered here.
Creating a mini-game with drip effect and moving circles. Part 2. Final
![](https://webcf.waybackmachine.org/web/20231211165427im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/d5d/0f0/c6b/d5d0f0c6bd8d4f3d5eac7469b66b3dab.png)
Hello, dear users of the IT world!
In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!
I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.
Creating a mini-game with a drip effect and moving circles. Part 1
![](https://webcf.waybackmachine.org/web/20231211165427im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/4a7/b18/ff1/4a7b18ff116049e45ac5f505bc82dcde.png)
Hello, dear users of the IT world!
In modern web development there are many ways to make your website interesting and attractive to users. And even using simple techniques you can achieve great results!
I suggest you to create a mini-game from scratch yourself. And then, you can use it to liven up and add interactivity to any web page.
Web Content Elements
![](https://webcf.waybackmachine.org/web/20231211165427im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/69f/da8/52c/69fda852c70108d24b2c7b4bf16a5ec6.png)
React Content Elements is a JavaScript library that enhances the development experience by providing an additional layer for creating HTML structures and CSS styles.
10 WordPress plugins that you must know in 2023
![](https://webcf.waybackmachine.org/web/20231211165427im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/466/665/887/46666588729540af7e4497d938840015.jpg)
List of plugins that change the game. Great mix of famous and unknown plugins, that will make your life in 2023 easier.
How I create browser applications inside browsers
In 2013 Canonical tried to crowdfund Ubuntu Edge smartphone. Its main feature could be the ability to use the smartphone as a full-fledged PС. Unfortunatly, the crowdfunding campaign did not accumulate enough money, so a dream of having a universal device remained to be the dream.
I've been searching for universality, too, on the software side, not the hardware one. Today I can confidently say I found the necessary combination: Git and JavaScript.
As you know, I have already described the benefits of browser applications (nCKOB static site generator) and the benefits of using Git instead of yet another back-end with API (GitBudget to track personal spendings). Once GitBudget was out, I spent the remaining 2020 to build a system allowing one to create browser applications right inside browsers. GitJS is the name of that system.
Rich text editors from backend perspective
- Streaming of content from the rich text editor to other infrastructure tools like full-text search, warehouses, etc.
- Retrieving of content to clients: mobile, web, desktop.
- Storing of content in some kind of storage (SQL database in my case)
- Analyzing of content, which includes point 1, but also analyzing it from the perspective of our application
Why I keep track of spendings in a personal app made with Git+JS
Hi, folks, let me share my experience of creating an application to keep track of my spendings. Specifically, let me do it by answering the following questions:
- Why keep track of spendings in an application?
- Why did I create the application as a personal project?
- Why does the project use Git+JS?
1. Why keep track of spendings in an application?
I, like many people out there, wanted to become rich and successful. To become rich, one is often advised to run a personal budget, that's what I started to do several years ago. I'd like to point out that running my personal budget hasn't made me rich and successful, and I increased income simply by moving to Moscow.
3D Keyboard Key on CSS | Now It is Reality
Introduction
Hello, today we will create a 3D Keyboard Key like on the picture below (of course this will be a reality).
Eliminating Render-Blocking JavaScript and CSS on WordPress
Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading speed. Let’s say you’re using this tool and get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning. No need to worry! In this tutorial, I will show you how to address the issue.
Learn Bootstrap Fast With These 10 Helpful Tips
If you don’t already know, you must be wondering what responsive websites are? In simple terms, the responsiveness of a website means that when the size of the screen on which the website is being seen changes, the layout of the website responds to that and change. This makes the websites look good no matter what screen size it is being viewed on.
How does Bootstrap work?
There are two ways you can use Bootstrap. You can either import the Bootstrap into your code or you can download a sample Bootstrap project and build your website on that.
Bootstrap uses a 12-column model for website display, which is called a Bootstrap grid. On this grid, you can define different breakpoints to layout different components like headings, paragraphs, and buttons to make your website look visually appealing. When the screen size scales down, the components on the grid change layout to fit the smaller screen. This means that viewing the same website looks great on a normal size screen of your laptop and a smaller screen of your smartphone.
Bootstrap has become one of the most popular front-end development frameworks today. If you are a beginner who wants to start learning Bootstrap then you are on the right blog. Because here are the top 10 tips to learn and master Bootstrap!
Frontend Weekly Digest (9 — 15 September 2019)
Frontend Weekly Digest (26 August — 1 September 2019)
Frontend Weekly Digest (19 – 25 August 2019)
Frontend Weekly Digest (12 – 18 August 2019)
Frontend Weekly Digest (5 – 11 August 2019)
On the way to durable applications with PSKOV static site generator as an example
Hi, my name is Michael Kapelko. I have been developing software professionally for more than 10 years. I develop games and game development tools in my spare time.
This article describes my first durable application for desktop PCs: PSKOV static site generator.
Durability
A durable application is an application that functions without a single change on operating systems released in years 2010-2030. In other words, a durable application has backward compatibility of 10 years and has the stability to run for 10 years. Actually, PSKOV runs even under Windows 2000, so PSKOV has backward compatibility of 19 years.