Learn something new everyday. Web development tips and tricks for you
Joined July 2018
- Tweets 21
- Following 0
- Followers 6
- Likes 1
Photos and videos
Today we're learning about encoding and decoding in base 64 with #js
Use atob() and btoa() to decode & encode. Check out the Mozilla dev site for more: developer.mozilla.org/en-US/…
Today we're learning about regex. Check out these two links:
blog.bitsrc.io/a-beginners-g…
developer.mozilla.org/en-US/…
1
Today we're going over #CSS selectors. Learn or refresh your memory in just a few mins with #cssdiner by @flukeout
cssdiner.com
Use [attribute^=value] to select attributes of val, [attribute$=value] for ones that end in val, & [attribute*=value] for ones containing val
1
Today we're learning about the fullscreen API in #JS:
developer.mozilla.org/en-US/…
Today we're learning how to change the selected text color with #CSS
To cover all browsers, we just need 2 selectors:
::selection {
background-color: #999;
}
::-moz-selection {
background-color: #999;
}
You can change the text color, background color, & a few other properties
Today we're learning about date/time in #JS
For info on the Date method:
w3schools.com/js/js_date_met…
w3schools.com/jsref/jsref_ob…
w3schools.com/js/js_dates.as…
Create a new Date() w/ no params for today's date
Moment is a useful date/time library:
momentjs.com
momentjs.com/timezone
Today we're learning how to display data in the form of charts on our websites. I recommend one of two APIs: Google Charts or Chart.js.
developers.google.com/chart/
chartjs.org/
Both allow for dynamic data, and both support many types of charts and customizations.
Today we're learning about how to make our websites faster.
Check out: github.com/thedaviddias/Fron…
for some great info. You should always be loading your stylesheets before your #JS, and try to avoid writing inline #CSS. Also remember to async or defer your scripts.
Today we're sharing useful reference sites
fileformat.info lets you find different Unicode characters and how to write them
keycode.info lets you see what the keycode of the key you're pressing is
csscursor.info lets you see all of the cursors in #CSS
1
Feel free to comment any websites you've found useful.
realfavicongenerator.net is very useful for having complete control of your favicons, titles, & colors on almost every platform, it automates a lot of the work, & shows you previews.
Today we're learning about mailto links (prompt user to send email)
<a href="mailto:contact@mysite.com">Contact</a>
where contact@mysite.com is the recipient email address
you can add other fields, such as a subject
mailto:contact@mysite.com?subject=This is the Subject
1
We use url encoding and replace spaces with
Here's some info on mailto:
css-tricks.com/snippets/html…
Today we're learning how to toggle DOM element classes with #JS
get the element with
let myButton = document.getElementById("myButton");
myButton.classList.toggle("mystyle");
instead of the toggle method, you can also use add, remove, contains, and replace
developer.mozilla.org/docs/W…
1
Today we're learning how to read batteries
let battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
the battery object has level, charging, chargingTime, and dischargingTime
returning a num between 0-1, a bool, and time in sec
1
Today we're learning about keylisteners
use onkeyup or onkeydown:
window.onkeyup = function(e) {}
next, get the keycode with:
let key = e.keyCode ? e.keyCode : e.which;
for cross browser compatibility
To find out what keycode a character is, use:
keycode.info/
Today we're learning about tab colors for mobile
These cover chrome, firefox, opera, windows phone, & ios safari
<meta name="theme-color" content="#933">
<meta name="msapplication-navbutton-color" content="#933">
<meta name="apple-mobile-web-app-status-bar-style" content="#933">