DEV Community: Schleidens.dev

Install and use Bootstrap5 in Django

Schleidens.dev — Sun, 22 Oct 2023 17:58:43 +0000

You can use the latest version of bootstrap (bootstrap5) in django by install the module in your virtual environment.

There's other ways you can achieve that too -> include CDN, download the required files in include them in your project. But my favorite one is install the module.

Letsgooo.

inside your project active the virtual environment source myEnv/bin/activate if you're using venv as your virtual environment.
:: replace myEnv* by your virtual environment name

Once you are inside the virtual environment, install Bootstrap 5 with this command:
pip install django-bootstrap-v5

you should get something like this

inside your terminal type
pip freeze > requirements.txt

update your settings.py and add bootstrap to your apps

now add bootstrap style to your master template
What is a master template ?

add these 3 lines in your html head

{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

Bravo, you've been added Bootstrap5 in your project.

let's connect on X/Twitter for more engagement

How to get file* input value in Vue.js (Vue3)

Schleidens.dev — Mon, 10 Jul 2023 17:17:01 +0000

In Vue.js, accessing the value of an input element is typically straightforward thanks to the v-model directive. However, when it comes to file input fields, the v-model directive doesn't work directly. This can be a bit puzzling for developers who want to retrieve the selected file from a file input field in a Vue.js 3 application.

In this article, we will explore an approach to tackle this challenge and find a solution for getting the file input value in Vue.js 3. By the end, you will have a clear understanding of how to extract the selected file from a file input field and use it within your Vue.js application.

Composition API, script setup

Here my HTML input file.
<input class="form-control" type="file" id="formFile">

Now let's go directly in the component's script section.
Create a reactive value reference for our input using ref
const myFileInputValue = ref(null);
Don't forget to import ref on top of our script section.

Create a function to get the input value.

const getFileInputValue = (event) => {
    //get the file input value
    const file = event.target.files;
    //assign it to our reactive reference value 
    myFileInputValue.value = file[0] 
}

file[0] is used to assign the first selected file to myFileInputValue.

Great !! now we have to call this function every time our input value change.
We can use the v-on vue.js directive also know as @ in the component template with the change event.
change is the equivalent of the onchange native event handler
v-on:change="getFileInputValue" or @change="getFileInputValue"

Our input code look like this now.

<input v-on:change="getFileInputValue" class="form-control" type="file" id="formFile">

or

<input @change="getFileInputValue" class="form-control" type="file" id="formFile">

Now that you have learned how to retrieve file input values in Vue.js 3, you can confidently handle file inputs in your own projects. Take advantage of the versatile file input capabilities offered by Vue.js 3 and explore the possibilities. Enjoy coding and happy file handling!

Django root base template setup

Schleidens.dev — Mon, 24 Apr 2023 17:29:55 +0000

If you're learning django you may be familiar with the {% extends base.html %} pattern but what if you want all your apps in your project to use the same base template

Django provides a way of making a parent template to not repeat the same piece of code in every template "the DRY pattern (Don't repeat yourself)" .
Let's consider you have a Navbar and a Footer, you can make a base.html template with them and use it in all your templates.

your_project/your_app/templates/base.html



<!DOCTYPE html>
<html>
<head>
  <title>Mamamiahh</title>
</head>
<body>

<!-- Navbar start -->
<div>
  <ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
  </ul> 
</div>
<!-- Navbar end -->

{% block content %}
{% endblock %}


<!-- Footer start -->
<div>
 <p> I'm the footer </p>
</div>
<!-- Footer end -->

</body>
</html>

You notice the {% block content %} and {% endblock %} they are placeholders, telling Django to replace this block with content from other sources.

Now you can use your base.html with all your template.
let's do it !!

your_project/your_app/templates/home.html



{% extends "base.html" %}

{% block content %}
  <p>In HTML, spaces and new lines are ignored:</p>

<p>

  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

</p>
{% endblock %}

Now home.html can use the base template, this is done by including the base template with the {% extends %} tag.

Good !! but what if you want all your apps template to use the same base.html

First create a template folder in your root project and add base.html
your_project/templates/base.html
Open settings.py and find this piece of code

When APP_DIRS is set to True , Django automatically finds the templates/ directory when it's located in an app. However, as we are placing the base template at the project root, you need to specify it in settings.py for Django to find this directory.

Now your base.html is ready to use in all your apps, all you need to do is extend it in your templates by using the extends tag {% extends "base.html" %}

Siahhhhhhhh in another blog about django :)

How to activate Bluetooth on Linux

Schleidens.dev — Tue, 15 Nov 2022 19:46:33 +0000

Hey folks !!

Many peoples have Bluetooth activation problem with their linux distro after first installation.

I had the same issue a couple month ago, i'll show you how i solved it.

My distro: kali Linux (2022.3)
DE: Gnome42

To activate your Bluetooth go in your terminal and type the command below.
sudo systemctl start bluetooth.service
the terminal will ask you for your MDP as you're working as a #root user

Now go on your settings>bluetooth and you'll see your switch button ON

yeahhhh it works pretty well but every time you turnoff your machine this config will reset (not good 😑)

Here's how to deal with that.

sudo systemctl start bluetooth.service
sudo systemctl enable bluetooth.service

Everything should be okay now, HaveAnAmazingDay 😊

Bootstrap a rapidement sorti la version 4.4.1

Schleidens.dev — Fri, 29 Nov 2019 17:30:16 +0000

Suite a des rapports sur quelques erreurs sur différents compilateur Sass .
Le vendredi 29 novembre 2019 l'équipe Bootstrap a rapidement lancé la version 4.4.1 avec la correction de toutes ces erreurs .

Mises a jours

Légère modification sur les fonctions "add() & substract()"

L'article principal sur le blog officiel de l'équipe Cliquez pour voir

how to use blur background header image with text-mask

Schleidens.dev — Fri, 29 Nov 2019 05:17:38 +0000

To start choose your image, I chose the image below

Then create the skeleton of your HTML page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    </style>
    <title>Your Title</title>
</head>
<body>

</body>
</html>

create a div which will contain the image of the background

 <div class="header"></div>

and the other div (the mask) that will contain the text

<div class="text-mask">
  <h1 style="font-size:60px">I am Schleidens</h1>
  <p>And I'm a Web developer</p>
</div>

now let's go to our css to give style to our header and type this code

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

select our div with the class .header

and add the codes below

 .header {
  /* The image used */
  background-image: url("image-name.extensions");

  /* blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height size*/
  height: 100%; 

  /* Center and scale the image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

after we select our mask with the class .text-mask
add the codes below

.text-mask {
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0, 0.4); 
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;

/* now center the mask*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

launch the file in your browser, you should have this result.

try to understand the friends <(o_o)>.

see you soon guys :)

Bootstrap 4.4.0 est maintenant disponible

Schleidens.dev — Tue, 26 Nov 2019 21:12:01 +0000

Mardi 26 novembre 2019une nouvelle version de Bootstrap est sortie .
Bootstrap 4.4.0, une vingtaine de minutes, après un tweet du compte officiel de l'équipe concernant la sortie de la nouvelle version . je me suis rendu sur leur blog pour en savoir plus et me rassurer de la nouvelle.pas de doute la version 4.4.0 de Bootstrap est désormais disponible, je confirme.

Presque toutes les fonctionnalités seront intégrées au bootstrap 5, on peut commencer à utiliser avec la version présente (4.4.0)

Nouveaux 'container' réactifs! Plus d’un an dans la fabrication, fluide jusqu’à un point de rupture particulier, disponible pour tous les niveaux réactifs.
voici les mises jours de la derniere versions
Nouvelles '.row-cols' classes réactivespour spécifier rapidement le nombre de colonnes entre les points d'arrêt. Celui-ci est énorme pour ceux d'entre vous qui ont demandé des jeux de cartes réactifs.
Nouvelle 'escape-svg()' fonction pour simplifier nos background-imageSVG intégrés pour les formulaires et plus.
Nouveau 'add()et subtract()' fonctions pour éviter les erreurs et les valeurs zéro de la fonctionnalité intégrée de CSS calc.
Nouveau 'make-col-auto()' mixin pour rendre notre .col-autoclasse disponible avec HTML personnalisé.
Correction d'un problème empêchant Microsoft Edge de sélectionner les :disabledstyles en déplaçant les sélecteurs vers [disabled].
Obsolète: 'bg-variant() , nav-divider()' et form-control-focus()mixins sont maintenant déconseillés car ils vont loin dans v5.
Mise à jour de l'espacement et de l'alignement pour les éléments de pied de page modaux, tels que les boutons, afin qu'ils soient automatiquement renvoyés à la ligne lorsque l'espace est restreint.
Styles de validation de contrôle de formulaire plus flexibles grâce à moins de sélecteurs chaînés. Également mis à jour l’ :invalidicône de validation afin qu’elle soit une alerte plutôt que ×pour éviter toute confusion avec les fonctionnalités du navigateur permettant d’effacer la valeur du champ de formulaire.
Correction d'une vingtaine de bogues CSS et JS.
Documentation mise à jour pour corriger les liens et les fautes de frappe, points de repère améliorés pour la navigation secondaire et nouveau document de sécurité contenant des instructions sur la signalisation des vulnérabilités potentielles.

c'etait super de partager ca avec vous pour plus visiter le blog de l'equipe Bootstrap

A bientot :)