Sharing Code and Resources (Part 3)

By Ashwin Venugopal -

 




Adding Static Files

Blazor has the capability to utilize static files like images, CSS, and JavaScript. By placing our files in the wwwroot folder, they will be automatically available online and reachable from the main directory of our website. One advantage of Blazor is that we can also accomplish this with a library, making it incredibly simple to share static files through a library.

Blazor ultimately relies on HTML, which can be styled with CSS. As noted earlier, the default Blazor templates utilize Bootstrap, and we will also stick with that. You can find a fantastic website featuring user-friendly Bootstrap themes that are available for download at https://bootswatch.com/.

CSS versus LESS versus SASS

CSS represents Cascading Style Sheets, which allows you to apply styles to the appearance of your website. LESS denotes Leaner Style Sheets and builds upon CSS. SASS, or Syntactically Awesome Style Sheets, functions similarly to LESS.

SASS requires less coding and is simpler to manage. Additionally, it offers benefits like variables, loops, and more. There are two versions of SASS- SASS and SCSS. We can opt for SCSS, which is the latest version and utilizes brackets. Since SASS needs to be transpiled, we require a tool to convert SASS into CSS. Therefore, the initial step will be to install Web Essentials 2019.

Preparing CSS/SASS

  • In Visual Studio, click on the Extensions menu and select Manage Extensions.

  • Search for Web essentials 2019, select it from the search result, and then click Download.

  • You will be prompted to restart Visual Studio. Please do so (all instances if you have more than one open) to finish the installation. Web Essentials 2019 is a collection of many different extensions that are useful when developing web apps.

  • Next, we need to download the SASS files for Bootstrap. Open a web browser and navigate to https://getbootstrap.com/docs/5.0/getting-started/ download/.

  • Click the Download Source button and extract the ZIP file.

  • In the MyBlog.Shared project, create a folder called Bootstrap.

  • Copy the scss folder from the ZIP file into the Bootstrap folder.

  • Next, we need to download a new theme. Navigate to https://bootswatch. com/darkly/.

  • In the top menu called Darkly, there are some links. Download _bootswatch. scss and _variables.scss.

  • In the MyBlog.Shared project, create three new folders so that the new structure looks like this- Bootswatch/Dist/Darkly.

  • Copy _bootswatch.scss and _variables.scss into the Darkly folder.

  • Since we have installed Web Essentials, we can now use one of the extensions.

  • We can now create a new SASS file by doing this- Select the wwwroot folder and press Shift + F2, which will show a small dialog where you can supply a filename. It will use the file extension to load the correct template. Name the file MyBlogStyle.scss.

  • We get some styles with Blazor that we can move to our SCSS file. We want to keep the styles for the error message box from site.css.

  • Right-click on the MyBlogStyle.scss file and select Web compiler | Compile file. It will create four new files. First, we have MyBlogStyle. css and MyBlogStyle.min.css, which is the generated CSS and a minified version of CSS. They are located under the MyBlogStyle.css node. We also get compilerconfig.json and compilerconfig.json.defaults, which are the settings for the web compiler.

Conclusion

Various files have been successfully added and all the prerequisites that could be added are in place.



























Comments

Post a Comment

Popular posts from this blog

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more