Design Systems are most successful when they have a solid process in place to manage, maintain, and share component code across multiple teams and codebases. The best way to achieve this is to manage code using a version control system like Git. Git is the defacto industry standard tool for storing and editing code for a reason - it's powerful, scalable, flexible... but can be confusing or intimidating, whether you're a newbie or you use it every day!
In this workshop, Katie Sylor-Miller, the creator of OhShitGit.com, and co-author of The Design Systems Handbook, will teach you all you need to know to use Git as a tool for managing your Design System code.
We'll walk through everything you need to know to create, contribute to, maintain, and share your design system code as a standalone repo in Git. We'll go over how the fundamental structures in Git and how it all works under the hood. We'll create our own repos and get comfortable running common git commands in the terminal. We'll learn about best practices, workflows, and tools that will keep your commits in order and reduce the panic caused by merge conflicts. And, we'll cover some cool features in the Github UI to help you document, manage, and share your Design System code.
Git: An introduction of plumbing and porcelain commandsth507
This document provides an introduction to Git and version control systems. It begins with a poll asking about experience with Git, SVN, and git rebase. It then discusses key Git concepts like distributed version control, the working/staging area, and how Git works. It covers the different types of version control systems and compares centralized and distributed models. The document dives deeper into Git objects like blobs, trees, commits and references. It also distinguishes between low-level plumbing commands and higher-level porcelain commands.
This document provides an overview of Git and its features. Git is a distributed version control system that allows users to track changes to files. It keeps track of file versions, allows multiple developers to work independently and merge changes together, and is faster than other version control systems. The document discusses Git's history and architecture, how to install and configure Git, basic commands like add, commit and log, branching, and more advanced topics.
This document contains 50 interview questions related to Git for beginner, intermediate, and advanced levels. It covers topics such as basic Git commands, branching strategies, resolving conflicts, rebasing vs merging, and integrating Git with Jenkins. For each question, it lists the question text and brief explanation or code snippets for the answer. The full document acts as a reference guide for learning and preparing for Git related technical interviews.
This document provides a summary of a mini Git tutorial. It begins with an introduction to version control systems and how they allow users to track changes, revert files, and recover from errors. It then explains the basics of Git, including its three main states (committed, modified, staged), how it stores content addressed by SHA-1 hashes, and the local workflow of modifying, staging, and committing files. The document proceeds to cover installing Git, basic configuration, cloning repositories, recording changes, undoing actions, and working with remote repositories hosted online. It concludes by mentioning how Git stores data as commit snapshots and uses branches to track parallel development lines.
This document provides an introduction to Git and GitHub. It outlines the basics of Git including initializing repositories, tracking changes, branching, merging, and resolving conflicts. It also covers GitHub concepts such as cloning repositories from GitHub to a local machine and pushing/pulling changes between local and remote repositories. The document explains how to collaborate on projects hosted on GitHub using Git.
Git is a version control system that allows users to synchronize branches and rewrite history. It stores project data in objects including blobs for file contents, trees for directories, commits for snapshots, and tags for references. Commits, branches, and tags are referenced by SHA-1 hashes or names. Rebasing replays commits onto another branch to keep a linear history, while merging uses commit objects to join branches. The reflog tracks reference updates and allows recovering from errors. Interactive rebasing edits the commit history. Bisecting helps identify the commit introducing a bug by binary searching the commit history.
This document provides an introduction to using Git version control. It begins with an overview of version control systems and the fundamental Git concepts like repositories, working copies, commits, and branches. The document then covers how to set up and configure Git, the basic Git commands to save changes like add, commit, and push. It discusses branching and merging workflows. Additional topics include inspecting repositories, undoing changes, rewriting history, and advanced tips like stashing, filtering logs, and resolving conflicts. Homework assignments are provided to practice common Git workflows and commands.
This document provides an introduction to Git and GitHub. It begins with an overview of source control and the history of version control systems like SVN and CVS. It then discusses key concepts of Git like its three-tree architecture, branches and merging, and undoing changes. The document concludes with an introduction to GitHub, how to clone and collaborate on repositories, and some tips on reducing merge conflicts.
Git: An introduction of plumbing and porcelain commandsth507
This document provides an introduction to Git and version control systems. It begins with a poll asking about experience with Git, SVN, and git rebase. It then discusses key Git concepts like distributed version control, the working/staging area, and how Git works. It covers the different types of version control systems and compares centralized and distributed models. The document dives deeper into Git objects like blobs, trees, commits and references. It also distinguishes between low-level plumbing commands and higher-level porcelain commands.
This document provides an overview of Git and its features. Git is a distributed version control system that allows users to track changes to files. It keeps track of file versions, allows multiple developers to work independently and merge changes together, and is faster than other version control systems. The document discusses Git's history and architecture, how to install and configure Git, basic commands like add, commit and log, branching, and more advanced topics.
This document contains 50 interview questions related to Git for beginner, intermediate, and advanced levels. It covers topics such as basic Git commands, branching strategies, resolving conflicts, rebasing vs merging, and integrating Git with Jenkins. For each question, it lists the question text and brief explanation or code snippets for the answer. The full document acts as a reference guide for learning and preparing for Git related technical interviews.
This document provides a summary of a mini Git tutorial. It begins with an introduction to version control systems and how they allow users to track changes, revert files, and recover from errors. It then explains the basics of Git, including its three main states (committed, modified, staged), how it stores content addressed by SHA-1 hashes, and the local workflow of modifying, staging, and committing files. The document proceeds to cover installing Git, basic configuration, cloning repositories, recording changes, undoing actions, and working with remote repositories hosted online. It concludes by mentioning how Git stores data as commit snapshots and uses branches to track parallel development lines.
This document provides an introduction to Git and GitHub. It outlines the basics of Git including initializing repositories, tracking changes, branching, merging, and resolving conflicts. It also covers GitHub concepts such as cloning repositories from GitHub to a local machine and pushing/pulling changes between local and remote repositories. The document explains how to collaborate on projects hosted on GitHub using Git.
Git is a version control system that allows users to synchronize branches and rewrite history. It stores project data in objects including blobs for file contents, trees for directories, commits for snapshots, and tags for references. Commits, branches, and tags are referenced by SHA-1 hashes or names. Rebasing replays commits onto another branch to keep a linear history, while merging uses commit objects to join branches. The reflog tracks reference updates and allows recovering from errors. Interactive rebasing edits the commit history. Bisecting helps identify the commit introducing a bug by binary searching the commit history.
This document provides an introduction to using Git version control. It begins with an overview of version control systems and the fundamental Git concepts like repositories, working copies, commits, and branches. The document then covers how to set up and configure Git, the basic Git commands to save changes like add, commit, and push. It discusses branching and merging workflows. Additional topics include inspecting repositories, undoing changes, rewriting history, and advanced tips like stashing, filtering logs, and resolving conflicts. Homework assignments are provided to practice common Git workflows and commands.
This document provides an introduction to Git and GitHub. It begins with an overview of source control and the history of version control systems like SVN and CVS. It then discusses key concepts of Git like its three-tree architecture, branches and merging, and undoing changes. The document concludes with an introduction to GitHub, how to clone and collaborate on repositories, and some tips on reducing merge conflicts.
Git 101 Presentation
The presentation introduces Git version control system including:
[1] An overview of version control systems and the basics of Git such as snapshots, local operations, and three main states of files.
[2] A comparison of features between Git and SVN such as distributed development and branching workflows.
[3] Instructions on setting up Git locally and with GitHub, and basic commands for creating and managing repositories, branches, commits, and merges.
This document provides an introduction and overview of Git. It begins with a brief history of Git's origins with Linux source code management. It then covers key Git concepts like its distributed version control model, advantages like speed and resilience, and some basic commands. The document demonstrates setting up a sample Git repository and making commits. It also discusses branching, tagging, undoing changes, cleaning up repositories, and using remote repositories.
The Information Technology have led us into an era where the production, sharing and use of information are now part of everyday life and of which we are often unaware actors almost: it is now almost inevitable not leave a digital trail of many of the actions we do every day; for example, by digital content such as photos, videos, blog posts and everything that revolves around the social networks (Facebook and Twitter in particular). Added to this is that with the "internet of things", we see an increase in devices such as watches, bracelets, thermostats and many other items that are able to connect to the network and therefore generate large data streams. This explosion of data justifies the birth, in the world of the term Big Data: it indicates the data produced in large quantities, with remarkable speed and in different formats, which requires processing technologies and resources that go far beyond the conventional systems management and storage of data. It is immediately clear that, 1) models of data storage based on the relational model, and 2) processing systems based on stored procedures and computations on grids are not applicable in these contexts. As regards the point 1, the RDBMS, widely used for a great variety of applications, have some problems when the amount of data grows beyond certain limits. The scalability and cost of implementation are only a part of the disadvantages: very often, in fact, when there is opposite to the management of big data, also the variability, or the lack of a fixed structure, represents a significant problem. This has given a boost to the development of the NoSQL database. The website NoSQL Databases defines NoSQL databases such as "Next Generation Databases mostly addressing some of the points: being non-relational, distributed, open source and horizontally scalable." These databases are: distributed, open source, scalable horizontally, without a predetermined pattern (key-value, column-oriented, document-based and graph-based), easily replicable, devoid of the ACID and can handle large amounts of data. These databases are integrated or integrated with processing tools based on the MapReduce paradigm proposed by Google in 2009. MapReduce with the open source Hadoop framework represent the new model for distributed processing of large amounts of data that goes to supplant techniques based on stored procedures and computational grids (step 2). The relational model taught courses in basic database design, has many limitations compared to the demands posed by new applications based on Big Data and NoSQL databases that use to store data and MapReduce to process large amounts of data.
Course Website http://pbdmng.datatoknowledge.it/
Contact me to download the slides
Quick and easy way to get started with Git & GitHubAshoka R K T
(This is a session planned to be taken in Coimbatore .Net User Group(dotnetcbe.com) on sunday 13-oct-2013)
In this session I will talk about the simplest and quickest set of steps needed for getting started in Git & GitHub.
- I will talk a little about the concepts of Git & GitHub
- How to use “GitHub for Windows” and setup a GitHub based distributed source control system
- How Open Source projects on GitHub works
This document provides an introduction to Git and GitHub. It begins with an overview of source control and the history of version control systems like SVN and CVS. It then discusses key Git concepts like its three-tree architecture, branches and merging, and undoing changes. The document concludes with an introduction to GitHub, including how to clone repositories, collaborate through pull requests, and link a local Git repository to a remote GitHub repository.
This document provides an overview of version control with Git. It explains what version control and Git are, how to install and configure Git, how to perform basic tasks like initializing a repository and making commits, and how to collaborate using features like branching and pushing/pulling from remote repositories. Key points covered include allowing the tracking of changes, maintaining file history, and enabling multiple people to work on the same project simultaneously without conflicts.
This document provides an overview of Git workflow and commands. It describes Git as a distributed version control system designed for tracking changes in software code during development. The document outlines common Git commands and how developers can use branching and merging to work on features independently and integrate their work.
Git is a distributed version control system that was created by Linus Torvalds in 2005 to manage the Linux kernel source code. It allows developers to work simultaneously and maintain a complete history of their work. Git uses a distributed model where every developer has a full copy of the code repository, enabling them to work offline and collaborate asynchronously by integrating changes from any repository. Developers commit changes to their local repository and synchronize changes by pushing to or pulling from remote repositories.
Slides from my talk at ALT.NET Cork.
Unlike centralized version control systems, the distributed nature of Git allows you to be far more flexible in how developers collaborate on projects.In this session I'll take you through a quick tour of the essential git commands with some demos.We'll cover branching and merging strategies, pull requests ,working on open source (GitHub etc), git clients and git deployments to the cloud.
Derrick Stolee presented on advanced Git concepts. He began with an overview of himself and his work at Microsoft before discussing Git's object model, including blobs for file contents, trees for folder structure, and commits with references to trees, parent commits and metadata. Stolee also covered Git branches as pointers to commits, and how Git is a distributed version control system. He demonstrated common Git commands and encouraged participants to get hands-on experience with Git.
This document provides an overview of version control systems and introduces the key concepts and commands of Git. It explains why version control is useful, the differences between local, centralized, and distributed version control systems, and the goals and design of Git. It covers the basic Git workflow, tracking and committing files, viewing history, branching and merging, and working with remote repositories. It also discusses rebasing and interactive rebasing to clean up commits, as well as stashing to temporarily store uncommitted changes.
[2015/2016] Collaborative software development with GitIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
The document discusses version control systems and Git. It provides an overview of centralized and distributed version control workflows. Key points include:
- Centralized VCSs involve committing changes to a central repository, while distributed VCSs allow users to commit locally and push changes.
- Git uses a distributed model where each user has a full local copy of the repository and commits changes locally before pushing.
- Common Git commands are add, commit, push, pull, status, diff, log, branch, tag, and remote for working with remote repositories.
This document provides an introduction to GitHub. It defines Git as a version control system that records changes to files and allows users to revert files to earlier versions. GitHub is described as a hosting service for Git repositories that provides a graphical interface and collaboration features. The document outlines key GitHub concepts like repositories, branches, commits, forking, pull requests and issues. It also summarizes the typical GitHub workflow and includes a link to download GitHub Desktop for a demo.
Git Educated About Git - 20 Essential CommandsJeremy Lindblom
Git is a free, distributed version control system that is fast, easy to learn, and has great features like cheap local branching and convenient staging areas. It has also taken the open source world by storm, especially with the help of online services like GitHub. Learn 20 essential commands that will help you work with your next project, as well as common conventions and workflows.
Git 101 - Crash Course in Version Control using GitGeoff Hoffman
Find out why more and more developers are switching to Git - distributed version control. This intro to Git covers the basics, from cloning to pushing for beginners.
Git is a version control system created by Linus Torvalds in 2005 to manage the Linux kernel source code. It is a distributed system where each user has their own local repository that can be synced with remote repositories. The basic Git workflow involves modifying files locally, staging them, and committing snapshots of the staged files to the local repository. Git tracks changes at a file level and uses SHA-1 hashes to identify commits rather than sequential version numbers.
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
xPerformance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser.
The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.
Performance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works with the browser, not against it, and ultimately improves your users’ experience.
More Related Content
Similar to Design Systems + Git = Success - Clarity Conference 2018
Git 101 Presentation
The presentation introduces Git version control system including:
[1] An overview of version control systems and the basics of Git such as snapshots, local operations, and three main states of files.
[2] A comparison of features between Git and SVN such as distributed development and branching workflows.
[3] Instructions on setting up Git locally and with GitHub, and basic commands for creating and managing repositories, branches, commits, and merges.
This document provides an introduction and overview of Git. It begins with a brief history of Git's origins with Linux source code management. It then covers key Git concepts like its distributed version control model, advantages like speed and resilience, and some basic commands. The document demonstrates setting up a sample Git repository and making commits. It also discusses branching, tagging, undoing changes, cleaning up repositories, and using remote repositories.
The Information Technology have led us into an era where the production, sharing and use of information are now part of everyday life and of which we are often unaware actors almost: it is now almost inevitable not leave a digital trail of many of the actions we do every day; for example, by digital content such as photos, videos, blog posts and everything that revolves around the social networks (Facebook and Twitter in particular). Added to this is that with the "internet of things", we see an increase in devices such as watches, bracelets, thermostats and many other items that are able to connect to the network and therefore generate large data streams. This explosion of data justifies the birth, in the world of the term Big Data: it indicates the data produced in large quantities, with remarkable speed and in different formats, which requires processing technologies and resources that go far beyond the conventional systems management and storage of data. It is immediately clear that, 1) models of data storage based on the relational model, and 2) processing systems based on stored procedures and computations on grids are not applicable in these contexts. As regards the point 1, the RDBMS, widely used for a great variety of applications, have some problems when the amount of data grows beyond certain limits. The scalability and cost of implementation are only a part of the disadvantages: very often, in fact, when there is opposite to the management of big data, also the variability, or the lack of a fixed structure, represents a significant problem. This has given a boost to the development of the NoSQL database. The website NoSQL Databases defines NoSQL databases such as "Next Generation Databases mostly addressing some of the points: being non-relational, distributed, open source and horizontally scalable." These databases are: distributed, open source, scalable horizontally, without a predetermined pattern (key-value, column-oriented, document-based and graph-based), easily replicable, devoid of the ACID and can handle large amounts of data. These databases are integrated or integrated with processing tools based on the MapReduce paradigm proposed by Google in 2009. MapReduce with the open source Hadoop framework represent the new model for distributed processing of large amounts of data that goes to supplant techniques based on stored procedures and computational grids (step 2). The relational model taught courses in basic database design, has many limitations compared to the demands posed by new applications based on Big Data and NoSQL databases that use to store data and MapReduce to process large amounts of data.
Course Website http://pbdmng.datatoknowledge.it/
Contact me to download the slides
Quick and easy way to get started with Git & GitHubAshoka R K T
(This is a session planned to be taken in Coimbatore .Net User Group(dotnetcbe.com) on sunday 13-oct-2013)
In this session I will talk about the simplest and quickest set of steps needed for getting started in Git & GitHub.
- I will talk a little about the concepts of Git & GitHub
- How to use “GitHub for Windows” and setup a GitHub based distributed source control system
- How Open Source projects on GitHub works
This document provides an introduction to Git and GitHub. It begins with an overview of source control and the history of version control systems like SVN and CVS. It then discusses key Git concepts like its three-tree architecture, branches and merging, and undoing changes. The document concludes with an introduction to GitHub, including how to clone repositories, collaborate through pull requests, and link a local Git repository to a remote GitHub repository.
This document provides an overview of version control with Git. It explains what version control and Git are, how to install and configure Git, how to perform basic tasks like initializing a repository and making commits, and how to collaborate using features like branching and pushing/pulling from remote repositories. Key points covered include allowing the tracking of changes, maintaining file history, and enabling multiple people to work on the same project simultaneously without conflicts.
This document provides an overview of Git workflow and commands. It describes Git as a distributed version control system designed for tracking changes in software code during development. The document outlines common Git commands and how developers can use branching and merging to work on features independently and integrate their work.
Git is a distributed version control system that was created by Linus Torvalds in 2005 to manage the Linux kernel source code. It allows developers to work simultaneously and maintain a complete history of their work. Git uses a distributed model where every developer has a full copy of the code repository, enabling them to work offline and collaborate asynchronously by integrating changes from any repository. Developers commit changes to their local repository and synchronize changes by pushing to or pulling from remote repositories.
Slides from my talk at ALT.NET Cork.
Unlike centralized version control systems, the distributed nature of Git allows you to be far more flexible in how developers collaborate on projects.In this session I'll take you through a quick tour of the essential git commands with some demos.We'll cover branching and merging strategies, pull requests ,working on open source (GitHub etc), git clients and git deployments to the cloud.
Derrick Stolee presented on advanced Git concepts. He began with an overview of himself and his work at Microsoft before discussing Git's object model, including blobs for file contents, trees for folder structure, and commits with references to trees, parent commits and metadata. Stolee also covered Git branches as pointers to commits, and how Git is a distributed version control system. He demonstrated common Git commands and encouraged participants to get hands-on experience with Git.
This document provides an overview of version control systems and introduces the key concepts and commands of Git. It explains why version control is useful, the differences between local, centralized, and distributed version control systems, and the goals and design of Git. It covers the basic Git workflow, tracking and committing files, viewing history, branching and merging, and working with remote repositories. It also discusses rebasing and interactive rebasing to clean up commits, as well as stashing to temporarily store uncommitted changes.
[2015/2016] Collaborative software development with GitIvano Malavolta
This presentation is about a lecture I gave within the "Software systems and services" immigration course at the Gran Sasso Science Institute, L'Aquila (Italy): http://cs.gssi.infn.it/.
http://www.ivanomalavolta.com
The document discusses version control systems and Git. It provides an overview of centralized and distributed version control workflows. Key points include:
- Centralized VCSs involve committing changes to a central repository, while distributed VCSs allow users to commit locally and push changes.
- Git uses a distributed model where each user has a full local copy of the repository and commits changes locally before pushing.
- Common Git commands are add, commit, push, pull, status, diff, log, branch, tag, and remote for working with remote repositories.
This document provides an introduction to GitHub. It defines Git as a version control system that records changes to files and allows users to revert files to earlier versions. GitHub is described as a hosting service for Git repositories that provides a graphical interface and collaboration features. The document outlines key GitHub concepts like repositories, branches, commits, forking, pull requests and issues. It also summarizes the typical GitHub workflow and includes a link to download GitHub Desktop for a demo.
Git Educated About Git - 20 Essential CommandsJeremy Lindblom
Git is a free, distributed version control system that is fast, easy to learn, and has great features like cheap local branching and convenient staging areas. It has also taken the open source world by storm, especially with the help of online services like GitHub. Learn 20 essential commands that will help you work with your next project, as well as common conventions and workflows.
Git 101 - Crash Course in Version Control using GitGeoff Hoffman
Find out why more and more developers are switching to Git - distributed version control. This intro to Git covers the basics, from cloning to pushing for beginners.
Git is a version control system created by Linus Torvalds in 2005 to manage the Linux kernel source code. It is a distributed system where each user has their own local repository that can be synced with remote repositories. The basic Git workflow involves modifying files locally, staging them, and committing snapshots of the staged files to the local repository. Git tracks changes at a file level and uses SHA-1 hashes to identify commits rather than sequential version numbers.
Similar to Design Systems + Git = Success - Clarity Conference 2018 (20)
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
xPerformance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser.
The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.
Performance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works with the browser, not against it, and ultimately improves your users’ experience.
Performance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
Raiders of the Fast Start: Frontend Performance Archeology
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Katie Sylor-Miller
This document summarizes the results of performance testing and experiments on the Etsy mobile listing page. It describes testing lazy loading images, reducing CSS file size, switching to SVGs, and reducing JavaScript file size. Synthetic tests and real user monitoring showed improvements in load times, especially on mobile. Further work is still needed to fully optimize frontend performance and architecture to better match the development culture. Performance directly impacts conversion rates, so continued optimization can increase sales.
We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ?
In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Katie Sylor-Miller
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
Presentation from https://perfmattersconf.com/
Git, the widely popular version control tool that just about everyone who works on the web seems to use, is powerful, scalable, flexible. . .and difficult to learn. If you’ve used Git for any amount of time, you’ve probably gotten yourself into some confusing, frustrating, or downright terrifying situations. But don’t panic. You are not alone. Katie Sylor-Miller explains how to avoid getting into Git messes in the first place, demonstrating how the fundamental structures in Git actually work under the hood and sharing best practices, workflows, and tools that will keep your commits in order and reduce the panic caused by merge conflicts. Katie then shows you how to leverage Git’s powerful features to save yourself when everything seems to go wrong.
From FrontendConf Zurich 2016
As the web development landscape rapidly changes, good communication and collaboration between multiple job functions is key to not just a project’s success, but to a successful career as a front end developer. In this talk, we’ll discuss why it is important to grow yourself into a “T-shaped” developer - someone with deep knowledge in front end development, who can collaborate across multiple other disciplines. You'll leave knowing how to incorporate essential empathy and communication skills into your daily work life, leveling up your career, and the career of those around you.
Redefining brain tumor segmentation: a cutting-edge convolutional neural netw...IJECEIAES
Medical image analysis has witnessed significant advancements with deep learning techniques. In the domain of brain tumor segmentation, the ability to
precisely delineate tumor boundaries from magnetic resonance imaging (MRI)
scans holds profound implications for diagnosis. This study presents an ensemble convolutional neural network (CNN) with transfer learning, integrating
the state-of-the-art Deeplabv3+ architecture with the ResNet18 backbone. The
model is rigorously trained and evaluated, exhibiting remarkable performance
metrics, including an impressive global accuracy of 99.286%, a high-class accuracy of 82.191%, a mean intersection over union (IoU) of 79.900%, a weighted
IoU of 98.620%, and a Boundary F1 (BF) score of 83.303%. Notably, a detailed comparative analysis with existing methods showcases the superiority of
our proposed model. These findings underscore the model’s competence in precise brain tumor localization, underscoring its potential to revolutionize medical
image analysis and enhance healthcare outcomes. This research paves the way
for future exploration and optimization of advanced CNN models in medical
imaging, emphasizing addressing false positives and resource efficiency.
DEEP LEARNING FOR SMART GRID INTRUSION DETECTION: A HYBRID CNN-LSTM-BASED MODELgerogepatton
As digital technology becomes more deeply embedded in power systems, protecting the communication
networks of Smart Grids (SG) has emerged as a critical concern. Distributed Network Protocol 3 (DNP3)
represents a multi-tiered application layer protocol extensively utilized in Supervisory Control and Data
Acquisition (SCADA)-based smart grids to facilitate real-time data gathering and control functionalities.
Robust Intrusion Detection Systems (IDS) are necessary for early threat detection and mitigation because
of the interconnection of these networks, which makes them vulnerable to a variety of cyberattacks. To
solve this issue, this paper develops a hybrid Deep Learning (DL) model specifically designed for intrusion
detection in smart grids. The proposed approach is a combination of the Convolutional Neural Network
(CNN) and the Long-Short-Term Memory algorithms (LSTM). We employed a recent intrusion detection
dataset (DNP3), which focuses on unauthorized commands and Denial of Service (DoS) cyberattacks, to
train and test our model. The results of our experiments show that our CNN-LSTM method is much better
at finding smart grid intrusions than other deep learning algorithms used for classification. In addition,
our proposed approach improves accuracy, precision, recall, and F1 score, achieving a high detection
accuracy rate of 99.50%.
Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapte...University of Maribor
Slides from talk presenting:
Aleš Zamuda: Presentation of IEEE Slovenia CIS (Computational Intelligence Society) Chapter and Networking.
Presentation at IcETRAN 2024 session:
"Inter-Society Networking Panel GRSS/MTT-S/CIS
Panel Session: Promoting Connection and Cooperation"
IEEE Slovenia GRSS
IEEE Serbia and Montenegro MTT-S
IEEE Slovenia CIS
11TH INTERNATIONAL CONFERENCE ON ELECTRICAL, ELECTRONIC AND COMPUTING ENGINEERING
3-6 June 2024, Niš, Serbia
Literature Review Basics and Understanding Reference Management.pptxDr Ramhari Poudyal
Three-day training on academic research focuses on analytical tools at United Technical College, supported by the University Grant Commission, Nepal. 24-26 May 2024
International Conference on NLP, Artificial Intelligence, Machine Learning an...gerogepatton
International Conference on NLP, Artificial Intelligence, Machine Learning and Applications (NLAIM 2024) offers a premier global platform for exchanging insights and findings in the theory, methodology, and applications of NLP, Artificial Intelligence, Machine Learning, and their applications. The conference seeks substantial contributions across all key domains of NLP, Artificial Intelligence, Machine Learning, and their practical applications, aiming to foster both theoretical advancements and real-world implementations. With a focus on facilitating collaboration between researchers and practitioners from academia and industry, the conference serves as a nexus for sharing the latest developments in the field.
A SYSTEMATIC RISK ASSESSMENT APPROACH FOR SECURING THE SMART IRRIGATION SYSTEMSIJNSA Journal
The smart irrigation system represents an innovative approach to optimize water usage in agricultural and landscaping practices. The integration of cutting-edge technologies, including sensors, actuators, and data analysis, empowers this system to provide accurate monitoring and control of irrigation processes by leveraging real-time environmental conditions. The main objective of a smart irrigation system is to optimize water efficiency, minimize expenses, and foster the adoption of sustainable water management methods. This paper conducts a systematic risk assessment by exploring the key components/assets and their functionalities in the smart irrigation system. The crucial role of sensors in gathering data on soil moisture, weather patterns, and plant well-being is emphasized in this system. These sensors enable intelligent decision-making in irrigation scheduling and water distribution, leading to enhanced water efficiency and sustainable water management practices. Actuators enable automated control of irrigation devices, ensuring precise and targeted water delivery to plants. Additionally, the paper addresses the potential threat and vulnerabilities associated with smart irrigation systems. It discusses limitations of the system, such as power constraints and computational capabilities, and calculates the potential security risks. The paper suggests possible risk treatment methods for effective secure system operation. In conclusion, the paper emphasizes the significant benefits of implementing smart irrigation systems, including improved water conservation, increased crop yield, and reduced environmental impact. Additionally, based on the security analysis conducted, the paper recommends the implementation of countermeasures and security approaches to address vulnerabilities and ensure the integrity and reliability of the system. By incorporating these measures, smart irrigation technology can revolutionize water management practices in agriculture, promoting sustainability, resource efficiency, and safeguarding against potential security threats.
ACEP Magazine edition 4th launched on 05.06.2024Rahul
This document provides information about the third edition of the magazine "Sthapatya" published by the Association of Civil Engineers (Practicing) Aurangabad. It includes messages from current and past presidents of ACEP, memories and photos from past ACEP events, information on life time achievement awards given by ACEP, and a technical article on concrete maintenance, repairs and strengthening. The document highlights activities of ACEP and provides a technical educational article for members.
A review on techniques and modelling methodologies used for checking electrom...nooriasukmaningtyas
The proper function of the integrated circuit (IC) in an inhibiting electromagnetic environment has always been a serious concern throughout the decades of revolution in the world of electronics, from disjunct devices to today’s integrated circuit technology, where billions of transistors are combined on a single chip. The automotive industry and smart vehicles in particular, are confronting design issues such as being prone to electromagnetic interference (EMI). Electronic control devices calculate incorrect outputs because of EMI and sensors give misleading values which can prove fatal in case of automotives. In this paper, the authors have non exhaustively tried to review research work concerned with the investigation of EMI in ICs and prediction of this EMI using various modelling methodologies and measurement setups.
18. Distributed Version Control
• A “cloned” copy of the entire repository - including all files,
metadata, and it’s full history - is mirrored on each user’s
local host machine.
• Usually (but not always!) there is a central/canonical copy of
the repository stored in a remote git server called origin.
• You can configure multiple remote repositories, even
another repo on your machine can be a remote!
27. Benefits of Git
• Historical context - view and compare different versions of
files to understand what changed and why.
• Safety net - if you make a mistake, you can easily revert
back in time to a previous version of a file.
• Collaboration - multiple people can work on the same files
at the same time, then share their changes with each other.
• Conflict resolution - Git can resolve conflicts that arise
when multiple people make changes to the same file.
28. Benefits of Git for Design Systems
• Sandboxing - you can work on changes locally, without
affecting anyone else, until they are ready to be shared.
• Versioned releases - you can control when you are ready to
share code with other teams.
• Quality control - pull requests allow core team members to
review file changes before they end up in a release.
• Documentation - the Github interface has simple
documentation capabilities built-in.
30. Git
A tool for distributed
version control
(the stuff you do in the
command line)
A company that hosts
Git repos (with some
extra features)
(the stuff you do in the
github.com website)
Github
31. Cloning and Creating Repos
https://github.com/ksylor/clarity-workshop-exercises/
tree/master/exercise-1
Exercise 1
35. What’s in a commit
Each commit contains a few pieces of information:
• A snapshot of the entire repo
• Who made this change
• When this change was made
• A message describing the commit
• A pointer to the previous commit
36. What’s in a commit
SHA-1
Unique
40-char
hash
Each commit contains a few pieces of information:
• A snapshot of the entire repo
• Who made this change
• When this change was made
• A message describing the commit
• A pointer to the previous commit
42. Mental model: branches are a linked list
a4df41aaec56116dab6a71a35312 912bde5
• A snapshot of the entire repo
• Who made this change
• When this change was made
• A message describing the commit
• A pointer to the previous commit
A B C D E
43. Mental model: branches are a linked list
a4df41aaec56116dab6a71a35312 912bde5
• A snapshot of the entire repo
• Who made this change
• When this change was made
• A message describing the commit
• A pointer to the previous commit
A B C D E
44. Branches are a linked list reference
A4DF41A6DAB6A7
a4df41aaec56116dab6a71a35312 912bde5
A B C D EA B C D E
master
45. Branches are a linked list reference text file
A4DF41A6DAB6A7
a4df41aaec56116dab6a71a35312 912bde5
master
.git/refs/heads/master
912bde5d4e5e962269ddff87da83cc5ce55e75d0
A B C D E
47. New branches are a new reference
A4DF41A6DAB6A7
a4df41aaec56116dab6a71a35312 912bde5
master
new-branch
A B C D E
48. New branches are a new text file
A4DF41A
a4df41aaec56116dab6a71a35312 912bde5
master
A B C D E
.git/refs/heads/master
912bde5d4e5e962269ddff87da83cc5ce55e75d0
.git/refs/heads/new-branch
912bde5d4e5e962269ddff87da83cc5ce55e75d0
new-branch
50. HEAD points to your currently checked-out branch
HEAD
a4df41aaec56116dab6a7 912bde5
master
new-branch
B C D E
51. HEAD is a reference to a reference
HEAD
A4DF41A6DAB6A7
a4df41aaec56116dab6a7 912bde5
master
new-branch
.git/refs/HEAD
ref: refs/heads/master
B C D E
52. WTF is the HEAD
• The HEAD decides what branch/commit will be the target of
your actions
• There is only one HEAD per repository
• The HEAD is unique to your local install of git
• The history of the HEAD is recorded, which gives you a way
to undo your work (more on this later)
54. HEAD points to your currently checked-out branch
HEAD
a4df41aaec56116dab6a7 912bde5
master
new-branch
.git/refs/HEAD
ref: refs/heads/new-branch
B C D E
61. Fundamental concepts: recap
• Commits are a unique snapshot of a repository at a single
point in time
• History is a linked list tree directed acyclic graph
• Branches are a reference to a single commit in history
• HEAD is a symbolic reference to your current working branch
62. Commits, Branches,
Refs and HEAD
https://github.com/ksylor/clarity-workshop-exercises/tree/
master/exercise-2
Exercise 2
68. REMOTE/ORIGIN
Your machineGithub
LOCAL STAGING/INDEX WORKSPACE
Your local copy of the
remote git repository
--
Lives in a .git folder
inside your local copy
folder
--
Contains the entire
history of a remote repo
plus local changes
77. ksylormiller:~/ohshitgit (master)$ git status
On branch master
Your branch is up-to-date with ‘origin/master'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: bar.php
no changes added to commit (use "git add" and/or "git commit -a”)
77
git status is your BFF
78. git status and
git diff
are your BFFs
by Etsy seller SmittenKittenKendall
79. ksylormiller:~/ohshitgit (master)$ git diff
diff --git a/bar.php b/bar.php
index f81fce0..bdd3cb3 100644
--- a/bar.php
+++ b/bar.php
@@ -1 +1,4 @@
this is a file
-with nothing in it
+with some stuff in it
79
git diff is your other BFF
80. REMOTE/ORIGIN
Your machineGithub
LOCAL STAGING/INDEX WORKSPACE
git diff
compares changes
in workspace
to changes
(if any) in index
git diff --staged
compares changes
in index to HEAD
(e.g. current state
of your checked-out
branch)
git diff HEAD
compares changes
in both index and
workspace to HEAD
83. ksylormiller:~/ohshitgit (master)$ git status
On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: bar.php
83
git status (again)
85. ksylormiller:~/ohshitgit (master)$ git status
On branch master
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: bar.php
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: bar.php
85
git status (I told you it was our BFF)
98. Merge remote-tracking branch 'origin/master'
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
~
~
~
~
"~/ohshitgit/.git/MERGE_MSG" 7L, 293C
98
oh god we’re in vim
107. ksylormiller:~/ohshitgit (master)$ git rebase origin/master
First, rewinding head to replay your work on top of it...
Applying: Meaningful commit message
107
git rebase
110. ksylormiller:~/ohshitgit (master)$ git pull --rebase
First, rewinding head to replay your work on top of it...
Applying: Meaningful commit message
110
git pull --rebase == git fetch && git rebase
116. Workflows in depth: recap
• We interact with git repos via remote (bare) servers, and on
your machine w/ it’s local copy, workspace, and staging
area
• git add takes a snapshot of a changed file in it’s current
state & adds it to staging
• git status and git diff your BFFs
• We interact with the remote via tracking branches, another
kind of reference
117. Workflows in depth: recap
• git pull = git fetch && git merge
creates a new merge commit (gross! vim! no!)
• git pull --rebase = git fetch && git rebase
replays your work at the tip of master (beautiful! yes!)
126. ksylormiller:~/ohshitgit (feature-branch)$ git status
On branch feature-branch
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: bar.php
no changes added to commit (use "git add" and/or "git commit -a”)
126
git status
127. ksylormiller:~/ohshitgit (feature-branch)$ git diff
diff --git a/bar.php b/bar.php
index f81fce0..bdd3cb3 100644
--- a/bar.php
+++ b/bar.php
@@ -1 +1,4 @@
this is a file
-with nothing in it
+with some stuff in it
127
git diff
134. Pull Requests (PRs)
• An additional feature on top of core Git functionality.
• PRs do a diff comparison between two branches - usually
comparing a feature branch to the current state of master.
• Allows teammates to review code, ask questions, find
possible bugs before code hits production.
• Provides a nice visual way to confirm that the code in your
branch contains only the changes that you want!
163. ksylormiller:~/ohshitgit (feature-branch)$ git checkout master
On branch master
Your branch is behind 'origin/master' by 2 commits, and can be fast-
forwarded.
(use "git pull" to update your local branch)
nothing to commit, working tree clean
ksylormiller:~/ohshitgit (master)$
163
checkout master
164. ksylormiller:~/ohshitgit (master)$ git pull --rebase
Updating 74877c3..2ea524f
Fast-forward
fun.txt | 2 ++
1 file changed, 2 insertions(+)
Current branch master is up to date.
ksylormiller:~/ohshitgit (master)$
164
update master
165. ksylormiller:~/ohshitgit (master)$ git merge --squash feature-branch
Squash commit -- not updating HEAD
Automatic merge went well; stopped before committing as requested
165
Squash merging
177. View the history of a branch
1668d2f
HEAD
a4df41aaec56116dab6a7 912bde5
master
B C D E F
178. ksylormiller:~/ohshitgit (master)$ git log
commit 3c2335c50a1ad48a283a475e3d3f9ac445a20ff5
Author: Katie Sylor-Miller <katie@ohshitgit.com>
Date: Thu Jun 8 23:42:05 2017 -0400
Another awesome commit
A detailed message about this commit goes here
commit f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15
Author: Someone else <someone@ohshitgit.com>
Date: Thu Jun 8 23:39:36 2017 -0400
Oh hai this is a change
commit 4f9a80ff7732f252ffbe7841e96748707da1a78d
178
git log
179. ksylormiller:~/ohshitgit (master)$ git log --oneline
3c2335c Another awesome commit
f6e51fd Oh hai this is a change
91f6790 Meaningful commit message
4f9a80f Fake commit messages are hard
8a97966 Is anyone actually reading this?
97e8858 Lolz
4875652 Hello world
179
Short history
180. by Etsy seller Birdwoodshack
git reflog
is your magic
time machine
181. ksylormiller:~/ohshitgit (master)$ git reflog
3c2335c HEAD@{0}: rebase finished: returning to refs/heads/master
3c2335c HEAD@{1}: pull --rebase: lolz
f6e51fd HEAD@{2}: pull --rebase: checkout f6e51fdd6650c7bbc39895c0392ec6a9fb5a9c15
f4f4d99 HEAD@{3}: reset: moving to HEAD@{4}
f6e51fd HEAD@{4}: reset: moving to HEAD~
1ecad3a HEAD@{5}: rebase finished: returning to refs/heads/master
1ecad3a HEAD@{6}: rebase: lolz
f6e51fd HEAD@{7}: rebase: checkout origin/master
f4f4d99 HEAD@{8}: commit: lolz
4f9a80f HEAD@{9}: commit: Another awesome commit
4875652 HEAD@{10}: commit: Meaningful commit message
181
git reflog
182. HEAD notation
• HEAD@{index} : go to a specific point
• HEAD~ == HEAD@{currentindex+1} : back one action
• HEAD~x == HEAD@{currentindex+x} : back x actions
• Or, you can always reference by hash
183. ksylormiller:~/ohshitgit (master)$ git show HEAD@{8}
commit f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d
Author: Katie Sylor-Miller <katie@ohshitgit.com>
Date: Thu Jun 8 23:42:05 2017 -0400
lolz
diff --git a/bar.php b/bar.php
index f81fce0..bdd3cb3 100644
--- a/bar.php
+++ b/bar.php
@@ -1 +1,4 @@
this is a file
-with nothing
+with some lolz
183
git show
184. ksylormiller:~/ohshitgit (master)$ git checkout HEAD@{8}
Note: checking out 'HEAD@{8}'.
You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b new_branch_name
HEAD is now at a4df41a... Merge remote-tracking branch 'origin/master'
ksylormiller:~/ohshitgit (master) ((detached from a4df41a))$
184
git checkout
185. A detached HEAD is when your
HEAD points directly to a
commit or a tracking branch
(not an editable branch)
WTF is a detached HEAD?
187. • Checking out an existing branch - throws away any work you
might have done
• Create a new branch from this state - allows you to save any
work, or create a branch from any point in time
Re-attaching the HEAD
188. Checkout all the things
Checkout can be used to move the HEAD OR checkout can also
change the state of a file in the workspace (w/o moving HEAD)
• Discard workspace changes to a file or directory
git checkout -- path/to/file/or/dir/
• Reset file or dir to state in history (then commit to save!)
git checkout <commit hash> —-path/to/file/or/dir/
• Get state of a file or dir from another branch (then commit)
git checkout other-branch --path/to/file/or/dir/
194. Three basic types of resetting
Discards the changes
from the affected
commits
Leaves the changes
from the affected
commits in the
workspace (default)
--hard--mixed--soft
Leaves the changes
from the affected
commits in staging
199. Revert "lolz"
This reverts commit f4f4d996d44bbf824cdd22ace9e6d154d27c9a5d.
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Your branch is ahead of 'origin/master' by 3 commits.
# (use "git push" to publish your local commits)
#
# Changes to be committed:
# modified: bar.php
#
~
"~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C
199
ugh, vim again
202. Viewing and changing history: recap
• git log shows the history of your branch
• git reflog shows the history of the HEAD aka the magic time
machine
• git checkout lets you view a previous state of the repo in a
read-only “detached HEAD” state
• git reset lets you go back in time and change things
• git revert creates a new commit to undo changes
203. Viewing and Changing History
https://github.com/ksylor/clarity-workshop-exercises/tree/
master/exercise-5
Exercise 5
207. Why version your design system?
• You won’t get it perfect the first time, so you need to plan
for how to handle changes to your code.
• With versioning, you make controlled releases of changes to
your code, and consuming teams can chose which version
they use, and when and how to upgrade (or not!).
• Versions allow you to release breaking changes, e.g. a
change that will break existing uses of a pattern, without
disrupting existing users.
208. Semver (Semantic Versioning)
0.1.0
Major Release
Changes are not
backwards-
compatible with
prior versions
More info at semver.org
Minor Release
New functionality
is backwards-
compatible with
prior versions
Patch Release
Only contains
bug fixes, which
are backwards-
compatible
211. ksylormiller:~/ohshitgit (master)$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
211
npm init
212. package name: (clarity-workshop-example)
version: (1.0.0) 0.1.0
description: An example npm package for clarity workshop
entry point: (index.js)
test command:
git repository: (https://github.com/ksylor/clarity-workshop-example.git)
keywords:
author: Katie Sylor-Miller
license: (ISC)
About to write to /Users/ksylormiller/clarity-workshop-example/package.json:
212
npm init (cont)
213. {
"name": "clarity-workshop-example",
"version": "0.1.0",
"description": "An example npm package for clarity workshop",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ksylor/clarity-workshop-example.git"
},
"author": "Katie Sylor-Miller",
"license": "ISC",
"bugs": {
"url": "https://github.com/ksylor/clarity-workshop-example/issues"
},
"homepage": "https://github.com/ksylor/clarity-workshop-example#readme"
}
Is this OK? (yes) yes
213
npm init (cont)
214. ksylormiller:~/ohshitgit (master)$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
(use "git add <file>..." to include in what will be committed)
package.json
nothing added to commit but untracked files present (use "git add" to track)
214
package.json
221. ksylormiller:~/someotherproject (master)$ npm install --save-dev https://
github.com/ksylor/clarity-workshop-example/archive/v0.1.1.tar.gz
npm notice created a lockfile as package-lock.json. You should commit this
file.
+ clarity-workshop-example@0.1.0
added 1 package from 1 contributor and audited 1 package in 1.325s
found 0 vulnerabilities
221
add your package as a dependency to another project
235. • Set up your command line to show you what branch you are on
• Remember git status and git diff your BFFs
• Understand how staging works (subsequent changes to a file
are not reflected
• Use a feature branch so you don’t accidentally commit to
master!
Avoid the problem: Committing the wrong thing
238. 238
vim again :(
My wrong commit message
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Your branch is ahead of 'origin/master' by 3 commits.
# (use "git push" to publish your local commits)
#
# Changes to be committed:
# modified: bar.php
#
~
"~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C
239. 239
vim again :(
My right commit message
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Your branch is ahead of 'origin/master' by 3 commits.
# (use "git push" to publish your local commits)
#
# Changes to be committed:
# modified: bar.php
#
~
"~/ohshitgit/.git/COMMIT_EDITMSG" 14L, 450C
240. ksylormiller:~/ohshitgit (master)$ git commit --amend
[master f0c2e62] My correct commit message
1 file changed, 3 deletions(-)
240
Fix the problem: Entering the wrong commit message
241. ksylormiller:~/ohshitgit (master)$ git add file/i/forgot/to/commit.ext
ksylormiller:~/ohshitgit (master)$ git commit --amend —no-edit
[master 014035a] My commit message
1 file changed, 1 insertion(+), 3 deletions(-)
241
Fix the problem: Forgetting to commit a file, or just one small change
252. ksylormiller:~/ohshitgit (master)$ git stash list
stash@{0}: WIP on master: 3c2335c lolz
stash@{1}: WIP on feature-branch: a682e3a my feature rocks
stash@{2}: WIP on master: f6e51fd oh hai
stash@{3}: WIP on master: 6d4cf2d something else
252
git stash list
253. ksylormiller:~/ohshitgit (master)$ git stash save “started on ticket OSG-42”
Saved working directory and index state WIP on master: 3c2335c lolz
253
git stash save a better message
254. ksylormiller:~/ohshitgit (master)$ git stash list
stash@{0}: WIP on master: started on ticket OSG-42
stash@{1}: WIP on feature-branch: a682e3a my feature rocks
stash@{2}: WIP on master: f6e51fd oh hai
stash@{3}: WIP on master: 6d4cf2d something else
254
git stash list again
255. ksylormiller:~/ohshitgit (master)$ git stash show -p
diff --git a/bar.php b/bar.php
index ebc0bc8..a44188c 100644
--- a/bar.php
+++ b/bar.php
@@ -1,4 +1,8 @@
+aaaaaaa
+fdfjdklfjdsalf;j
fdafsdfas
fdafdsfdas
fdfadasfdas
this is a file
255
viewing a stash entry
256. ksylormiller:~/ohshitgit (master)$ git stash pop
On branch feature-branch
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: bar.php
ksylormiller:~/ohshitgit (master)$ git stash apply
256
pop changes back off the stack
258. Stash tips and tricks
• git stash --keep-index - leaves the index intact after
stashing changes.
• git stash --patch - opens interactive mode for deciding
what chunks of what files to stash.
• git stash —include-untracked - save untracked files
(w/o this flag untracked files are only included if they are in
the index)
259. ksylormiller:~/ohshitgit (master)$ git reset HEAD~ —soft
ksylormiller:~/ohshitgit (master)$ git stash
Saved working directory and index state WIP on master: 3c2335c lolz
ksylormiller:~/ohshitgit (master)$ git checkout feature-branch
Switched to branch ‘feature-branch’
259
Option 1: Fix committing to the wrong branch
260. ksylormiller:~/ohshitgit (feature-branch)$ git stash pop
On branch feature-branch
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: baz.php
modified: foo.php
no changes added to commit (use "git add" and/or "git commit -a")
Dropped refs/stash@{0} (3c0529b7e598984b78647f391eab1ca6fd7897a0)
ksylormiller:~/ohshitgit (feature-branch)$ git commit -am “on the right branch
now”
260
Option 1: Fix committing to the wrong branch
265. ksylormiller:~/ohshitgit (feature-branch)$ git checkout master
ksylormiller:~/ohshitgit (master)$ git reset --hard HEAD~
HEAD is now at fcebc22 my prior commit message
ksylormiller:~/ohshitgit (master)$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean
265
Option 2: Fix committing to the wrong branch
271. pick 2f5bae4 example feature branch
pick 0ee2a20 Another commit
# Rebase aaff258..0ee2a20 onto aaff258
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
~
"~/ohshitgit/.git/rebase-merge/git-rebase-todo" 20L, 670C
271
Interactive rebase
272. pick 2f5bae4 example feature branch
fixup 0ee2a20 Another commit
# Rebase aaff258..0ee2a20 onto aaff258
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
~
"~/ohshitgit/.git/rebase-merge/git-rebase-todo" 20L, 670C
272
Interactive rebase
273. ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i HEAD~2
[detached HEAD a682e3a] example feature branch
3 files changed, 5 insertions(+)
Successfully rebased and updated refs/heads/feature-branch.
273
Avoid rebasing problems: combine commits
275. ksylormiller:~/ohshitgit (master)$ git merge-base master feature-branch
3c2335c50a1ad48a283a475e3d3f9ac445a20ff5
ksylormiller:~/ohshitgit (feature-branch)$ git rebase -i 3c2335c
275
If you don’t know how many commits to go back
278. ksylormiller:~/ohshitgit (master)$ git merge --squash feature-branch
Squash commit -- not updating HEAD
Automatic merge went well; stopped before committing as requested
278
Squash merging
283. • Update your local master and origin/master all.the.time.
• Rebase your feature branches to stay up to date
• Periodically squash feature branch commits to reduce the
number of conflicts to resolve (esp. when rebasing)
• Communication with teammates
• If things don’t seem right, abort!
Avoid the problem: Merge conflicts
286. Merge master into your
feature branch
Rebase master against
your feature branch
Merge your feature
branch into master
Rebase your feature
branch against master
Merge and rebase in the right direction
DON’T DO
287. ksylormiller:~/ohshitgit (master)$ git merge feature-branch
Auto-merging conflict_file.txt
CONFLICT (content): Merge conflict in conflict_file.txt
Automatic merge failed; fix conflicts and then commit the result.
ksylormiller:~/ohshitgit (master)$ cat conflict_file.txt
<<<<<<< HEAD
this code
is from master
=======
this code
is from feature-branch
>>>>>>>> d34367
287
Conflict markers
290. Avoiding & getting out of messes: Recap
• Always be committing - commits are cheap and easy to use!
• git commit --amend for when you mess up a commit
• Always be branching - feature branch workflow FTW
• Stay up to date
• Squash branches into a single commit before rebasing
• Squash merge back into master
• Use a visual merge tool whenever you can