Did you know that you can use javascript to automatically scroll to the bottom or top of any webpage. All you need is the code below & firefox..
var scroll = setInterval(function(){ window.scrollBy(0,8000); }, 2000);
To use this piece of javascript I simply opened up the browsers inspector window by pressing “CTRL+SHIFT+C”, clicked on “CONSOLE” & then pasted in the javascript to the box at the bottom. With the code pasted into the box I then pressed enter & left the browser to do it thing. When finshed I closed the inspector & began looking for what it was I wanted to find.
With the above javascript you can change the numbers at the end to scroll further or less & up or down....
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....
ddgr is an awesome command line utility to search DuckDuckGo from the terminal. Unlike the web interface, you can specify the number of search results you would like to see per page. It really is a lot more convenient than scrolling through 30 something search results per page. The interface has been carefully designed to use minimum space without sacrificing readability. Well this is at least true with the default interface. One of the main advantages of us using ddgr over one of the many other command line based search utilities is that DuckDuckGo works over the Tor network. If you seem interested and would like to check out ddgr then either click on the link at the top....
Here's a simple piece of CSS code that will help you add a background image to any web page and make it take up the full page width & height. Simply add the code below to your “.css” file and then change the path to the image.
CSS
html {
background: url(siteimages/whatever.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ever wanted to create one of those neat look search boxes that used to be found on apples website ?? Well here's the HTML & CSS code to create just the thing. Note that with search boxes you can change the action=“http://www.duckduckgo.com/search" to any search engine you like. I've chosen to use Duckduckgo because that's my search engine of choice.
[ NOTE THE “FORM” & “INPUT” HTML WAS NOT SHOWING CORRECTLY SO I HAD TO ENTER A SPACE AT THE START AFTER “<“. PLEASE REMOVE THIS SPACE BEFORE USING THIS CODE ]
