<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Khairunnisaas</title>
    <description>The latest articles on DEV Community by Khairunnisaas (@khairunnisaas).</description>
    <link>https://dev.to/khairunnisaas</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F870051%2F7f1e68ec-d979-4156-8777-cb23cccfae7e.jpg</url>
      <title>DEV Community: Khairunnisaas</title>
      <link>https://dev.to/khairunnisaas</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/khairunnisaas"/>
    <language>en</language>
    <item>
      <title>Google I/O 2026 Dev Keynote: Recap</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Wed, 20 May 2026 08:43:17 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/google-io-2026-dev-keynote-recap-4afi</link>
      <guid>https://dev.to/khairunnisaas/google-io-2026-dev-keynote-recap-4afi</guid>
      <description>&lt;p&gt;In case you missed the Google I/O developer keynote today, here's a quick recap of the stuff Google announced.&lt;/p&gt;

&lt;p&gt;And honestly... the overall theme this year is pretty obvious:&lt;/p&gt;

&lt;p&gt;Google wants AI agents everywhere.&lt;/p&gt;

&lt;p&gt;Like literally everywhere.&lt;/p&gt;

&lt;p&gt;Most of the announcements today were either:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI agents&lt;/li&gt;
&lt;li&gt;tools for AI agents&lt;/li&gt;
&lt;li&gt;workflows for AI agents&lt;/li&gt;
&lt;li&gt;or tools that help AI agents make other tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So yeah. Let's talk about it.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Antigravity Ecosystem
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Antigravity 2.0&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Google officially introduced Antigravity 2.0, the new version of their AI development platform.&lt;/p&gt;

&lt;p&gt;The easiest way to describe this thing is probably:&lt;br&gt;
"mission control for AI agents."&lt;/p&gt;

&lt;p&gt;Instead of just chatting with AI like normal, Antigravity lets developers orchestrate multiple agents, workflows, cloud resources, tools, and all that enterprise stuff in one place.&lt;/p&gt;

&lt;p&gt;For enterprise users, it also connects directly to Google Cloud projects and automatically follows the permissions and security policies your company already has.&lt;/p&gt;

&lt;p&gt;Basically Google is trying to make AI agents feel like actual teammates now.&lt;/p&gt;

&lt;p&gt;Which is both cool and slightly terrifying.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Antigravity ID&lt;/strong&gt;E&lt;/p&gt;

&lt;p&gt;Because Antigravity is now heavily focused on "agentic workflows", Google also introduced something called Antigravity IDE.&lt;/p&gt;

&lt;p&gt;And honestly?&lt;/p&gt;

&lt;p&gt;This just feels like the original Antigravity app but specifically for coding.&lt;/p&gt;

&lt;p&gt;I still don't fully understand why Google didn't just keep everything inside one app and make separate modes for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;coding&lt;/li&gt;
&lt;li&gt;agent workflows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But okay I guess.&lt;/p&gt;

&lt;p&gt;The whole point of Antigravity IDE is basically AI-assisted coding where developers and agents work together directly inside the editor.&lt;/p&gt;

&lt;p&gt;So yeah... Google is REALLY pushing this "AI pair programmer" future.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Antigravity CLI&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Google also announced Antigravity CLI.&lt;/p&gt;

&lt;p&gt;From what they showed during the keynote, this honestly just looks like Gemini CLI but rebranded.&lt;/p&gt;

&lt;p&gt;Google didn't really explain the differences properly on stage either.&lt;/p&gt;

&lt;p&gt;But here's the interesting part:&lt;br&gt;
Google already published a migration guide from Gemini CLI to Antigravity CLI.&lt;/p&gt;

&lt;p&gt;So... yeah. Gemini CLI is probably getting deprecated eventually.&lt;/p&gt;

&lt;p&gt;You can read the official migration update here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developers.googleblog.com/an-important-update-transitioning-gemini-cli-to-antigravity-cli/" rel="noopener noreferrer"&gt;Google’s migration update for Antigravity CLI&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And again... I still don't understand why this couldn't just be an update instead of a whole new product name.&lt;/p&gt;

&lt;p&gt;Google naming strategy remains undefeated.&lt;/p&gt;




&lt;h2&gt;
  
  
  Android Development Is Getting The AI Agent Treatment Too
&lt;/h2&gt;

&lt;p&gt;Google also announced a bunch of Android-related AI tooling.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Android CLI + Android Knowledge Base&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Google officially brought Android support into Antigravity through something called Android CLI.&lt;/p&gt;

&lt;p&gt;This tool basically helps AI agents prepare Android development workflows automatically.&lt;/p&gt;

&lt;p&gt;One of the biggest features here is the Android Knowledge Base — a constantly updated source of official Android documentation, APIs, and best practices.&lt;/p&gt;

&lt;p&gt;Meaning the AI agent can fetch updated Android guidance directly while working on your project.&lt;/p&gt;

&lt;p&gt;Google also introduced something called Android Skills.&lt;/p&gt;

&lt;p&gt;These are open-source skills that help LLMs better understand Android codebases and execute more complex workflows correctly.&lt;/p&gt;

&lt;p&gt;Google's internal team claims this uses 70% fewer tokens and completes tasks 3x faster. But obviously that's based on Google's own internal benchmarks.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Migration Agent&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Okay honestly?&lt;br&gt;
This was probably one of the coolest demos from the keynote.&lt;/p&gt;

&lt;p&gt;Google showed something called Migration Agent.&lt;/p&gt;

&lt;p&gt;The idea is simple:&lt;br&gt;
you can migrate your existing app into a native Kotlin Android app.&lt;/p&gt;

&lt;p&gt;React Native?&lt;br&gt;
Supported. ✅&lt;/p&gt;

&lt;p&gt;Web framework?&lt;br&gt;
Supported. ✅&lt;/p&gt;

&lt;p&gt;Even iOS apps apparently. ✅&lt;/p&gt;

&lt;p&gt;Still early and still experimental, but if this thing actually works well, it could save developers an insane amount of time.&lt;/p&gt;




&lt;h2&gt;
  
  
  Web Updates
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Modern Web Guidance&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Google also announced something called Modern Web Guidance.&lt;/p&gt;

&lt;p&gt;This is basically a collection of AI-ready frontend development best practices specifically designed for AI agents.&lt;/p&gt;

&lt;p&gt;And honestly... this is actually needed.&lt;/p&gt;

&lt;p&gt;One of the biggest problems with AI-generated frontend code right now is that the AI LOVES recommending outdated APIs, weird old patterns, or browser features from 2017.&lt;/p&gt;

&lt;p&gt;Modern Web Guidance integrates directly with &lt;a href="https://web.dev/baseline" rel="noopener noreferrer"&gt;Baseline&lt;/a&gt; so agents can understand which modern web features are actually safe to use across browsers.&lt;/p&gt;

&lt;p&gt;So hopefully we get less cursed AI-generated frontend code in the future.&lt;/p&gt;

&lt;p&gt;Hopefully.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;WebMCP&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;During the Modern Web Guidance demo, Google also introduced something called WebMCP.&lt;/p&gt;

&lt;p&gt;Quoting to Google's docs:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"MCP is a proposed web standard to help you build and expose structured tools for AI agents."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But in simpler words:&lt;/p&gt;

&lt;p&gt;WebMCP basically lets websites explain to AI agents how they should interact with them.&lt;/p&gt;

&lt;p&gt;Imagine opening a complicated dashboard or settings page and instead of manually configuring everything yourself, you just tell Gemini:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Set this thing up for me."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And the AI actually understands how to navigate the website properly.&lt;/p&gt;

&lt;p&gt;That's basically the direction Google is trying to push here.&lt;/p&gt;

&lt;p&gt;Still experimental though.&lt;/p&gt;

&lt;p&gt;Google said the experimental MCP APIs will start trials in Chrome 149.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;HTML-in-Canvas API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Last thing worth mentioning:&lt;br&gt;
Google introduced HTML-in-Canvas API.&lt;/p&gt;

&lt;p&gt;This API lets developers put actual DOM elements inside canvas.&lt;/p&gt;

&lt;p&gt;Which sounds small...&lt;br&gt;
but is actually a huge deal for accessibility and interactivity.&lt;/p&gt;

&lt;p&gt;Because now those elements are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;searchable&lt;/li&gt;
&lt;li&gt;selectable&lt;/li&gt;
&lt;li&gt;accessible&lt;/li&gt;
&lt;li&gt;compatible with browser features&lt;/li&gt;
&lt;li&gt;better for SEO&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This could become really useful for browser games, editors, design tools, and basically any heavy canvas-based web app.&lt;/p&gt;




&lt;p&gt;And yeah... that's pretty much the biggest stuff from the developer keynote.&lt;/p&gt;

&lt;p&gt;Overall, the direction is super clear now:&lt;br&gt;
Google is going all-in on AI agents. And Antigravity is basically becoming the center of that ecosystem.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>googleio</category>
      <category>antigravity</category>
    </item>
    <item>
      <title>OpenAI Firing Drama In A Nutshell</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Tue, 21 Nov 2023 07:57:41 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/openai-firing-drama-in-a-nutshell-22l0</link>
      <guid>https://dev.to/khairunnisaas/openai-firing-drama-in-a-nutshell-22l0</guid>
      <description>&lt;p&gt;Hey y'all, how you doing?&lt;/p&gt;

&lt;p&gt;Are you a fan of AI world? if that so... this might be one of a juicy article for you&lt;/p&gt;




&lt;p&gt;TL;DR&lt;br&gt;
[Friday 17/11/2023] Sam Altman got sacked. Greg Brockman quits&lt;br&gt;
[Saturday 18/11/2023] OpenAI renegotiate with Sam&lt;br&gt;
[Sunday 19/11/2023] Emmet Shear appointed to be Interim CEO for OpenAI&lt;br&gt;
[Sunday 19/11/2023] Sam Altman and Greg Brockman got offer from microsoft to leading new AI research team&lt;br&gt;
[Monday 20/11/2023] OpenAI employee rebelling to resign and joining Sam &amp;amp; Greg team in Microsoft or the boards resign and reinstate Sam &amp;amp; Greg &lt;/p&gt;



&lt;p&gt;&lt;a href="https://i.giphy.com/media/0lGd2OXXHe4tFhb7Wh/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/0lGd2OXXHe4tFhb7Wh/giphy.gif" alt="Open AI" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A few days ago Sam Altman (CEO of OpenAI) is getting fired for unexpected. As the Mr. Altman stepping down from his position, Mira Murati (CTO of OpenAI) was appointed to be an interim CEO of OpenAI, effective immediately.&lt;/p&gt;

&lt;p&gt;In OpenAI blog about &lt;a href="https://openai.com/blog/openai-announces-leadership-transition"&gt;leadership transition&lt;/a&gt;, it says that&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Mr. Altman’s departure follows a deliberative review process by the board, which concluded that he was not consistently candid in his communications with the board, hindering its ability to exercise its responsibilities. The board no longer has confidence in his ability to continue leading OpenAI.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;From that statement, it looks like the Boards and Sam Altman had a different vision. &lt;/p&gt;

&lt;p&gt;With the departure of Sam Altman from OpenAI, it looks like the employee got Sam Altman's back. On Twitter (Or X, whatever you called it), Sam Altman post a twitted "I love OpenAI team so much". That tweet got many replies from employee of OpenAI that shows their supports for Sam Altman. &lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1726099792600903681-779" src="https://platform.twitter.com/embed/Tweet.html?id=1726099792600903681"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1726099792600903681-779');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1726099792600903681&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;One hour after Sam Altman's tweet, Greg Brockman (Co founder of OpenAI), is posting about something too. With Sam Altman's leaving OpenAI, Brockman was supposed to move to another role. But, because of what's happening back then, he was to upset to stay and said that he quits from his position. Madness.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1725667410387378559-110" src="https://platform.twitter.com/embed/Tweet.html?id=1725667410387378559"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1725667410387378559-110');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1725667410387378559&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Oh yeah, I almost forgot to mention. With the Sam leaving and Greg's gone, the employee of OpenAI is rebelling because too much is changing. (yeah well.. who likes it?)&lt;/p&gt;

&lt;p&gt;On Saturday, the boards of OpenAI try to renegotiating with Sam for possible comeback. Well, appearently the negotiations didn't work out, and weird things happend. All of the sudden, Emmet Shear (former CEO of Twitch) is appointed to be interim CEO of OpenAI.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1726470504867913730-467" src="https://platform.twitter.com/embed/Tweet.html?id=1726470504867913730"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1726470504867913730-467');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1726470504867913730&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Few hours after the news of Emmet Shear joining OpenAI, another big news happened. Satya Nadella (CEO of Microsoft) announce on his tweets that Sam Altman and Greg Brockman will be joining Microsoft and leading a new AI research team.&lt;/p&gt;

&lt;p&gt;&lt;iframe class="tweet-embed" id="tweet-1726509045803336122-953" src="https://platform.twitter.com/embed/Tweet.html?id=1726509045803336122"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1726509045803336122-953');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1726509045803336122&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;By the way, Microsoft is not only offering a position for Sam and Greg, they offer to the whole of OpenAI team. They did this on purpose to push back the boards and try to calm the situation.&lt;/p&gt;

&lt;p&gt;There's a &lt;a href="https://youtu.be/dOK5JdMi3O4?si=3Rk0YTUoXBa7bbFN&amp;amp;t=134"&gt;letter&lt;/a&gt; from OpenAI employee to express how the feel for past days. In that letter it said that the all of employee in OpenAI is choose to resign and join the new position on Microsoft run by Greg Brockman and Sam Altman (as they get the offer too), or they will stay at OpenAI, but all the board members resign and reinstates Sam Altman and Greg Brockman&lt;/p&gt;

&lt;p&gt;Pure Chaos.&lt;/p&gt;

&lt;p&gt;so that's the news i've know so far, i'll keep it update if there's latest news from it. And sorry for the bad writing.&lt;/p&gt;

&lt;p&gt;peace ✌&lt;/p&gt;

</description>
      <category>ai</category>
      <category>openai</category>
    </item>
    <item>
      <title>First Week Of HacktoberFest</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Mon, 09 Oct 2023 03:31:18 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/first-week-of-hacktoberfest-19df</link>
      <guid>https://dev.to/khairunnisaas/first-week-of-hacktoberfest-19df</guid>
      <description>&lt;p&gt;Hi Everyone! 👋&lt;/p&gt;

&lt;p&gt;How's your first week of Hacktoberfest going? Is it going well, or just so-so? Have you received any accepted pull requests yet?&lt;/p&gt;

&lt;p&gt;Don't worry if you haven't received an accepted PR yet; you're not alone.&lt;/p&gt;

&lt;p&gt;Now, I want to share what I've accomplished so far during this Hacktoberfest.&lt;/p&gt;

&lt;p&gt;First of all, I got one of my PRs accepted! You can check out the issue I raised  &lt;a href="https://github.com/EddieHubCommunity/BioDrop/issues/9275"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By the way, if you're still unsure where to contribute to open source during this Hacktoberfest, I suggest checking out &lt;a href="https://github.com/EddieHubCommunity"&gt;EddieHubCommunity on github&lt;/a&gt;. EddieHub has one of the most welcoming communities for newcomers, and the people there are very friendly and helpful.&lt;/p&gt;

&lt;p&gt;Now, let's get back to my journey.&lt;/p&gt;

&lt;p&gt;It's truly exciting to have my PR accepted, especially since this is my first time participating in Hacktoberfest! However, I do have some observations to share.&lt;/p&gt;

&lt;p&gt;Let me tell you something...&lt;/p&gt;

&lt;p&gt;Many people seem to have lost sight of the true purpose of Hacktoberfest. This event is meant to be about collaboration, not competition. Unfortunately, I've seen many individuals rushing to get assigned to issues that already have assignees or even creating pull requests for specific issues they weren't assigned to. I understand that everyone aims to complete four accepted PRs, and I'm no exception. However, it's crucial to remember that it's not just about being the first to get four accepted PRs. It's about the quality of your contributions. Are they valuable? Do they truly solve a problem? Have you learned something from what you've done?&lt;/p&gt;

&lt;p&gt;It's about quality, not quantity.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/VhWVAa7rUtT3xKX6Cd/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/VhWVAa7rUtT3xKX6Cd/giphy.gif" width="480" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Additionally, for this Hacktoberfest, I'm not only planning to contribute to open-source projects. I want this month to be all about coding. So, for this week, I plan to continue working on my personal project (hopefully, it will be finished soon, and I can share it with you).&lt;/p&gt;

&lt;p&gt;And that's a wrap, folks. Thanks for reading my article. I hope you have a fantastic day!&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>hacktoberfest23</category>
      <category>opensource</category>
      <category>beginners</category>
    </item>
    <item>
      <title>My Pledge For Hacktoberfest</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Mon, 02 Oct 2023 07:15:28 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/placeholder-pledge-p19</link>
      <guid>https://dev.to/khairunnisaas/placeholder-pledge-p19</guid>
      <description>&lt;h3&gt;
  
  
  Intro
&lt;/h3&gt;

&lt;p&gt;Hi! My name is Nisa. I'm a Frontend developer, and also a newbie open source contributor.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pledge
&lt;/h3&gt;

&lt;p&gt;I pledge to be more active into dev / any programming community and be helpfull to each other!&lt;/p&gt;

&lt;p&gt;Also, just did my first pull request for hacktoberfest! (still not merged tho) maybe i'm gonna make a mini article soon 🔜&lt;/p&gt;

</description>
      <category>hacktoberfest23</category>
      <category>opensource</category>
    </item>
    <item>
      <title>My First Open Source Contributions</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Wed, 23 Aug 2023 03:37:24 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/my-first-open-source-contributions-243o</link>
      <guid>https://dev.to/khairunnisaas/my-first-open-source-contributions-243o</guid>
      <description>&lt;p&gt;Hey Folks! 👋&lt;/p&gt;

&lt;p&gt;So... For the last past month i've been reading other people post about their contribution to the open source project. And i've been asking myself "Why am i never contribute to any open source project?" i mean... you can't lose anything by helping other people right? Instead, you will gain new knowledge. you might learn something from other people (and you will). &lt;/p&gt;

&lt;p&gt;By inspired from other people journey about contributing to open source, i want to do it to, so.. i'm searching what kind of project i could possibly to contribute. and then i found a website from a post at freecodecamp called &lt;a href="https://www.firsttimersonly.com/"&gt;firsttimeronly&lt;/a&gt;. and in that website, there's a bunch of resources you could contribute for an "open source newbie" like me! And then i found a github repo called &lt;a href="https://github.com/firstcontributions/first-contributions"&gt;firstcontributions&lt;/a&gt;. That repo is meant to help the beginners to make their first contribution.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RJRMKhbl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx5lksx5775l8n4kecti.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RJRMKhbl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx5lksx5775l8n4kecti.png" alt="firstcontributions github repo" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To contribute to that "project" is very easy. you just need to fork the project -&amp;gt; clone it -&amp;gt; create new branch -&amp;gt; add your name to the Contributors.md file -&amp;gt; create a pull request&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--33v0KsEF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71bqr5l0d56yg3qg9fc0.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--33v0KsEF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71bqr5l0d56yg3qg9fc0.jpeg" alt="My first PR got accepted!" width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's it! 😎 very simple right?&lt;/p&gt;

&lt;p&gt;and some of you might think "Just adding my name to the one of the file? that's very unneccessary". Yeah, That's true. But, if you not start with something small, how do you think you could start with something big? everything will start with small things, and it'll get bigger as the time flies.&lt;/p&gt;

&lt;p&gt;OK, let's get back after creating my pull request. a few minutes later, i got the notification that my PR is accepted! and oh my god... i got so excited! you know the feeling you get after you achieving something you never done it before? yes, that feels good right? i know my first contribution is useless / unnecessary. but i really hope this is the beginning of my journey to be more active contributing to open source projects&lt;/p&gt;

&lt;p&gt;That's it from me folks! Thank you for reading my little journey&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>codenewbie</category>
      <category>beginners</category>
    </item>
    <item>
      <title>New Way To Write Transform Properties In CSS 🙌</title>
      <dc:creator>Khairunnisaas</dc:creator>
      <pubDate>Fri, 12 May 2023 02:44:00 +0000</pubDate>
      <link>https://dev.to/khairunnisaas/new-way-to-write-transform-properties-in-css-1i8d</link>
      <guid>https://dev.to/khairunnisaas/new-way-to-write-transform-properties-in-css-1i8d</guid>
      <description>&lt;p&gt;A few days ago, Google held its annual event to introduce the latest updates on its products, Google I/O 23. There were many cool things announced, but one of my favorites was the individual transform property in CSS.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Individual Transform Property?
&lt;/h2&gt;

&lt;p&gt;In CSS you can add movement to your component by adding transformation. Such as translation, rotation, scalling, etc. And usually you write transform property in CSS like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;div{
  height: 60px;
  width: 60px;
  background-color: green;
  transform: translate(50%, 70%) rotate(30deg) scale(1.2);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But with Individual transform property, you can specify transform properties individually, like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;div{
  height: 60px;
  width: 60px;
  background-color: green;
  translate: 50% 70%;
  rotate: 30deg;
  scale: 1.2
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This individual transform property will come in handy when you're writing a complex keyframe, like making animation. As an example, you want to make animation that translate on 0% and 100%, and rotate the element from 25% to 85%. In the past, you have to calculate manually value for that 2 transformation at the different keyframe points. &lt;br&gt;
The code will be look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0%{ transform: translateX(0);}
  10%{ transform: translateX(10%) rotate(72deg);}
  25%{ transform: translateX(25%) rotate(90deg);}
  85%{ transform: translateX(85%) rotate(180deg);}
  95%{ transform: translateX(90%) rotate(240deg);}
  100%{ transform: translateX(100%) rotate(360deg);}
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But with individual transfrom property, you don't need to calculate in between points. Just simply write values for individual property.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0% {rotate: 0;}
  25%, 85% {rotate: 180deg;}
  100% { rotate: 360deg;}

  0% {translate: 0 0;}
  100% { translate: 100% 0;}
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, the code much easier to read and manage if you want to add more transformation. But you need to know that is individual transform property is only support on browser like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Chrome: version 104 (and above)&lt;/li&gt;
&lt;li&gt;Microsoft Edge: version 104 (and above)&lt;/li&gt;
&lt;li&gt;Mozilla Firefox: Version 72 (and above)&lt;/li&gt;
&lt;li&gt;Safari: Version 14.1 (and above)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Although it is currently only supported on the latest versions of popular browsers, it is an exciting development that will undoubtedly streamline the process of web design. &lt;/p&gt;

&lt;p&gt;Happy Coding, And Stay Creative&lt;/p&gt;

</description>
      <category>css</category>
      <category>html</category>
    </item>
  </channel>
</rss>
