Dima pfp

Dima

@xdimax

764 Following
588 Followers
Dima pfp
Dima
@xdimax
How different values of the object-fit CSS property behave for image elements • fill - the picture fully fits into the specified dimensions without observing its own proportions • contain - the picture will adjust to the specified dimensions so as to fit inside completely without violating the proportions • cover - the picture will fill the entire available area without violating the proportions, cutting off everything unnecessary
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Advanced JavaScript debugging using console.table() Pretty neat, isn't it? Of course, table works best with tabular data. If all objects have completely different fields, you will get a table in which most of the cells are undefined. But despite this, everything will look neat, giving you a good overall overview
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Swiss knife for working with arrays. Method reduce() The reduce method collapses the array to one value (reducts) e using the passed colback function and the initial value. The callback function will be called for each element of the array, and should always return the result
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
super useful functions in CSS - The clamp() function allows you to limit the range of changes of a certain value by setting its lower and upper limits
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
A site with free React and Tailwind components that can be useful at any time. There are 32 items in the database now All of them can be customized: change color, size, add a shadow. The components have documentation and use cases to help beginners 🔗 Link: https://www.webbie.app/
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Gradient rounded frame with CSS The background property is quite universal and allows you to set several backgrounds and set their parameters. So we make two backgrounds: one with a gradient, the other solid black in the form of a gradient and overlay them on each other
0 reply
0 recast
1 reaction
Dima pfp
Dima
@xdimax
Front-end documentation - a list of training materials, articles and resources for studying the frontend It offers many free programming books, screencasts, podcasts and even video lessons. The list of links is well organised and can be a starting point for training the profession from scratch 🔗 Link: https://github.com/codesandtags/frontend-documentation
2 replies
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Repository with TypeScript tasks - 150+ questions with online verification The project will help you understand how the type system works, write your own utilities or just spend time solving problems 🔗 Link: https://github.com/type-challenges/type-challenges
1 reply
0 recast
3 reactions
Dima pfp
Dima
@xdimax
Animate.css is a library of CSS animations. It provides many ready-made animation effects for web page elements. ⛓ Link https://animate.style/
1 reply
0 recast
1 reaction
Dima pfp
Dima
@xdimax
The way of attenuating a long text The trick here is to place a pseudo-element on top of the text and give it a linear gradient from left to right, going from transparent to solid colour to create this attenuation effect
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
https://wallet.coinbase.com/nft/mint/mistermiggles
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Emmet Cheat Sheet is a cheat sheet site for Emmet. Here are collected all the abbreviations and formulas, in the writing of which large pieces of code are revealed, and this greatly accelerates the development of the site. ⛓ Link: https://docs.emmet.io/cheat-sheet
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
What's new in web development this month? Language model in your browser, available as Web API - Patrick Brosset- https://patrickbrosset.com/articles/2024-07-04-a-language-model-in-your-browser-accessible-as-a-web-api/
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Grid-area short cheat sheet In the short, the values are specified in the following order: row-start / column-start / row-end / column-end, that is, first specify both beginnings, and then both ends
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Web Skills - a visual overview of skills for frontend learners with links to selected materials: from the basics of HTML/CSS/JavaScript to databases, UX design and teamwork 🔗 Link: https://andreasbm.github.io/web-skills/
1 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Guide how to make inclined blocks on css Using clip-path, you can set the visible area of the element. Everything that goes beyond it is hidden
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
0 reply
0 recast
0 reaction
Dima pfp
Dima
@xdimax
Accent-color property Sets the accent color for some user interface controls. Browsers that support accent-color currently apply it to the following HTML elements Support for the property at the moment is 94.03%
0 reply
0 recast
1 reaction
Dima pfp
Dima
@xdimax
New transform syntax Sometimes, when working with the animation of key frames. If the element already has 3 transformations and you only want to change the scale during the animation, you will have to repeat all three transformation functions again. But with this syntax, you can set the transformation functions separately The transform property is NOT outdated. It still has its application. For example, when you want to specify several transformations in a certain order - translate -> rotate -> translate -> rotate
0 reply
0 recast
1 reaction
Dima pfp
Dima
@xdimax
Html-css-javascript-projects is a repository of more than 100 projects for web development, including ready-made codes for creating landing pages, user interfaces and web applications. ⛓ Link: https://github.com/solygambas/html-css-javascript-projects? Tab=readme-ov-file
1 reply
0 recast
1 reaction