software engineer with an eye for design
- Tweets 2,932
- Following 537
- Followers 16,723
- Likes 24,772
Responsive funny Credit Card form ✨
Using HTML, CSS and JavaScript
CodePen link below 👇
218
1,014
9,090
908,889
Responsive login form with fun animation ✨
Using HTML, CSS and JS.
CodePen link below 👇
132
487
4,044
401,544
Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨
CodePen link below 👇
68
376
3,297
385,895
I'm making the first video for my YouTube channel.
Do you have any advice on what programs you use for screen recording and video editing on macOS? 👀
ALT YouTube studio setup of Viki code
263
155
3,197
510,014
It took 40 minutes and 0 tears to create this toggle 😛
Just CSS and HTML.
Link to CodePen in comments 👇
63
154
1,849
342,942
✨CSS Tip: dvh — new viewport unit.
Mobile browsers have different UI for top and bottom bars and change viewport height while scrolling, leading to issues with the 'height: 100vh' property on phones.
But now we have "dvh" unit, dynamically adapting to the current viewport height.
49
228
1,704
317,495
Instagram so surprised me last week.
This video gathered 3.7 million views and brought me 15k new followers in 5 days 😱
112
43
1,126
132,858
I want to improve my setup.
What cool and interesting things can you recommend? 👀
ALT Setup viki.code
277
34
1,101
137,696
How to write CSS in 2024 ✨
1. nesting
2. :has
3. subgrids
4. :focus-within
5. layer
6. container queries
Thread 🧵👇
29
113
987
125,352
Since I now have a standing desk, I've created a calculator that finds the optimal desk height.
Maybe it will be helpful to someone 🫶
87
70
835
107,412
Did you know that on the Changes tab, you can view the entire history of CSS changes made in DevTools?
Often when fixing a bug, you try various styles in DevTools, then struggle to figure out what changed. Now it's so easy to do 😎
38
89
621
49,248
Creating a modal with smooth animation and closing it with the Esc key or by clicking outside, all in just 5 lines of CSS ✨
[popover] {
&:popover-open {
@ starting-style { opacity: 0 }
opacity: 1
}
opacity: 0;
transition: transform 0.5s, opacity 0.5s, display 0.5s
}
<button popovertarget="modal">Open</button>
<div id="modal" popover></div>
50
62
527
42,816
CSS Grids are becoming magic ✨
Now, to create a complex layout like Pinterest's, you only need one CSS property:
.container {
grid-template-rows: masonry;
}
Currently supported only in Safari
54
60
511
36,871
I have learned the answer to one of the questions in the entrance exam for the master's program in computer science
27
6
433
29,090
Responsive Christmas version for order tracking page with animations ✨
Using HTML, CSS and JS.
CodePen link below 👇
28
35
408
43,624
Cards carousel using pure CSS with scroll-driven animations ✨
Only 4 CSS lines:
view-timeline-name: --my-scroll;
view-timeline-axis: inline;
animation: linear my-animation;
animation-timeline: --my-scroll;
32
49
409
31,955
Absolutely loving my new @benqlighting_uk ScreenBar Pro monitor light!
The magic of motion detection automatically turning the light on and off is a game-changer.
Link here for more info 👇
53
5
326
85,963
Yesterday, below my post, a few people mockingly asked me, "Only $29/h?"
This is indeed my average rate, but not everyone understands how Upwork works.
I started my career on the platform at $5/h when I was in my first year of university. After that, my rate has steadily increased $15 - $20 - $30. Now, my rate fluctuates from $50 - $80, depending on whether it's full-time or not.
But I don't understand, since when is $29/h not enough? I'm not a native English speaker, I don't live in the USA, and only professionals with huge experience get $29/h in my country.
Don't judge by yourself. Everyone has their own peaks.
61
13
306
57,962
CodePen link:
codepen.io/viki-code/pen/QWY…
4
22
284
27,292
I'm thinking about changing my profile picture. Should I use this photo or something more geeky like my current one? 👀
54
2
261
26,268
Don’t cheat, post the last pic of yourself
(My gallery is filled with pictures of my setup, so I uploaded a last video)
38
5
254
55,965
Don't limit yourself to one tech or project. Spend at least an hour each evening exploring a new language or technology. It'll improve your skills
21
29
231
17,867
It took me so long to decide whether to buy a standing desk and now I can't work without one 😅
SmartDesk by @autonomous_ny It's comfortable and allows me to move during long, boring meetings and pair programming
33
5
226
28,357
CSS preference-reduced-transparency ✨
A new media query has been added to Chrome 118: prefer-reduced-transparency, which allows you to customize the interface for users who prefer reduced transparency.
This is very cool for accessibility.
Example of how to use it:
.card {
background-color: rgba(0, 0, 255, .2);
@-media (prefer-reduced-transparency: reduce) {
background-color: rgba(0, 0, 0, .8);
}
}
17
22
226
26,286
A bug shall not pass!
My Rubber Duck Debugging is twice as fast at finding a bug because it's Gandalf the Grey 🧙
27
2
207
15,905
Cable management Done ✅
The next step is to buy a treadmill for under the desk. Which one would you recommend? 👀
35
4
218
23,996
One property that will improve the performance of your CSS 🔥
Enter will-change property is the magic wand for optimizing animations & transitions. It hints to the browser about upcoming changes, boosting performance and smoothness
Support - 97.35%
21
23
200
64,433
I've just started working on the website design for my dev team.
What do you think of this hero section? 👀
55
6
180
14,848
Cute glowing gradient text using pure CSS ✨
p {
background: linear-gradient(90deg, ffcb52, f37055,
ef4e7b, a166ab, c165dd, 1de5e2, 5581f1);
filter: blur(15px);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
13
31
180
16,795
Did you know about the CSS property 'text-wrap: balance'?
It balances text distribution when wrapping, creating a harmonious layout. Now it's so easy to control the text 😎
24
11
165
16,541
I didn't open my IDE on the weekend for the first time in a year. It's so nice to finally relax 😌
How was your weekend?
52
1
171
16,244
I finally bought everything I needed for game streaming and created accounts on YouTube and Twitch.
The first stream will be this week already. I'll be playing Stellar Blade
22
4
158
20,312
My best decision this year is to start tweeting ❤️
I regret not starting to do this immediately after joining
20
6
148
18,404
Here's that CodePen link:
codepen.io/viki-code/pen/Jjx…
6
17
163
13,247
A fun and interactive phone number input form ✨
Perfect for a refund request page 😎
28
13
155
20,055
First, you think you don't need math in programming, and then you use trigonometric functions sin() and cos() in CSS to make elements move along a curve 🤯
transform: translate(calc(150px * cos(72deg)), calc(70px * sin(2 * 72deg)))
25
11
159
11,887
Today I signed up for driving school. It seems like I'll definitely achieve one of my goals for this year 🚗
31
6
137
12,956
Exploring Functional Pseudo-classes in CSS: is(), not(), has() ✨
is() - the function takes a selector list as its parameter and matches all elements that apply to any selector in the list. This simplifies the process of writing extensive selectors more concisely.
not() - selector matches every element that is not the specified element/selector.
has() - this selector assists in choosing elements that contain other elements that match the selector provided to the :has() function.
ALT Functional pseudo-classes CSS: is, not, has
19
13
135
14,973
When I began my coding journey, I had a small 11-inch laptop running Windows with 8GB of RAM and 128 HDD.
The key is to start. It doesn't matter what kind of PC you have now, you can learn on anything. When you gain experience, you will be able to buy any laptop.
Just start.
24
5
128
10,966
Color palette with color-mix() in 5 minutes ✨
This function offers a seamless way to blend colors, perfect for crafting color palettes effortlessly
Supported by all modern browsers
14
15
145
14,602
✨ CSS Pro Tip:
To calculate the ideal border-radius for a nested element, you need to use a simple formula:
outerRadius - padding = innerRadius
44 - 20 = 24
9
18
144
11,582
Attempt number 150 to create my personal website 😅. Hopefully, I'll finish it this time.
Share your portfolio 👇🏻
33
2
131
16,831
Did you know that you can style console messages in DevTools with CSS? 🤓
Just add the specifier "%c" at the beginning of the string and pass CSS as the second argument. You can use any CSS and even set a picture as background-image.
ALT Chrome DevTools
18
13
127
13,973
How do I create a vlog of a day in the life of a software developer for YouTube when my reality consists of moving between my bedroom and home office? 😞
41
2
118
17,790
CodePen link:
codepen.io/viki-code/pen/rNP…
9
21
124
11,905
✨CSS Tip: 3D transform
The transform: perspective(500px) property allows you to activate 3D space. You can add 3D effects for any elements.
Supported in all browsers.
14
15
122
12,304
Google just integrated Gemini AI directly into Chrome DevTools 🔥
AI-powered coding assistance right in your browser console
22
18
136
9,984
I bought ChatGPT premium today and installed the app on my Mac. It’s my best subscription ❤️
Have you tried the app yet?
60
3
121
24,084
There are so many interesting technologies and tools in frontend. But how do I find the time to try and learn all of this?
44
98
12,984
My statistics for two weeks of active game streaming on YouTube channel 🎮
Key indicators:
– 115 Subscribers
– 50.5 hours watch time
– 1,516 views
– 6 video
The next goal is 500 subscribers by August
23
5
104
13,376
✨ CSS Tip
How to set colors depending on the user's choice of a light or dark theme?
Prefers-color-scheme media query allows you to detect whether the user has selected a light or dark theme.
You can then apply specific styles based on the user's preference. Here's an example of how you can use this media query:
ALT Dark mode on CSS
10
8
99
14,133
On the weekend, my desk looks something like this 😂
Do you always keep things in order, or is creative chaos okay?
35
1
106
12,912
What is the BEM methodology? ✨
BEM is a methodology for naming CSS classes.
BEM divides the interface into three parts: Block, Element, and Modifier.
1. Block is a logically and functionally independent page component, such as a header, menu, form, card, or search block.
The name of a block should reflect its purpose ("What is it?") rather than its appearance ("What does it look like?" – big, red).
2. Element is a composite part of a block and can't be used separately from it.
The naming structure for an element should follow the pattern name-block__element-name, with the element name separated by a double underscore.
3. Modifier is an entity that defines the appearance, state, and behavior of an element or block.
Modifiers come in two types: boolean (field_disabled) and key-value (field_theme_dark).
What are the advantages of using BEM:
- Accelerated development:
Page building blocks are isolated, making them easy to use in different project parts.
- Accelerated refactoring:
Each block is a small, self-contained piece of code, allowing for easy navigation and preventing the style of elements in one block from affecting others.
ALT Description of the BEM methodology
11
11
104
16,921
✨CSS Tip: overscroll-behavior - control scrolling!
overscroll-behavior sets what a browser does when reaching the boundary of a scrolling area.
This is particularly useful for addressing scroll leakage in Safari mobile, where scrolling in an open modal scrolls the entire page
7
13
96
9,625
Happy #Halloween , everyone!
Halloween Pumpkin animation with HTML and CSS
CodePen link below 🎃👻
14
3
90
8,438
Today, I started a project from scratch for the first time in a year. It’s much more interesting than working with an existing architecture.
How often do you develop projects from scratch?
25
2
94
18,464
Algorithm Visualizer is a cool site for learning algorithms with examples and visualizations
6
10
91
7,979
In general, programming languages are similar, so it usually doesn't matter how many languages you know. If you have a strong background in computer science, understand algorithms, OOP and clean code, you can apply your experience to any language
10
12
87
5,835
CodePen link:
codepen.io/viki-code/pen/ZEZ…
4
7
81
7,591
My Top 5 VSCode Extensions
– Bongo Cat Buddy
– ErrorLens
– GitHub Pull Requests
– Random Everything
– Bookmarks
Share your "must-have" extensions for VSCode 👇
9
6
81
9,323
✨ Container queries
Container queries enable you to apply styles to an element based on the size of the element's container rather than the size of the screen.
.article-container {
container-type: inline-size;
container-name: article;
}
@ container article (min-width: 500px) {
/* new styles */
}
7
8
86
13,366
