Firefox Send is a new file sharing service by Mozilla. It's totally free and has end to end encryption. Out of the box without signing up you'll be able to share up to 1 GB, but if you do sign up or log in with a Firefox account that will instantly increase to 2.5 GB. Files that you choose to upload will never be stuck in the cloud or be easily accessible by anonymous people because when you upload a file you have a choice between three options.
Set an expiration date....
Limit the number of downloads....
Set a password....
Using Firefox Send is actually pretty straight forward.
Simply drag and drop any files or click on the “select files to upload” button to select files manually....
Once you've selected some files change the expiry date to your liking and choose a password if you like....
Finally click the upload button....
Done.. Copy that shareable link and go share those files....
CSS Grid is a CSS layout which has a two-dimensional system and can handle both rows & columns. The basics are that you apply CSS rules to both the parent element and to the element's children. The parent elements become the grid containers, and the children become items within the grid. Though CSS Grid is two-dimensional it can still do pretty much do everything the same as Flexbox. Some people though may still try and say that CSS Grid is only good for multi-dimensional layouts. This is far from true as CSS Grid is just as great at one-dimensional layouts as it is with multi-dimensional. Below is a basic example showing you that all you need to get started is pretty minimal and easy to understand.
You can easily turn any browser tab into a minimal text editor by using a simple piece of code. Simply copy & paste the code shown below into the url bar of any modern browser and press enter.
data:text/html,
Now you have an awesome, super minimal and lightweight text editor within a tab in your browser. You can customize the style to your liking or just remove it completely.
Every web browser uses what is known as a base stylesheet. This ensures that any HTML is rendered somewhat reasonably when you forget to include a piece of custom CSS. You know things like, blue for links that you've yet to visit, purple for links that you've already visited, bold for the likes of strong tags & different text sizes for heading. All those things and more are not always the same browser to browser. NO.. Not all browsers use the same base stylesheet, so that custom CSS you've just spent hours, maybe even days creating might be affected in some way by a default style that's implemented within your browsers base stylesheet. The easiest and most simplistic way to keep your CSS intact is to include a CSS reset. Sometimes though, people are happy with what their browser’s base stylesheet provides. Things such as font weights, line height, bullet points and other styles are often fine. If they’re not, then they can easily be adjusted.
What is a CSS reset :?
A CSS reset essentially provides a blank canvas so that any styles applied are sort of almost certain to be your own. Most CSS resets require you to re-style all your elements, which could make your CSS file much larger than you'd like. But at the same time it will also reduce browser compatibility issues.
Should I use a CSS reset :?
Should you use a CSS reset ?? Well that really depends. Like if you have a pretty small or basic website then creating and using a CSS reset might not be worth the time and effort. Though if you have a pretty large site or a site that just has tons of elements, then using a CSS reset might just the right thing. CSS resets may be appealing and work for you, but they'll not be for everyone. You'll need to weigh everything out and look at everything for yourself.
When coding a hamburger menu most developers or coders position the menu absolute, when in actual fact it should be the content that is positioned once the sidebar is opened. Instead of positioning the menu itself, simply position everything else that's in the menu. Below is some example code, followed up with explanatory comments....
HTML
<html>
<head></head>
<body>
<div class="sidebar">Hamburger menu links go here</div>
<div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">🍔</button></div>
</body>
</html>
CSS
/* Arbitrary CSS variable values for explanatory purposes */
:root {
--sidebar-width: 100px;
--sidebar-bg-colour: blue;
}
.sidebar {
display: none;
position: relative;
width: var(--sidebar-width);
}
@media (max-width: 767px) {
html.sidebar-is-open .sidebar {
display: block;
/*
The sidebar is just rendered in default position,
as it appears in the document flow
*/
}
html.sidebar-is-open .main-content {
position: fixed;
/*
It is the main content that is positioned.
This is the crux of the implementation. The rest is all sugar.
Cons: the body will scroll to the top, losing your user's scroll position
*/
/* prevents resizing from its original full-screen width */
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/* Optional enhancement:
make the overscroll on iPhone the same colour as the sidebar */
html.sidebar-is-open body {
background-color: var(--sidebar-bg-colour);
}
.sidebar {
background-color: var(--sidebar-bg-colour);
}
}
const documentElement = document.querySelector("html");
const contentElement = document.querySelector(".main-content");
const sidebarElement = document.querySelector(".sidebar");
const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");
const openSidebar = () => {
/* How you trigger the change is up to you */
documentElement.classList.add("sidebar-is-open");
};
const closeSidebar = () => {
documentElement.classList.remove("sidebar-is-open");
/* Sidebar is closed, so keeping event listener is just a waste of resources
and source of bugs if openSidebar() is run again */
contentElement.removeEventListener("click");
};
const toggleSidebar = () => {
sidebarIsOpen() ? closeSidebar() : openSidebar();
};
As of December 17th 2018 tumblr will ban all pornography from its website. This is a move that will not only alter how the site is used, but will also show how major online companies set out to restrict which content appears on their websites. Unlike most major websites, tumblr has until now always had a tolerant attitude whenever it comes to legal adult material. The site since it was originally founded back in 2007 has over time gained a reputation as a “somewhat” safe haven for adult themed material and the likes. As a result of this, adult material began to almost flood the site. Over the years tumblr has attempted to provide a “safe mode” for younger users & users that do not wish to see adult related content. Safe mode has always been easy to turn off and has never really prevented younger users from seeing adult content. This whole move from tumblr comes after its app was removed from the app store....
