This media is not supported in your browser
VIEW IN TELEGRAM
👨🎨 Magic UI for React
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
❤9👍2
🏢 CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.
Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets.
Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets.
👍6🔥5❤3
🦸 DrawKit — free illustrations, animations and mockups
A large library of free vector illustrations for free use. You can use them to design any projects: websites, presentations or even T-shirt prints.
The material is presented in thematic sets: food, mental health, online store and more. And most importantly, the pictures are updated every week. In order to download the files, you will need regular registration.
A large library of free vector illustrations for free use. You can use them to design any projects: websites, presentations or even T-shirt prints.
The material is presented in thematic sets: food, mental health, online store and more. And most importantly, the pictures are updated every week. In order to download the files, you will need regular registration.
👍14❤3
🪬 What Every Developer Should Know About HTTPS
Today, securing web applications and protecting user data is essential for every modern developer. HTTPS (HyperText Transfer Protocol Secure) has become the standard for safe data exchange on the internet, not only to keep information secure but also to build user trust. Let’s explore the key aspects of HTTPS, its role in data protection, and how to use it effectively in your projects.
Today, securing web applications and protecting user data is essential for every modern developer. HTTPS (HyperText Transfer Protocol Secure) has become the standard for safe data exchange on the internet, not only to keep information secure but also to build user trust. Let’s explore the key aspects of HTTPS, its role in data protection, and how to use it effectively in your projects.
❤9🔥3👍1
🧶 WebSockets, gRPC, MQTT, and SSE — Which Real-Time Notification Method Is For You?
Today, we will cover four popular stateful mechanisms: WebSockets, gRPC, MQTT, and Server-Sent Events (SSE). Each of these is unique in how they facilitate server-to-client messages, with pros and cons to consider before implementing a solution.
Today, we will cover four popular stateful mechanisms: WebSockets, gRPC, MQTT, and Server-Sent Events (SSE). Each of these is unique in how they facilitate server-to-client messages, with pros and cons to consider before implementing a solution.
❤9👍2🤔1
🦝 CSS @property and the New Style
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scratched the surface of what @property could offer. The ensuing demo explores what's possible in the next generation of CSS.
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scratched the surface of what @property could offer. The ensuing demo explores what's possible in the next generation of CSS.
👍9🔥3
📝 CSS display: contents
How can display: contents improve layout flexibility? This property makes elements "transparent" in the DOM, merging their children with the parent container without altering visual display. It helps eliminate unnecessary wrappers and simplifies styling, but be aware of accessibility issues with screen readers.
How can display: contents improve layout flexibility? This property makes elements "transparent" in the DOM, merging their children with the parent container without altering visual display. It helps eliminate unnecessary wrappers and simplifies styling, but be aware of accessibility issues with screen readers.
👍10❤2
🦷 The Ultimate Guide to Font Performance Optimization
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity.
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity.
🔥6👍4❤3
✅ Javascript Reduce method Example.
▫️ Finding the longest word in a given string.
▫️ Finding the longest word in a given string.
function longerWord(a, b) {
if (a.length > b.length) {
return a;
} else {
return b;
}
}
const sentence = 'Hey there what are you doing this Wednesday night';
const longest = sentence.split(' ').reduce(longerWord);
console.log(longest);
// Wednesday❤14👍9
🏃🏻♀️ Improving rendering performance with CSS content-visibility
Recently I got an interesting performance bug on emoji-picker-element:
Recently I got an interesting performance bug on emoji-picker-element:
I’m on a fedi instance with 19k custom emojis […] and when I open the emoji picker […], the page freezes for like a full second at least and overall performance stutters for a while after that.
👍6❤5
🥷 Two CSS Properties for Trimming Text Box Whitespace
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first formatted line of text and below the last formatted line of text in a text box, making the text box vertically larger than the content within.
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first formatted line of text and below the last formatted line of text in a text box, making the text box vertically larger than the content within.
👍5❤4