WinUI 3 Tutorial

Zunayed Hassan Leave a comment

Windows App SDK deployment guide for self-contained apps

View original article here

  • Open you *.csproj file in a text editor. It is a XML file.
  • In the app project file, inside the main PropertyGroup, add
<WindowsPackagedType>None</WindowsPackagedType>
<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
  • For packaged projects, in the app project file, at the end of the file before the closing </Project>, add the Target shown below.
<Target Name="_RemoveFrameworkReferences" BeforeTargets="_ConvertItems;_CalculateInputsForGenerateCurrentProjectAppxManifest">
    <ItemGroup>
      <FrameworkSdkReference Remove="@(FrameworkSdkReference)" Condition="$([System.String]::Copy('%(FrameworkSdkReference.SDKName)').StartsWith('Microsoft.WindowsAppRuntime.'))" />
    </ItemGroup>
</Target>
Read More

Tutorial: Laravel Livewire

Zunayed Hassan Leave a comment

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Useful Links

Download

Lets Dive into Coding

Installation

Create a new Laravel Project by typing following command

laravel new notes_on_laravel_livewire

Install Livewire

composer require livewire/livewire

Now, we will Include the JavaScript (on every page that will be using Livewire).

Read More

Tutorial: JavaScript Notification API

Zunayed Hassan Leave a comment

The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. These notifications’ appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user. This feature is available only in secure contexts (HTTPS).

You can check notification permission by reading Notification.permission value.

  • denied – The user refuses to have notifications displayed.
  • granted – The user accepts having notifications displayed.
  • default – The user choice is unknown and therefore the browser will act as if the value were denied.

To ask permission from user to show notification use this method: Notification.requestPermission()

To add on click event, use notificationObject.onclick

Read More

Using Daisy UI: A Tailwind CSS UI Components

Zunayed Hassan Leave a comment

Although there are a lot of UI components based on Tailwind CSS, but most of the good ones are not free of charges. Daisy UI has came with a lot of free components which looks nice and can be themed as well. This article is only about installing, deploying and using Daisy UI. If you want to know more, then please visit their website.

Installing

  • Just visit Snowpack here and install it. We have already covered the setup process on Tutorial: Tailwind CSS Article.
  • Type the following command to create tailwind.config.js file: npx tailwindcss init
  • Change the tailwind.config.js file to this bellow, where we have added plugins and daisyui portion. For deployment you should add the purge property too, which he have already shown.
Read More

CSS New Features Part – 2: Variables

Zunayed Hassan Leave a comment

While writing CSS styles for website, we often need to follow certain styling guidelines for our themes according to designers. For examples, the primary color, secondary color, standard padding, margin, shadow, font sizes etc. And writing color hexcode or font sizes one by one could be messy if you want to change any value in the future. To resolve those kind of problem, you may use SASS or LESS. But, you will also need to recompile those into native CSS. However, there is an easy solution to all of those. Just use CSS variables and keep writing your styles as the way it is.

  • To declare a variable in CSS is very easy, just use --variable_name: value
  • To use the variable in CSS, just use var(--variable_name) function, here is the example property_name: var(--variable_name);
Read More