#CaseStudies

Frontend Dogmafrontenddogma@mas.to
2026-03-08

Seven Years to TypeScript: Migrating 11,000 Files at Patreon, by (not on Mastodon or Bluesky):

patreon.com/posts/seven-years-

#migrating #javascript #typescript #casestudies

cat (@_catwu)

Claude Code가 Ramp, Rakuten, Brex, Wiz, Shopify, Spotify 등에서 엔지니어링에 어떤 변화를 가져왔는지 정리한 라운드업을 공유한 내용입니다. 여러 주요 기업에서의 적용 사례와 영향에 대한 요약 성격의 게시물입니다.

x.com/_catwu/status/2028603856

#claudecode #casestudies #enterprise #engineering

Inautiloinautilo
2026-03-02


Redesigning Turnstile and Challenge Pages · Possibly the most-seen UI on the Internet ilo.im/16azhw

_____

2026-02-10

Northwestern University: Kellogg to support educators worldwide with a rich digital library of business cases and simulations. “Kellogg School of Management has launched Teach with Kellogg, a tool to provide access to instructor-ready resources to help instructors translate rigorous research into engaging, real-world learning experiences.”

https://rbfirehose.com/2026/02/10/northwestern-university-kellogg-to-support-educators-worldwide-with-a-rich-digital-library-of-business-cases-and-simulations/
2026-02-09

It's National Apprenticeship Week #NAW2026 (as if you didn't already know!)

As part of our celebrations we've put a page together with some amazing #CaseStudies from #apprentices and #employers, alongside our new 'Growing Together' #impact report (which features a picture on the cover of yours truly seemingly explaining what I'd like to do to incalcitrant colleagues ;-))

Take a look, there's some lovely affirming stuff in here: aru.ac.uk/study/degree-apprent

Frontend Dogmafrontenddogma@mas.to
2026-02-05

V7: Typographic Scales and Technical Pens, by (not on Mastodon or Bluesky):

v7.robweychert.com/blog/2026/0

#design #typography #css #casestudies

2026-01-26

Tìm kiếm các nghiên cứu trường hợp (case studies) "bắt buộc phải đọc" về marketing SaaS cho năm 2026: Người dùng Reddit đang quan tâm đến chiến lược GTM (đưa sản phẩm ra thị trường) hiệu quả từ các startup nhỏ (không phải Slack, HubSpot...) với cách phân phối thông minh và thông điệp độc đáo.

#SaaSMarketing #CaseStudies #MarketingDigital #StartupVietNam #GTM Strategies #KinhNghiemMarketing

reddit.com/r/SaaS/comments/1qn

Mide mikemikeemikeee
2026-01-24

Nigeria’s real-world AI success stories show how businesses and organisations are using artificial intelligence to solve problems and drive growth. Full post here:

aibase.ng/ai-trends/ai-case-st

Legal Battle: Defense Lawyers Fight To Represent Underdogs (Full Mini Documentary Series)

peertube.gravitywell.xyz/w/jzS

Frontend Dogmafrontenddogma@mas.to
2026-01-13

Fixing TypeScript Performance Problems: A Case Study, by @viget.bsky.social:

viget.com/articles/fixing-type

#typescript #performance #casestudies

Google for Education (@GoogleForEdu)

GeminiApp을 활용한 교육 사례 연구로, 네 개 학교의 적용 사례를 소개합니다. 각 학교는 완전 개인화된 수업 계획부터 고품질 학습 자료 제작 등 다양한 방식으로 GeminiApp을 활용해 학생과 교사를 위한 학습 경험을 재정의하고 있으며, 영감을 주는 사례 모음을 링크로 제공하고 있습니다.

x.com/GoogleForEdu/status/2008

#geminiapp #education #aiineducation #casestudies

Frontend Dogmafrontenddogma@mas.to
2025-12-27

How We’re Protecting Our Newsroom From npm Supply Chain Attacks, by @ryansobol.com (@pnpm):

pnpm.io/blog/2025/12/05/newsro

#npm #dependencies #security #casestudies

Frontend Dogmafrontenddogma@mas.to
2025-12-22

“Sloppy” Code and Accessibility Issues: The Trouble With Trump’s Silicon Valley-Inspired Web Design Project, by @notus.com:

notus.org/trump-white-house/si

#design #accessibility #quality #casestudies

Negative PID SLnegativepid
2025-12-18

OSINT tools are becoming a real asset in the fight against illegal phishing worldwide. Satellite imagery and AIS data allow for monitoring vessels almost in real time to detect anomalies in their patterns that might indicate suspect behaviours.
Here are a few case studies where OSINT tools made it possible to save endangered species in protected areas from illegal fishing.

negativepid.blog/monitoring-il
negativepid.blog/monitoring-il

Frontend Dogmafrontenddogma@mas.to
2025-12-08
Negative PID SLnegativepid
2025-11-27

OSINT tools are becoming a real asset in the fight against illegal phishing worldwide. Satellite imagery and AIS data allow for monitoring vessels almost in real time to detect anomalies in their patterns that might indicate suspect behaviours.
Here are a few case studies where OSINT tools made it possible to save endangered species in protected areas from illegal fishing.

negativepid.blog/monitoring-il
negativepid.blog/monitoring-il

2025-11-24

Shuffling a CSS grid using custom properties

In his excellent talk Get the Core Right and the Resilient Code Will Follow at Beyond Tellerrand in Berlin this year, Andy Bell showed how to sensibly discuss a coding issue amongst your team. He also did a more in-depth write-up on his blog.

The problem that Andy described was having a CSS grid with columns of content next to another and then being asked by the client to randomise the order of the grid on every reload. So that each part of the company will get its 3 seconds in the limelight. Andy is a strong believer in resilient code and rightfully is critical of JavaScript solutions for issues like this. Moving a whole DOM construct like this around can be slow and writing out the whole grid as a component on each interaction can also be iffy.

So I pondered what to do and remembered the CSS order property applying to flex and grid items. Using this one, you can re-order items visually.


Excellent bands you never heard about


  • Irie Revoltes

  • Streetlight Manifesto

  • Dubioza Kolektiv

  • Irish Moutarde

If you change the order of the third element to minus one, it shows up first:


ul {
display: flex;
flex-direction: column;
gap: 1em;
}

#dk {
order: -1;
}

This keeps all the re-ordering work in the CSS engine. But as you can’t as yet have random ordering in CSS, we need some JavaScript to create that functionality. The first idea was to add the order as inline styles, but that would be the same DOM manipulation and having to loop through all items. Instead, I thought about using CSS custom properties:


ul {—customorder: -1;
display: flex;
flex-direction: column;
}

#dk {
order: var(—customorder);
}

That way I can access `customorder` on the parent element:


let ul = document.querySelector(‘ul’);
ul.style.setProperty(‘—customorder’,-1);

Putting all of this together, I give you GridShuffle and you can check the code on GitHub:




About


This is the order.html file.


News


Latest news will be displayed here.


Contact


Contact information will be displayed here.


Case Studies


Case studies will be displayed here.


shuffle

The grid above shuffles around on every reload or when you active `shuffle` button. There are many ways to achieve this effect, but this example uses only CSS properties to set the order of the grid items. The HTML is not altered and there is no DOM manipulation other than accessing the CSS properties of the parent element. This should make this highly performant. The JavaScript code rotates the order of the items in the grid by changing the CSS variables that define their order. Below is the relevant code used to set up the grid and shuffle the items:

#contentgrid {—items: 4;—item1-order: 1;—item2-order: 1;—item3-order: 1;—item4-order: 1;
display: grid;
gap: 20px;
grid-template-columns: repeat(
auto-fit, minmax(200px, 1fr)
);
}

#about { order: var(—item1-order); }

#news { order: var(—item2-order); }

#contact { order: var(—item3-order); }

#casestudies { order: var(—item4-order); }

We define the order of each element as `1`, which means that if we set any of them to `0`, it will be displayed first in the grid. For example, if we did the following, the `Case Studies` section would be displayed first:

#contentgrid {—items: 4;—item1-order: 1;—item2-order: 1;—item3-order: 1;—item4-order: 0;
/* … */
}

#about { order: var(—item1-order); }

#news { order: var(—item2-order); }

#contact { order: var(—item3-order); }

#casestudies { order: var(—item4-order); }

This could be done on the server-side or with JavaScript as follows:


let root = document.querySelector(‘#contentgrid’);
let itemcount = getComputedStyle(root).
getPropertyValue(‘—items’);
let old = 1;
const shuffleorder = () => {
let random = Math.floor(Math.random() * itemcount) + 1;
root.style.setProperty(‘—item’ + old + ‘-order’, 1);
root.style.setProperty(‘—item’ + random + ‘-order’, 0);
old = random;
};
shuffleorder();

We get the amount of items in the grid by reading the value of `—items` CSS property on the root element, and store the current first one in the `old` variable. We then pick a random number between `1` and the total number of items, and set the order of the old item to `1` and the new, random, item to `0`. We then re-define `old` as the new item.

This is the most basic way of doing this, and it is not a real shuffle, as it only rotates the items in a fixed order. You can see the Shuffle Grid example for a more advanced implementation as it randomised the array of all the items. You can also rotate the items by shifting the array of all orders as shown in the Rotate Grid example.

The other examples also don’t need any of the custom properties to be set, but create them instead. This means a tad more JS + DOM interaction but makes the process easier.


let root = document.querySelector(‘#contentgrid’);
let cssvar = `—item$x-order`;
// Get the amount of items
let elms = root.querySelectorAll(
root.firstElementChild.tagName
);
all = elms.length;
// Initialize the order array and
// set the order on the items
let orders = [];
for (let i = 1; i <= all; i++) {
orders.push(i);
elms[i – 1].style.setProperty(
‘order’, ‘var(’ + cssvar.replace(‘$x’, i) + ‘)’
);
root.style.setProperty(cssvar.replace(‘$x’, i), i);
}

But what if you wanted to not use any JavaScript at all to achieve this? Andy’s solution he showed during the talk was to randomise the order server-side, which is easy to do in many languages. His solution using Jekyll was to generate the page every few minutes, using the sample filter which seems a bit wasteful, but is stable.

Current and future CSS-only solutions

Currently there is no way to randomise or shuffle items using only CSS. However, there are solutions involving Sass which requires pre-processing. Another nifty solution is this way but it requires the use of `@property` which is not widely supported yet.

The CSS spec defines a random() functionality that could be used to achieve this effect without JavaScript. However, as of now, only Safari Technology Preview 170 supports this feature.

Polyfilling CSS isn’t easy, so it might make sense for now to add a dash of JavaScript to your solution to achieve effects like this. This way seems to me a good compromise as it keeps the functionality in CSS instead of shuffling around whole DOM trees or re-writing the whole grid.

#about #casestudies #contact #contentgrid #dk #news

CSS order exampleCSS order example
Negative PID SLnegativepid
2025-11-06

OSINT tools are becoming a real asset in the fight against illegal phishing worldwide. Satellite imagery and AIS data allow for monitoring vessels almost in real time to detect anomalies in their patterns that might indicate suspect behaviours.
Here are a few case studies where OSINT tools made it possible to save endangered species in protected areas from illegal fishing.

negativepid.blog/monitoring-il
negativepid.blog/monitoring-il

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst