DEV Community: Frontend Dude 👨‍💻

Free JavaScript Resources - java5cript.com

Frontend Dude 👨‍💻 — Sat, 09 Jan 2021 20:32:58 +0000

Introducting Java5cript.com

Have you always wanted to learn JavaScript but not sure where to start? Not sure whether a source is reputable or teaching you up to date information? Or do you simply want a collection of free JavaScript resources to get you started on your learning path?

I'm happy to announce my latest side project, Java5cript.com

Version one of Java5cript covers:

Books
Websites
Course
& Videos

What's Coming?

More resources

Weekly updates of new and found resources.

Build to learn

Learn JavaScript syntax & fundamentals by building 5 projects at your own pace. From declaring variables to looping over API data. Get started with, 'build to learn' coming soon!

Learn by topic

JavaScript is a complex language with various concepts to learn. Java5cript will provide drilled down resources for each topic.

Further subcategories

Java5cript covers mostly vanilla JavaScript resources. In the future, it will include other subcategories such as React, Vue & Node.

Submit A Resource

Have you built or recorded an awesome free JavaScript resource? Maybe you have stumbled upon one that you found really useful? Either way, use the form on the (submit page)[https://www.java5cript.com/submit] to send a resource.

Updates & Feedback

If you want to keep updated with new resources or provide some feedback, lets keep in touch on (Twitter)[https://www.twitter.com/frontenddude].

The FREE JavaScript Resources Post

Frontend Dude 👨‍💻 — Mon, 17 Aug 2020 13:04:40 +0000

Want to learn JavaScript for free but not sure where to start?
I've compiled a list of free resources that covers:

📘 Books
🖥️ Websites
📝 Free Courses
🎥 Youtube Channels

Books

Search Google for any of these free books, they will show as one of the first results:

Eloquent JavaScript
You Dont Know Js
Learning JavaScript Design Patterns
Speaking JavaScript
JavaScript: The Good Parts
JavaScript For Cats
DOM Enlightenment
Understanding ECMAScript 6
Human JavaScript
Flavio Copes JS Handbook

Websites

MDNs JavaScript Reference

JavaScript Info

JavaScript Garden

Free Code Camp

Scotch Learn JS from scratch

JavaScript Kit JS Tuts

David Walsh's JS Blog

Flavio's JS Tuts blog

YouTube Channels

Free Courses

https://javascript30.com/ - JavaScript30

https://scrimba.com/ - Scrimba Free JS Courses

https://learnjavascript.online/ - Learn in an interactive environment.

https://www.coursera.org/search?query=javascript& - Coursera JS courses

https://coderbyte.com/starter-course/learn-javascript-in-one-week - Coderbyte learn JS in one week

https://channel9.msdn.com/Series/JavaScript-Fundamentals-Development-for-Absolute-Beginners - JS fundamentals

https://www.udacity.com/course/intro-to-javascript--ud803 - Udacity intro to JS

https://www.codecademy.com/learn/introduction-to-javascript - CodecAdemy Intro to JS (free trial)

https://www.pluralsight.com/courses/code-school-javascript-road-trip-part-1 - Intro to the very basics of the JavaScript language. (free trial)

https://teamtreehouse.com/library/javascript-basics - TreeHouse JS basics (free trial)

Keep In Touch

This post is inspired by one of my recent Twitter posts.

FrontEnd Dude 👨‍💻

@frontenddude

The Ultimate JavaScript Free Resources Thread 🧵

Want to learn #JavaScript for free but not sure where to start? I've compiled a list of free resources that covers:

📘 Books
🖥️ Websites
📝 Free Courses
🎥 Youtube Channels

⬇️⬇️⬇️⬇️

#100DaysOfCode #CodeNewbie #Frontend #webdev

11:15 AM - 15 Jul 2020

If you enjoyed this article or found it helpful, lets stay connected. You can find me on Twitter sharing tips and code snippets @frontenddude

Get Chrome To Show The Full URL In The Address Bar

Frontend Dude 👨‍💻 — Wed, 27 May 2020 14:47:35 +0000

Hey Devs 👋,

Has the address bar change been frustrating you because you can't see the full URL anymore? Here is a handy tip to get it back, including the protocol.

Enable chrome://flags/#omnibox-context-menu-show-full-urls
Right click the address bar
Select 'Always show full URLs'

For more awesome tips about FrontEnd dev follow me:
💙Twitter
🖤Dev.to

Giveaway - Win full access to 'VSCode Power User' worth $149

Frontend Dude 👨‍💻 — Wed, 27 May 2020 08:47:07 +0000

Hi Devs 👋

We all sit behind our editor coding away for 200 hours a month on average. Worth $149, this course will save you 15-20 hours every month and here is your chance to win full access to it for free!

Check out the awesome course you could win here - VSCode.pro

Follow the steps below or click through into the embedded tweet for more information:

Follow @frontenddude on Twitter
Like the Tweet embedded below ⬇️
Retweet the Tweet embedded below ⬇️

FrontEnd Dude 👨‍💻

@frontenddude

📢 1K Follower Giveaway 🎁

For a chance to #WIN full access to 'VSCode Power User' worth $149 - vscode.pro

1⃣ Follow @frontenddude
2⃣ Like this Tweet ♥️
3⃣ RT this Tweet 🔄

Become a #vscode pro!

#100DaysOfCode #CodeNewbies #frontend #webdev #js #giveaway #free

08:07 AM - 26 May 2020

Important CSS Concepts To Learn.

Frontend Dude 👨‍💻 — Sun, 24 May 2020 12:53:01 +0000

CSS(Cascading Style Sheets) is a rule-based language. It's used to style and lay out pages by defining specific groups of styles that get applied to elements or groups of elements.

Many people find themselves learning CSS in conjunction with HTML. Both languages work in unison (CSS rules style HTML elements) but due to its various concepts, CSS can often be frustrating and get confusing.

If you are just starting out, learn the following CSS concepts to gain a strong foundation and understanding of the rule-based language.

Please note: The descriptions below are a brief overview of each concept. Read the recommended reading to get in-depth explanations of each CSS concept.

Cascading, Inheritance & Specificity

The first step to gaining a stronger understanding of CSS is to learn how these three concepts together control which CSS rule applies to what element.

Cascading

Cascade is the fundamental concept on how CSS was created. As the name suggests, Stylesheets cascade (top to bottom). This means that the order of CSS rules matter and when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

Inheritance

Some CSS property values set on parent elements are inherited by their child elements, and some aren't. This can often be confusing but the principle behind it is actually designed to allow us to write fewer CSS rules.

Properties such as 'color' and 'font-family' are inherited which is why we often use the BODY element to assign them to.

It is also worth knowing that every CSS property accepts four values to control inheritance essentially being able to turn inheritance "on and off".

Specificity

As multiple rules apply to an element conflicting rules are sorted and applied by specificity. Each selector has a different specificity ranking which are:

Id's
Class and Pseudo Class's
Element selectors

As rules conflict, CSS determines the rule with the highest specificity and applies it to the element.

!important Declarations

The !important property in CSS overrides any specified rules and makes sure the rule denoted by !important is applied. Without understanding the three concepts above, it is easy to get into the habit of using !important on every property that doesn't get applied as expected.

However, it's important to understand that most developers consider the use of !important an anti-pattern. Read the articles recommended below to grasp a better understanding of when and how to use !important.

Media Queries

CSS Media Queries are used to change the style of your site depending on what screen resolution or device is being used.

Media Queries can be combined to create specific scenarios for when you want to apply certain rules to that situation. This created and allowed the concept of responsive and adaptive design to work coherently in the browser.

If you'd like to learn how to define, use and understand CSS Media Queries, check out the recommend reading below.

Flexbox & Grid

Over the years it's become apparent that CSS isn't easy to grasp or master. Thankfully as the language has evolved, concepts like Flexbox and Grid have been introduced. They both offer a solution that makes positioning and page layout much easier, faster and responsive.

CSS Grid Layout is a two-dimensional layout system. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

Flexbox layout is a direction based layout system. It gives you ability to alter its items’ width, height and order to best fill the available space.

Let Connect!

If you enjoyed this article or found it helpful lets stay connected. You can find me on Twitter sharing tips and code snippets @frontenddude

5 Code Playgrounds To Test & Build Ideas On

Frontend Dude 👨‍💻 — Wed, 20 May 2020 10:00:15 +0000

Over the past couple of years a variety of code playgrounds have emerged on the World Wide Web. Simply put, they allow you to build, test and preview FrontEnd code without the rigmarole of creating files, starting up your IDE or setting up a local server.

Listed below are 5 of the most popular code playgrounds used by developers everyday. They all offer different ways to experiment with client-side code, share our creations with others and include features such as:

HTML & CSS Pre-processing
Quick start using popular JavaScript frameworks
Hot Reloading
Intellisense & Autocomplete
Asset Hosting
Collaboration Mode
Keep editing while offline

CodeSandbox

Web Development Made Faster
An instant IDE and prototyping tool for rapid web development.

Codepen

CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

Glitch

Build fast, full-stack web apps in your browser.

StackBlitz

Create, edit & deploy fullstack apps — in just one click.

JSFiddle

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Do you already use these sites? Share your profiles below so we can all check out your awesome creations!

25 'Learn To Code' Focused YouTube channels

Frontend Dude 👨‍💻 — Mon, 18 May 2020 08:52:43 +0000

Traditional learning once included a book or a manual of notes. That’s great if you learn by reading, but what if you don’t?

Learning by video has been proven to increase information acquisition and better stimulate brainstorming as it targets two primary sensory functions - visual and auditory. As a result of this, video engages and motivates individuals in a way that text-based communication can’t. They feel as though they are being personally mentored and can watch through material at their own pace, encouraging learning in their own time.

Ever since the introduction of websites like Youtube and Lynda using video as a learning tool has taken the internet by storm. To get you started, here are 20 'learn to code' focused YouTube channels you can code along to:

Codú Community

Tuts+ Code

LearnCode.academy

Chris Coyier

Web Crunch

LevelUp Tuts

FunFunFunction

Code The Web

Codecourse

Florin Pop

Derek Banas

Wes Bos

thenewboston

Alessandro Castellani

Adam Khoury

Flavio

Ania Kubów

Chrome Developers

Simple Programmer

Matt Stauffer

Adrian Twarog

James Quick

Kevin Powell

Dev Ed

Web Dev Simplified

20 Awe-Inspiring Codepen Examples You Can Learn From

Frontend Dude 👨‍💻 — Wed, 13 May 2020 09:02:32 +0000

CodePen.io is an online code editor that allows you to develop in an open-source environment. You create 'pens' which display a live-preview as you code which is great for testing out bugs, collaborating and discovering the latest design patterns. CodePen supports a great selection of languages, frameworks and libraries which you can quickly spin up into a pen to get coding on straight away.

As an avid user and supporter of CodePen, I have stumbled across many creative and inspiring pens and thanks to 'editor view' I have been able to learn from the code used to build them. Not only has this helped me grow as a JavaScript Developer, it has introduced me to different programming patterns and techniques I would never have been exposed to before.

Listed below are 20 awe-inspiring CodePen examples you can learn from. Make sure you take the time to read over the code and compliment the user by hearting or leaving a comment on the pen.

Please note, it's worth taking the time to check the following pens out on your desktop browser. Some are JavaScript heavy or not built for mobile so your overall experience will be better.

X-ray me (SVG Experiment) - noeldelgado

Skewed title text - Paul Noble

Bullseye Game - Elliot Geno

Flexbox playground - Gabi

Musical Chord Progression Arpeggiator - Jake Albaugh

Meshi the CSS Dog - David Khourshid

Cub n Pup - puzzle game demo - Dave DeSandro

CSS3 Transform - Vineeth.TR

SVG Bubble Slider - Chris Gannon

Low Poly Tree Generator - Karim Maaloul

Full CSS Map creator - Vincent Durand

Chill the lion - Karim Maaloul

SVG Low PolyLion: Animated Polygons - GRAY GHOST

Pull Down to Refresh (Paper Plane) - Nikolay Talanov

CSS-only Colorful Calendar Concept - David Khourshid

Birds of a Feather - Tiffany Rayside

Responsive Huggy Laser Panda Factory - Sarah Drasner

Pure Css "day and night" toggle - Benjamin Réthoré

Self Coding Pen - Jake Albaugh

CSS3 Working Clock - Ilia

Hero Images & 20 Free Places To Find Them

Frontend Dude 👨‍💻 — Tue, 12 May 2020 09:52:48 +0000

In 2016, hero images became a web design trend which to this day is still going strong. As Wikipedia puts it,

'A hero image is a large banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content.'

Hero images provide a quick overview of the content or product advertised. Overtime, hero images have become appealing as designers have started to include vector backgrounds, illustrated artwork and even animated videos.

If you are planning on using a hero image on your next landing page or portfolio re-design, take a look at the websites listed below. Included are the copyright restrictions and licenses determining how you can use, copy, modify, distribute each image.

Unsplash - Free (do whatever you want) high-resolution photos.
Pixabay - Images are released free of copyrights under Creative Commons CC0. You may download, modify, distribute, and use them royalty free for anything you like, even in commercial applications.
Travel Coffee Book - All photos are listed under cc0. That means you can do whatever you want with them.
Pexels - Image on Pexels are licensed under the Creative Commons Zero (CC0) license. This means the pictures are completely free to be used for any legal purpose.
Startup Stock Photos - Free photos for startups, bloggers, publishers, websites, designers, developers, creators, & everyone else.
Pic Melon - Handpicked source of high quality license free pictures for designers and bloggers.
Burst - Free stock photos for websites and commercial use.
Negative Space - Free for personal or commercial projects, all of our CC0 licensed images are completely free to use.
Shutteroo - Free to use images for both personal and commercial purposes, but you must not resell or redistribute them.
Realistic Shots - Free stock photos (high resolution) for personal and commercial use.
Skuawk - A photography website with public domain images. Free and artistically loud!
Freely Photos - All photos published on Freely Photos are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer.
Stock Snap - Free high-res stock photos, weekly.
Superfamous Images - The Superfamous Images are available under the conditions of a Creative Commons Attribution 3.0 license. This means that you can use the work for your own purposes if credit is provided.
Split Shire - Free Stock Photos and Images for commercial use.
Cup Cake - All images are licensed under the Creative Commons license CC0, which means that you are free to use the images without any costs. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking for permission.
Life Of Pix - Free high-resolution photos, no copyrights restrictions. Images for personal and commercial use.
Trunklog - All pictures are free for private and commercial use.
Glyphs - All photos are under the CC0 License, free to download and can be used commercially.
Jay Mantri - All pictures are free under the CC0 license.

8 Unfamiliar CSS Pseudo-Classes

Frontend Dude 👨‍💻 — Mon, 11 May 2020 16:05:12 +0000

'A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).' - MDN Web Docs

Wait....what? That sounds complicated right?

What if I told you, you might be surprised to know you are already using them?

Of course you are! Here's an example of the syntax used, can you think of any pseudo classes you have used before?

selector:pseudo-class {
  property: value;
}

Let me guess, you thought of :hover, maybe even ::before and :after? If so, great job! However, there are many others we can use to improve our sites. Lets check out 8 unfamiliar ones below:

:checked

Selects inputs, radio or options in select tags that have been toggled "on" by a user clicking on them.

/* Any checked element */
:checked {
    color:blue;
}

/* input checkbox example */
input[type="checkbox"]:checked{
    color:red;
    border:none;
}

:empty

Selects any element that is 'empty'.

An element is empty if it has no whitespace, visible content or child elements.

/* style an empty element */
:empty {
    border:1px solid red;
    background:white;
}

:root

Selects the element that represents the root of the document.

:root is identical to using html as a selector, except is has a higher specificity.

/* style the root element */
:root {
    padding:20px;
    background:black;
}

:visited

Selects any link that has already been visited on the page.

It will only select anchor tags that have a href attribute.

/* style a link thats been visited */
a:visited {
    color:red;
    font-weight: bold;
}

:in-range

Used to style elements that have range limitations such as inputs with min and max values.

The style is applied whilst its value is within the range limit.

/* style in-range */
input[type="number"]:in-range{
    background-color:green;
}

:only-child

Selects an element if it is its parents only child.

It can be chained with :hover and ::after.

/*  style only-child */
li:only-child{
    font-weight: bold;
}

/* chained example */
a:only-child:after{
    content: "(Only child)";
    color:red;
}

:required

Selects form elements that have the required attribute set.

s, s and s are valid selections.

/*  style required input */
input[type="email"]:required{
    border:2px solid red;
}

::selection

Selects the area of the document that is highlighted by the user.

Color, background-color and text-shadow are the only CSS properties that can be used.

/* all selectable elements */
::selection{
    color:white;
    background-color:blue;
}

/* specific element */
h4::selection{
    color:red;
    background-color: white;
}

The basis of this post stems from the popularity of the tweet linked below. If you found it useful or learnt something new please follow me on twitter where I post daily tips on HTML, CSS and JavaScript.

Liquid error: internal

CSS's undersung property: box-sizing

Frontend Dude 👨‍💻 — Thu, 23 Apr 2020 13:20:21 +0000

Here is a little CSS snippet we can apply to *all elements which will make our lives infinitely easier:

html{ 
box-sizing: border-box;
} 

*, *:before, *:after{
box-sizing: inherit;
}

CSS box-sizing explained:

Ever since the introduction of the CSS box model CSS Level 1, padding and borders have been considered an addition to the element they are properties of. For example, if you declare a width of 20% on an element and then add 25px of padding it becomes 20%+25px wide. This can cause major headaches when developing and makes responsive CSS a nightmare.

As from CSS3 CSS Level 3 box-sizing changes everything! It tells the browser to render the box model using the 'IE box model', used by Internet Explorer in 'quirks mode', where height and width determine the height and width including padding and borders. Therefore, if you set an elements width to 20% and add 25px of padding it will cut into the element rather than adding to it.

Browser support:

Thankfully, it turns out that box-sizing is pretty well supported throughout all major browsers. Some browsers require the -moz- prefix and iOS needs a -webkit- prefix but all the rest don't. For a more detailed analysis check out the awesome caniuse.com support table.

DEV Community: Frontend Dude 👨‍💻

Free JavaScript Resources - java5cript.com

Introducting Java5cript.com

What's Coming?

More resources

Build to learn

Learn by topic

Further subcategories

Submit A Resource

Updates & Feedback

The FREE JavaScript Resources Post

Books

Websites

YouTube Channels

Free Courses

Keep In Touch

Get Chrome To Show The Full URL In The Address Bar

Giveaway - Win full access to 'VSCode Power User' worth $149

Important CSS Concepts To Learn.

Cascading, Inheritance & Specificity

Cascading

Inheritance

Specificity

Recommended Reading

!important Declarations

Recommended Reading

Media Queries

Recommended Reading

Flexbox & Grid

Recommended Reading

Let Connect!

5 Code Playgrounds To Test & Build Ideas On

CodeSandbox

Codepen

Glitch

StackBlitz

JSFiddle

25 'Learn To Code' Focused YouTube channels

20 Awe-Inspiring Codepen Examples You Can Learn From

X-ray me (SVG Experiment) - noeldelgado

Skewed title text - Paul Noble

Bullseye Game - Elliot Geno

Flexbox playground - Gabi

Musical Chord Progression Arpeggiator - Jake Albaugh

Meshi the CSS Dog - David Khourshid

Cub n Pup - puzzle game demo - Dave DeSandro

CSS3 Transform - Vineeth.TR

SVG Bubble Slider - Chris Gannon

Low Poly Tree Generator - Karim Maaloul

Full CSS Map creator - Vincent Durand

Chill the lion - Karim Maaloul

SVG Low PolyLion: Animated Polygons - GRAY GHOST

Pull Down to Refresh (Paper Plane) - Nikolay Talanov

CSS-only Colorful Calendar Concept - David Khourshid

Birds of a Feather - Tiffany Rayside

Responsive Huggy Laser Panda Factory - Sarah Drasner

Pure Css "day and night" toggle - Benjamin Réthoré

Self Coding Pen - Jake Albaugh

CSS3 Working Clock - Ilia

Hero Images & 20 Free Places To Find Them

8 Unfamiliar CSS Pseudo-Classes

:checked

:empty

:root

:visited

:in-range

:only-child

:required

::selection

CSS's undersung property: box-sizing

CSS box-sizing explained:

Browser support:

Further reading: