Catégorie : développement Internet

HTML – CSS

Raccourcis pour gagner du temps :

Base d’une page Web (pris » ici)

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    ...
    <!-- Le reste du contenu -->
    ...
</body>
</html>
Commentaires fermés sur HTML – CSS Publié dans

From Django/Python to NodeJS. Une année après : from NodeJS to Django/Python

Tiens, un blog d’un geek qui explique pourquoi il est passé de python à NodeJS.

Why I’m switching from Python to NodeJS

Ah j’oubliais le plus important : un an après avoir utilisé nodejs en production :

After a year of nodejs in production: back to Python

Au moins ça vient d’un développeur talentueux qui a bossé jour et nuit sur du NodeJS pendant toute une année et il sait bien de quoi il parle.

Spoiler :

  • Easy to learn, impossible to master
  • Good luck handling errors: You’ll need to double your client invoices to makeup for debug time
  • Would I recommend it for large-scale products? Absolutely not.

Traduction de ce qui importe le plus : votre client devra payer le double pour le même projet : développement + autant de temps pour déboguer.

Je vous laisse faire votre propre expérience, moi j’ai la mienne qui se rapproche assez de ces billets de blog.

Javascript et jQuery : comment créer un svg dynamiquement

Saviez vous qu’il était impossible de créer un élément svg dynamiquement comme ceci :

var $('<svg />'); ?

Moi non. Après avoir cherché pendant pas mal de temps j’ai enfin réussi à faire un code qui génère un svg et ça fonctionne :

var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
    div_svg = $('#mondiv');

mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute('viewBox', '0 0 100 100');
mySvg.setAttribute('preserveAspectRatio', 'xMinYMin');
div_svg[0].appendChild(mySvg); /* (!) [0] = élément DOM "pur" */
var c = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
c.setAttribute('points', '0,45 25,1 75,1 99,45 75,90 25,90');
c.setAttribute('style', 'fill:blue;stroke:red;stroke-width:1');
$(mySvg).append(c);

Et voilà vous avez enfin un exemple qui fonctionne !

PostgreSQL : mémo

Comment créer une base de données :
CREATE DATABASE interro WITH OWNER 'monutilisateur' ENCODING 'UTF8' TEMPLATE=template0;

Changer le mot de passe de l’utilisateur monutilisateur :
Se connecter en root puis :
root@inyab:~# su postgres
postgres@inyab:/root$ psql
could not change directory to "/root"
psql (9.1.18)
Type "help" for help.
postgres=# ALTER USER monutilisateur WITH PASSWORD 'nommotdepasse';

Comment pouvoir se connecter en python :

try:
    conn = psycopg2.connect('dbname=interro '\
                            'host=localhost '\
                            'user=monutilisateur '\
                            'password=monmotdepasse')
except Exception as e:
    print(e)
sys.exit(u'Script terminé')

Attention j’ai l’impression qu’on ne peut se connecter que sous le nom d’utilisateur sous lequel c’est exécuté, mais à valider.

Django : django.db.utils.IntegrityError: table__new.colonne may not be NULL

C’est le genre de problème qui arrive très souvent lorsqu’on touche à une base de données, en ajoutant un champ.
Pourquoi ? Parce que par défaut, les champs crées sans paramètres ne doivent pas être vides.

Exemple concret : je veux rajouter pour un modèle, un champ « exemple » :

class Groupe(models.Model):
    description = models.CharField(max_length=150)
    exemple = models.CharField()

Je fais « makemigration / migrate » et là, horreur : « django.db.utils.IntegrityError: main_groupe__new.exemple may not be NULL »

La solution

  • Supprimer le dossier « migrations » de l’application concernée
  • Lancer un migrate --fake-initial qui va « simuler » un migrate, sans essayer de créer les tables
  • Lancer makemigration nomappli (!! c’est ici que si on oublie le nom de l’appli rien ne se passe !!)
  • Seconde astuce : supprimer le champ fautif
  • Lancer migrate : là il va supprimer de la base le champ fautif
  • Remettre le champ avec blank=True, default=None
  • Refaire makemigration puis migrate sans préciser le nom de l’appli, comme d’habitude.

Et votre nouveau code sera pris en compte :
class Groupe(models.Model):
    description = models.CharField(max_length=150)
    exemple = models.CharField(max_length=150,
                               blank=True, default=None)

Oui je sais ça a l’air long, mais en pratique ça prend deux-trois minutes seulement !

Varnish 4.x : comment faire un redirect

Après avoir passé plusieurs heures sans aucune réponse satisfaisante, j’ai enfin trouvé la solution du redirect.
Varnish n’a pas la possibilité de faire un redirect « simplement », il faut normalement laisser cela au « backend », c’est à dire au serveur derrière (Apache ou autre).
Mais moi je ne voulais pas. C’est mon droit non ?
Voici comment faire un redirect qui fonctionne :

sub vcl_recv {
    # Rediriger tous les ".fr" vers ".com"
    if (
        (req.http.host ~ "(.*)monsite\.fr$")
    ) {
        # ! error = envoyer vers la sous-routine "vcl_error"
        set req.http.x-redir = "http://www.bb.com" + req.url;
        return(synth(850, "Moved permanently"));
    }
}

L’astuce principale était : utiliser vcl_synth

D’après le code, je vous résume ce que j’ai compris : si jamais on a un status 850 qui semble être un ordre particulier, alors automatiquement changer les headers en y appliquant la redirection, et les renvoyer directement le résultat.
Donc, après la routine vcl_recv il vous suffit d’ajouter vcl_synth comme ceci :

sub vcl_synth {
    if (resp.status == 850) {
        set resp.http.Location = req.http.x-redir;
        set resp.status = 302;
        return (deliver);
    }
}

Django cheatsheet

Django aide-mémoire

Templating

Héritage du parent {% block menu %}
{{ block.super }}
{% endblock %}

Astuces

Afficher des messages uniques à l’utilisateur
Ex: « Merci de vous être inscrit » etc.
Infrastructure des messages

SQL

Requête directe

Lancer la console python (Tools » Python console),
puis taper :
from django.db import connection
cursor = connection.cursor()
cursor.execute("PRAGMA table_info(langue)")
for c in cursor.fetchall():
    print(c)


Autre exemple :
from django.db import connection
cursor = connection.cursor()
cursor.execute("delete from app_persongame where person_id=1")
cursor.fetchall()
cursor.execute("update app_persongame set state=1 where person_id=2")
cursor.fetchall()

Sauvegarde / restauration

Lancer via manage.py ([CTRL] + [ALT] + r sous PyCharm) :
Sauvegarde : dumpdata -o data.json
Restauration : loaddata data.json

Multilangue / JavaScripot

Declaration dans urls.py

Attention, ici « app » = dossier d’une application qu’on veut traduire, moi je les appelle souvent « app ». :
js_info_dict = {
    'packages': ('app',)
}

urlpatterns = [
    url(r'^i18n/', include('django.conf.urls.i18n')),
    # blabla
]
urlpatterns += i18n_patterns(
    url(r'^jsi18n/$', javascript_catalog, js_info_dict,
        name='javascript_catalog'),
    # blabla
)

Inclure les fichiers js dans la page HTML

<script src="{% url 'javascript_catalog' %}"></script>

Ajouter aussi le fichier personnel où je mets ma fonction « raccourci » pour la traduction :
<script src="{% static 'js/globals.js' %}"></script>

Ma fonction « raccourci » pour la traduction :
function _(a) {
    return gettext(a);
}

Extraction des chaines et traduction

Très important : récupérer les chaines en précisant le domaine djangojs :
makemessages -d djangojs -i third_party --locale fr --locale en

À partir de là, deux fichiers de traduction : le classique django.po et le nouveau djangojs.po.

Exemple de code JavaScript qui fera partie des chaînes à traduire

$('#menu').empty().append(
    $('<h5 />').html(_('Waiting...'))
);

Installation

Python 2.7

virtualenv venvpython2.7/
source venvpython2.7/bin/activate
pip install --upgrade pip
pip install 'django==1.8'
mkdir htdocs
cd htdocs

Python 3.6

virtualenv -p /usr/local/bin/python3.6 venvpython3.6
source venvpython3.6/bin/activate
pip install --upgrade pip
pip install 'django==1.11'

Installez django_markdown_app au lieu de django_markdown (car c’est le successeur, django_markdown n’est plus maintenu !)

pip install django_markdown_app
pip install django-compressor
pip install python3-openid
pip install pytz
mkdir htdocs
cd htdocs

PostgreSQL

Création d’un utilisateur + mot de passe

Être root. De là, taper :
sudo -i -u postgres
psql [nom base de donnees]
CREATE USER interro WITH PASSWORD 'i';
Très important : lui donner tous les droits sur la base :
GRANT ALL PRIVILEGES ON DATABASE "interro" to interro;
Et si l’utilisateur existe déjà :
ALTER USER interro WITH PASSWORD 'i';

Changement d’owner des tables

Se connecter à la base. Allez je mets la commande Windows :
"\Program Files\PostgreSQL\9.5\bin\psql.exe" -U postgres interro
. De là, taper (j’ai bien mis en gras le nom de l’utilisateur à qui on donne les tables) :
SELECT 'ALTER TABLE '|| schemaname || '.' || tablename ||'
OWNER TO interro;' FROM pg_tables
WHERE NOT schemaname IN ('pg_catalog', 'information_schema')
ORDER BY schemaname, tablename;

Et PostgreSQL va sortir une floppée de « ALTER TABLE...« , il suffit juste de les copier/coller dans le prompt pour les appliquer.

github : mémo pour les pressés

Voici un mémo de mon expérience très rapide de github, qui n’est destiné à l’origine qu’à moi, mais que je partage pour ceux qui voudraient aller vite :

  • Forker un repo : c’est à dire, faire « sa » propre branche d’un source pour pouvoir travailler dessus.
    Sur github : en haut à droite du « repo » principal, vous avec le menu « fork ». Cliquez dessus et c’est fini !
    Details »» ici ««
  • Copier en local
    De l’étape précédente, vous aurez une adresse genre
    https://github.com/VOTRE-USERNAME/repo-qui-vous-plait
    Faites :
    git clone https://github.com/VOTRE-USERNAME/repo-qui-vous-plait
    et git fera un copier coller en local des sources github
  • Ajouter le repo d’origine pour les futures synchronisations :
    Copier coller l’URL du repo d’origine qui est sur github :
    git remote add upstream https://github.com/repo-qui-vous-plait
  • Assurez-vous que tout est ok :
    Avec ce code :
    git remote -v
    Vous devriez avoir :
    origin https://github.com/VOTRE-USERNAME/repo-qui-vous-plait.git (fetch)
    origin https://github.com/VOTRE-USERNAME/repo-qui-vous-plait.git (push)
    upstream https://github.com/POSSESSEUR-DU-REPO/repo-qui-vous-plait.git (fetch)
    upstream https://github.com/POSSESSEUR-DU-REPO/repo-qui-vous-plait.git (push)
  • Ensuite ces étapes en boucle :
    • Repo origine distant vers local :
      Ce qui a été fait par les autres sur le repo général (s’il y en a) vers local.
      git fetch upstream
    • Repo perso distant vers local :
      Ce qui a été fait par les autres sur votre repo (s’il y en a) vers local.
      git checkout master
      puis
      git merge upstream/master
      Details »» ici ««
    • Noter vos modifications en local :
      Préciser à git de chercher (1) toutes vos modifications, option « a » (2) le commentaire, option « m ».
      git commit -am "Mon commentaire"
    • Appliquer vos modifications à distance :
      git push
      Details pas de github, mais en français et très bien faits :
      »» ici ««

vim – astuces / cheatsheet

Vim

Séparation par fenêtres

:split Split horizontal
:vsplit Split vertical
:res XX Hauteur fenêtre = XX lignes
:vertical resize XX Largeur fenêtre courante = XX caractères
:30winc > Vertical : 30 caractères à droite
:30winc < Vertical : 30 caractères à gauche
:30winc + Horizontal : 30 caractères à droite
:30winc - Horizontal : 30 caractères à gauche
30[CTRL]W > Décaler de 30 caractères à droite
30[CTRL]W < Décaler de 30 caractères à gauche