<picture> <source srcset="img-mobile.jpg" media="(max-width: 767px)"> <source srcset="img-tablet.jpg" media="(min-width: 768px) and (max-width: 991px)"> <source srcset="img-desktop.jpg" media="(min-width: 992px) and (max-width: 1200px)"> <source srcset="img-widescreen.jpg" media="(min-width: 1201px)"> <img src="img-desktop.jpg" /> </picture>
Links:
HTML:
<table class="table-stacked">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="First Name">Brenda</td>
<td data-th="Last Name">Bear</td>
</tr>
<tr>
<td data-th="#">2</td>
<td data-th="First Name">Frank</td>
<td data-th="Last Name">Fox</td>
</tr>
<tr>
<td data-th="#">3</td>
<td data-th="First Name">William</td>
<td data-th="Last Name">Wolf</td>
</tr>
</tbody>
</table>
CSS:
.table-stacked {
width: 100%;
}
.table-stacked thead tr {
border-bottom: 1px solid gray;
}
@media (max-width: 768px) {
.table-stacked thead {
display: none;
}
.table-stacked td {
display: flex;
border-color: gray;
}
.table-stacked td:before {
content: attr(data-th);
font-weight: bold;
width: 30%;
min-width: 80px;
padding: 10px;
padding-left: 0;
margin: -10px 10px;
margin-left: 0;
border-right: 1px solid gray;
border-width: 2px;
}
.table-stacked td:last-child {
border-bottom: 1px solid gray;
border-color: gray;
}
}
$('.js-toggle-together-checkbox').on('change', function () {
var checkedProp = $(this).prop('checked');
$('.js-toggle-together-checkbox').not(this).prop('checked', checkedProp);
});
The above figure is often used to demonstrate a minimum viable product, but I think it can also be used to demonstrate a minimum viable experience. The skateboard may be a little slower, but it doesn’t stop the user getting to where they want to go. So, if the user’s browser doesn’t support JavaScript or modern CSS then it doesn’t break, it presents the default experience instead: a button which instructs the user to generate a report. The user will experience a very similar process, but has to perform one extra click.
The beauty of this approach is that the site doesn’t ever appear broken and the user won’t even be aware that they are getting the ‘default’ experience. With progressive enhancement, every user has their own experience of the site, rather than an experience that the designers and developers demand of them.
const fetchData = (url, userOptions = {}) => {
const defaultOptions = {
method: 'POST',
credentials: 'same-origin',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json',
'LoginToken': 'l0g1n-t0k3n'
}
};
// const options = jQuery.extend(defaultOptions, userOptions);
const options = Object.assign({}, defaultOptions, userOptions);
return fetch(url, options);
};
// Usage
fetchData(url)
.then(response => response.json())
.then(response => {
console.log(response);
})
.catch(error => console.error('Error: ', error));
fetchData(url, {method: 'GET'})
.then((response) => {
return response.text();
})
.then(response => {
let $responseContent = $(response).find('.content').html();
$('.content').html($responseContent);
})
.catch(error => console.error('Error: ', error));
All fetch() parameters:
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json; charset=utf-8",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
fetch() example – http://jsfiddle.net/62s1tyob/:
const number = document.getElementById('number');
const submit = document.getElementById('submit');
const content = document.getElementById('content');
submit.addEventListener('click', () => {
const num = number.value;
if (!!num) {
fetch(`http://numbersapi.com/${num}`)
.then(response => response.text())
.then(text => {
content.innerHTML = text;
})
.catch(error => {
console.log(error);
});
}
});
html:
<input id="number" type="number" value="25" /> <button id="submit">Get Fun Fact!</button> <p id="content"></p>
Trigger custom jQuery event:
$(document).trigger('user.add'); // trigger custom event
$(document).on('user.add', function () {
// run code when custom event was triggered
});
Trigger custom jQuery event with passing custom parameter:
$(document).trigger('user.remove', [userId]); // trigger custom event
$(document).on('user.remove', function (event, userId) {
console.log(userId);
});
Version with absolute position:
Preview: https://jsfiddle.net/k3goLtfc/
html:
<div class="wrapper">
<div class="aligned">
aligned
</div>
</div>
css:
.wrapper {
position: relative;
height: 100px;
background-color: yellow;
}
.aligned {
background-color: cyan;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Complexity eats a lot of time and resources.
The amount of time and resources increases exponentially with the complexity of the system.
Complexity can be measured by lines of code, levels of hierarchy and amount of tools used.
Linear is much better than nested.
Simpler system takes much less brain power to understand the logic what also increases developer efficiency and reduces amount of issues due to being less tired and more possible issues.
Simpler is much easier to debug and to maintain and to extend.
html:
<div class="row">
<div class="col-6 col-sm-12">
Left column. 50% on large screens. 100% on smaller screens.
</div>
<div class="col-6 col-sm-12 col-right">
Right column. 50% on large screens. 100% on smaller screens. Has different background for visual difference.
</div>
</div>
css:
.row {
display: flex;
flex-wrap: wrap;
}
.col-6 {
flex: 0 0 50%;
background-color: #eee;
}
.col-right {
background-color: #dde;
}
@media (max-width: 576px) {
.col-sm-12 {
flex-basis: 100%;
}
}
DRY is often misinterpreted as the necessity to never repeat the exact same thing twice. This is impractical and usually counterproductive, and can lead to forced abstractions, over-thought and over-engineered code.Harry Roberts
DRY, SRP, Modularity etc is not a ultimate goal or strict rule. It is just a principle and recommendation.