For example, you want to know how many files are in your Laravel vendor folder. To do this, go to the project folder with your console. Now you can count the files with find.
find vendor -type f | wc -lIf you don’t want a recursion and just want to know how many folders and files a certain path has, you can find out with ls.
ls someFolder | wc -lVielleicht geht es einigen von Euch ähnlich wie es am Anfang mir ergangen ist, wenn man einen Pull Request im GitHub kommentiert. Was schreibt man da rein? Ich habe in meinen eigenen Projekten die Commit Beschreibungen Stichpunktartig dort eingefügt. Das reicht ja auch. Aber bei größeren Projekte ist Struktur und Ordnung die halbe Miete für ein gut funktionierendes Miteinander im Developer Team. Häufiges Streitthema in einem nicht so gutem Team sind die Review Schlachten. Ganz besonders wenn man einen Oberlehrer im Team sitzen hat, der dann noch denkt, dass er auf dem Level eines Linus Torvald mitschwimmt. Hier kommen die dunklen Seiten eines psychisch auffälligen Entwicklers zum Vorschein. Aber das ist auch ein anderes Thema. Nur so viel: Lasst euch nicht ärgern und sei gut organisiert! 😉
Mit einem Pull Request Template besitzt man ein einfaches, aber effektives Werkzeug, um sauber einen PR abzusetzen. Der insbesondere dich aber auch den Reviewern einen schnellen und guten Überblick gibt, was getan wurde und ob das Standardprozedere eingehalten worden ist. Mit Standardprozedere meine ich, ob man bei sich Tests geschrieben, den Linter angestoßen hat etc.
Ich denke, dass an dieser Stelle mal ein Beispiel Template die beste Erklärung wäre. Da dieses sehr selbsterklärend ist.
Changes
Please list changes here
Types of changes
[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Assets
QA
Domain
[ ] www vs non-www: redirects to correct domain version
[ ] Relevant redirects are in place
[ ] SSL certificate is valid and the page contains no assets on http urls
Code Quality
[ ] DRY review
[ ] Readability review
[ ] Code linting has been run
[ ] Meets Code Standards (i.e. Typescript, PHP PSR, Python PIP etc)
Creative Review
[ ] Passed creative review
[ ] Colors & image quality checked
[ ] Font and image sizes
[ ] Padding/margins sizes checked
[ ] Tested across responsive screen widths
[ ] Tested at small and large screen heights
Content
[ ] Copy is confirmed as latest from client
[ ] Copy contains no spelling or grammatical errors
[ ] No lorem ipsum or dummy images in the project
[ ] Dynamic text areas have been checked for very large and small amounts of copy
Browser Testing
[ ] Last two versions of Chrome
[ ] Last version of Safari
[ ] Last version of Edge
Device Testing
[ ] Android device
[ ] iPhone standard Model
[ ] iPhone Max Model
Security & GDPR
TBC
Logins
[ ] A user is able to login
[ ] Test or real accounts owned by The Unit have strong passwords
Performance Testing
[ ] Lighthouse Report - Better or no major changes than last release
[ ] Image and other embeded or downloaded files optimised for file size
Forms
[ ] Forms provide clear validation messages
[ ] Forms submit correctly
[ ] Unhappy and unlikely scernarios have been tested
Error handling
[ ] Thrown errors are reported to Sentry
SEO & Social Checks
[ ] Sitemap checked
[ ] Metatags
[ ] Opengraph/social meta
[ ] Robots.txt allow/disallow
Analytics
[ ] Analytics included
[ ] dataLayer is populated in the console
Deployment plan
[ ] Planned for cache clearing after deployment
[ ] Planned for installing Cron schedules
[ ] Planned for making any required Database/Application settings changes
[ ] Planned for making any required hosting changes
[ ] Planned for relevant database backups Dieses Template hinterlegt man in sein repository in dem .github Ordner. Das sorgt dafür, dass das Template bei jeden PR automatisch geladen wird.
touch .github
vim pull_request_template.md
git add .github/pull_request_template.md && git commit -m “Add pr template”
git pushDort könnt ihr mit dem Markdown Sprache euer Template definieren. Oder ihr kopiert einfach das obige Beispiel dort rein und passt es an. Viel Spaß bei einem weiteren Schritt Strukturierung in der Programmierung.
How do I build a square that is responsive? A square that responds to the behavior of the window element. If the window shrinks, the square should also shrink relative to the window. With the nice CSS function aspect-ratio: 1/1 this can be done easily and quickly.
<div class="w">
<div class="c"></div>
</div> * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.w {
width: 100%;
padding:20px;
}
.c {
border: 2px solid #000;
width:100%;
max-width:600px;
aspect-ratio: 1/1;
}That was it 🙂
Especially in the frontend it happens quite often that you want to sort an array, an array with objects according to a certain pattern. Javascript has very performant and nice functions. But you can use these functions not only in the frontend. If you write your backend with NodeJS you will also appreciate the array functions of Javascript.
Goal: To sort an array of objects alphanumerically. Once ASC and once DESC. In this case by name. Imagine you have the following array:
const d = [
{
name: {
common: "Z"
}
},
{
name: {
common: "A"
}
},
{
name: {
common: "B"
}
}
];We will sort with the sort() function. For alphanumeric sorting we also use the localCompare() function. To reverse the sorting we can use the reverse() function.
d.sort((a,b) => a.name.common.localeCompare(b.name.common))
console.log("asc",d);
console.log("asc",d.reverse());And that was it for today 🙂
Um es kurz zu fassen: Unit Tests gibt dem Entwickler ein Feedback ob sein bzw. der Code richtig
funktioniert. Dagegen machen Funktionstest eine Aussagen darüber, ob der Code
auch die richtige Sache macht.
Unit Tests werden aus der Sicht des Programmierers geschrieben. Sie sollen
sicherstellen, dass eine bestimmte Methode (oder eine Einheit) einer Klasse eine
Reihe von spezifischen Aufgaben erfüllt.
Funktionstests werden aus der Sicht des Benutzers geschrieben. Sie stellen
sicher, dass das System so funktioniert, wie die Benutzer es erwarten.
Wer als Dev schon mal mit Bildern zu tun hatte weiß es. Bilder sind in den seltensten Fällen immer gleich groß. Aber es gibt ja auch fancy Bildergallerien die sich genau diese Diversität zu nutze machen. Und auch genau deswegen so cool aussehen. Das lässt sich ziemlich leicht mit purem CSS lösen.
https://codepen.io/seotheater/pen/YzYrBqp
Stellt Euch vor ihr möchtet eine CSS Property einem ganzen container zuweisen außer einem einzigen element nicht. Ihr könnt es jetzt schön manuel machen oder dem parent Element die Property zweusen aber im Selector die Pseudoklasse :not(‘selector’) noch verwenden. Somit erben alle Kinder bis auf das eine welches man aus seinem “Erbe” 😉 ausgetragen hat. Das schwarze Schaf der Familie halt.
.container {
border: 1px solid #333;
}
.container>*:not(img) {
opacity: 0.2;
}
<div class="container">
<h2>About</h2>
<p>Lorem ipsum ...</p>
<img class="about-img" src="https://via.placeholder.com/500" alt="Home" />
</div>Schnell ist innerhalb einer Box ein padding links und ein padding rechts hinzugefügt. Was einigen abernicht bewusst ist, dass die padding die width des Containers ebenfalls beinflusst. Aus diesem Grund sollte man, wenn man das nicht wünscht ein box-sizing: border-box; dem Element mit dem Padding hinzufügen.
Bei parent habe ich es nicht hinzugefügt und ihr seht, dass es jetzt hinten rangehangen wurde. Sobald ihr aber box-sizing hinzugefügt habt ist es richtig ausgerichtet. Sieht ja sonst aus wie ein alter Fernseher.
<div class="parent">
<div class="box">123</div>
</div>
.parent {
background: gray;
padding: 20px;
width:100vh;
margin: auto;
}
.box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
}Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.
const arr = [1,2,3,4,5,6];
let cum = 0;
arr.reduce((acc, curr, index) => cum += curr, 0);
console.log('cum',cum)You need all days of a certain month then you can use this function:
getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();
console.log( […Array(getDaysInMonth(3, 2022)).keys()] );
Greets!
Martin108 Artikel