본문 바로가기

webdesign

No code / Low code ... Is No-Code (or Low-Code) the Future of Development Trends to pay attention to in 2022 (for designers) 1. Crypto & NFTs 2. Short videos 3. Post-Pandemic world 4. No code 😱😱😱😱 NoCode Revolution | Where to start with NoCode Tools Learning HTML/CSS, is it Important for UI/UX Design? Tips and Advice Does UX Design Require Coding Skills? | Is Coding Mandatory for UX Design | Expert Talk on UX Design D.. 2022. 1. 28. 01:10 더보기
VS : Remove MDN references from Visual Studio Code apparently, there seems to be no way to disable the whole MDN box pop-up and not the other pop-ups (color picker). 😱 Is there a way to disable "MDN References Intellisense" popup (for HTML & CSS) in VS Code? Code -> Preferences -> Settings Search "editor hover enabled" and disable checkbox. This actually turns hover off completely; so I found changing "editor hover delay" to 3000 (3 seconds) cur.. 2022. 1. 27. 16:40 더보기
Where we're headed ... Apple Design Part 2: Beyond Flat Trends to pay attention to in 2022 (for designers) 1. Crypto & NFTs 2. Short videos 3. Post-Pandemic world 4. No code 2022. 1. 25. 21:26 더보기
🌈 🕳🐇 CSS Media Queries for iPad Pro Media Queries for Standard Devices iPad /* ----------- iPad 1, 2, Mini and Air ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixe.. 2022. 1. 24. 19:07 더보기
Sass : @import -> @use / @forward Stop using @import with Sass | @use and @forward explained style.scss > @use 'abstracts/fonts'; body { font-size: fonts.$font-size; } @use 'abstracts/fonts'; body { font-size:fonts. $font-size; } the reason for this is it prevents collisions between different variables if you have different variables with the same name. it used to be that you could easily overwrite one by accident, you can't do .. 2022. 1. 23. 02:12 더보기
performance / transition evernote 4 CSS - 1 퍼포먼스 높이기 css animation : the performance monitor / transition 🌈 Animating with CSS Transitions - A look at the transition properties transition: all; X transitions are CPU intensive. link .box { width:300px; height: 300px; background:red; transition-duration:1000ms; transition-property:background, transform; } .box : hover { background:blue; transform:rotate(45deg); } transiti.. 2022. 1. 20. 23:47 더보기
A fixed aspect ratio 5 More Must Know CSS Tricks That Almost Nobody Knows 06:09 - Aspect Ratio aspect-ratio:16/9 https://caniuse.com/?search=aspect-ratio "aspect-ratio" | Can I use... Support tables for HTML5, CSS3, etc CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches .. 2022. 1. 18. 05:03 더보기
CSS in JS : Don’t use runtime CSS-in-JS if you care about the load performance of your site Real-world CSS vs. CSS-in-JS performance comparison Real-world CSS vs. CSS-in-JS performance comparison I took the real app and convert it from Styled Components to Linaria to compare the app performance of CSS-in-JS and normal CSS. Continue reading if you want to know how it went. pustelto.com Don’t use runtime CSS-in-JS if you care about the load performance of your site. Simply less JS = Fast.. 2022. 1. 15. 02:15 더보기