Sign in

Fatih Hayrioğlu

@fatihhayri.bsky.social
99 followers 163 following 44 posts

Front-End Geliştirici, @trendyol, fatihhayrioglu.com

PostsRepliesMedia
Reposted by Fatih Hayrioğlu
Firefox for Web Developers @webdevs.firefox.com · 19/08/2026
CSS text-box is newly baseline, and it's solves a common text layout issue. Here's how it works:
1234758
Reposted by Fatih Hayrioğlu
Mike Masnick @masnick.com · 11/08/2026
When Elon took over Twitter he told investors he'd triple ad revenue within 5 years. It's now been almost four years... and he's wiped out 2/3rds of the ad revenue (basically revealed in footnotes to SpaceX's earnings).
342064607
Reposted by Fatih Hayrioğlu
Nilesh Prajapati @nileshprajapati.com · 04/06/2026
Chrome 150 beta is going to be an exciting update: - flex-wrap: balance 👀 - Media element pseudo-classes - focusgroup attribute - light-dark() with image values - image(<color>) function - CSS text-fit - AccentColor and AccentColorText system colours and more... #css #html
developer.chrome.com
Chrome 150 beta  |  Blog  |  Chrome for Developers
Get a preview of the next Chrome release with this post detailing the features in the current beta.
1253
Reposted by Fatih Hayrioğlu
Jake Archibald @jakearchibald.com · 06/05/2026
So, Chrome's "web standard" Prompt API: Mozilla: Opposed WebKit: Opposed Microsoft: Several concerns W3C TAG: Several concerns Developers: Mostly negative Chrome: Ships anyway. A sad time for web standards. But, I guess someone at Google will get promoted, so 'every cloud…'
43999170
Fatih Hayrioğlu @fatihhayri.bsky.social · 06/04/2026
Yeni yazım: Lokalde tarayıcı geliştirme araçları üzerinden network isteklerini değiştirmek fatihhayrioglu.com/lokalde-tara...
fatihhayrioglu.com
Lokalde tarayıcı geliştirme araçları üzerinden network isteklerini değiştirmek
FE geliştiriciler olarak hayatımız network istekleri(request) ve BE'den gelen dönen cevaplarla(response) geçiyor. Kendi bilgisayarımızda çalışırken bu istekleri değiştirme ihtiyacı olduğunda mock serv...
000
Reposted by Fatih Hayrioğlu
Lea Verou, PhD @lea.verou.me · 26/03/2026
🚨 Want mixins in CSS? Help the CSS WG by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would *you* find least surprising for each of div, div > h2, div + p? Polls: ┣ Github: github.com/LeaVerou/blo... ┗ Mastodon: front-end.social/@leaverou/11...
@mixin --foo(--arg <length>) {
  @result {
    &, & > h2, & + p {
      width: var(--arg);
    }
  }
}

div {
  @apply --foo(10em);
  font-size: 10px;
}
div > h2 {
  font-size: 20px;
}
div + p {
  font-size: 30px;
}
95124
Reposted by Fatih Hayrioğlu
Chris Coyier @chriscoyier.net · 10/10/2025
rawdogging some shape() to build "round out" tabs. I'll blog it eventually. modern CSS rules.
101556
Reposted by Fatih Hayrioğlu
Ahmad Shadeed @ishadeed.com · 21/08/2025
📹 Smart Layouts (CSS Day - 06.06.2025) - Video & Slides I published the video, slides, and demos of my talk at @cssday.nl and wrote a few words about the experience. ishadeed.com/article/smar...
ishadeed.com
Smart Layouts (CSS Day - 06.06.2025) - Video & Slides
I spoke at CSS Day 2025 in Amsterdam about Smart Layouts.
0387
Reposted by Fatih Hayrioğlu
Sacha Greif @sachagreif.com · 25/06/2025
Still a week left to take the State of CSS survey! The survey hasn't got as many responses as last year, so any help sharing will be much appreciated :) survey.devographics.com/en-US/survey...
survey.devographics.com
State of CSS 2025
Take the State of CSS survey
12938
Reposted by Fatih Hayrioğlu
Hafif Programming @hafifprogramming.bsky.social · 19/06/2025
Sokak Kodcusu (Konuk: Sedat Kapanoğlu) Güzel bir sohbet oldu, teşekkürler @ssg.dev! youtu.be/c6KOLuKG0v8
youtu.be
Sokak Kodcusu (Konuk: Sedat Kapanoğlu)
YouTube video by hafif programming
0115
Fatih Hayrioğlu @fatihhayri.bsky.social · 17/06/2025
Yeni blog alt yapısıyla (ghost) ilk yazım. 2025'te Favicon Rehberi: SVG Desteği ile Yeni Dönem fatihhayrioglu.com/2025te-favic...
fatihhayrioglu.com
2025'te Favicon Rehberi: SVG Desteği ile Yeni Dönem
Sene olmuş 2025 biz hala favicon ekleme konusunu yazıyoruz. Bu konuyu yazmamın nedeni Apple'ın henüz beta sürümü olan 26 ile birlikte SVG favicon desteğini geliyor oluşu. Bu vesileyle bilgileri tazele...
020
Reposted by Fatih Hayrioğlu
Una Kravets @una.im · 09/06/2025
Coming soon to Safari: - Anchor positioning (YAYY!) - Scroll-driven animations (YAYY!) - text-wrap: pretty - progress() function - margin-trim - contrast-color() webkit.org/blog/16993/n...
webkit.org
News from WWDC25: WebKit in Safari 26 beta
Welcome to WWDC25!
413726
Fatih Hayrioğlu @fatihhayri.bsky.social · 23/05/2025
SAdece CSS ile carousel yapmak hayalim gerçekleşiyor sonunda 🎊
css carousle
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 15/05/2025
CSS'in Şampiyonlar Ligi kadrosu
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 13/05/2025
Stillendirilebilir select için güzel bir makale. Anchor positioning ve select birlikteliği gayet güzel ve anlaşılabilir bir kod ile mükemmel bir sonuç ortaya çıkarmış. 👍💡🎊🔥 Not: Chrome ve Edge destekliyor. utilitybend.com/blog/the-cus...
utilitybend.com
The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS | utilitybend
The second part customizable select with CSS series. Highlighting anchor positioning to create a radial potion select element with just HTML and CSS
000
Reposted by Fatih Hayrioğlu
Una Kravets @una.im · 29/04/2025
Giving anchor-tool.com a much-needed little facelift.
613913
Fatih Hayrioğlu @fatihhayri.bsky.social · 21/04/2025
CSS fonksiyonları şaka maka geliyor :) www.oddbird.net/2025/04/11/c...
oddbird.net
Custom CSS Functions in the Browser
Start using author-defined functions
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 15/04/2025
AI işimizi elimizden alacak mı?
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 12/04/2025
Adam gibi bir elemanı nasıl gönderir. Google'u anlamak zor.
110
Reposted by Fatih Hayrioğlu
Adam Argyle @nerdy.dev · 11/04/2025
G̶o̶o̶g̶l̶e̶r̶… ex-Googler. nerdy.dev/ex-googler
nerdy.dev
G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
My role at Google was eliminated.
4911637180
Reposted by Fatih Hayrioğlu
Firefox Nightly @firefoxnightly.bsky.social · 09/04/2025
✅ Support ::details-content pseudo-element and improved styling of <details> element bugzilla.mozilla.org/show_bug.cgi...
bugzilla.mozilla.org
1901037 - Support ::details-content pseudo-element and improved styling of <details> element
RESOLVED (lwarlow) in Core - DOM: Core & HTML. Last updated 2025-04-03.
1359
Fatih Hayrioğlu @fatihhayri.bsky.social · 09/04/2025
CSS'in daha esnek ve yönetilebilir yapmak için bu zamana kadar geliştirilen yöntemleri düşününce şu an gelinen yer çokta iç açıcı değil gibi. www.adavanzo.com/articles/202...
adavanzo.com
The systemic failure of implementing CSS principles | Andrea Davanzo
Through a historical lens, this article argues that the pursuit of modularity and flexibility in CSS has inadvertently led to overly complex HTML, revealing that the promise of separating structur...
040
Fatih Hayrioğlu @fatihhayri.bsky.social · 08/04/2025
CSS ile stili değiştirilebilen select (Şimdilik sadece Chrome'da) codepen.io/sfrisk/pen/N...
codepen.io
Customizable Select
I've been super excited to play around with Customizable Selects ever since I saw that Chrome dropped that in a recent release. Starting off with a so...
041
Reposted by Fatih Hayrioğlu
Adam Argyle @nerdy.dev · 07/04/2025
#CSS ::scroll-button(), ::scroll-marker, Carousel Configurator, and Carousel Gallery with @chriscoyier.net and @davatron5000.bsky.social on @shoptalkshow.com! nerdy.dev/carousels-on...
nerdy.dev
Carousels On Shoptalk · April 7, 2025
Website for Adam Argyle: Teacher, Speaker, CSSWG member, and creator of Open Props and VisBug.
3529
Reposted by Fatih Hayrioğlu
M. Serdar Kuzuloğlu @mserdark.com · 06/04/2025
Dünya Halleri: 193 💻 Microsoft 50 yaşına bastı. 🤖 OpenAI tarihin en büyük yatırımını aldı. 🕹️ Nintendo Switch 2 tanıtıldı. 🪭 4 kez katlanan telefon yolda. 🐝 21 gramlık "pilsiz" drone. 💓 Dünyanın en küçük kalp pili. Diğer gelişmeler için tıklayın 👇 bulten.mserdark.com/p/dunya-hall...
bulten.mserdark.com
Dünya Halleri: 193
💻 Microsoft 50 yaşına bastı. 🤖 OpenAI tarihin en büyük yatırımını aldı. 🕹️ Nintendo Switch 2 tanıtıldı. 🪭 4 kez katlanan telefon yolda. 🐝 21 gramlık "pilsiz" drone. 💓 Dünyanın en küçük kalp pili.
39617
Reposted by Fatih Hayrioğlu
Eser Ozvataf (eser.live) @eser.bsky.social · 17/11/2024
Yıllarca github.com/acikkaynak ‘ta projeleri, sonra github.com/eser/topluluklar ‘la insanları bir araya getirme alışkanlığımla şimdi de BlueSky’da hesapları bir araya getirme inisiyatifi başlattım 😅 ben aklıma gelen isimleri ekledim. sizler de “beni de ekle” yazarsanız eklerim. go.bsky.app/TLtndiT
10015237
Fatih Hayrioğlu @fatihhayri.bsky.social · 10/03/2025
Baklava design system renk paleti ile uğraşırken bu konulara çok dalmıştık zamanında @muratcorlu.com ile. Konu derin.
020
Reposted by Fatih Hayrioğlu
Frontend Focus 🚀 @frontendfocus.bsky.social · 06/03/2025
Functions in CSS?!: css-tricks.com/functions-in-css
css-tricks.com
Functions in CSS?! | CSS-Tricks
Arguments?! Return values?! What's crazier, you can use functions right now in Chrome Canary! So, after reading and playing around, here are my key insights on what you need to know about CSS Functions.
042
Reposted by Fatih Hayrioğlu
IntentToShip @intenttoship.dev · 04/03/2025
Blink: Intent to Prototype: CSS sibling-index() and sibling-count()
groups.google.com
Blink: Intent to Prototype: CSS sibling-index() and sibling-count()
Blink: Intent to Prototype: CSS sibling-index() and sibling-count()
1269
Reposted by Fatih Hayrioğlu
Piccalilli @piccalil.li · 27/02/2025
Jason Bradberry challenges the ideals of displaying your entire navigation as a cluster of links and presents a case for exploring off-screen menus where the context is right for it. piccalil.li/blog/in-prai...
piccalil.li
In praise of off-screen menus
0156
Reposted by Fatih Hayrioğlu
IntentToShip @intenttoship.dev · 25/02/2025
Blink: Intent to Ship: CSS Custom Functions (@function)
groups.google.com
Blink: Intent to Ship: CSS Custom Functions (@function)
Blink: Intent to Ship: CSS Custom Functions (@function)
0196
Fatih Hayrioğlu @fatihhayri.bsky.social · 25/02/2025
Joshw Comeau'dan yine detaylı ve güzel bir makale. Animasyon için güzel uyarlama örneği
010
Reposted by Fatih Hayrioğlu
ECMAScript.News @ecmascript.news · 24/02/2025
ESLint now officially supports linting of CSS @humanwhocodes.com @eslint.org eslint.org/blog/2025/02... #ECMAScript #JavaScript
eslint.org
ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
0105
Reposted by Fatih Hayrioğlu
Kevin Powell @kevinpowell.co · 19/02/2025
Do you have a favorite CSS one-liner?
56667
Reposted by Fatih Hayrioğlu
Stefan Judis @stefanjudis.com · 16/02/2025
🫣 And I'm sitting down again to write this week's Web Weekly newsletter. It'll go out tmrw and if you're into web dev news that are very close to the platform (you know standards, HTML, CSS and JS), you should check it out! webweekly.email
Web Weekly — Your friendly web dev newsletter.
1182
Reposted by Fatih Hayrioğlu
Adam Argyle @nerdy.dev · 16/11/2024
Take this `<dialog>` too classic; cart in the top right, pushes the whole page left to reveal your cart sidenav nerdy.dev/have-a-dialog #CSS
619712
Fatih Hayrioğlu @fatihhayri.bsky.social · 12/02/2025
💡VSCode'da arama yapıp tıkladığın dosyaları önizleme modunda açarken yeni sürümle birlikte direk açmaya başladı editör sekme çöplüğüne dönüyor belli bir süre sonra. Settings' açıp `workbench.editor.enablePreview` arması yapıp işaretleyine eskiye döndü rahatladım. 👍
000
Reposted by Fatih Hayrioğlu
Jecelyn Yeen @jec.fish · 10/02/2025
⚡️ Chrome 133 is here! What's new in #ChromeDevTools 🤖 Persistent AI chat history 📈 Enhanced insights on image performance 🧭 Customize performance trace navigation ....and more! Update Chrome and try them out! developer.chrome.com/blog/new-in-...
0112
Fatih Hayrioğlu @fatihhayri.bsky.social · 06/02/2025
Animasyon işleri artık daha basit ve işlevsel. www.smashingmagazine.com/2025/01/tran...
smashingmagazine.com
Transitioning Top-Layer Entries And The Display Property In CSS — Smashing Magazine
It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte highlights two such ...
000
Reposted by Fatih Hayrioğlu
Stefan Judis @stefanjudis.com · 02/02/2025
And here's an updated version on Codepen. 👇 codepen.io/stefanjudis/...
codepen.io
View transitions - Demo
...
3355
Fatih Hayrioğlu @fatihhayri.bsky.social · 03/02/2025
Güzelmiş ama ben input'a bir şeye giremedim kapanıyor.
000
Fatih Hayrioğlu @fatihhayri.bsky.social · 30/01/2025
Eski günler aklıma geldi ah be diye keşke olsa dediğim bir özellik. una.im/advanced-attr/
una.im
una.im | New capabilities for attr()
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
000
Reposted by Fatih Hayrioğlu
Adam Argyle @nerdy.dev · 30/01/2025
new <footer> nerdy.dev
6755
Reposted by Fatih Hayrioğlu
Una Kravets @una.im · 30/01/2025
Intent to ship for the upgraded customizable select element in Blink! It's happening! I2S: groups.google.com/a/chromium.o... Learn more: una.im/select-updat...
groups.google.com
Intent to ship: Customizable select
59713
Reposted by Fatih Hayrioğlu
Ahmad Shadeed @ishadeed.com · 29/01/2025
Good news! The upcoming version of Chromium will show the selected value in min, max, clamp 🥳🤩 chromium-review.googlesource.com/c/devtools/d...
a css font-size using the min() function and the selected value is in white text with an underline.
2535
Reposted by Fatih Hayrioğlu
codrops @codrops.bsky.social · 29/01/2025
✨🌊 13 years ago, Hector Arellano accepted a challenge from Felix Martinez to make fluid simulations in the browser. After years of experimentation, he's finally made it happen with WebGPU. We’re honored to have Hector share this incredible story and demo with us! tympanus.net/codrops/?p=8...
0327
Reposted by Fatih Hayrioğlu
Jhey ʕ·ᴥ· ʔ @jhey.dev · 26/01/2025
breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨
41206
Fatih Hayrioğlu @fatihhayri.bsky.social · 24/01/2025
Çok detay konu ama lazım olduğunda çok iş görür. ryanmulligan.dev/blog/some-th...
ryanmulligan.dev
Some Things About Keyframes
A few lesser-known bits about CSS keyframe animations, from handling duplicate keyframe properties to customizing timing function easings within keyframe rulesets.
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 22/01/2025
Desteği yeni CSS özellikleri RN için güzel olmuş.
010
Fatih Hayrioğlu @fatihhayri.bsky.social · 16/01/2025
Chrome'un son sürümüne gelmiş. Bu kadar hızlı beklemiyordum şaşırdım.
000