Are you planning to create a mockup for your design? Or just want to share an unusual screenshot to the internet? Shots is the answer. <a title="Shots" href="https://shots.so/" target="_blank" rel="noopener">Shots</a> will help you to create amazing and beautiful mockup.
When I write this post, Shots is in Beta. But it has so many features to create mockups in no time. From screenshot, browser, to devices, it has a lot of template that you can use for free!
<img src="/storage/uploads/2024/09/04/shots-iphone15-mockup_uid_66d819e1521da.png" alt="Shots iphone15 mockup" width="100%">
&nbsp;Image above is the mockup for iPhone 15, it's very easy to use, you just need to upload your image by clicking the "+" button, and your mockup will be ready!
I tried to upload my website and attach it to this mockup, and the result is very good, see the image below.
<img src="/storage/uploads/2024/09/04/shots-iphone15-web-mockup_uid_66d81b31e510d.png" alt="Shots iphone15 web mockup" width="100%">
You have so many options to customize your mockup. You can change the mockup size, the screenshot or device size, the background, shadow, border radius, position, overlay, and many more. You can try it by yourself.
This is example for the screenshot with custom gradient color of background.
<img src="/storage/uploads/2024/09/04/shots-screenshot_uid_66d81cb3bfab1.png" alt="Shots screenshot" width="100%">
It has so many posibilities to create beautiful mockup and screenshot. For download options, you can download your design as PNG or JPG file, and of course, you can choose the quality, up to 5000 pixel!
In my opinion, this is the best free mockup creator design on website, it's simple and easy to use, don't forget the thousand posibilities you can achieve with customizeable options. Thanks to <a title="Mohamad Gandomi" href="https://twitter.com/MohamadGandomi" target="_blank" rel="noopener">Mohamad Gandomi</a> and <a title="Kamiab Ayani" href="https://twitter.com/kami_ayani" target="_blank" rel="noopener">Kamiab Ayani</a> as the creator of this great tools.

Create amazing mockups with shots

Create Amazing Mockups with Shots

Hello devs, I know sometimes you encounter problems while coding, and what comes to mind is, I want to ask it in forums or social media, where there are many programmers from all over the world.
When you want to post your problem, and you include the code you created, it's very unsightly if the code you upload is the result of a photo with a cellphone camera, because the results are not good, sometimes even very bad.
As a programmer, you must know how to share a code beautifully and neatly in a forum or community, it will make it easier for people to help solve the problems you face.
There is a tool that is very suitable for this case. The tool is Carbon. Carbon is a website for creating screenshots of your code, and of course it can be customized.
Carbon supports more than 50 languages, and you can customize it according to your code. Carbon can be accessed at <a title="https://carbon.now.sh/" href="https://carbon.now.sh/" target="_blank" rel="noopener">https://carbon.now.sh/</a>. The best point is, this tool is in the Visual Studio Code Extension. It will be even easier to use.
An example of a screenshot of the results from Carbon is like this:
<img src="/storage/uploads/2024/08/31/carbon-example_uid_66d3252855773.png" alt="Carbon example" width="100%" height="auto">
Beautiful, isn't it.
To use Carbon in Visual Studio Code, click the Extensions button on the sidebar or press Ctrl + Shift + X. Type carbon-now-sh in the search, then install. If you want to see it in the Marketplace, you can follow this <a title="carbon-now-sh | Visual Studio Marketplace" href="https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh" target="_blank" rel="noopener">link</a>.
To use Carbon, the code block you want to split, press Ctrl + Shift + P, type Carbon, or use the shortcut, Alt + Cmd + A or Alt + Windows + A on Windows. The code you block will automatically appear on the Carbon web page, and ready to be customized.
<img src="/storage/uploads/2024/09/01/carbon-now-sh-on-vs-code_uid_66d469825346f.png" alt="Carbon now sh on vs code" width="100%" height="auto">
Once the code is customized, it's ready for export, you can export your code in PNG or SVG format. Finally, your code is ready to be shared on social media or forums. I'm sure there will be some people asking, "how to create a screenshot like that?". &nbsp;

Carbon now sh

Share Your Code with Style

Programming is not just typing code on your computer and running it, it turns out that learning programming can also improve our quality of life.
Programming world is very wide, and has many branches, such as web or application. When we enter the world of programming, we indirectly start to think differently and more creatively. There are still several reasons why we should learn programming.
I have 5 reasons why we should learn web programming.
<ul>
<li>Makes us think creatively</li>
<li>Help you solve problems</li>
<li>Make you more careful in doing something</li>
<li>An asset for the future</li>
<li>Still a trend at this time</li>
</ul>
 For a full explanation, you can watch it on my YouTube video, available in English subtitles.
<img src="https://img.youtube.com/vi/iAFQOqqqCS0/0.jpg" alt="" width="480" height="360">

Laptoo with code

5 Reasons Why We Should Learn Web Programming

Share your ideas, ask questions, send me a message, or chat me, and start building your website!

Follow Me on

Contact Information

My name is Bayu Kurniawan, a web developer in Bali. Create your awesome website.

Start building your website with me and get the awesome website.
Get in touch with me.

Contact Me

baycore.dev

Who doesn't know Wordpress? I think most of the developers know Wordpress. <a title="Wordpress" href="https://wordpress.com/" target="_blank" rel="noopener">Wordpress</a> is a free, open-source content management system (CMS) used to create and manage websites. It's based on PHP and MySQL, and it provides an easy-to-use interface that allows users to design, publish, and manage web content without needing to know how to code. But in my experience, you still need a little knowledge about coding, especially in CSS and Javascript to make your site better.
<h3>Short Story About Wordpress</h3>
A short history about Wordpress, WordPress was founded in 2003 by Matt Mullenweg and Mike Little. It originated as a fork of an existing project called b2/cafelog, developed by Michel Valdrighi. When Valdrighi stopped updating b2, Mullenweg and Little decided to build upon its codebase to create a new platform focused on elegance, web standards, and usability. And until now, around 1/3rd (33.72%) of the top 1 million sites in the world use WordPress (<a title="World&rsquo;s top-ranking websites are on WordPress" href="https://www.appmysite.com/blog/wordpress-market-share-statistics/#three" target="_blank" rel="noopener">Source</a>).
<h3>Introduction to Wordpress Studio</h3>
As time goes on, WordPress technology continues to evolve, leading to the creation of&nbsp;<a title="WordPress Studio" href="https://developer.wordpress.com/studio/" target="_blank" rel="noopener">WordPress Studio</a>. Yap, we'll talk about Wordpress Studio now. Wordpress Studio is a fast, free way to develop locally with WordPress. Not like the common Wordpress instalation, you can install it as a standalone app. You can download it based on your OS on their website. It's available for Windows and MacOS (Apple Silicon and Intel).
The good fact here, you don't need to setup the dependencies like web servers, MySQL servers, or virtualization technologies to run your Wordpress site. Studio will take care of it and you will see your site installed on localhost in seconds!&nbsp;
Taken from Wordpress.com,
<blockquote>
Behind the scenes, Studio uses WordPress Playground, the WebAssembly-powered PHP binary. Thanks to this technology, there is no need to use a traditional web server, making your development experience much quicker and smoother.
</blockquote>
This simplify us to setup the Wordpress site, thanks to Wordpress team to make this happened.
<h3>Wordpress Site Setup</h3>
The first step after app installation is the website setup. You need to enter the Site Name or Import a Backup from your existing Wordpress site.
<img src="/storage/uploads/2024/09/08/wordpress-studio-first-setup_uid_66dda7d2a0d9c.png" alt="Wordpress studio first setup" width="100%">
After you make your site, your website will be ready in seconds, hosted on localhost. The next step is customize your site. You can open your admin site and use it like usual Wordpress site.&nbsp;
To view the URL and what is the user and password to login, you need to go to Settings tab of the Studio, then you will see the Site Name, local URL, local path, username, password, etc. Password is auto generated by default, feel free to change it in the Users page on the Admin site.
<img src="/storage/uploads/2024/09/08/wordpress-studio-settings_uid_66ddac3b30fd8.png" alt="Wordpress studio settings" width="100%">
<h3>&nbsp;Other Features</h3>
The one that caught my attention is the Share a Demo Site feature. The goals of this feature is, to show the snapshots of your website to your client, friends, or colleagues, without exposing your localhost with tunnel, let say Ngrok.&nbsp;
This feature require you to have an account in <a title="Wordpress.com" href="https://wordpress.com/" target="_blank" rel="noopener">Wordpress.com</a>. It's very simple, you can create an account using email or Gmail account. I think it will setup and sync your local Wordpress site into Wordpress.com, so other people can see your Website on the internet. Yeah, that can reduce the cost to buy a shared or Wordpress hosting to just create a demo website.
As a developer, I also like the Open in VS Code button. This will open the Wordpress files into your VS Code, and you can modify the theme files on your favorite code editor!
<h3>Conclusion</h3>
Wordpress Studio is a new breakthrough in the world of Wordpress. Easy installation, easy share, and easy modifiy are the words that I can say after try this. I've using Wordpress for some of my works, and I think, Studio is a must if you need to work locally first before host your Website.

easy-wordpress-development-with-wordpress-studio.png

Easy wordpress development with wordpress studio

Easy Wordpress Development with Wordpress Studio

PHP 8.4, the latest release in the PHP series, introduces a range of exciting new features and improvements aimed at enhancing performance and developer experience. Among the key highlights are the addition of readonly classes, which simplify immutability, and the support for intersection types, allowing developers to define more precise type constraints. Additionally, PHP 8.4 offers enhanced match expressions, making conditional logic even more powerful. With further optimizations in performance and several bug fixes, PHP 8.4 continues the evolution of one of the most popular server-side scripting languages, providing developers with more tools for writing clean, efficient code.
This article will talk about the new array functions in PHP 8.4, there are:
<ul>
<li style="font-style: italic;">array_find</li>
<li style="font-style: italic;">array_find_key</li>
<li style="font-style: italic;">array_any</li>
<li style="font-style: italic;">array_all</li>
</ul>
I will breakthrough those new array functions.
<h3>array_find function</h3>
The array_find function returns the value of the first element that matches the criteria defined in the callback. If no element matches the callback, the function returns null.
Let see the example below:
<pre>$products = [
 [
 'name' =&gt; 'Sony WH-1000XM5',
 'type' =&gt; 'Headphones',
 'barcode' =&gt; 654321,
 ],
 [
 'name' =&gt; 'Apple iPad Air',
 'type' =&gt; 'Tablet',
 'barcode' =&gt; 987654,
 ],
 [
 'name' =&gt; 'Google Pixel 8',
 'type' =&gt; 'Phone',
 'barcode' =&gt; 246810,
 ],
];
// Find the product with barcode 654321
$findProduct = array_find(
 array: $products,
 callback: function (array $product): bool {
 return $product['barcode'] == 654321;
 },
);
</pre>
If you run the code above, the result will be:
<pre>[
 'name' =&gt; 'Sony WH-1000XM5',
 'type' =&gt; 'Headphones',
 'barcode' =&gt; 654321,
]
</pre>
If no element matches the callback, the function will return null.
<h3>array_find_key function</h3>
This function works like array_find, but rather than returning the value of the first element that meets the callback condition, it returns the key of the first matching element.
I will use the $products above as an example, with usage of array_find_key, take a look to the code below:
<pre>$products = [
 [
 'name' =&gt; 'Sony WH-1000XM5',
 'type' =&gt; 'Headphones',
 'barcode' =&gt; 654321,
 ],
 [
 'name' =&gt; 'Apple iPad Air',
 'type' =&gt; 'Tablet',
 'barcode' =&gt; 987654,
 ],
 [
 'name' =&gt; 'Google Pixel 8',
 'type' =&gt; 'Phone',
 'barcode' =&gt; 246810,
 ],
];
// Find the key of the product with barcode 987654
$findProduct = array_find_key(
 array: $products,
 callback: fn (array $product): bool =&gt; $product['barcode'] === 987654;
 },
);
</pre>
After running the code, the result of $findProduct will be 1, because the product is the second element in the array.&nbsp;If no element matches the callback, the function will return null.
<h3>array_any function</h3>
The array_any function checks whether at least one element in the array satisfies the condition specified in the callback. It returns true if any element meets the criteria; otherwise, it returns false if none do.
Still using the $products array, let's try to find any product with type Phone.
<pre>$productsArePhone = array_any(
 array: $products,
 callback: fn (array $product): bool =&gt; $product['type'] === 'Phone',
);
</pre>
In this scenario, $productsArePhone will be true since at least one product in the array is a phone. If no product meets the callback condition, the function will return&nbsp;false.
<h3>array_all function</h3>
The array_all function works similarly to array_any, but instead of verifying if at least one element meets the callback criteria, it checks whether all elements satisfy the condition. If every element matches the callback, the function returns true. If any element fails to meet the condition, the function returns false. &nbsp; &nbsp;Let's check if all products in $products are Phone.
<pre>$allProductsArePhone = array_all(
 array: $products,
 callback: fn (array $product): bool =&gt; $product['type'] === 'Phone',
);
</pre>
In this case, $allProductsArePhone will be false because not all the products in the array are phones. If even one product doesn't meet the condition, the function will return false.
<h3>Conclusion</h3>
So, those are the new array function in PHP 8.4. Hopefully they can help you to solve some array checking or filtering in your PHP code.&nbsp;
Keep coding to sharpen your skills even more, Happy coding guys!

New array functions in php 84

New Array Functions in PHP 8.4

Are you going to use icons in your next project? Are you trying to find Font Awesome alternative? Phosphor come to the rescue!
<a title="Phosphor" href="https://phosphoricons.com/" target="_blank" rel="noopener">Phosphor</a> is a flexible icon family for interfaces, diagrams, presentations. It has over 9000 icons with 6 variants. So much icons that will take a lot of your time to choose.
<img src="/storage/uploads/2024/09/05/phosphor-icons_uid_66d9488549111.png" alt="Phosphor icons" width="100%">
For UI designer, Figma and Sketch plugin are available. If you are a Front-end developer, web, React, and Vue library are available. For mobile developer, Flutter and Swift library also available, a complete solutions for an icon library.
Now we talk about variants. Phosphor has 6 variants, there are Thin, Light, Regular, Bold, Fill, and Duotone. For some developers, maybe Regular and Fill version are more frequently used.
<img src="/storage/uploads/2024/09/05/phosphor-select-variants_uid_66d94c4862b8e.png" alt="Phosphor select variants" width="100%">
&nbsp;If you click one of the icon, a window will be sliding up, and you can view the code and simply copy to use it in your project. Download also available, you can choose between SVG or PNG, or just copy the SVG raw code, based on your needs.&nbsp;
Before using the code, you need to install the library that support your project. Let say you are working on a React project, you need to install the library first.
<pre>npm i @phosphor-icons/react</pre>
Then, you can use it like below,
<pre>import { Horse, Heart, Cube } from "@phosphor-icons/react";
const App = () =&gt; {
 return (
 &lt;main&gt;
 &lt;Horse /&gt;
 &lt;Heart color="#AE2983" weight="fill" size={32} /&gt;
 &lt;Cube color="teal" weight="duotone" /&gt;
 &lt;/main&gt;
 );
};</pre>
For other framework, you can check in their <a title="Github" href="https://github.com/phosphor-icons/homepage" target="_blank" rel="noopener">Github</a>.
If you can't find what icon you need, you can request an icon. Just post an icon request issue on their Github, and hopefully they answer your request.&nbsp;
So, in my opinion, Phosphor is a complete icon library solutions. As a Front-end and mobile developer, I highly recommend this for your next project.

265shots so

Phosphor - Complete Icon Collections for Your Next Project

Choosing the right color for the designs, sometimes is not an easy thing. Often we are confused about determining the color for an object or component in an image or project.
In addition to using solid colors, there is another alternative, Gradient. Gradient is the change of color from one color to another. For example from red to yellow. The resulting colors are red, orange, and yellow.
When we are having trouble deciding which color combination to make a color gradation for, we can look for inspiration on the internet, for example on the <a title="WebGradients" href="https://webgradients.com/" target="_blank" rel="noopener">WebGradients</a> website. WebGradients has more than 150 ready-to-use color combinations.
<img src="/storage/uploads/2024/09/01/gradient-color-from-webgradients_uid_66d46e4578e94.png" alt="Gradient color from webgradients" width="100%" height="auto">
Color codes are also provided in hex format. What I like most is, the CSS Copy button which is very instant. We can easily get the CSS code for the gradient you choose.
For those of you who work as UI Designers, there are versions of Sketch and Photoshop that you can use directly in the application. Now you are no longer confused about finding color combinations for your project! &nbsp;

Tips and Trick