For those who use xfce, every once in a while xfce4-panel may crash or glitch out. Thankfully you can easily restart the panel with one simple terminal command. Simply open up a terminal window and type in the command below followed by pressing enter. The panel should restart instantly and be working perfectly again.
xfce4-panel -r
Apple was temporarily blocking Linux users from accessing it's Apple ID website. It is unknown as to why apple did this, but it quickly got fixed. The Apple ID website is important if you own any products from apple because it's a way of managing things such as two-factor authentication, payment information, and many other account details. The number of Linux users accessing the website will surly be small, but for some of those users they did stumble upon the issue. The website was apparently sniffing user-agents to look for traces of Linux / X11 & if it found either it would straight away throw up a “Bad Gateway” error page.
Creating a .m3u playlist file is super easy. All you need is to know the path to the files and have access to a text editor.
Now that you have your playlist file created and saved you can go ahead and open it with your media player of choice. My current media player of choice is mpv for both music & video. The screenshot above shows a playlist I created recently for Demon Hunters new War & Peace albums.
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.
<div class=”wrapper”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
<div class=”item”>6</div>
<div class=”item”>7</div>
<div class=”item”>8</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 8rem 8rem 8rem;
grid-gap: 2rem;
}
There's plenty of useful resources that can be found online if you ever need help while using CSS Grid. Click here to search for some....
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.
Audacity is an amazing audio editor, but sometimes you want something that's just a little lighter & easier to use. Say “HI” to Ocenaudio. Like Audacity, Ocenaudio is free & crossplatform. It won't impact performance when editing multiple audio files.
To install Ocenaudio you can simply click here to visit the download page or follow the steps below if you run a Debian based system.
sudo apt update && wget http://www.ocenaudio.com/downloads/index.php/ocenaudio_debian64.deb && sudo dpkg -i ocenaudio_debian64.deb
In the wget command you can replace debian64 with debian32 if you have a 32bit system. Ocenaudio may ask for some dependencies to complete the installation. If it does then use the following command.
sudo apt-get install -f
Ocenaudio should now be installed & can now be launched either through your menu of choice or by typing “ocenaudio” into a terminal window....
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.
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 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>
<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>
/* 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();
};
Ok so I use deja dup for backing up my system and have done for a number of years now. It's a great app that makes backing up any system super easy. It's also included in many Linux distributions repos which makes it easy to install. The only problem I have is that unless you're running nautilus (gnome-files) the restore functions are pretty limited. You could easily open deja dup and restore a whole backup, but what if you don't want to restore a whole backup. What if you only want an individual file or folder ?? After doing some research, I found that you can use deja dup with a custom action in thunar. Follow the steps below to set up your own deja dup action in thunar.
You may need to log out and in again for changes to take effect, but now you will now be able to right-click on a file or folder in thunar to restore earlier versions.