Pembaruan untuk theme VS Code / Codium Mayukai Theme versi 2.1.0 sudah tersedia di VS Code Marketplace. Di pembaruan ini, disertakan juga icon bawaan theme yang diadopsi dari Ayu Icons yang bisa dipakai bersama theme ini. File Icon ini bernama "Mayukai Ayu" yang bisa dipilih dari setelan File Icon Theme. Unduh theme ini di VS Code Marketplace di VS Code masing-masing, atau cek demonya disini :
https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.mayukaithemevsc
===
Tidak lupa juga terdapat pembaruan untuk font pemrograman kustomisasi Iosevka yaitu Iosevka Mayukai versi 5.2.x , dengan perbaikan beberapa karakter di dalam font Mayukai Serif , Codepro, dan Monolite. Font ini sudah dilengkapi dengan Ligature dan Glyph Character terlengkap dengan bantuan Nerd Patcher. Unduh font ini di Github berikut.
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai/releases
Untuk spesimen font, bisa cek disini
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai
#font #iosevka #mayukai #vscode #codium #theme
https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.mayukaithemevsc
===
Tidak lupa juga terdapat pembaruan untuk font pemrograman kustomisasi Iosevka yaitu Iosevka Mayukai versi 5.2.x , dengan perbaikan beberapa karakter di dalam font Mayukai Serif , Codepro, dan Monolite. Font ini sudah dilengkapi dengan Ligature dan Glyph Character terlengkap dengan bantuan Nerd Patcher. Unduh font ini di Github berikut.
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai/releases
Untuk spesimen font, bisa cek disini
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai
#font #iosevka #mayukai #vscode #codium #theme
Latihan dari Joy Shaheb dan Freecodecamp membuat button element sambil mempelajari penggunaan CSS Box Shadow property
https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/
---
Beberapa cara untuk membuat element HTML ke tengah dengan bantuan CSS
https://www.freecodecamp.org/news/how-to-center-objects-using-css/
---
Beberapa sumber penting untuk belajar tentang web development dan web design
https://dev.to/codeozz/8-ultimate-ressources-for-learning-web-dev-in-2021-2-3le4
---
Contoh penggunaan responsive font dengan satuan rem di CSS
https://dev.to/bharati21/responsive-fonts-in-css-m44
---
Membuat tampilan UI seperti Slack dengan HTML dan CSS
https://dev.to/sirneij/building-slack-ui-with-pure-html5-css3-and-javascript-the-power-of-css-grids-and-flexbox-4ban
---
#css #boxshadow #freecodecamp #center #font #responsive #rem #flexbox
https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/
---
Beberapa cara untuk membuat element HTML ke tengah dengan bantuan CSS
https://www.freecodecamp.org/news/how-to-center-objects-using-css/
---
Beberapa sumber penting untuk belajar tentang web development dan web design
https://dev.to/codeozz/8-ultimate-ressources-for-learning-web-dev-in-2021-2-3le4
---
Contoh penggunaan responsive font dengan satuan rem di CSS
https://dev.to/bharati21/responsive-fonts-in-css-m44
---
Membuat tampilan UI seperti Slack dengan HTML dan CSS
https://dev.to/sirneij/building-slack-ui-with-pure-html5-css3-and-javascript-the-power-of-css-grids-and-flexbox-4ban
---
#css #boxshadow #freecodecamp #center #font #responsive #rem #flexbox
freeCodeCamp.org
Learn the CSS Box-Shadow Property by Coding a Beautiful Button ✨
Today we're gonna learn how to use CSS's box-shadow property to make beautiful website components. Along the way, we'll create a button and get hands-on experience using this property. Let's get started. 🎖️ Table of Contents * Why you should use the CSS…
Referensi beberapa font yang dapat membantu mempercantik desain aplikasi yang sedang dibuat
https://uxdesign.cc/the-curated-list-of-25-amazing-fonts-for-2021-fa768327cc94
#font #uiux
https://uxdesign.cc/the-curated-list-of-25-amazing-fonts-for-2021-fa768327cc94
#font #uiux
Medium
The curated list of 25 amazing fonts for 2021
The search for a perfect font ends here. Serifs, sans-serifs and more!
Pengenalan tentang element Line Break di HTML5
https://www.freecodecamp.org/news/html-line-break-how-to-break-a-line-with-the-html-br-tag/
---
Menambahkan spasi kosong di element HTML dengan bantuan karakter " "
https://www.freecodecamp.org/news/html-space-how-to-add-a-non-breaking-space-with-the-nbsp-character-entity/
---
Mengganti ukuran teks dan warna dengan CSS
https://www.freecodecamp.org/news/html-font-style-how-to-change-text-color-and-size-with-an-html-tag/
---
Pengenalan property display di CSS
https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
---
#html #css #linebreak #display #font #space
https://www.freecodecamp.org/news/html-line-break-how-to-break-a-line-with-the-html-br-tag/
---
Menambahkan spasi kosong di element HTML dengan bantuan karakter " "
https://www.freecodecamp.org/news/html-space-how-to-add-a-non-breaking-space-with-the-nbsp-character-entity/
---
Mengganti ukuran teks dan warna dengan CSS
https://www.freecodecamp.org/news/html-font-style-how-to-change-text-color-and-size-with-an-html-tag/
---
Pengenalan property display di CSS
https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
---
#html #css #linebreak #display #font #space
freeCodeCamp.org
HTML Line Break – How to Break a Line with the HTML
Tag
Tag
When you're writing HTML, you often need to insert line breaks. A line break is essential in addresses, poems, or when text exceeds the available browser width. If you don't insert your own line breaks, then the text gets formatted in an odd way. In this…
Boxicons, font icon untuk menjadi pilihan alternatif dari font awesome dan material icons yang dapat dipakai di dalam aplikasi web
https://boxicons.com/
#font #icon #boxicon
https://boxicons.com/
#font #icon #boxicon
Boxicons
High Quality Web Icons
Pengenalan tentang font family yang biasa dipakai dalam CSS dna HTML
https://www.freecodecamp.org/news/html-font-css-font-family-example-serif-and-sans-serif-characters/
#font #html
https://www.freecodecamp.org/news/html-font-css-font-family-example-serif-and-sans-serif-characters/
#font #html
freeCodeCamp.org
HTML Font – CSS Font Family Example (Serif and Sans Serif Characters)
Choosing the right font is an important first step in making your website usable and accessible. How text is formatted affects how readable your designs and webpages are. You can modify how your HTML text appears in many ways using CSS. You can selec...
Pengenalan CSS Positioning Property yaitu absolute dan relative
https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative/
---
Latihan membuat custom theme dengan Tailwind CSS
https://blog.logrocket.com/creating-custom-themes-tailwind-css/
---
Cara menambahkan style ke dalam text HTML dengan CSS
https://www.freecodecamp.org/news/css-font-color-how-to-style-text-in-html/
---
#css #position #tailwind #font
https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative/
---
Latihan membuat custom theme dengan Tailwind CSS
https://blog.logrocket.com/creating-custom-themes-tailwind-css/
---
Cara menambahkan style ke dalam text HTML dengan CSS
https://www.freecodecamp.org/news/css-font-color-how-to-style-text-in-html/
---
#css #position #tailwind #font
freeCodeCamp.org
CSS Positioning – Position Absolute and Relative Example
When you want to design complex layouts, you'll need to change the typical document flow and override the default browser styles. You have to control how elements behave and are positioned on the page. For example, you may want to stack elements ne...
Referensi dari JavaScript Mastery tentang layanan web yang menyediakan font untuk tampilan web dengan gratis
https://www.instagram.com/p/CTaAsVwjLRK/
#javascriptMastery #font
https://www.instagram.com/p/CTaAsVwjLRK/
#javascriptMastery #font
Penjelasan apa itu Font Weight di CSS bersama Dcode
https://youtu.be/hsuyIvzxOOQ
#dcode #font #weight #css
https://youtu.be/hsuyIvzxOOQ
#dcode #font #weight #css
YouTube
If You're a Web Dev, You Should Know This... Font Weights Explained in CSS
If you think it's as simple as setting your font weight to "bold" in CSS, you definitively want to watch this video to gain a bit more understanding of what's required to work with different font weights in CSS.
We'll be taking a look at the following:
…
We'll be taking a look at the following:
…
Melihat beberapa fitur baru dari React JS 18
https://blog.logrocket.com/exploring-react-18-three-new-apis/
---
Komparasi antara Solid JS dengan React JS
https://blog.logrocket.com/solidjs-vs-react/
---
Cara menggunakan Font yang di hosting di server sendiri pada Next JS
https://levelup.gitconnected.com/how-to-self-host-fonts-in-nextjs-5a9930d8c67a
---
Latihan membuat filter component di React JS
https://www.freecodecamp.org/news/how-to-make-a-filter-component-in-react/
#react #component #filter #font #selfhost #solidjs
https://blog.logrocket.com/exploring-react-18-three-new-apis/
---
Komparasi antara Solid JS dengan React JS
https://blog.logrocket.com/solidjs-vs-react/
---
Cara menggunakan Font yang di hosting di server sendiri pada Next JS
https://levelup.gitconnected.com/how-to-self-host-fonts-in-nextjs-5a9930d8c67a
---
Latihan membuat filter component di React JS
https://www.freecodecamp.org/news/how-to-make-a-filter-component-in-react/
#react #component #filter #font #selfhost #solidjs
LogRocket Blog
Exploring React 18’s three new APIs - LogRocket Blog
With the release of React 18 on the horizon, familiarize yourself with three new APIs that should help make concurrent rendering a reality.
Cara menggunakan custom font pada Tailwind CSS
https://blog.logrocket.com/how-to-use-custom-fonts-tailwind-css/
#custom #font #tailwind
https://blog.logrocket.com/how-to-use-custom-fonts-tailwind-css/
#custom #font #tailwind
LogRocket Blog
How to use custom fonts in Tailwind CSS - LogRocket Blog
Learn how to use Google Fonts in CSS and Tailwind, perform font imports, and integrate custom fonts for responsive designs.
Latihan penting dari Kevin Powell tentang cara membuat ukuran font atau typography yang responsive dengan CSS
https://youtu.be/fs9uJ7I4a70
#kevinPowell #css #font #typography
https://youtu.be/fs9uJ7I4a70
#kevinPowell #css #font #typography
YouTube
Responsive typography on steroids with Typetura
Responsive typography is tricky, and while solutions with clamp() can be really handy, we can't have that look at the context of an element, only the viewport width (at least for now).
With Typetura, we can have it look at the context that the element is…
With Typetura, we can have it look at the context that the element is…
Beberapa cara dalam mempercepat proses memuat Font untuk dipakai di dalam aplikasi web
https://javascript.plainenglish.io/10-ways-to-speed-up-web-font-loading-fcc3eb136923
#font #loading
https://javascript.plainenglish.io/10-ways-to-speed-up-web-font-loading-fcc3eb136923
#font #loading
Medium
10 Ways to Speed Up Web Font Loading
Font loading can hurt performance a lot. This article shows you how to reduce the impact.
Halo semuanya, silahkan bisa dicoba font custom Iosevka kreasi kami yang diberi nama Iosevka Mayukai Font. Font ini adalah font yang dapat dipakai untuk pemrograman yang dipasang pada sistem operasi masing-masing, sehingga dapat dipakai di text editor dan IDE yang digunakan.
Font ini ada beberapa varian, yaitu
- Iosevka Mayukai Codepro
- Iosevka Mayukai Sonata
- Iosevka Mayukai Monolite
- Iosevka Mayukai Serif
- Iosevka Mayukai Original
Keterangan lebih lengkap bisa dilihat disini , serta sampel spesimen fontnya.
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai
Jika ingin mengunduh font nya bisa dilihat disini
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai/releases
Untuk instalasi, cukup ikuti petunjuk yang tertera. Atau bisa googling dengan kata kunci "how to install font <tulis sistem operasi yang digunakan>" . Misalnya di Linux bisa dipasang pada folder ./local/share/fonts , sedangkan di Mac bisa menggunakan aplikasi Fontbook.
#font #iosevka
Font ini ada beberapa varian, yaitu
- Iosevka Mayukai Codepro
- Iosevka Mayukai Sonata
- Iosevka Mayukai Monolite
- Iosevka Mayukai Serif
- Iosevka Mayukai Original
Keterangan lebih lengkap bisa dilihat disini , serta sampel spesimen fontnya.
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai
Jika ingin mengunduh font nya bisa dilihat disini
https://github.com/Iosevka-Mayukai/Iosevka-Mayukai/releases
Untuk instalasi, cukup ikuti petunjuk yang tertera. Atau bisa googling dengan kata kunci "how to install font <tulis sistem operasi yang digunakan>" . Misalnya di Linux bisa dipasang pada folder ./local/share/fonts , sedangkan di Mac bisa menggunakan aplikasi Fontbook.
#font #iosevka
GitHub
GitHub - Iosevka-Mayukai/Iosevka-Mayukai: Font based on Iosevka Custom Build, with combination from Iosevka SS04 Menlo, SS07 Monaco…
Font based on Iosevka Custom Build, with combination from Iosevka SS04 Menlo, SS07 Monaco, SS09 Source Code Pro, SS12 Ubuntu Mono, SS14 Jetbrains Mono, Hack Style, and some Nerd Font Patching. - I...
Latihan mengganti font pada HTML dengan CSS
https://www.freecodecamp.org/news/how-to-change-font-with-html/
---
Menggunakan inline style CSS pada HTML
https://www.freecodecamp.org/news/inline-style-in-html/
#css #inline #html #font
https://www.freecodecamp.org/news/how-to-change-font-with-html/
---
Menggunakan inline style CSS pada HTML
https://www.freecodecamp.org/news/inline-style-in-html/
#css #inline #html #font
freeCodeCamp.org
How to Change Font with HTML
Back in the days of HTML4, there was a <font> tag you could use to change the font size, font family, and the color of a text. But with HTML5, the <font> tag has been deprecated. So if you want to change anything related to the font, you have to
Memperkenalkan layanan web untuk membuat Fallback font generator dengan mudah
https://screenspan.net/fallback
#css #fallback #generator #font
https://screenspan.net/fallback
#css #fallback #generator #font
screenspan.net
Fallback Font Generator
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using @font-face
Menambahkan Google Font di dalam Next JS serta optimasinya
https://medium.com/nextjs/how-to-use-font-optimizing-in-nextjs-13-7a66c450a88a
#font #optimize #nextjs
https://medium.com/nextjs/how-to-use-font-optimizing-in-nextjs-13-7a66c450a88a
#font #optimize #nextjs
Medium
How to use Font Optimization in Nextjs 13?
Adding any google fonts in nextjs 13, with two lines of code.
Komparasi antara Nuxt JS dengan Next JS
https://blog.logrocket.com/next-js-vs-nuxt-js/
---
Optimasi font pada Next JS
https://blog.logrocket.com/next-js-font-optimization/
#react #vue #nextjs #font #nuxt
https://blog.logrocket.com/next-js-vs-nuxt-js/
---
Optimasi font pada Next JS
https://blog.logrocket.com/next-js-font-optimization/
#react #vue #nextjs #font #nuxt
LogRocket Blog
Next.js vs. Nuxt.js: Ultimate guide - LogRocket Blog
In this thorough guide, we’ll compare the Next.js and Nuxt.js JavaScript frameworks, their use cases, and their pros and cons.