Learn Chrome, Git and Mdx

Optional chaining ?. in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Optional Chaining

This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Fix Common Git Mistakes

Knowing your everyday toolset increases your productivity as a developer. And Git is one of those tools you use on a daily basis. Mastering Git is tough; it has hundreds of different commands, often even inconsistent at how you pass in flags and configuration options. On the other side, there are a lot of good Git courses out there already, explaining all of these commands in detail. 

With this course, I aim at a different goal. You will walk through a series of scenarios which you’ll most commonly encounter in your daily work life as a developer. I’m talking:
 - updating your feature branch with the latest changes from master
 - polishing your git history to make it ready for being peer-reviewed
 - moving a set of commits to another branch
 - undoing accidental commits

The goal is not to cover everything, but those tasks that will greatly improve your daily productivity with Git.


Productive Git for Developers

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

- **Use (experimental) CSS Overview to learn all about CSS used on a page in a minute**
- **Style console.log messages with CSS** - a _crucial_ skill for any senior developer (j/k)
- **Debug your code (on production and local environment) with logpoints**
- **Run a Lighthouse audit of your site**
- **Choose accessible colors for your website that have an AAA contrast ratio rating**
- **Force a DOM element state in Chrome DevTools**
- **Use Console utilities to make debugging easier**
- **Copy a network request as fetch or cURL with Chrome DevTools**

Have fun!

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Chrome DevTools tips & tricks

As modern web developers, we are likely to use git on a daily basis. It's a wonderful distributed version control system, and with only a few commands in our toolbelt it is quite powerful and convenient.

In this course, you will learn the basics of using git, as well as some more advanced commands that you should find useful!

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/practical-git-for-everyday-professional-use-notes).

Practical Git for Everyday Professional Use

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

Debug the DOM in Chrome with the Devtools Elements Panel

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

Debug JavaScript in Chrome with DevTool Sources

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

Debug HTTP with Chrome DevTools Network Panel

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

How to Contribute to an Open Source Project on GitHub

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

Most projects have automatically generated files or folders from the operating system, applications, package managers etc. Usually, we don't want to include these types of things in our remote repos because they can clutter the git history/storage and are not applicable to everyone that works on the project. In this lesson, we show how to create a `.gitignore` file to ignore files and folders from being tracked by git.

Practical Git: Remove unnecessary git tracking with .gitignore files

 AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!


Examine AJAX Requests with Chrome Devtools

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

Analyze HTTP Requests and Responses with Chrome Devtools

Most of today’s websites use optimized, compiled, minified and obfuscated javascript and CSS. Examining this stuff here has some severely limited utility, which is why when developing we rely on sourcemaps. We’ll set up a webpack workflow that uses sourcemaps to show you how they can help your debugging!

Unbundle your JavaScript with Source Maps in Chrome DevTools

When working with Git, the most common thing developers do is stage, commit, and push the changes they make to a code base - this "edit -> stage -> commit -> push" cycle is the main workflow when using Git; it lets developers make "snapshots" of changes to their codebase which they can share and revert back to. In this lesson, we make some changes to our codebase and then `git add` (stage), `git commit` (store in history), and `git push` (sync with our remote repository) those changes. We also use `git status` along the way to see an update of where our repository is at.

Practical Git: Capture code history snapshots with git add/commit/push

`git pull` lets us get the latest changes from our project's remote repo (most likely from co-workers or other developers working on our project) and merge (combine) them with our local code. It's kind of like Dropbox for code, but you tell git when you want it to get the latest changes from the remote when it is most convenient for you. In this lesson, we use `git pull` and discuss how it is a shortcut for running `git fetch` and `git merge`.

Practical Git: Sync local and remote repos with git pull

When working on a project, it is much easier to work on features and bugs in isolation of the rest of the project. We can do this with git branches; a branch is a copy of the working directory, staging area, and project history; we create a branch, then check it out, then add commits. After our feature has been built, we can then merge it back into the main stable branch - which is `master` by default. In this lesson we go over how to create a branch with `git branch {branch-name}`, viewing all branches with `git branch`, switching branches with `git checkout` plus a few helper commands.

Practical Git: Isolate feature development with git branch

Learn to use the Style panel within the Element Inspector to examine and tweak the CSS rules applied to your application as it runs. 

Chrome Devtools: Elements - Debug with Style!

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

Chrome Devtools: Elements - Console Integration

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

Understand the Event Listeners Panel

The Elements panel includes a tool to show you how your site will look across a variety of devices. This can be tremendously helpful when troubleshooting layout issues on specific hardware that you don’t have access to, as well as general-purpose response design. You can mock different screen resolutions and behaviors to help put you into your users’ shoes.

Search

Search Results