teleren/devto huggingface dataset:
Bootstrap 5 Footer
Published: 2021-03-24 14:12:43

Footer is a component at the bottom of a website. It's mostly used for aggregating links to the crucial directories of a given page.

-----
## Crucial resources


Here are the resources that we have prepared to help you work with this component:

- [📄 Footer tutorial & documentation](https://mdbootstrap.com/docs/standard/navigation/footer/) <-- start here
- [📥 25 examples of Bootstrap 5 Footers](https://mdbootstrap.com/docs/standard/navigation/footer/examples-and-customization/)
- [⚙️ Bootstrap Footer Generator](https://mdbootstrap.com/docs/standard/tools/builders/footer/)
- [📦 Free UI Kit for Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [💽 Free hosting for any Bootstrap project (beta)](https://mdbootstrap.com/docs/standard/cli/)


-----
## Video tutorial

{% youtube UEfFpk4sSxE %}

-----

## Additional resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Vue + Bootstrap 5 UI Kit
Tags: webdev, opensource, javascript, vue
Published: 2021-03-24 13:55:46

MDB 5 Vue is the first-ever UI Kit that integrates the latest Vue with the **fifth version of Bootstrap**.

Download Material Design for Bootstrap 5 Vue [here](https://mdbootstrap.com/docs/b5/vue/).

-----

## What MDB 5 Vue contains?

✔️ Latest Bootstrap 5 & Material Design 2.0
✔️ 500+ material UI components
✔️ Super simple, 1-minute installation
✔️ Detailed docs & multiple practical examples
✔️ Lots of tutorials
✔️ Plenty of free templates
✔️ Huge and active community
✔️ **MIT license - free for personal & commercial use**

-----

## Quickstart

Watch this quick tutorial & get started right away.

{% youtube mbt6HtbS2XM %}

-----

## Working with MDB

- [Installation](https://mdbootstrap.com/docs/b5/vue/getting-started/installation/)
- [Changelog](https://mdbootstrap.com/docs/b5/vue/getting-started/changelog/)
- [Roadmap](https://mdbootstrap.com/docs/b5/roadmap/)
- [Free Design tools](https://mdbootstrap.com/docs/standard/tools/)
- [UI Kit for Standard Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [UI Kit for Angular Bootstrap 5](https://mdbootstrap.com/docs/b5/angular/)
- [UI Kit for Vue Bootstrap 5](https://mdbootstrap.com/docs/b5/vue/)

-----

## Useful resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
#DevHack: Caching data for your VSCode extension
Tags: extensions, vscode, caching, webdev
Published: 2021-03-24 13:55:26

For my [Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-autocomplete) to autocomplete the Microsoft Graph APIs, I wanted to improve the speed of the suggestions by implementing a cache. That way, you would not have to do the same API calls each time.

## In-memory cache has its limits

Initially, I started with just an in-memory cache. An in-memory cache is easy to establish, but whenever you close your VSCode session. The cache will be gone. Next time, the cache has to be created all from scratch.

## What are the options?

Luckily VSCode provides you a couple of options to cache data for your extension. There are two places where you can cache data:

- `workspaceState`: When you want to cache data for the current workspace/project.
- `globalState`: When you want to cache data independent of your current project.

Both of these states are a `Memento` object, which allows you to `get` and `update` a value.

> **Info**: There is also a `SecretStorage` which can be used to set/retrieve/delete secrets.

## Using the VSCode state

For my extension, I choose to use the `globalState`, as I want to cache the Microsoft Graph data independently from the current project. Using the `workspaceState` is similar to the `globalState`.

Start by creating the cache as follows:

```typescript
export async function activate(context: vscode.ExtensionContext) {
  
  const defaultData: CacheObject = { v1: {}, beta: {} };
  const cacheName = `${EXTENSION_NAME}_cache`;
  const cache = context.globalState.get<CacheObject>(cacheName, defaultData);

  ...
}
```

Once created, you can put data into the cache:

```typescript
// Add API response to the right API version of the cache
cache[version][path] = apiData;
await this.context.globalState.update(cacheName, cache);
```

When you added the data. You can start retrieving it as follows:

```typescript
cache = context.globalState.get<CacheObject>(cacheName);
```

Currently, you can only get and update data, you cannot clear/delete the cache. If you can override the cache with a default value.

```typescript
const clear = () => {
  cache = {};
  await context.globalState.update(cacheName, {});
}
```

> **Info**: You can find a complete example of using the VSCode state here: [CacheProvider.ts](https://github.com/estruyf/vscode-msgraph-autocomplete/blob/main/src/providers/CacheProvider.ts).

*Article first publish on [eliostruyf.com](https://www.eliostruyf.com/devhack-caching-data-vscode-extension/)*
Neverending quest to find an ideal code editor
Tags: tooling, watercooler, programming, productivity
Published: 2021-03-24 13:50:43

Every developer knows it. Everyone wants to have an editor which will all features for every situation (like a developer's swiss knife) and ideally does not take a huge amount of memory and CPU while you use it. And this is a neverending quest for me.

I recently reopen this problem in my mind, while I started work on one Kotlin (with Micronaut framework [https://micronaut.io/](https://micronaut.io/)) project. Right from the beginning, I refused to use Idea IntelliJ since in general, I'm not a big fan of full-featured IDEs even Idea have probably the best support for Kotlin language. Till now, I was quite happy with Visual Studio Code, but ...

By default, VS Code does now have support for Kotlin language (even for just syntax highlighting), so I did what I always do in VS Code, install a plugin. And here, a problem occurred. After a couple of minutes, I was surprised that my laptop started to be loud (Apple Macbook Pro with M1 and 8 GB RAM) and the response of the system was terrible. So I started investigating what is going on and from the Activity Monitor application, I found that VS Code gets almost 4 GB of RAM and no small amount of CPU. Honestly, I was angry with VS Code and started to look for alternatives. Nothing really convinced me, so after a couple of hours of browsing the web for "ideal editor", I came back to VS Code and look deeper into what is the problem with my setup.

Luckily, it was just the Kotlin plugin ([https://marketplace.visualstudio.com/items?itemName=fwcd.kotlin](https://marketplace.visualstudio.com/items?itemName=fwcd.kotlin)). I found a way to check processes inside the VS Code and saw that the Kotlin plugin (which I installed just due to syntax highlighting) takes 2,5 GB of RAM. So I remove it and found another plugin ([https://marketplace.visualstudio.com/items?itemName=mathiasfrohlich.Kotlin](https://marketplace.visualstudio.com/items?itemName=mathiasfrohlich.Kotlin)) that works fine. Also, I did a review of all plugins which I already installed and found that I do not need now almost any of them.

At the end of this part of my neverending quest, I am staying with VS Code for now. With an almost vanilla configuration and almost no plugins, it gives me all that I need for now. I am not saying it is the end of my search, but I can take a rest for now.

One more thing. I give a quick shot to Vim (NeoVim) with some plugins for Kotlin and folder tree, but I am lazy to learn to use Vim. 

Anyway, if you have a good tip for a code editor which is light, yet powerful and ideally free of charge, let me know.
Good Quality Apps For Windows to Make Your Computers Seem Modern (Sequel)
Tags: productivity, webdev, github, showdev
Published: 2021-03-24 13:46:02

Are you bored with the layout of windows apps? Try to make your computer modern with these open-source applications!

Before going through, this post is a continuance from the previous post I made, you can read it here:
{% post https://dev.to/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k %}

1\. Notepads
![Notepads Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo6vmw71z5pjonp5pfbb.png)

Notepads (Notepad Sets) is a modern, lightweight text editor with a minimalist design. Notepads has the following features:
- Fluent design with a built-in tab system.
- Blazingly fast and lightweight.
- Launch from the command line or PowerShell by typing: 
notepads or notepads %FilePath%.
- Multi-line handwriting support.
- Built-in Markdown live preview.
- Built-in diff viewer (preview your changes).
- Session snapshot and multi-instances.

Documentation site: https://www.notepadsapp.com/
GitHub link: https://github.com/JasonStein/Notepads
Get it from Microsoft Store: https://www.microsoft.com/en-id/p/notepads-app/9nhl4nsc67wm?rtc=1

2\. Fluent Terminal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gwz7gmem0noe4oqknp8.png)
The fluent terminal is a terminal emulator based on UWP and web technologies with a good design. Fluent terminal has some features such as multiple tabs and windows, import and export themes, and others. You can find out the whole features [here](https://github.com/felixse/FluentTerminal).

GitHub link: https://github.com/felixse/FluentTerminal
Get it from Microsoft Store: https://www.microsoft.com/store/apps/9p2krlmfxf9t?cid=storebadge&ocid=badge

3\. ImageGlass

![ImageGlass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnm74qt90dpbwmbkhj1m.png)

ImageGlass is a lightweight software application that targetting to help you view images in a clean and intuitive working environment.

Documentation site: https://imageglass.org/
GitHub link: https://github.com/d2phap/ImageGlass
Download it here: https://imageglass.org/release/imageglass-8-0-12-8-kobe-30#downloads

Please star this article and share it if you like it :)

## Happy Coding! 🎉
You might also like these articles:
{% post https://dev.to/kimlimjustin/3-good-quality-apps-for-windows-to-make-your-computer-seems-modern-k4k %}{% post https://dev.to/kimlimjustin/my-personal-website-built-using-html-css-and-vanilla-javascript-13kd %}{% post https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}
The 5 Pillars of the AWS Well-Architected Framework
Tags: aws, architecture, framework
Published: 2021-03-24 13:44:15

The AWS Well-Architected Framework helps cloud architects build the most secure, high-performing, resilient, and efficient infrastructure possible for their applications. The framework provides a consistent approach for customers and AWS Partner Network to evaluate architectures, and provides guidance to implement designs that scale with your application needs over time.

**1- Operational Excellence**

The ability to support development and run workloads effectively, gain insight into their operations, and to continuously improve supporting processes and procedures to deliver business value.


**2- Security**

The security pillar encompasses the ability to protect data, systems, and assets to take advantage of cloud technologies to improve your security.


**3- Reliability**

The reliability pillar encompasses the ability of a workload to perform its intended function correctly and consistently when it’s expected to. This includes the ability to operate and test the workload through its total lifecycle. This paper provides in-depth, best practice guidance for implementing reliable workloads on AWS.


**4- Performance Efficiency**

The ability to use computing resources efficiently to meet system requirements, and to maintain that efficiency as demand changes and technologies evolve.


**5- Cost Optimization**

The ability to run systems to deliver business value at the lowest price point.
React + Bootstrap 5 UI KIT
Tags: webdev, opensource, javascript, react
Published: 2021-03-24 13:43:27

MDB 5 React is the first-ever UI Kit that integrates the latest React with the **fifth version of Bootstrap**.

Download Material Design for Bootstrap 5 React [here](https://mdbootstrap.com/docs/b5/react/).

-----

## What MDB 5 React contains?

✔️ Latest Bootstrap 5 & Material Design 2.0
✔️ 500+ material UI components
✔️ Super simple, 1-minute installation
✔️ Detailed docs & multiple practical examples
✔️ Lots of tutorials
✔️ Plenty of free templates
✔️ Huge and active community
✔️ **MIT license - free for personal & commercial use**

-----

## Quickstart

Watch this quick tutorial & get started right away.

{% youtube OPEDXMzjfSw %}

-----

## Working with MDB

- [Installation](https://mdbootstrap.com/docs/b5/react/getting-started/installation/)
- [Changelog](https://mdbootstrap.com/docs/b5/react/getting-started/changelog/)
- [Roadmap](https://mdbootstrap.com/docs/b5/roadmap/)
- [Free Design tools](https://mdbootstrap.com/docs/standard/tools/)
- [UI Kit for Standard Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [UI Kit for Angular Bootstrap 5](https://mdbootstrap.com/docs/b5/angular/)
- [UI Kit for Vue Bootstrap 5](https://mdbootstrap.com/docs/b5/vue/)

-----

## Useful resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
Umbraco 8 - Image optimisation using PunkOptimise
Tags: umbraco, csharp, dotnet, optimization
Published: 2021-03-24 13:24:45

About a year ago, I build a simple plugin for Umbraco 8 that allows you shrink your image via TinyPNG or reduce the image size using ImageProcessor (which is built into Umbraco). 

This allows the editor to decide how they want to optimise their images, rather than doing it automatically. 

#nuget
```
Install-Package punkOptimise.Core
```

# Basic Requirements
Umbraco 8.4+

# Screenshots
Context Menu
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/684s463p8w9smub3k0ro.png)

Action Menu
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqw75spu4eaalentbja3.png)
 
# Instructions
Install the nuget package:
```
Install-Package punkOptimise.Core
```

Add the following config to your web.config:

```
<add key="punkOptimise:ReduceFileExtensions" value="jpg,jpeg" />

<add key="punkOptimise:ShrinkfileExtensions" value="png" />

<add key="punkOptimise:DefaultQuality" value="70" />

<add key="punkOptimise:TinyPng:ApiUrl" value="https://api.tinify.com/shrink" />

<add key="punkOptimise:TinyPng:ApiKey" value="" />
```

Complete the TinyPNG developer API key registration: https://tinypng.com/developers

Add the key to the config above: punkOptimise:TinyPng:ApiKey

# Repo
{% github garpunkal/punkOptimise no-readme %}
How to check website in Safari browser on Windows OS
Tags: webdev, safari, testing
Published: 2021-03-24 13:22:00

Safari is a free Apple web browser. The software product provides users with all the necessary tools for web surfing on the network, very fast and secure. There were days when Safari for Windows was one of the most popular web browsers running on this operating system. What went wrong? Is Safari available for Windows users? Why has Apple decided to stop supporting it? How to install Safari for Windows on your computer? etc. 

Read the article to figure out how to <a href="https://comparium.app/safari-for-windows.html">check website in Safari browser on Windows</a>.
Freelancers - is the client always right?
Tags: freelance, webdev, clients
Published: 2021-03-24 13:21:41

Is the client always right?

What if they constantly change their mind?  If every other undoes what they asked for last week. If they wait two weeks to reply to your emails and then expect you to have the work done in ten minutes?  If they pay late?  If they don't pay at all?  If they're a bully?  Or just a massive dick?

The fact is you chose to work for yourself.  

And that means you get to choose the terms of engagement.  

You can set the rules.  

“You get two revisions”.  
“That goes against our previously stated objectives”.  
“As stated in the welcome pack, as you did not respond within five working days, I've had to move the deadline back by two weeks”.  
“Our payment terms are quite clear”.  
“Violation of those terms will result in legal action”.  
“I think you would be better off taking your business elsewhere”.  
“WE DONT WORK WITH DICKS”

Remember, you're the expert.  You get to choose.
Wednesday Links - Edition 2021-03-24
Tags: java, jvm, kotlin, spring
Published: 2021-03-24 12:53:33

Why Lambdas are lazy in Java? (13 min) 🧐
https://blogs.oracle.com/javamagazine/understanding-java-method-invocation-with-invokedynamic

Spring Native dry run (11 min read) 👩🏼‍💻
https://blog.frankel.ch/kick-spring-native-tires/

How to differ -0.0 from 0.0 on JVM (30 s read) 🤨
https://twitter.com/shipilev/status/1374380878273519620?s=19

Be aware using Comparables in HashSets (1 min read) 💥
https://twitter.com/tagir_valeev/status/1373826680452681730?s=19

Again about Fallacies of Distributed Computing (4 min listen) 🕸
https://256.nurkiewicz.com/37

How code base size matters and how to speed things up? (17 min listen) 📉
https://jmmv.dev/2021/03/build-time-slis-slos.html

Avoid abusing @profile in Spring application (9 min) 🍃
https://reflectoring.io/dont-use-spring-profile-annotation/

Troubleshooting deadlocks (4 min) ☠️
https://blog.ycrash.io/2021/03/13/chaos-engineering-deadlock/

Handling exceptions properly in Kotlin's coroutines (9 min) 🐛
https://www.netguru.com/codestories/exceptions-in-kotlin-coroutines
Bootstrap 5 + Angular UI Kit
Tags: webdev, opensource, javascript, angular
Published: 2021-03-24 13:14:20

MDB 5 Angular is the first-ever UI Kit that integrates the latest Angular with the **fifth version of Bootstrap**.

Download Material Design for Bootstrap 5 Angular [here](https://mdbootstrap.com/docs/b5/angular/).

-----

## What MDB 5 Angular contains?

✔️ Latest Bootstrap 5 & Material Design 2.0
✔️ 500+ material UI components
✔️ Super simple, 1-minute installation
✔️ Detailed docs & multiple practical examples
✔️ Lots of tutorials
✔️ Plenty of free templates
✔️ Huge and active community
✔️ **MIT license - free for personal & commercial use**

-----

## Quickstart

Watch this quick tutorial & get started right away.

{% youtube Jc8sE6qmE-g %}

-----

## Working with MDB

- [Installation](https://mdbootstrap.com/docs/b5/angular/getting-started/installation/)
- [Changelog](https://mdbootstrap.com/docs/b5/angular/getting-started/changelog/)
- [Roadmap](https://mdbootstrap.com/docs/b5/roadmap/)
- [Free Design tools](https://mdbootstrap.com/docs/standard/tools/)
- [UI Kit for Standard Bootstrap 5](https://mdbootstrap.com/docs/standard/)
- [UI Kit for React Bootstrap 5](https://mdbootstrap.com/docs/b5/react/)
- [UI Kit for Vue Bootstrap 5](https://mdbootstrap.com/docs/b5/vue/)

-----

## Useful resources

Learn web development with our **learning roadmap**:
**[:mortar_board: Start Learning](https://mdbootstrap.com/docs/standard/getting-started/)**

Join our mailing list & receive **exclusive resources** for developers
**[:gift: Get gifts](https://mdbootstrap.com/newsletter/)**

Join our private FB group for **inspiration & community experience**
**[👨‍👩‍👧‍👦 Ask to join](https://www.facebook.com/groups/682245759188413)**

**Support creation of open-source packages** with a STAR on GitHub
[![GitHub Stars](https://img.shields.io/github/stars/mdbootstrap/mdb-ui-kit?label=Star%20now&style=social)](https://github.com/mdbootstrap/mdb-ui-kit/)
What are the benefits of flutter?
Tags: flutter, mobile
Published: 2021-03-24 12:48:54

There is no secret that every solution comes with its benefit and drawbacks, which can simplify or impede the development of mobile apps somewhat. Flutter offers some significant benefits which attract app owners and developers out there. These advantages are as follows:

    Comparatively quick development aids in saving you plenty of time, money, and effort. Flutter enables you to use an identical codebase similar to other cross-platform technologies for creating separate Android and iOS applications. This helps accelerate the entire development process and implies that you do not require two teams to work on the code.
    The “hot reload” feature of Flutter makes it quite simple to modify the existing code and view the outcomes in the app preview immediately without recompiling the code. In this way, it will be possible to fix errors, and you can do experimentation with different features and UI elements.
    Quick rendering and full customization thanks to the layered architecture of Flutter. It provides you with control over each pixel and allows you to overlay plus animate videos, graphics, and text without limits.
    Flutter likewise functions for the web and provides proper documentation, thus enabling you to verify the functioning of native controls.

Learn more here: https://www.quora.com/What-are-the-benefits-of-flutter/answer/Rlogical-Techsoft-Pvt-Ltd