diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..fcab0b2 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +custom: paypal.me/PhlowMedia +patreon: phlow +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username diff --git a/.gitignore b/.gitignore index 2d2eb81..4276cbb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ -_site/ -.sass-cache/ +_site +.bundle .DS_Store +.jekyll-cache +.jekyll-metadata +.sass-cache +Gemfile.lock diff --git a/Gemfile b/Gemfile deleted file mode 100644 index ed09564..0000000 --- a/Gemfile +++ /dev/null @@ -1,13 +0,0 @@ -source 'https://rubygems.org' - -gem 'jekyll' - -group :jekyll_plugins do - gem 'jekyll-gist' - gem 'jekyll-paginate' - gem "jekyll-asciidoc" -end - -gem 'asciidoctor', '~> 1.5.4' -gem 'coderay', '1.1.1' - diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 01b92bd..0000000 --- a/Gemfile.lock +++ /dev/null @@ -1,68 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - addressable (2.5.0) - public_suffix (~> 2.0, >= 2.0.2) - asciidoctor (1.5.5) - coderay (1.1.1) - colorator (1.1.0) - faraday (0.10.0) - multipart-post (>= 1.2, < 3) - ffi (1.9.14) - forwardable-extended (2.6.0) - jekyll (3.3.1) - addressable (~> 2.4) - colorator (~> 1.0) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 3.0) - mercenary (~> 0.3.3) - pathutil (~> 0.9) - rouge (~> 1.7) - safe_yaml (~> 1.0) - jekyll-asciidoc (2.0.1) - asciidoctor (>= 1.5.0) - jekyll (>= 2.3.0) - jekyll-gist (1.4.0) - octokit (~> 4.2) - jekyll-paginate (1.1.0) - jekyll-sass-converter (1.5.0) - sass (~> 3.4) - jekyll-watch (1.5.0) - listen (~> 3.0, < 3.1) - kramdown (1.13.0) - liquid (3.0.6) - listen (3.0.8) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - mercenary (0.3.6) - multipart-post (2.0.0) - octokit (4.6.2) - sawyer (~> 0.8.0, >= 0.5.3) - pathutil (0.14.0) - forwardable-extended (~> 2.6) - public_suffix (2.0.4) - rb-fsevent (0.9.8) - rb-inotify (0.9.7) - ffi (>= 0.5.0) - rouge (1.11.1) - safe_yaml (1.0.4) - sass (3.4.22) - sawyer (0.8.1) - addressable (>= 2.3.5, < 2.6) - faraday (~> 0.8, < 1.0) - -PLATFORMS - ruby - -DEPENDENCIES - asciidoctor (~> 1.5.4) - coderay (= 1.1.1) - jekyll - jekyll-asciidoc - jekyll-gist - jekyll-paginate - -BUNDLED WITH - 1.13.6 diff --git a/README.md b/README.md index 5dca78c..efa2545 100644 --- a/README.md +++ b/README.md @@ -1,67 +1,6 @@ -[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=Phlow&url=https://github.com/Phlow/feeling-responsive&title=Support%20Feeling%20Responsive%20Jekyll%20Theme&language=en_GB&tags=github,jekyll,theme,webdesign&category=software) +This is the source of the course web page for UCSD CSE 15L in Winter 2022. +The page is live at https://ucsd-cse15l-w22.github.io/ -# Newsletter: Stay in Touch for Future Updates +It's based on a theme called *Feeling Responsive*? -If you are a webdesigner interested in Jekyll, the static website generator, this little newsletter is for you. I share tutorials, clever code snippets and information about my own Jekyll Themes called [*Feeling Responsive*][7] and [*Simplicity*][8]. Please don't expect weekly emails :) - -[![Subscribe to Jekyll Newsletter](https://phlow.github.io/static/tinyletter_subscribe_button.png)](https://tinyletter.com/feeling-responsive) - - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-1280x720.jpg)](https://www.youtube.com/embed/3b5zCFSmVvU) - -## A Responsive Jekyll Theme: *Feeling Responsive* - -Do you want to get to know *Feeling Responsive*? Than check it out first and have a look on its home at . - -To get to know *Feeling Responsive* check out all the features explained in the [documentation][1]. - -And what license is *Feeling Responsive* released under? [This one][2]. - - - -## Why use this theme? - -Feeling Responsive is heavily customizable. - -1. Language-Support :) -2. Optimized for speed and it's responsive. -3. Built on Foundation Framework. -4. Six different Headers. -5. Customizable navigation, footer,... - -**[More ›][3]** - - - -## Changelog - -*Feeling Responsive* is in active development. Thank you to everyone who contributed, especially [Róbert Papp][5], [Alexandra von Criegern](https://github.com/plutonik-a) and [Juan Jose Amor Iglesias](https://github.com/jjamor). - -**[Read Changelog ›][6]** - - - -## Video Tutorial - -Click the image to [watch the YouTube-Video-Tutorial][4]. - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-tutorial-frontpage.jpg)](https://www.youtube.com/watch?v=rLS-BEvlEyY) - - - - - - - - - [1]: http://phlow.github.io/feeling-responsive/documentation/ - [2]: https://github.com/Phlow/feeling-responsive/blob/gh-pages/LICENSE - [3]: http://phlow.github.io/feeling-responsive/info/ - [4]: https://www.youtube.com/watch?v=rLS-BEvlEyY - [5]: https://github.com/TWiStErRob - [6]: https://phlow.github.io/feeling-responsive/changelog/ - [7]: http://phlow.github.io/feeling-responsive/ - [8]: http://phlow.github.io/simplicity/ - [9]: # - [10]: # diff --git a/_config.yml b/_config.yml index ba6692a..97ae9fb 100644 --- a/_config.yml +++ b/_config.yml @@ -8,25 +8,25 @@ # /____/ # # Title of your website -title: 'Feeling Responsive' +title: 'UCSD CSE15L W22' # The slogan describes your website and is used on homepage in and other important places -slogan: 'A Flexible Theme for Jekyll' +slogan: 'Software Tools & Techniques' # The description is used on homepage and in the footer to quickly describe your website. Use a maximum of 150 characters for SEO-purposes. -description: '»Feeling Responsive« is a responsive theme for Jekyll based on the fabulous foundation framework with beautiful typography and a bright color palette.' +description: 'A course on software tools and techniques for students with some programming background.' # The credits show up in the includes/_footer.html – It would be nice of you to leave a link to Phlow or Feeling Responsive as a thank you :) -credits: '<p>Created with ♥ by <a href="http://phlow.de/">Phlow</a> with <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> based on <a href="http://phlow.github.io/feeling-responsive/">Feeling Responsive</a>.</p>' +credits: '<p>Created by Joe Politz, using <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> based on <a href="http://phlow.github.io/feeling-responsive/">Feeling Responsive</a> by <a href="http://phlow.de/">Phlow</a>.</p>' # Main author of the website # See > authors.yml -author: phlow +author: joe # This URL is the main address for absolute links. Don't include a slash at the end. # -url: 'https://phlow.github.io' -baseurl: '/feeling-responsive' +url: 'https://ucsd-cse15l-w22.github.io' +baseurl: '' # This is for the editing function in _/includes/improve_content # Leave it empty if your site is not on GitHub/GitHub Pages @@ -38,14 +38,14 @@ improve_content: https://github.com/Phlow/feeling-responsive/edit/gh-pages # Example: <img src="{{ site.urlimg }}{{ post.image.title }}" /> # Markdown-Example for posts ![Image Text]({{ site.urlimg }}image.jpg) # -urlimg: 'https://phlow.github.io/feeling-responsive/images/' +urlimg: 'https://ucsd-cse15l-w22.github.io/images/' # Logo size is 600x80 pixels logo: "logo.png" -# Gems -gems: +# Plugins +plugins: - jekyll-asciidoc - jekyll-gist - jekyll-paginate @@ -63,11 +63,11 @@ paginate_path: "blog/page:num" # Pagination path › Important for blog page i # Theme works best with Kramdown (using the table of contents function) -markdown: kramdown -permalink: /:categories/:title/ -highlight: rouge -excerpt_separator: "<!--more-->" -include: ['.htaccess'] +markdown : kramdown +permalink : /:categories/:title/ +highlight : rouge +excerpt_separator : "<!--more-->" +include : ['.htaccess'] # Exclude these files from your production _site exclude: - .sass-cache @@ -76,6 +76,7 @@ exclude: - LICENSE - README.md - INSTALL.md + - vendor # The language setting is used in /includes/header.html for html-settings @@ -136,17 +137,6 @@ defaults: -# _____ __________ -# / ___// ____/ __ \ -# \__ \/ __/ / / / / -# ___/ / /___/ /_/ / -# /____/_____/\____/ Verify Website to Webmaster Tools - -google_author: 'https://plus.google.com/u/0/118311555303973066167' -google_site_verification: 'Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ' -bing_webmastertools_id: '0FB4C028ABCF07C908C54386ABD2D97F' -# alexa_verify_id: '' - # ______ _ @@ -156,18 +146,10 @@ bing_webmastertools_id: '0FB4C028ABCF07C908C54386ABD2D97F' # /_/ \__,_/ |___/_/\___/\____/_/ /_/____/ Favicon-Crap: Favicons, Chrome, Android & Apple Touch Buttons # More information » https://mathiasbynens.be/notes/touch-icons -favicon-32x32: 'favicon-32x32.png' -touch-icon-192x192: 'touch-icon-192x192.png' -apple-touch-icon-180x180-precomposed: 'apple-touch-icon-180x180-precomposed.png' -apple-touch-icon-152x152-precomposed: 'apple-touch-icon-152x152-precomposed.png' -apple-touch-icon-144x144-precomposed: 'apple-touch-icon-144x144-precomposed.png' -apple-touch-icon-120x120-precomposed: 'apple-touch-icon-120x120-precomposed.png' -apple-touch-icon-114x114-precomposed: 'apple-touch-icon-114x114-precomposed.png' -apple-touch-icon-76x76-precomposed: 'apple-touch-icon-76x76-precomposed.png' -apple-touch-icon-72x72-precomposed: 'apple-touch-icon-72x72-precomposed.png' -apple-touch-icon-precomposed: 'apple-touch-icon-precomposed.png' -msapplication_tileimage: 'msapplication_tileimage.png' # Size 144x144 -msapplication_tilecolor: '#fabb00' +favicon-32x32 : 'CSELogo-color-vrable-thm.png' +touch-icon-192x192 : 'CSELogo-color-vrable-thm.png' +apple-touch-icon-180x180-precomposed : 'CSELogo-color-vrable-thm.png' +apple-touch-icon-152x152-precomposed : 'CSELogo-color-vrable-thm.png' # ______ __ __ @@ -176,9 +158,9 @@ msapplication_tilecolor: '#fabb00' # / __/ / /_/ / /__/ __/ /_/ / /_/ / /_/ / ,< # /_/ \__,_/\___/\___/_.___/\____/\____/_/|_| Facebook-Optimization › http://j.mp/fb_optimize -og_image: 'http://images.phlow.de/phlow/phlow_de-logo-512x.png' -og_locale: 'en_EN' -og_type: 'website' +og_image : 'CSELogo-color-vrable-thm.png' +og_locale : 'en_EN' +og_type : 'website' # _____ _ __ __ ___ ___ @@ -191,8 +173,8 @@ og_type: 'website' # socialmedia: - twitter: phlow - facebook: phlow.media + twitter : phlow + facebook : phlow.media # ____ _ @@ -204,7 +186,7 @@ socialmedia: # # used in _includes/comments -disqus_shortname: feelingresponsive +# disqus_shortname: # _____ @@ -215,8 +197,8 @@ disqus_shortname: feelingresponsive # sass: - sass_dir: _sass - style: :compressed + sass_dir : _sass + style : :compressed # ___ __ __ _ @@ -228,7 +210,7 @@ sass: # # used in _includes/footer_scripts -google_analytics_tracking_id: UA-60112281-1 +# google_analytics_tracking_id: @@ -264,7 +246,7 @@ google_analytics_tracking_id: UA-60112281-1 asciidoctor-enabled: false asciidoctor: - description: testtewtetrue + description: attributes: source-highlighter: coderay coderay-css: style diff --git a/_config_dev.yml b/_config_dev.yml index 5a5f83a..e8d645b 100644 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -20,7 +20,7 @@ sass: # trace_selectors: true # debug_info: true # FUTURE https://github.com/jekyll/jekyll-sass-converter/issues/12 - sourcemap: true + # sourcemap: true # Produces an error # Disable when not in production google_analytics_tracking_id: false diff --git a/_data/authors.yml b/_data/authors.yml index 491829f..5be2e44 100644 --- a/_data/authors.yml +++ b/_data/authors.yml @@ -5,10 +5,10 @@ # 3. Change default post/page authors in config.yml # # Resource › http://blog.sorryapp.com/blogging-with-jekyll/2014/02/06/adding-authors-to-your-jekyll-site.html -phlow: # replace this with your info - name: "Phlow" +joe: # replace this with your info + name: "Joe Politz" siterole: "webmaster, developer, copywriter, designer" - uri: http://phlow.de/ - email: - twitter: "@phlow" + uri: https://jpolitz.github.io + email: "jpolitz@eng.ucsd.edu" + twitter: "@joepolitz" # you can add more authors here \ No newline at end of file diff --git a/_data/language.yml b/_data/language.yml index e107f3e..41faefa 100644 --- a/_data/language.yml +++ b/_data/language.yml @@ -17,7 +17,7 @@ if_you_are_not_redirected_automatically: "If you are not redirected automaticall click_here: "click here" next_post_in: "Next Post in" previous_post_in: "Previous Post in" -breadcrumb_start: "Start" +breadcrumb_start: "Home" edit: "Edit" this_content_is_open_source: "This content is open source." help_improve_it: "Help improve it" diff --git a/_data/navigation.yml b/_data/navigation.yml index 749b176..5d8eca4 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -1,75 +1,26 @@ -- title: Start +- title: CSE15L url: "/" side: left -- title: Getting Started - url: "/getting-started/" +- title: Syllabus + url: "/syllabus/" side: left -- title: "Templates" - url: "/design/" +- title: "Weeks" + url: "/weeks/" side: left dropdown: - - title: "Grid & Colors" - url: "/design/grid/" - - title: "Typography" - url: "/design/typography/typography/" - - title: "Page/Post" - url: "/design/page/" - - title: "Post-Left-Sidebar" - url: "/design/post-left-sidebar/" - - title: "Post-Right-Sidebar" - url: "/design/post-right-sidebar/" - - title: "Page Full-Width" - url: "/design/page-fullwidth/" - - title: "Blog-Page" - url: "/blog/" - - title: "Video" - url: "/design/video/" - - title: "Gallery" - url: "/design/gallery/" - - title: "Portfolio" - url: "/design/portfolio/" + - title: "Week 1" + url: "/week/week1/" + - title: "Week 2" + url: "/week/week2/" + - title: "Week 3" + url: "/week/week3/" + - title: "Week 4" + url: "/week/week4/" + - title: "Week 5" + url: "/week/week5/" -- title: "Header Styles" - url: "/headers/" +- title: "Office Hours" + url: "/office-hours/" side: left - dropdown: - - title: "Header with Full-Width-Image" - url: "/design/header-full-width-image/" - - title: "Header with Image and Pattern" - url: "/design/header-image-pattern/" - - title: "Header with image and color" - url: "/design/header-image-color/" - - title: "Header Only With Logo" - url: "/design/header-logo-only/" - - title: "Header With Text" - url: "/design/header-with-text/" - - title: "No Header" - url: "/design/no-header/" - - title: "No Header but Image" - url: "/design/no-header-but-image/" - -- title: Documentation - url: "/documentation/" - side: left - dropdown: - - title: "Changelog" - url: "/changelog/" - - title: "Roadmap" - url: "/roadmap/" - -- title: Blog - url: "/blog/" - side: left - dropdown: - - title: "Blog Archive" - url: "/blog/archive/" - -- title: "Search" - url: "/search/" - side: right - -- title: "Contact" - url: "/contact/" - side: right diff --git a/_data/socialmedia.yml b/_data/socialmedia.yml index 16acb42..1ccd6b0 100644 --- a/_data/socialmedia.yml +++ b/_data/socialmedia.yml @@ -1,28 +1,3 @@ -- name: GitHub - url: http://github.com/phlow - class: icon-github - title: Code und mehr... - -- name: YouTube - url: http://www.youtube.com/PhlowMedia - class: icon-youtube - title: "Videos, Video-Anleitungen und Filme von Phlow auf YouTube" - -- name: Twitter - url: http://twitter.com/phlow - class: icon-twitter - title: "Immer das Neuste von Phlow gibt es auf Twitter" - -- name: Mixcloud - url: http://www.mixcloud.com/phlow/ - class: icon-cloud - title: "Mixe, was sonst?" - -- name: Phlow YouTube Google+ - url: https://plus.google.com/u/0/+Phlow - class: icon-googleplus - title: "YouTube Google+" - # - name: Facebook # url: http://www.facebook.com/ # class: icon-facebook diff --git a/_includes/_favicon.html b/_includes/_favicon.html index 3807a6e..4161f8b 100644 --- a/_includes/_favicon.html +++ b/_includes/_favicon.html @@ -1,7 +1,7 @@ {% comment %} -* +* * More Information › https://mathiasbynens.be/notes/touch-icons -* +* {% endcomment %} {% comment %} Regular Old-Skool Favicon: {% endcomment %} {% if site.favicon-32x32 %}<link rel="icon" sizes="32x32" href="{{ "/assets/img/" | absolute_url }}{{ site.favicon-32x32 }}">{% endif %} diff --git a/_includes/_footer_scripts.html b/_includes/_footer_scripts.html index a82968b..340973b 100755 --- a/_includes/_footer_scripts.html +++ b/_includes/_footer_scripts.html @@ -17,39 +17,6 @@ -{% if site.google_analytics_tracking_id %} -<script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); - ga('set', 'anonymizeIp', true); - ga('send', 'pageview'); - -</script> -{% endif %} - -{% comment %} -# Start of Tawk.to Script -# -# More information in _config.yml -# -{% endcomment %} -{% if site.tawkto_embed_uri and page.tawkto == true %} -<script type="text/javascript"> -var $_Tawk_API={},$_Tawk_LoadStart=new Date(); -(function(){ -var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; -s1.async=true; -s1.src='{{ site.tawkto_embed_uri }}'; -s1.charset='UTF-8'; -s1.setAttribute('crossorigin','*'); -s0.parentNode.insertBefore(s1,s0); -})(); -</script> -{% endif %} diff --git a/_includes/_frontpage-widget.html b/_includes/_frontpage-widget.html index e9fe020..1b5b76e 100644 --- a/_includes/_frontpage-widget.html +++ b/_includes/_frontpage-widget.html @@ -1,20 +1,29 @@ +{% comment %} +* +* First the include captures the url and image in a +* separate variable to make the code better readable. +* +* These variables are widget_url and widget_image +* +{% endcomment %} + +{% capture widget_url %}{% if include.widget.url == NULL %}{% elsif include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} + +{% capture widget_image %}{% if include.widget.image contains 'http' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}{% endcapture %} + + <div class="medium-4 columns frontpage-widget"> - {% capture widget_url %}{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} {% if include.widget.video %} {{ include.widget.video }} + {% elsif widget_url == empty %} + {% if widget_image != empty %}<img src="{{ widget_image }}" alt="" />{% endif %} {% else %} <a href="{{ widget_url }}"> - {% if include.widget.image %} - {%comment%}TODO lazy loading{%endcomment%} - {%comment%}<img class="lazy" data-src="{% if include.widget.image contains='http://' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}" alt="" />{%endcomment%} - {%comment%}<noscript>{%endcomment%} - {% capture widget_image %}{% if include.widget.image contains 'http' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}{% endcapture %} - <img src="{{widget_image}}" alt="" /> - {%comment%}</noscript>{%endcomment%} - {% endif %} + {% if widget_image != empty %}<img src="{{ widget_image }}" alt="" />{% endif %} </a> {% endif %} <h2 class="font-size-h3 t10">{{ include.widget.title }}</h2> - <p>{{ include.widget.text }}</p> - <p><a class="button tiny radius" href="{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}">{{ site.data.language.more }}</a></p> + + {% if include.widget.text != empty %}<p>{{ include.widget.text }}</p>{% endif %} + {% if widget_url != empty %}<p><a class="button tiny radius" href="{{ widget_url }}">{{ site.data.language.more }}</a></p>{% endif %} </div> \ No newline at end of file diff --git a/_includes/_head.html b/_includes/_head.html index 68a2391..102c595 100644 --- a/_includes/_head.html +++ b/_includes/_head.html @@ -46,9 +46,9 @@ <!-- Search Engine Optimization --> <meta name="description" content="{{ description }}"> - {% if site.google_site_verification %}<meta name="google-site-verification" content="{{ site.google_site_verification}}">{% endif %} + {% if site.google_site_verification %}<meta name="google-site-verification" content="{{ site.google_site_verification}}">{% endif %} {% if site.bing_webmastertools_id %}<meta name="msvalidate.01" content="{{ site.bing_webmastertools_id }}" >{% endif %} - {% if site.google_author %}<link rel="author" href="{{ site.google_author }}">{% endif %} + {% if site.yandex_site_verification %}<meta name="yandex-verification" content="{{ site.yandex_site_verification }}">{% endif %} {% if site.alexa_verify_id %}<meta name="alexaVerifyID" content="{{ site.alexa_verify_id }}">{% endif %} {% if page.noindex == true or layout.noindex == true %}<meta name="robots" content="noindex">{% endif %} <link rel="canonical" href="{{ url }}{{ page.url }}"> @@ -88,3 +88,13 @@ {% unless page.style == NULL %} <style type="text/css">{{ page.style }}</style> {% endunless %} + + {% if site.google_analytics_tracking_id %} + <script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', '{{ site.analytics.google.tracking_id }}', 'auto'); + ga('send', 'pageview'); + </script> + <script async src='https://www.google-analytics.com/analytics.js'></script> + {% endif %} + diff --git a/_includes/_meta_information.html b/_includes/_meta_information.html index e9b6253..ee515ee 100644 --- a/_includes/_meta_information.html +++ b/_includes/_meta_information.html @@ -9,23 +9,25 @@ {% endif %} {% if page.date %} - <time class="icon-calendar pr20" datetime="{{ page.date | date: "%Y-%m-%d" }}" itemprop="datePublished"> {{ page.date | date: "%Y-%m-%d" }}</time> + <time class="icon-calendar pr20" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished"> {{ page.date | date: "%Y-%m-%d" }}</time> {% endif %} - {% if page.categories %}<span class="icon-archive pr20"> {{ page.categories | join: ' · ' | upcase }}{% endif %}</span> + {% if page.categories != empty %}<span class="icon-archive pr20"> {{ page.categories | join: ' · ' | upcase }}{% endif %}</span> <br /> <span class="pr20">{% for tag in page.tags %}<span class="icon-price-tag pr10"> {{tag}}</span> {% endfor %}</span> </p> + {% if page.collection == "posts" %} <div id="post-nav" class="row"> {% if page.previous.url %} - <div class="small-5 columns"><a class="button small radius prev" href="{{ site.url }}{{ site.baseurl }}{{page.previous.url}}">« {{page.previous.title}}</a></div><!-- /.small-4.columns --> + <div class="medium-5 columns"><a class="button small radius prev" href="{{ site.url }}{{ site.baseurl }}{{page.previous.url}}">« {{page.previous.title}}</a></div><!-- /.small-4.columns --> {% endif %} - <div class="small-2 columns text-center"><a class="radius button small" href="{{ site.url }}{{ site.baseurl }}/blog/archive/" title="Blog {{ site.data.language.archive }}">{{ site.data.language.archive }}</a></div><!-- /.small-4.columns --> + <div class="medium-2 columns text-center"><a class="button small radius expand" href="{{ site.url }}{{ site.baseurl }}/blog/archive/" title="Blog {{ site.data.language.archive }}">{{ site.data.language.archive }}</a></div><!-- /.small-4.columns --> {% if page.next.url %} - <div class="small-5 columns text-right"><a class="button small radius next" href="{{ site.url }}{{ site.baseurl }}{{page.next.url}}">{{page.next.title}} »</a></div><!-- /.small-4.columns --> + <div class="medium-5 columns text-right"><a class="button small radius next" href="{{ site.url }}{{ site.baseurl }}{{page.next.url}}">{{page.next.title}} »</a></div><!-- /.small-4.columns --> {% else %} - <div class="small-5 columns text-right"></div><!-- /.small-4.columns --> + <div class="medium-5 columns text-right"></div><!-- /.small-4.columns --> {% endif %} </div> - </div><!-- /.page-meta --> \ No newline at end of file + {% endif %} + </div><!-- /.page-meta --> diff --git a/_includes/_navigation.html b/_includes/_navigation.html index a44ea0d..884fdc9 100644 --- a/_includes/_navigation.html +++ b/_includes/_navigation.html @@ -1,3 +1,9 @@ +{% comment %} +* +* To customize the navigation of *Feeling Responsive*, +* edit `_data/navigation.yml`. +* +{% endcomment %} <div id="navigation" class="sticky"> <nav class="top-bar" role="navigation" data-topbar> <ul class="title-area"> @@ -5,7 +11,7 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class="icon-tree"> {{ site.title }}</a></h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> - <li class="toggle-topbar menu-icon"><a href="#"><span>Navigation</span></a></li> + <li class="toggle-topbar menu-icon"><a href="#"><span>Nav</span></a></li> </ul> <section class="top-bar-section"> {% comment %} @@ -23,25 +29,30 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class {% if link.url contains 'http' %} {% assign domain = '' %} + {% assign _baseurl = '' %} {% elsif link.url == '#' %} {% assign domain = '' %} + {% assign _baseurl = site.baseurl %} {% else %} {% assign domain = site.url %} + {% assign _baseurl = site.baseurl %} {% endif %} + + {% comment %} If there are links for right side begin {% endcomment %} {% if link.side == 'right' %} {% comment %} If right side WITHOUT dropdown menu do {% endcomment %} {% if link.dropdown == nil %} <li class="divider"></li> - <li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li> + <li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li> {% comment %} If right side WITH dropdown menu do {% endcomment %} {% else %} <li class="divider"></li> <li class="has-dropdown{% if link.url == page.url %} active{% endif %}"> - <a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a> + <a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a> <ul class="dropdown"> {% for dropdown_link in link.dropdown %} @@ -52,7 +63,7 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class {% assign domain = site.url %} {% endif %} - <li><a href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li> + <li><a {% if dropdown_link.class %}class="{{dropdown_link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li> {% endfor %} </ul> @@ -77,10 +88,13 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class {% if link.url contains 'http' %} {% assign domain = '' %} + {% assign _baseurl = '' %} {% elsif link.url == '#' %} {% assign domain = '' %} + {% assign _baseurl = site.baseurl %} {% else %} {% assign domain = site.url %} + {% assign _baseurl = site.baseurl %} {% endif %} {% comment %} If there are links for left side begin {% endcomment %} @@ -88,14 +102,14 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class {% comment %} If left side WITHOUT dropdown menu do {% endcomment %} {% if link.dropdown == nil %} - <li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li> + <li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li> <li class="divider"></li> {% comment %} If left side WITH dropdown menu do {% endcomment %} {% else %} <li class="has-dropdown{% if link.url == page.url %} active{% endif %}"> - <a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a> + <a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a> <ul class="dropdown"> {% for dropdown_link in link.dropdown %} @@ -106,7 +120,7 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class {% assign domain = site.url %} {% endif %} - <li><a href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li> + <li><a {% if dropdown_link.class %}class="{{dropdown_link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li> {% endfor %} </ul> diff --git a/_includes/_pagination.html b/_includes/_pagination.html index 714c6a9..2a0128e 100644 --- a/_includes/_pagination.html +++ b/_includes/_pagination.html @@ -13,11 +13,11 @@ <p class="subheadline">{{ post.categories | join: ' · ' | prepend: '<span class="subheader">' | append: '</span>' }}{% if post.categories != empty and post.subheadline != NULL %} – {% endif %}{{ post.subheadline }}</p> <h2><a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2> <p> - {% if post.image.thumb %}<a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ post.title escape_once }}"><img src="{{ site.urlimg }}{{ post.image.thumb }}" class="alignleft" width="150" height="150" alt="{{ page.title escape_once }}"></a>{% endif %} + {% if post.image.thumb %}<a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ post.title | escape_once }}"><img src="{{ site.urlimg }}{{ post.image.thumb }}" class="alignleft" width="150" height="150" alt="{{ page.title escape_once }}"></a>{% endif %} {% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %} - <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ site.data.language.read }} {{ post.title escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a> + <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}" title="{{ site.data.language.read }} {{ post.title | escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a> </p> </div><!-- /.small-12.columns --> </div><!-- /.row --> diff --git a/_includes/gallery b/_includes/gallery index f032def..9a9583a 100644 --- a/_includes/gallery +++ b/_includes/gallery @@ -30,7 +30,7 @@ {% capture url %}{{ item.image_url }}{% endcapture %} {% assign split_url = url | split: '.' %} {% capture thumb_url %}{{split_url[0]}}-thumb.{{split_url[1]}}{% endcapture %} - <li><a href="{{ site.urlimg }}{{ item.image_url }}"><img {% if item.caption %}data-caption="{{ item.caption }}"{% endif %} src="{{ site.urlimg }}{{ thumb_url }}" alt=""></a></li> + <li><a href="{{ site.urlimg }}{{ item.image_url }}"><img {% if item.caption %}data-caption="{{ item.caption }}"{% endif %} src="{{ site.urlimg }}{{ thumb_url }}" alt="{{ item.caption }}"></a></li> {% endfor %} </ul> -</div> \ No newline at end of file +</div> diff --git a/_includes/list-collection b/_includes/list-collection index 5316645..b0a26f1 100644 --- a/_includes/list-collection +++ b/_includes/list-collection @@ -6,7 +6,7 @@ * If you set »published: false« in front matter of a collection page * the page gots filtered out via unless * -* Example: {% include list-collection ollection='wordpress' %} +* Example: {% include list-collection collection='wordpress' %} * {% endcomment %} diff --git a/_layouts/default.html b/_layouts/default.html index 641198a..d393201 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -14,10 +14,6 @@ {% include _masthead.html %} {{ content }} - {% unless page.skip_boilerplate %} - {% include _footer.html %} - {% endunless %} - {% include _footer_scripts.html %} </body> </html> diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index 4c7421d..5cd18d0 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -1,6 +1,7 @@ --- layout: default format: frontpage +header: no --- <div id="header-home"> <div class="row"> @@ -10,54 +11,6 @@ </div><!-- /#header-home --> -{% comment %} -* -* First check, if widget is empty or not by checking if there is a title -* -{% endcomment %} -<div class="row t60"> - {% if page.widget1.title %} - {% include _frontpage-widget.html widget=page.widget1 %} - {% endif %} - - - {% if page.widget2.title %} - {% include _frontpage-widget.html widget=page.widget2 %} - {% endif %} - - - {% if page.widget3.title %} - {% include _frontpage-widget.html widget=page.widget3 %} - {% endif %} -</div><!-- /.row --> - - - -{% comment %} -* -* First check, if there is a call for action-button -* -{% endcomment %} -{% if page.callforaction.url contains 'http' %} -{% assign url = '' %} -{% else %} -{% capture url %}{{ site.url }}{{ site.baseurl }}{% endcapture %} -{% endif %} -{% if page.callforaction %} - <div class="row t60 b60"> - <div class="small-12 text-center columns"> - <a class="button large radius {{ page.callforaction.style }}" href="{{ url }}{{ page.callforaction.url }}"{% if page.callforaction.url contains 'http' %} target="_blank" {% endif %}>{{ page.callforaction.text }}</a> - </div><!-- /.small-12.columns --> - </div><!-- /.row --> -{% endif %} - - - -{% comment %} -* -* First check, if there are any posts at all -* -{% endcomment %} {% unless site.posts == empty %} <div class="row t30 b20 homepage"> diff --git a/_posts/design/2014-09-10-portfolio.md b/_posts/design/2014-09-10-portfolio.md index f664bf4..b009360 100755 --- a/_posts/design/2014-09-10-portfolio.md +++ b/_posts/design/2014-09-10-portfolio.md @@ -10,31 +10,31 @@ categories: <div class="row t60"> <div class="medium-6 columns b30"> - <img src="{{ site.urlimg }}webdesign_screenshot_nixdorf.jpg" alt=""> - <p> Website: Nixdorf Internatsberatung & Schulberatung</p> + <img src="{{ site.urlimg }}webdesign_screenshot_jcorneille.jpg" alt=""> + <p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p> </div><!-- /.medium-6.columns --> <div class="medium-6 columns b30"> - <img src="{{ site.urlimg }}webdesign_screenshot_jcorneille.jpg" alt=""> - <p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p> + <img src="{{ site.urlimg }}webdesign_screenshot_phlow.jpg" alt=""> + <p>Website: <a href="https://phlow.de/">Phlow.de</a></p> </div><!-- /.medium-6.columns --> </div><!-- /.row --> <div class="row t30"> <div class="medium-4 columns"> - <img src="{{ site.urlimg }}webdesign_screenshot_stilwandel.jpg" alt=""> - <p>Website: <a href="http://stilwandel-koeln.de">Stilwandel-Koeln.de</a></p> + <img src="{{ site.urlimg }}webdesign_screenshot_andersneu.jpg" alt=""> + <p>Website: <a href="https://andersneu.de/">andersneu.de</a></p> </div><!-- /.medium-4.columns --> <div class="medium-4 columns"> - <img src="{{ site.urlimg }}webdesign_screenshot_tarnkappe.jpg" alt=""> - <p>Website: <a href="http://tarnkarppe.info">Tarnkappe.info</a></p> + <img src="{{ site.urlimg }}webdesign_screenshot_mosonic.jpg" alt=""> + <p>Website: <a href="https://mosonic.net/">mosonic.net</a></p> </div><!-- /.medium-4.columns --> <div class="medium-4 columns"> - <img src="{{ site.urlimg }}webdesign_screenshot_schriefer.jpg" alt=""> - <p>Website: <a href="http://www.psychotherapie-schriefer.de/">Praxis für psychologische Psychotherapie Simone Schriefer</a></p> + <img src="{{ site.urlimg }}webdesign_screenshot_moritz_sauer.jpg" alt=""> + <p>Website: <a href="https://moritz.sauer.io/">Webdesign, SEO, Music</a></p> </div><!-- /.medium-4.columns --> </div><!-- /.row --> diff --git a/_posts/design/2015-08-16-typography.md b/_posts/design/2015-08-16-typography.md index 8534662..545205b 100755 --- a/_posts/design/2015-08-16-typography.md +++ b/_posts/design/2015-08-16-typography.md @@ -30,8 +30,6 @@ categories: </div> </div><!-- /.medium-4.columns --> - - <div class="medium-8 medium-pull-4 columns" markdown="1"> ## Lato – A Sans Serif Typeface Family @@ -281,18 +279,13 @@ Need a break? I give you three!<br><br><br> If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2] - - [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list [2]: http://phlow.de/ [3]: http://en.wikipedia.org/wiki/Ed_Benguiat [4]: https://www.google.com/fonts/specimen/Lato [5]: https://www.google.com/fonts/specimen/Volkhov [6]: http://www.latofonts.com/ - [7]: http://modularscale.com/ - [8]: # - [9]: # - [10]: # + [7]: https://www.modularscale.com/ [^1]: Find out more about Kramdown on <http://kramdown.gettalong.org/> @@ -379,12 +372,6 @@ element</td> </tr> </table> - - - - - - </div><!-- /.medium-8.columns --> </div><!-- /.row --> diff --git a/_posts/weeks/2022-01-03-week1.md b/_posts/weeks/2022-01-03-week1.md new file mode 100644 index 0000000..095a7c7 --- /dev/null +++ b/_posts/weeks/2022-01-03-week1.md @@ -0,0 +1,425 @@ +--- +layout: page-fullwidth +subheadline: Week 1 +published: true +title: "Week 1 – Remote Access and the Filesystem" +tags: + - post week remote-access +categories: + - week +header: no +todos: + - due-date: "11:59am (just before noon) TUESDAY January 4, 2021" + name: "Welcome Survey" + url: "https://docs.google.com/forms/d/e/1FAIpQLScKzAoVbuek33KAW_Gj29ff7JcUbMDxjq0WdBn1DxxydPaUZA/viewform" + - due-date: "11:59am (just before noon) WEDNESDAY January 5, 2021" + name: "Quiz 1 (released after class Monday)" + url: "https://www.gradescope.com" +notes: + - name: "1pm Wednesday" + url: "https://drive.google.com/file/d/17DV-JqmU0Kmdn2pMuLmm4Xx5Lqt24qyB" + - name: "2pm Wednesday" + url: "https://drive.google.com/file/d/1LP-nxyuE403uUeIb9N2Lvko5N3nk77HM" + - name: "3pm Wednesday" + url: "https://drive.google.com/file/d/1yrBmdDwZi1EhxEWRZ-L2LYENaSSlTSVm" +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius fixed-toc" data-options="sticky_on:large" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + +## Due Dates & Links + +<ul> +{% for todo in page.todos %} +<li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> +{% endfor %} +</ul> + +## Lecture Materials + +{% for note in page.notes %} +<a href="{{ note.url }}">{{ note.name }}</a> +<iframe src="{{ note.url }}/preview" width="640" height="480" allow="autoplay"></iframe> +{% endfor %} + +## Lab Tasks + +In this lab you'll set your computer up for remote access to the CSE lab +computers and practice with commands that work with the filesystem. + +### Part 1 – Meet Your Group! + +We've organized everyone into groups of 6-7 students for discussion. These +groups will be somewhat stable throughout the quarter, though some small changes +might happen. You will have a tutor or TA assigned to your group for help and +discussion. + +We ask that you turn your camera on when in your small groups unless you are +unable to for some reason. + +Your discussion leader will share a Google Doc with your group where you can +fill in notes as you work; this document is only for your group. Your discussion +leader will _not_ take notes for you, you can have someone volunteer to take +notes or come up with a way to share the role. + +**Write down in notes** In your groups, share, and note in the running notes +document (discussion leaders, you answer these as well!): + +- How you'd like people to refer to you (pronounce your name/nickname, pronouns +like he/her/they, etc) +- Your major +- **One** of: + - A UCSD student organization you're a member of or interested in + - What UCSD college you're in + - Where you're calling in from + +### Part 2 – Visual Studio Code + +**In Your Group for 10 minutes** + +Go to the Visual Studio Code website +[https://code.visualstudio.com/](https://code.visualstudio.com/), and follow the +instructions to download and install it on your computer. There are versions for +all the major operating systems, like OSX (for Macs) and Windows (for PCs). If +you only have access to a tablet or Chromebook while remote, you won't be able +to install it right now. If you don't, you should chat your lab leader and let +them know, and for any pair activities this week and next we will make sure to +pair you with someone who does. + +If you run into an error installing Visual Studio Code, speak up! You can +screenshare and ask for help, and the tutor or someone in your group might be +able to answer for you! + +When it is installed, you should be able to open a window that looks like this +(it might have different colors, or a different menu bar, depending on your +system and settings): + +![/images/vscode.png](/images/vscode.png) + +**Write down in notes**: Everyone should share a screenshot of VScode open – +help folks figure it out if it won't install. If someone gets stuck, take a +screenshot of the error message or point at which they are stuck so we can help +them figure it out later, and they can decide to keep trying (potentiall with +the tutor helping) or move on. When moving on, make sure they can see someone's +screenshare to follow along! + +### Part 3 – Remotely Connecting + +**In Your Group for 15 minutes** + +Many courses in CSE use course-specific accounts. These are similar to accounts +you might get on other systems at other institutions (or a future job). We'll +see how to use VScode to connect to a remote computer over the Internet to do +work there. + +There is a first step you need if you're on Windows: install a program called +OpenSSH, which is a program that can connect your computer to other computers +that have this kind of account: + +[Install OpenSSH](https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_install_firstuse) + +Then, look up your course-specific account for CSE15L here: + +[https://sdacs.ucsd.edu/~icc/index.php](https://sdacs.ucsd.edu/~icc/index.php) + +Then, in Visual Studio Code, we are going to connect to the remote computer +using VSCode's remote option. For reference, we're following the steps in +[“Connect to a remote +host”](https://code.visualstudio.com/docs/remote/ssh#_connect-to-a-remote-host) +step. + +For the first step, open a terminal in VSCode (Ctrl or Command + \`, or use the +Terminal → New Terminal menu option). Your command will look like this, but +with the `zz` replaced by the letters in your course-specific account. + +``` +$ ssh cs15lwi22zz@ieng6.ucsd.edu +``` + +(That's one, five, l (not one); the one and l look very close in some fonts.) + +Since this is likely the first time you've connected to this server, you will +probably get a message like this: + +``` +⤇ ssh cs15lwi22zz@ieng6.ucsd.edu +The authenticity of host 'ieng6.ucsd.edu (128.54.70.227)' can't be established. +RSA key fingerprint is SHA256:ksruYwhnYH+sySHnHAtLUHngrPEyZTDl/1x99wUQcec. +Are you sure you want to continue connecting (yes/no/[fingerprint])? +``` + +I (Joe) always say yes to these messages when I'm connecting to a new server for +the first time; it's expected to get this message in that case. If you get this +message when you're connecting to a server you connect to _often_, it could mean +someone is trying to listen in on or control the connection. This answer is a +decent description of what's going on: [Ben Voigt's +answer](https://superuser.com/questions/421074/ssh-the-authenticity-of-host-host-cant-be-established/421084#421084) + +So type `yes` and press enter, then give your password; the whole interaction +should look something like this once you give your password and are logged in: + +``` +⤇ ssh cs15lwi22zz@ieng6.ucsd.edu +The authenticity of host 'ieng6-202.ucsd.edu (128.54.70.227)' can't be established. +RSA key fingerprint is SHA256:ksruYwhnYH+sySHnHAtLUHngrPEyZTDl/1x99wUQcec. +Are you sure you want to continue connecting (yes/no/[fingerprint])? +Password: +Last login: Sun Jan 2 14:03:05 2022 from 107-217-10-235.lightspeed.sndgca.sbcglobal.net +quota: No filesystem specified. +Hello cs15lwi22zz, you are currently logged into ieng6-203.ucsd.edu + +You are using 0% CPU on this system + +Cluster Status +Hostname Time #Users Load Averages +ieng6-201 23:25:01 0 0.08, 0.17, 0.11 +ieng6-202 23:25:01 1 0.09, 0.15, 0.11 +ieng6-203 23:25:01 1 0.08, 0.15, 0.11 + +Sun Jan 02, 2022 11:28pm - Prepping cs15lwi22 +``` + +Now your terminal is connected to a computer in the CSE basement, and any +commands you run will run on that computer! We call your computer the _client_ +and the computer in the basement the _server_ based on how you are connected. + +If, in this process, you run into errors and can't figure out how to proceed, +ask! When you ask, take a screenshot of your problem and add it to your group's +running notes document, then describe what the fix was. If you don't know how to +take a screenshot, ask! + +Remember – it is **rare** for a tutorial to work perfectly. We often have to +stop, think, guess, Google search, ask someone, etc. in order to get things to +work the way the tutorial says. I look up the right way to describe the +`(yes/no)` answer on first login all the time, for example. So you are helping +your group _learn about potential issues_ when you do this, and that's a major +learning outcome of the course! If you see someone else have an issue that you +didn't, ask why, and what might be different about what you did, or how your +environment is set up. You will learn by reflecting on this. + +**Write down in notes** When you're done, **discuss** what you saw upon login. +Take a screenshot or copy/paste the output. Did you all see the same thing? What +might the differences mean? Note the results of your discussion in the notes +document. + +### Part 4 – Run Some Commands + +Try running the commands `cd`, `ls`, `pwd`, `mkdir`, and `cp` a few times in +different ways, both on *your* computer, and on the remote computer after +ssh-ing. Discuss in your group what you see. Can you cause them to produce +error messages? What do they mean? If you're on Windows, what happens when you +use them on Windows? + +Here are some specific useful commands to try: + +- `cd ~` +- `cd` +- `ls -lat` +- `ls -a` +- `ls <directory>` where `<directory>` is +`/home/linux/ieng6/cs15lwi22/cs15lwi22abc`, where the `abc` is one of the other +group members' username +- `cp /home/linux/ieng6/cs15lwi22/public/hello.txt ~/` +- `cat /home/linux/ieng6/cs15lwi22/public/hello.txt` + +**Write down in notes**: Copy at least one example from each group member, with +an explanation, into your shared notes doc. + +Hint: To log out of the remote server in your terminal, you can use: + +- Ctrl-D +- Run the command `exit` + +You can also open more terminals in VSCode (there is a little + button at the +top of the terminal window where you can create another). + +### Part 5 – Moving Files over SSH with scp + +So far we've seen how we can do some work on local and remote computers. One key +step in _working remotely_ is being able to copy files back and forth between +the computers. There are lots of options for how to do this – you might have +done it yourself in the past by sending yourself an email, or storing it in +Google Drive or Dropbox and accessing it from the another computer later. + +We'll see now another way to copy a file (or many files!) from your computer to +a remote computer. The command is called `scp`, and we will always run it from +the _client_ (that means from your computer, not logged into `ieng6`). Create a +file on your computer called `WhereAmI.java` and put the following contents into it: + +``` +class WhereAmI { + public static void main(String[] args) { + System.out.println(System.getProperty("os.name")); + System.out.println(System.getProperty("user.name")); + System.out.println(System.getProperty("user.home")); + System.out.println(System.getProperty("user.dir")); + } +} +``` + +Run it using `javac` and `java` on your computer. What do you see? (If you don't +have `java` installed on your computer, skip this step). + +Then, in the terminal from the directory where you made this file, run this +command (as usually, using your username): + +``` +scp WhereAmI.java cs15lwi22zz@ieng6.ucsd.edu:~/ +``` + +You should be prompted for a password just like when you log in with `ssh`. If +you get errors, ask your group members for help! You'll all learn. + +Then, log into ieng6 with ssh again, and use `ls`. You should see the file there +in your home directory! Now you can run it _on the ieng6 computer_ using `javac` +and `java`. Since `java` is installed on the _server_, everyone should be able +to run it no matter the client. + +**Write answer in notes**: Try to get a screenshot of everyone successfully +*using `scp` and `ssh`. If someone can't, no worries! Get a screenshot of where +*they got stuck (don't try to resolve an error for more than a few minutes) and +*put that in the notes so we can help with it later. + +**Write answer in notes**: What's different about the output when you run this +on the client vs. the server? What does this mean for what `getProperty` does? + +What we see here is one solution for running code remotely – we can copy files +to a remote server with `scp`, then log in and run them there. + +Before you go on, do the following: + +- Have someone on your team start a timer +- Make a change to WhereAmI.java and save the file +- Copy the file to the remote server +- Log into the remote server and run the file +- Stop the timer + +**Write answer in notes**: How long did it take you? (Not everyone has to do +this, but someone should.) Assume you'd have to do this process 100 times over +the course of a PA. How long would you spend copying and running the file? + +### Part 6 – SSH Keys + +So far, we've seen how to log in, run commands, and copy files to a remote +server with `ssh` and `scp`. Every time we log in or run `scp`, we have to type +(or copy-paste) our password. This is frustrating, time consuming, and +interrupts whatever task we were trying to do. Naturally, we should look into if +there are ways to avoid this repetitive, frustrating task with a configuration +or program. + +In this case, there is a great solution – `ssh` keys. The idea behind ssh keys +is that a program, called `ssh-keygen`, creates a pair of files called the +_public key_ and _private key_. You copy the public key to a particular location +on the server, and the private key in a particular location on the client. Then, +the `ssh` command can use the pair of files in place of your password. This is a +common setup step in lots of work environments that involve code on a server. + +Here's what you should run to set this up: + +``` +# on client (your computer) +$ ssh-keygen +Generating public/private rsa key pair. +Enter file in which to save the key (/Users/joe/.ssh/id_rsa): /Users/joe/.ssh/id_rsa +Enter passphrase (empty for no passphrase): +Enter same passphrase again: +Your identification has been saved in /Users/joe/.ssh/id_rsa. +Your public key has been saved in /Users/joe/.ssh/id_rsa.pub. +The key fingerprint is: +SHA256:jZaZH6fI8E2I1D35hnvGeBePQ4ELOf2Ge+G0XknoXp0 joe@Joes-Mac-mini.local +The key's randomart image is: ++---[RSA 3072]----+ +| | +| . . + . | +| . . B o . | +| . . B * +.. | +| o S = *.B. | +| = = O.*.*+| +| + * *.BE+| +| +.+.o | +| .. | ++----[SHA256]-----+ +``` + +If you're on Windows, follow the extra `ssh-add` steps here: [https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_keymanagement#user-key-generation](https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_keymanagement#user-key-generation) + +This created two new files on your system; the private key (in a file `id_rsa`) +and the public key (in a file `id_rsa.pub`), stored in the `.ssh` directory on +your computer. + +Now we need to copy the _public_ (not the private) key to the `.ssh` directory +of your user account on the server. + +``` +$ ssh cs15lwi22zz@ieng6.ucsd.edu +<Enter Password> +# now on server +$ mkdir .ssh +$ <logout> +# back on client +$ scp /Users/joe/.ssh/id_rsa.pub cs15lwi22@ieng6.ucsd.edu:~/.ssh/authorized_keys +# You use your username and the path you saw in the command above +``` + +Once you do this, you should be able to `ssh` or `scp` from this client to the +server without entering your password. + +**Write down in notes**: Try to get everyone to the point where they can do +this, and take a screenshot of logging in without a password. If you can't, +share a screenshot and description of where you got stuck! + +**Write down in notes**: Repeat the timing experiment of editing and running +`WhereAmI.java` now that you don't have to use a password. How much time is saved +per run? + +### Part 7 – Making Remote Running Even More Pleasant + +Use what you've learned to come up with the most pleasant process you can for +making a _local_ edit to `WhereAmI.java`, then copying it to the remote server and +running it. + +Some hints: + +- You can write a command in quotes at the end of an `ssh` command to directly +run it on the remote server, then exit. For example, this command will log in +and list the home directory on the remote server: + ``` + $ ssh cs15lwi22@ieng6.ucsd.edu "ls" + ``` +- You can use semicolons to run multiple commands on the same line in most +terminals. For example, try: + ``` + $ cp WhereAmI.java OtherMain.java; javac OtherMain.java; java WhereAmI + ``` +- You can use the up-arrow on your keyboard to recall the last command that was +run + +**Write down in notes** First try using just what we learned in this lab, and +document the best process you came up with. Try to get the total time for a run +after editing and saving to under 10 total keystrokes/mouse clicks, including all +typing. + +If you have more time, brainstorm other ideas or search for other ways you might +easily run remote code. + +### Part 8 – Wrapup + +Discuss with your team – do you have any open questions about things you saw +that you don't understand? Write them down in your notes document or ask your +tutor. Even if they don't know, writing them down means we can come back to them +later! + +If you _didn't_ get everything to work, that's OK! Keep trying and make sure +your tutor knows if you're totally stuck getting something set up; we'll be +posting some office hours soon where you can come to get unstuck as well. + +</div> \ No newline at end of file diff --git a/_posts/weeks/2022-01-10-week2.md b/_posts/weeks/2022-01-10-week2.md new file mode 100644 index 0000000..236b70f --- /dev/null +++ b/_posts/weeks/2022-01-10-week2.md @@ -0,0 +1,449 @@ +--- +layout: page-fullwidth +subheadline: Week 2 +published: true +title: "Week 2 – Github and Github Pages" +tags: + - post week +categories: + - week +header: no +todos: + - due-date: "11:59am January 12, 2021" + name: "Quiz 2" + url: "https://www.gradescope.com" + - due-date: "5pm January 14, 2021" + name: "First Lab Report" + url: "/week/week2/#week-2-lab-report" +notes: + - name: "1pm Monday" + url: "https://drive.google.com/file/d/1k9e_cGE3qgqmIBPKT78Uvj0WaHbYq5eY" + - name: "2pm Monday" + url: "https://drive.google.com/file/d/1ryM2EhHZrpaPCrwQ7fHmte7kHJB5q32N" + - name: "3pm Monday" + url: "https://drive.google.com/file/d/1y45DTtVwwZbCjVrKIuEyfh-W6Tzx16Cu" + - name: "Wednesday (best copy)" + url: "https://drive.google.com/file/d/1KAEx5MBZp6Ll5MQwjl6FDR367So8I9Lz" +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius fixed-toc" data-options="sticky_on:large" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + +## Due Dates & Links + +<ul> +{% for todo in page.todos %} +<li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> +{% endfor %} +</ul> + +## Materials + +### Related Links + +- [About Git](https://docs.github.com/en/get-started/using-git/about-git) +- [Github](https://github.com/) +- [Github Pages](https://pages.github.com/) +- [Github Desktop](https://desktop.github.com/) +- [Markdown cheat sheet](https://commonmark.org/help/) +- [What is Markdown?](https://www.markdownguide.org/getting-started/) +- [Git](https://git-scm.com/) (You don't necessarily have to install this on its own for your computer; but this is the link to the underlying tool called `git`. It's included in Github Desktop.) + +### Key Definitions + +- **git repository**: A folder that tracks the history of edits to its files +- **Github repository**: A git repository online, like a Google Drive folder with history +- **Github pages**: A service that takes a Github repository and builds a +website from it (usually relying on conventions, like `index.md`) +- **Markdown**: A way to write plain text files with a little bit of formatting +- **commit**: A set of changes to a file or multiple files in a repository. A +repository history is made up of commits +- **git clone**: A git action to copy a repository from one place to another +(usually from somewhere like Github to our computer). Copies the contents of the +folder _and_ the entire history – the whole repository. +- **git commit**: A git action to take some changes we've made to files and +turn them into a commit in the repository's history +- **git push**: A git action to send commits from one place to another (usually +from our computer to Github) + + +### Notes from Class + +{% for note in page.notes %} +<a href="{{ note.url }}">{{ note.name }}</a> +<iframe src="{{ note.url }}/preview" width="640" height="480" allow="autoplay"></iframe> +{% endfor %} + + +## Lab Tasks + +**As usual, we provide the lab tasks ahead of time, but they might change or +update before lab starts; these aren't guaranteed to be in their final version +until lab starts at 1pm on Wednesday.** + +In this lab you'll make a professional website for yourself where you can post +your lab reports for the course. Please contact the instructor +(`jpolitz@eng.ucsd.edu`) if for personal privacy or security reasons you do not +want to publish a public web site, even under a pseudonym. + +### Motivation + +Having a professional portfolio website for yourself can be useful in many, many +ways. It's a useful URL to put at the top of your resume/CV where potential +employers can learn more about you. Lots of great work in CS is published only on +someone's personal page, or is at least most accessible there. Most CS faculty +have such a page ([just](https://roseyu.com/) [a +few](https://cseweb.ucsd.edu/~tzli/) [examples](http://kvaccaro.com/) [from +new](https://web.engr.oregonstate.edu/~jensenca/OSU_ENGR/index.html) CSE +faculty), for example. + +Also, journaling and logging what you've learned is a powerful tool. Writing +down what we've done and how we've done it, for an audience (real or imagined) +other than ourselves, forces us to confront lingering misconceptions and cements +what we learned in our memories. It's also simply useful to refresh your memory +later! + +For these reasons, we'll spend this lab creating a personal page, and then +learning to write a blog post about what we learned in week 1. +### git, Github, and Github Pages + +Github ([https://www.github.com](github.com)) is a web service for storing and +sharing code, along with a huge number of services surrounding that code. It +uses a tool and protocol called `git` [https://git-scm.com/](git) to store and +retrieve that code. Github Pages +[https://pages.github.com/](https://pages.github.com/) is one of the services +Github provides for publishing personal and project websites from your Github +account. + +This lab is a basic introduction to all of these. We will learn to use them in +more detail as the quarter goes on; learning all that git, Github, or Github +Pages has to offer could take months of practice! + +### Creating a Website with Github Pages + +#### Make a Github Account + +Go to [https://www.github.com](https://www.github.com) and create an account: + +![](/images/github-signup.png) + +(If you already have an account, you choose if you want to use it or create a +new one for this course). + +You can choose any username you like for the account; it doesn't have to be +related to your legal or preferred name, though it can be and often is. Some +people choose names related to their name, like me (my Github account is +[jpolitz](https://github.com/jpolitz)). Others choose more abstract or whimsical +names for their accounts, just like usernames on any other service. Feel free to +do whatever feels right to you, and in any event, you can always [change it +later](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/changing-your-github-username). + + +#### Create a Repository + +Once you've created your account, we are going to _create a new repository_ on +Github. A _repository_ is a folder or directory with an associated history of +changes that were made to the files within it. In this sense, a repository on +Github has some similarities to a folder in Google Drive; the differences are +mainly in the level of control we get in managing that history of changes. + +![](/images/new-repository.png) + +Name the repository `cse15l-lab-reports` (in my screenshot it looks like the +name is taken because I made it before taking the screenshot; it will be green +and OK for you). Leave the other settings as they are, and click "Create +Repository" at the bottom. + +![](/images/create-repository.png) + +You should see a screen like this (but with your username): + +![](/images/new-repository-screen.png) + +Click the "Create a new file" link (small, in blue, beneath the "Set up in +Desktop" button). Make a new file called `index.md`, and put some text in it +(whatever you like). + +![](/images/hello-world-pages.png) + +Scroll down to the bottom of the page and click "Commit changes". You should see +a view of your repository that now lists a file called `index.md`. + +You have a public Github repository with some text in it! You can copy the link +from your browser and paste it into the group chat for your lab group; you +should all be able to see one anothers' repository pages. + +#### Making a Pages Site + +Next, click on "Settings" at the top of your repository, and then choose the +"Pages" option in the sidebar: + +![](/images/settings-repo-button.png) + +![](/images/pages-button.png) + +Choose `main` as the source for Github Pages, and click "Save". + +![](/images/github-pages-branch.png) + +You'll see a message that says “Your site is ready to be published at `<url +here>`.” Click the link that's shown there; at first it will say the page isn't +found. Wait a few minutes, then refresh the page. It can take 2-5 minutes for +this step, so give it a few refreshes. Then you should see the text you wrote +show up on a page like this: + +![](/images/hello-world-page-load.png) + +**Write down in notes** – everyone should be able to screenshot their page +showing the text they wrote in their `index.md`. + +**Write down in notes** – Conduct the following experiment: + +Note that in addition to seeing your file at, e.g, +[https://jpolitz.github.io/cse-15l-lab-report/](https://jpolitz.github.io/cse-15l-lab-report/), +you can also see it with `index.html` added to the end of the URL: +[https://jpolitz.github.io/cse-15l-lab-report/index.html](https://jpolitz.github.io/cse-15l-lab-report/index.html) +(Try it!). Add another file to your repository with any name you choose, but +end it in the extension `.md`. Can you use this idea to see that file? + +Write down what you think is happening when you commit a new file. + +#### Editing Markdown + +The `.md` extension stands for "Markdown," which is a particular text format +used for writing. There are many good documents on the web. A good cheat sheet +and explainer are here: + +- [Cheat sheet](https://commonmark.org/help/) +- [What is Markdown?](https://www.markdownguide.org/getting-started/) + +Skim both of those documents, then try to use some of the elements described in +the cheat sheet in your `index.md` file. How do some of the different formatting +options show up when you use them? Are any surprising? + +**Write down in notes** – Try all of the formatting in the “Basic Syntax” part +of the markdown cheat sheet above; everyone should screenshot their page that +uses all of these. + +You should now have: + +- A repository with at least two files (`index.md` and another one you made up) +- In one of those files, a use of each kind of basic Markdown syntax +- A page that shows the rendered version of your Markdown text at a public URL + +**Congratulations** – you now know how to make a (simple), public-facing website +with basic formatting! You can share the link to your page with anyone in the +world with an internet connection, and they can see your page. + +(Fun fact: [the page you are +reading](https://github.com/ucsd-cse15l-w22/ucsd-cse15l-w22.github.io/blob/main/_posts/weeks/2022-01-10-week2.md) +is written in Markdown and uses Github Pages!) + +### Editing Offline + +So far, we've suggested that you make all your edits in your web browser using +Github's tools for creating new files and editing existing ones. However, this +is a remarkably inefficient workflow, because each edit can take a few minutes +to show up. Much better would be to use an offline tool, like Visual Studio Code +or another editor, that can give better quick feedback as you work. + +To edit offline, we need to be able to (a) download the repository to our +computer, (b) edit the files, and (c) upload the changes back to Github. Github +will re-render all of the Markdown into nice web pages for us each time we +re-upload. + +#### Cloning with Github Desktop + +There are many ways to download the code from your repository and upload +changes. We will use [Github Desktop](https://desktop.github.com/) to do this +today, and see other options in the future. Even if you have some other +preferred way to do this that you've used before, please do follow the tutorial! +You may learn something new and useful. + +Download the [Desktop Client](https://desktop.github.com/) for Github. Install +it, and log in with your Github account. The startup page should look something +like this: + +![](/images/github-desktop.png) + +Then, you can get the code from your repository in one of several ways: + +- On the repository page, there is a `<> Code` button; you can click on that and +choose “Open with Github Desktop” +- From Github Desktop, you can choose “Clone a Repository from the Internet” and +then choose your repository + +You'll see a message about cloning, and then see this page: + +![](/images/github-after-clone.png) + +One thing that I often find a little surprising about this page is that it +doesn't list any files – `index.md` is nowhere to be found here! This is because +Github Desktop (and the underlying tool, `git`) are all about tracking and +recording _changes_; we won't see much in this interface until we make some +edits or new files. + +#### Editing (Markdown) in VSCode + +A good way to make edits is to use the convenient “Open in Visual Studio +Code” button. This will open a VSCode window in the directory you just cloned. +If you click it, you should see a fresh window like this: + +![](/images/vscode-pages-open.png) + +Here's where VSCode comes in handy – open one of the files and look in the _top +right corner_ of the window. There should be a few little symbols, one that +looks like two panels with a magnifying glass over the right panel + +![](/images/preview-buttons.png) + +Click it, and a live-updating preview of the rendered Markdown will appear! + +![](/images/live-formatting.png) + +How cool! Make a few edits here; add some text, try out the live formatting. +Then make sure to save the file. + +#### Pushing Changes Back + +Go back to the Github Desktop window. Now you should see something like this: + +![](/images/github-desktop-diff.png) + +This view is called a **diff**, and it's showing a summary of what changed. In +red, with `-` signs next to them, are lines that I _removed_ from the file. In +green, with `+` signs next to them, are lines that I _added_ to the file. This +is for us to review before we do two further steps: + +- **commit** the changes to save them to our local copy of the repository +- **push** the changes to save them to the remote copy of the repository + +If you're happy with your updates, click "Commit to `main`". Above that button +there's also a box where you can write a short message for your own bookkeeping +about why you made this change; in this case you might write “trying out +formatting” or similar. + +In this case (_unlike_ in the Github interface in your browser) this commit +action _only_ makes changes on your computer's copy of the repository. If you +opened up Github right at this moment (someone in the group should!) you will +see that these changes are not shown on Github yet. + +A separate step takes our committed changes and **push**es them to Github to +store them in the remote repository. You'll see a message prompting you to do +this on the right-hand side in Github Desktop: + +![](/images/push-message.png) + +This message uses the term **origin** to refer to the remote repository. After +clicking this, you can verify that the changes did in fact show up when you view +your repository's code on Github. Shortly, you should also see your web page +update with the newly-written or changed text. + +**Write in notes** – brainstorm: what are some reasons why it be useful that the +act of **commit**ing changes and the act of **push**ing them are in separate +steps? + + +### Setting Up a Web Page + +For your lab report (see below) there are a few key features we need to make +sure we practice. Work with your group to figure some of these out. + +#### Including Screenshots + +One important part of setting up lab reports in this class will be including +_screenshots_ of your work on the page, which means: + +1. Taking and saving the screenshot +2. Adding the image to the repository +3. Adding the right Markdown to include the image + +Get your first lab report started by making a new file called +`lab-report-1-week-2.md`. Then, find an image on your computer, like a +screenshot from last week's lab, maybe, or a new screenshot you take now. Copy +or move that image file into your repository that you have open in VScode (you +can drag and drop it into the file explorer). + +Then, add an image tag (use the Markdown cheat sheet!) to refer to that image in +`lab-report-1-week-2.md`. Commit the changes to that file along with the image, +and push to Github. Verify that you can see the image in the published version +of your site. + +**Write down in notes**: Make sure everyone can include a screenshot image on +their Github pages site. You need it for the lab report! + +#### Adding Links + +One thing that's helpful on pages like yours is to have links between pages. Add +a link to the index page of your site that points to your lab report page. Which +of the following styles works? + +- `[Lab Report 1](lab-report-1-week-2.html)` +- `[Lab Report 1](https://<your-username>.github.io/<your-lab-reports-repo>/lab-report-1-week-2.html)` + +**Write down in notes**: What do you think the difference is between these two +styles of creating a link? Do they have any differences in what happens with +them in the Markdown preview? + +#### Having Fun – Themes + +Feel free to get creative with your page. Github has [free themes you can +use](https://docs.github.com/en/pages/getting-started-with-github-pages/adding-a-theme-to-your-github-pages-site-with-the-theme-chooser). + +You can also read more about +[Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll), +a tool Github Pages uses to turn your markdown files into web pages. + +Concretely, during your lab time, make sure to try at least one theme (you can +always disable it later). + +In general, if you want, feel free to do as much styling, editing, theming, etc +as you want with your page – it's yours! We'll just have specific requirements +for what you do for lab reports. + +If you have extra time, feel free to spend it writing your lab report. + +## Week 2 Lab Report + +Before Friday, January 14, you'll submit a _lab report_ by writing a blog post +like we just described. The topic will be remote access. + +You will write a tutorial for incoming 15L students (and your future self!) +about how to log into a course-specific account on `ieng6`. Your post should +include the steps you took, along with screenshots of what each step looked +like. You're free to use the screenshots you took for lab 1, or new ones. +Complete any steps you didn't complete in your group on your own. + +Overall, make sure you have at least 6 screenshots, one for each of the steps +below (though more is useful, remember that this will help out your future +self). For each step include 2-3 sentences or bullet points describing what you +did. + +- Installing VScode +- Remotely Connecting +- Trying Some Commands +- Moving Files with `scp` +- Setting an SSH Key +- Optimizing Remote Running + +You should complete the writing **on your own**. Feel free to ask anyone (staff +or other students are fine!) for help if you're struggling to get remote access +set up, understand commands, get your writing to show up on Github Pages, etc. +But do not get help from anyone on authoring the report itself – the writing and +screenshots **must** be your own. + +You will upload your submission by giving a link to your web page in the Lab 1 +Report – Week 2 assignment on Gradescope. + + + +</div> \ No newline at end of file diff --git a/_posts/weeks/2022-01-17-week3.md b/_posts/weeks/2022-01-17-week3.md new file mode 100644 index 0000000..473e0bb --- /dev/null +++ b/_posts/weeks/2022-01-17-week3.md @@ -0,0 +1,218 @@ +--- +layout: page-fullwidth +subheadline: Week 3 +published: true +title: "Week 3 – Incremental Programming and Debugging" +tags: + - post week +categories: + - week +header: no +todos: + - due-date: "11:59am January 19, 2021" + name: "Quiz 3" + url: "https://www.gradescope.com" +current: false +notes: + - name: "1pm Wed" + url: "https://drive.google.com/file/d/1PymYukT7g6NoPazC1CuERiCPNA3xzDBb" + - name: "2pm Wed" + url: "https://drive.google.com/file/d/1oD0LVmVWlK646mHkSibycnjSZFtDfotH" + - name: "3pm Wed" + url: "https://drive.google.com/file/d/1CChv4ife7k61DgIBSqjxilo4j5267rUu" + +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius fixed-toc" data-options="sticky_on:large" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + +## Due Dates & Links + +### Due This Week + +<ul> +{% for todo in page.todos %} +<li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> +{% endfor %} +</ul> + +### To Watch/Read + +- Video on Github Issues: [https://www.youtube.com/watch?v=LuzJ-ZoL3qs](https://www.youtube.com/watch?v=LuzJ-ZoL3qs) + - Feel free to ask questions about it on Piazza! + - You should expect to get feedback this way some time in the next week (by Jan 25) +- Video to prepare for lab/quiz: [https://youtu.be/_y9hkrN9k3w](https://youtu.be/_y9hkrN9k3w) +- Read these two articles by Julia Evans (one summarized in a comic below): + - [When debugging, your attitude matters](https://jvns.ca/blog/debugging-attitude-matters/) + - [How I Got Better at Debugging](https://jvns.ca/blog/2015/11/22/how-i-got-better-at-debugging/) +- Read this article by John Regehr: [How to Debug](https://blog.regehr.org/archives/199) + - You don't need to know what all the technical tools are in these readings (debuggers, systems programming, CSS, divs, etc) + - From the Regehr article, focus on the vocabulary (symptom, bug, etc) + - From the Evans articles, focus on the vibes + +<blockquote class="twitter-tweet"><p lang="en" dir="ltr">when debugging, your attitude matters <br>(or in article form: <a href="https://t.co/UseM2m2WTm">https://t.co/UseM2m2WTm</a>) <a href="https://t.co/lWfXYEvdaX">pic.twitter.com/lWfXYEvdaX</a></p>— 🔎Julia Evans🔍 (@b0rk) <a href="https://twitter.com/b0rk/status/1249715842708844544?ref_src=twsrc%5Etfw">April 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> + +### Notes from Class + +{% for note in page.notes %} +<a href="{{ note.url }}">{{ note.name }}</a> +<iframe src="{{ note.url }}/preview" width="640" height="480" allow="autoplay"></iframe> +{% endfor %} + +## Lab Tasks + +**As usual, we provide the lab tasks ahead of time, but they might change or +update before lab starts; these aren't guaranteed to be in their final version +until lab starts at 1pm on Wednesday.** + +This week's lab will focus on the process of testing and debugging. There are +lots of ways to go about testing and debugging programs! We will study several +in this course. + +Today, we will focus on the process of **incremental development**, in a style +similar to **test-driven development**. + +Each lab group will work collaboratively on a programming problem with known +bugs. The sample programing prompt we will be working with is: + +_Write a program that takes a markdown file as a command line argument and then +prints out all of the URLs of the links (but not of images) in that file._ + +This might be useful for building a references/citations page for a website, +for example. + +_Parts of this example were inspired by the first HTML-parsing example in [The +Debugging Book](https://www.debuggingbook.org/html/Intro_Debugging.html)._ + +### Getting Started + +For reference, here is the video from the quiz: + +[https://youtu.be/_y9hkrN9k3w](https://youtu.be/_y9hkrN9k3w) + +Answer the following questions: + +- How many times did the programmer use the internet to look up how to do +something? +- Around what was the largest number of _lines of code_ written in between runs +of the program? +- Around how many times did the programmer use autocomplete on a variable name? +How many typos do you think this helped avoid? + +Write the answers to these questions in your shared notes document. + +### Getting and Running the Code + +Everyone in your group should make a **fork** of this repository: + +[https://github.com/ucsd-cse15l-w22/markdown-parse](https://github.com/ucsd-cse15l-w22/markdown-parse) + +The fork button is on the upper right: + +![](/images/fork-button.png) + +This makes a copy of the repository on your Github. Then, clone the repository +that you forked (not the original) using Github Desktop, and open it in Visual +Studio Code. + +If you have Java installed on your computer, make sure you can run it using the +commands from the video. If you don't, use commands to copy the code to your +remote CSE15L account and run the program there. + +Make sure everyone can run the examples from the video. + +Then, add print statements, look up online, or use your own reasoning as a group +to answer the following questions: + +- How many different values does `currentIndex` have when the program is run on +the given example? What are they? +- What is the purpose of the second argument to `indexOf`? What would be +different if it wasn't provided? + +Write the answers to these questions in your shared notes document. + +### Finding a Breaking Test + +The provided code gives reasonable results for the single test the programmer +tried. The programmer should be satisfied with a good start, but not satisfied +with a single test. We will take over from where they left off to test and +complete the program. + +Create a _new_ markdown file that tests a different use of links than in the +original. Test the program on that file. Discuss among your group what it means +to test something different. Try running your new test. What happens? Did it +succeed or not? + +Keep trying different content in markdown files until you get something that has +incorrect behavior (an error, an infinite loop, prints the wrong URLs, etc). +As soon as you see incorrect behavior, stop. + +Make a commit with the new test file; there should be no edits to the code file. +Copy/paste the unexpected output into the commit message, then make the commit +and push. (If you cloned the original repository instead of your fork, you might +get an error that you cannot push to it; if you do, take the time now to +double-check that you cloned your fork. If you can't push for some reason, make +sure to come to office hours or figure it out on your own later; you can still +make all the _commits_ for the remainder of the lab). + +Include links to all of the _individual commits on Github_ of this new test in +your notes document (screenshot instead if you had issues pushing). + +**Discuss**: Why bother making a commit at this point? What benefit might that +have in the future? How might it help a staff member who is answering your +question on Piazza? Give at least three positive examples in the notes document. + +### Improving the Program + +Discuss as a group – why is the program not behaving as expected on the test +file you wrote? How could you fix it? + +Work as a group on fixing the program so that: + +- The original test still has the same output (the one the programmer initially tried) +- The broken test you wrote has correct output + +Remember – this means you need to _keep testing_ on the original test and on the +new one you wrote, until both work. + +When you've updated the program to work on both of these cases, make a commit +that should have _just_ the changes to the `.java` file required to make it pass. + +Include the commit in your notes document so everyone can refer to it. + +### Repeating the Process + +Repeat this process for at least 2 more test files that fail for different reasons: + +- Create the test file that fails +- Commit/push it with the failing output in a commit message +- Fix the program so it succeeds on that test, and on all previous tests +- Commit/push the fix + +Here are some hints for tests you might try: + +- Try a file with an image reference +- Try a file that starts with a link +- Try a file that ends with a link +- Try a file with a link in the middle +- Try a file with no links +- Try a file that uses `[]` but not `()` +- Try a file that uses `()` but not `[]` +- Try a file that uses `[]` and `()`, but very far apart in the file + +**Discuss**: What techniques did you use to figure out how to fix the program? +Did you insert print statements anywhere? Did someone in your group suggest an +idea that didn't occur to others to try? What was it? Include a summary of what +your group did in order to fix the program in each case. + +**Write in notes**: Include links to the commits described above for at least +one group member's repository (that way everyone can find it later). diff --git a/_posts/weeks/2022-01-24-week4.md b/_posts/weeks/2022-01-24-week4.md new file mode 100644 index 0000000..e3a1562 --- /dev/null +++ b/_posts/weeks/2022-01-24-week4.md @@ -0,0 +1,264 @@ +--- +layout: page-fullwidth +subheadline: Week 4 +published: true +title: "Week 4 – When Tests Accumulate" +tags: + - post week +categories: + - week +header: no +todos: + - due-date: "11:59am January 26, 2021" + name: "Quiz 4" + url: "https://www.gradescope.com" + - due-date: "5pm January 28, 2021" + name: "Second Lab Report" + url: "/week/week4/#week-4-lab-report" + - due-date: "5pm January 28, 2021" + name: "Edits to First Lab Report" + url: "https://www.youtube.com/watch?v=LuzJ-ZoL3qs" +notes: + - name: "1pm Monday" + url: "https://drive.google.com/file/d/19ugyxHddMHdbvjAhDwhSGiBOedN22MaM" + - name: "2pm Monday" + url: "https://drive.google.com/file/d/1yiZLCfIqmwEH9F9vxtU08Dq6-1X2OIla" + - name: "3pm Monday" + url: "https://drive.google.com/file/d/1q80zNWvPx6PX_x-YpUiZLrxYE38VqaHP" + - name: "1pm Wed" + url: "https://drive.google.com/file/d/1WEZAJC2UbUrjSdHADjo8HNkHAIDsfSF8" + - name: "2pm Wed" + url: "https://drive.google.com/file/d/16KYy-v7QEmE8jg9bdpqnqQxZcedi5Rex" + - name: "3pm Wed" + url: "https://drive.google.com/file/d/1lmBHb5QdxXfjBQBeGwQ1z8Us445efL2H" +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius fixed-toc" data-options="sticky_on:large" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + + +## Due Dates & Links + +### Due This Week + +<ul> +{% for todo in page.todos %} +<li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> +{% endfor %} +</ul> + +### To Watch/Read + +- This article: [https://drive.google.com/file/d/1zbMVZxsI1zOBPhSsvBi4kB5dPJuxyOJh/view?usp=sharing](https://drive.google.com/file/d/1zbMVZxsI1zOBPhSsvBi4kB5dPJuxyOJh/view?usp=sharing) + (Note that assigning an article doesn't necessarily mean Joe agrees with everything in it...) + + +### Notes from Class + +{% for note in page.notes %} +<a href="{{ note.url }}">{{ note.name }}</a> +<iframe src="{{ note.url }}/preview" width="640" height="480" allow="autoplay"></iframe> +{% endfor %} + +## Lab Tasks + +**As usual, these tasks might change a little bit before the start of lab, but +the general instructions and tools are likely to be similar.** + +Clone (or pull, if it's your repository) the repository with your group's code +from last lab. You should have the original provided test file `test-file.md`, +and three other test files that you wrote as part of the last lab. If your group +doesn't have this many test files, create one more, then commit and push it. + +**Meta-comment**: One thing that is common in programming but _uncommon_ in many +programming courses is revisiting the same program for many weeks in a row. We +are going to work with this markdown parser for many weeks. It will help us +understand how code evolves over time and how a repository helps us track that +evolution. + +### Your Memory + +Run the program on one of the examples you wrote last week. Is the output +correct? How do you know? + +**Write in notes** what process did your team go through to justify that the +output was correct? Did you remember what it was supposed to be or did you have +to open the file to verify? + +### Running via the Command Line + +Have someone share screen with VScode open on the markdown parser project with +their terminal open. They should make a small edit to the program (like adding a +print statement in `main`). + +Start a timer, then have them recompile the program and run the program on _all_ +of the test files (there should be 4 total), then stop the timer. + +**Write in notes**: How long did this take? + +Note that this time doesn't include any time you'd have to spend reading output +to check that it's correct, etc, because we're pretty sure things are working +from our process in lab 3. That's a lot of time to spend on each change, +checking that we haven't broken the behavior for an existing test! + +### Testing Tools + +These two issues—remembering what the correct result ought to be, and the work +involved in re-running tests one-by-one—motivate using _automated testing +tools_. There are lots of choices we could make here. We're going to start by +using JUnit not least because it is representative of many similar tools, and +sees widespread use in large software projects. + +For this part of the lab, you'll install JUnit and use it to write a test +program that solves the problems of having to remember what “correct output” is +and taking a lot of manual effort to re-run many tests. + +### Setting up JUnit + +Download these two `.jar` files: + +- [junit-4.13.2.jar](https://github.com/ucsd-cse15l-w22/markdown-parse/blob/main/lib/junit-4.13.2.jar) +- [hamcrest-core-1.3.jar](https://github.com/ucsd-cse15l-w22/markdown-parse/blob/main/lib/hamcrest-core-1.3.jar) + +Then, make a directory called `lib` in your project, and copy both of those +files to that directory. Commit and push the files once they are added to `lib` +(this is a useful step because it ensures that you see them in your repository!) + +Next, create a file called `MarkdownParseTest.java` in your repository. Put the +following code in the file: + +``` +import static org.junit.Assert.*; +import org.junit.*; + +public class MarkdownParseTest { + @Test + public void addition() { + assertEquals(2, 1 + 1); + } +} +``` + +Then, run this code at the command line using these two commands: + +``` +javac -cp .:lib/junit-4.13.2.jar:lib/hamcrest-core-1.3.jar MarkdownParseTest.java + +java -cp .:lib/junit-4.13.2.jar:lib/hamcrest-core-1.3.jar org.junit.runner.JUnitCore MarkdownParseTest +``` + + +**Write in notes**: Copy the output of this command, including any errors if you +didn't use it correctly the first time. + +**Write in notes**: Copy the test file code into the notes. On each line, +describe what you think that line is doing. If you aren't sure, write it down as +a question. + +**Post on Piazza**: Take all the open questions you have that you couldn't +answer with your group and tutor, and post them as public questions on Piazza. +Sign the post with your team animal name. + +**Commit to Github**: Once you get this command working, add the test file and +commit and push it to Github. For your commit message, put the commands you used +to run the tests so you'll have a record of what worked later. + +### Writing our Tests with JUnit + +The example above just tests that `1+1` is `==` to `2` from a JUnit tutorial. +Next, we should add another test to actually do some work with our code. + +Your task is to add another test method to `MarkdownParseTest` that: + +- Calls `getLinks` on the contents of `test-file.md` +- Checks that the result is equal to a list containing `https://something.com` and `some-page.html` + +**Hints**: Remember that `Files.readString` and `Path.of` are useful for reading +the contents of files, and require using `throws` clauses. You can use +`List.of("a", "b", "c")` to easily create a `List` of strings. + +**Write in notes**: Put at least one error you encountered during this process +into the doc as a screenshot. + +When you have the test successfully passing, add and commit the changes, then +push to Github. + +Then, add separate test methods to test _each_ of the test files you've written +with `getLinks`. Make sure all the tests pass, and commit and push to Github. + +### The Benefits of Automated Tests + +Have someone ready at the terminal in VScode with the project open. Start a +timer. Have them run the commands to compile and run the tests. Stop the timer. + +**Write down in notes** How much quicker was it to run the JUnit tests than to +run the test for each file individually? + +### More Tests, and Symptoms vs. Bugs + +Consider the test files provided in this repo +[markdown-parse](https://github.com/ucsd-cse15l-w22/markdown-parse). Your task +is to answer/do the following: + +1. Which test files are _failure-inducing inputs_ for your version of `MarkdownParse`? +2. Do any pairs of test files demonstrate _the same symptom_ for your version? +3. Of those pairs of test files, do any have the same symptoms due to the +same underlying _bug_, and which have different _bugs_? +4. Fix the bugs that make the failure-inducing inputs fail! + +**Write in notes** – the output of running _each_ of the test files, and +*indicate which outputs are incorrect based on what we should +expect as output for this program (hint – you can make them into JUnit tests, or +just run them at the command line). Those are the failure-inducing inputs. +Start your report with a section containing these outputs and descriptions. + +Then write in your notes which _pairs_ of outputs have exactly the same +output/same behavior. Those have the same _symptoms_. Organize this section as a +bulleted list with each bullet showing one _symptom_, and in that list item say +which test files showed that symptom. Depending on how you've done your work, +you may have no pairs with the same symptoms; say so if that's true. + +Then use whatever process you like to help identify the _bugs_ that caused these +failures in your implementation. We recommend adding a JUnit test for each one +so you can easily run them all at once. + +**Each time** you change the code and cause one or more tests to pass that +didn't before, make a commit and indicate: + +- The failure-inducing input(s) that are fixed +- The symptom they were showing +- The bug that fixed the symptom + +Try to make your implementation work for all the provided tests. + +## Week 4 Lab Report + +Create another page in your lab report repository, like you did for lab report +1, and write your report there. + +Pick three code changes that your group worked on in labs 3 and 4 in order to +fix a bug; these should be stored as commits on someone's repository. Fork the +repository so you have your own copy with all the work your group did if you +haven't already. + +For each of the three code changes: + +- Show a screenshot of the code change diff from Github ([a page like this](https://github.com/ucsd-cse15l-w22/ucsd-cse15l-w22.github.io/commit/5b427fb733e72e1e396c720cd1a308385a5af5be)) +- Link to the test file for a _failure-inducing input_ that prompted you to make that change +- Show the _symptom_ of that _failure-inducing input_ by showing the output of +running the file at the command line for the version where it was failing (this +should also be in the commit message history) +- Write 2-3 sentences describing the relationship between the bug, the symptom, +and the failure-inducing input. + +You will submit this to the week 4 lab report assignment on Gradescope, which +will have a similar process to the first lab report for grading. diff --git a/_posts/weeks/2022-01-31-week5.md b/_posts/weeks/2022-01-31-week5.md new file mode 100644 index 0000000..230940f --- /dev/null +++ b/_posts/weeks/2022-01-31-week5.md @@ -0,0 +1,206 @@ +--- +layout: page-fullwidth +subheadline: Week 5 +published: true +title: "Week 5 – It Works on My Machine" +tags: + - post week +categories: + - week +header: no +todos: + - due-date: "11:59am February 2, 2022" + name: "Quiz 5" + url: "https://www.gradescope.com" + - due-date: "5pm February 4, 2022" + name: "Skill Demonstration 1" + url: "/week/week5/#skill-demonstration-1" +notes: + - name: "1pm Monday" + url: "https://drive.google.com/file/d/1uWmzRIeEew0e1OOUvYVdtsAol32YY8SB" + - name: "2pm Monday" + url: "https://drive.google.com/file/d/1bNyyK-PrNLTnha24_RUq8fEtULqIUVzF" + - name: "3pm Monday" + url: "https://drive.google.com/file/d/1Qhsdqq4eLATJDOoWrKlfrUmVfdhUuncg" +current: true +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius fixed-toc" data-options="sticky_on:large" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + +## Due Dates & Links + +### Due This Week + +<ul> +{% for todo in page.todos %} +<li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> +{% endfor %} +</ul> + +### Notes from Class + +{% for note in page.notes %} +<a href="{{ note.url }}">{{ note.name }}</a> +<iframe src="{{ note.url }}/preview" width="640" height="480" allow="autoplay"></iframe> +{% endfor %} + +## Lab Tasks + +As usual, some of the lab tasks could change a bit before Wednesday, but the +general outline is here. + +Note that the _skill demonstration_ description is firm, and we'll only add +clarifications and extra information, not change the task, at this point. + +Today is a bit “potpourri” and a bit “choose your own adventure.” There are a +few short things I want to make sure everyone does, and then a few _options_ for +how to spend your time. These include some cool tips and tricks that might help +you out in the future, some situations that students have run into explicitly in +class, and a space to chat about what you're doing for your skill demo. + +Do the **required tasks**, then as a group pick some of the others to try. If +you have time, do them all! + +### Required Task – Synchronize Your Group Work + +You've all done some work either in the same repository or in different +repositories over the last few labs. Take some time to make sure everyone has +the most up-to-date version of the `markdown-parse` you're working on as a +group. You could do this in a few ways; figure out which strategy works best for +your group! For example, you might: + +- Put all links to Github repositories in your shared notes doc +- Have one person add all the tests + fixes from the other repository to their +repository +- Have everyeone else copy that work back to their own copy +- Have everyone pull/clone their copy and make sure they can run the tests + +**Write in notes**: Include screenshots from each group member getting it all to +work. + +### Required Task – Setup Github Actions on a Repository + +In class on Monday, we saw how to create a Github Action that would run our +tests. Refer to that video. Set up a Github Action that runs your JUnit tests +from last week. (You can see how it was set up here: +[https://github.com/ucsd-cse15l-w22/markdown-parse](https://github.com/ucsd-cse15l-w22/markdown-parse)). + +Commit and push a failing test. How does it show up on Github? Do you get any +other notifications? + +Commit and push a fix to the test. How does it show up on Github? Do you get any +other notifications? + +**Write in notes**: Take screenshots of and copy links to the output from the +above steps. + +### Required Task – Improve `markdown-parse` + +In the past few labs, you worked on adding tests and improving `markdown-parse`. + +Do this once more – add one new **failure-inducing input**, add it as a JUnit +test, then commit and push with the failing output in the commit message. + +Then, come up with a fix/improvement to the code to address this case while +still succeeding on all the previous test cases. Commit and push the change. + +**Write in notes**: Add the links to the commits you made above. + + +### Group Choice 1 – Set up Github Access from ieng6 + +... coming before Wednesday, but based on [this tutorial](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) ... + +### Group Choice 2 – Streamline `ssh` Configuration + +... coming before Wednesday, but based on [answers like this one](https://stackoverflow.com/questions/10197559/ssh-configuration-override-the-default-username) ... + +### Group Choice 3 – Copy Whole Directories with `scp -r` + +We've often been working with entire _directories_ of files (like with `lib/`). + +... combing before Wednesday, but based on [answers like this one](https://serverfault.com/questions/264595/can-scp-copy-directories-recursively) ... + +### Group Choice 4 – Discuss Strategies for Skill Demo Video + +Have a conversation about tips, techniques, and strategies for your first skill +demonstration video! The sample video and task is below. Feel free to ask +questions about it on Piazza. + +## Skill Demonstration 1 + +For your first skill demonstration video, you will record a screencast of +yourself (using Zoom is one good way) demonstrating some of the concrete skills +you learned in the first 4 weeks of the course. + +### Task + +In the video, show: + +- Your face + a photo ID (that's the only time you have to show your face) +- Creating a new repository on Github +- Creating a file with a Java class +- Creating another file with a JUnit test for a method in that class, the test +must *fail* initially +- Add any code/libraries needed to make the JUnit test run +- Commiting all of the code/libraries required for running that test +- Running the test in your `cs15l` course-specific account +- Fix the test so it *passes*, then run it again on your `cs15l1` account and +commit/push the changes (you can commit/push and run the update in any order) + +### Constraints and Examples + +You must do this all in one take (you can't stitch together multiple videos) and +the video needs to be less than 15 minutes. Probably your first try won't be 15 +minutes – you may have to practice several times to get the process down to 15 +minutes; you are free to ask for any help you need in getting your own process +down to that time! + +The classes and method you create can be anything, and you could copy/paste +their contents from somewhere, but you have to create the files as part of your +video. + +Similarly, you have to create a new repository as part of the video, perform all +commits as part of the video, show the tests running as part of the video, and +so on. + +It's up to you how to run the test in your `cs15l` account: + +- You could `scp` the relevant files after they are created and/or updated +- You could `ssh` into your account and clone the repository, then `pull` on updates +- You could do something else that you prefer + +Here's an example of Joe doing the task: + +[https://youtu.be/5JsG06Dz-tc](https://youtu.be/5JsG06Dz-tc) + + +### Submission + +The video must be submitted by **5pm Friday, February 4**. + +Upload your video file to the Skill Demonstration 1 - Video assignment on +Gradescope. Make sure to try uploading well in advance of the deadline for two +reasons: + +1. Make sure that you aren't recording an extremely large/high-definition video; +there are some (reasonable) file-size limits +2. Make sure you have time to upload the video + +If something goes wrong for you uploading near the deadline (for example, you +only have a link to a video instead of an actual video to upload for some +reason), upload a README file explaining the situation to the best of your +ability instead of the video itself. + +Once submitted, you should be able to see the video file you uploaded and check +that it plays within Gradescope. Please do so! diff --git a/_sass/_01_settings_colors.scss b/_sass/_01_settings_colors.scss index a7bea74..d381ce3 100644 --- a/_sass/_01_settings_colors.scss +++ b/_sass/_01_settings_colors.scss @@ -16,9 +16,9 @@ /* Basics ------------------------------------------------------------------- */ -$text-color: #111; -$body-font-color: $text-color; -$body-bg: #fdfdfd; +$text-color : #111; +$body-font-color : $text-color; +$body-bg : #fdfdfd; @@ -26,59 +26,59 @@ $body-bg: #fdfdfd; https://color.adobe.com/de/Flat-Design-Colors-v2-color-theme-4341903/ ------------------------------------------------------------------- */ -$ci-1: #334D5C; // dark turquoise -$ci-2: #45B29D; // turquoise -$ci-3: #EFC94C; // yellow -$ci-4: #E27A3F; // orange -$ci-5: #DF4949; // red -$ci-6: #A1D044; // green +$ci-1 : #334D5C; // dark turquoise +$ci-2 : #45B29D; // turquoise +$ci-3 : #EFC94C; // yellow +$ci-4 : #E27A3F; // orange +$ci-5 : #DF4949; // red +$ci-6 : #A1D044; // green /* Foundation Color Variables ------------------------------------------------------------------- */ -$primary-color: $ci-1; -$secondary-color: $ci-6; -$alert-color: $ci-5; -$success-color: $ci-6; -$warning-color: $ci-4; -$info-color: $ci-1; +$primary-color : $ci-1; +$secondary-color : $ci-6; +$alert-color : $ci-5; +$success-color : $ci-6; +$warning-color : $ci-4; +$info-color : $ci-1; /* Grey Scale ------------------------------------------------------------------- */ -$grey-1: #E4E4E4; -$grey-2: #D7D7D7; -$grey-3: #CBCBCB; -$grey-4: #BEBEBE; -$grey-5: #A4A4A4; -$grey-6: #979797; -$grey-7: #8B8B8B; -$grey-8: #7E7E7E; -$grey-9: #646464; -$grey-10: #575757; -$grey-11: #4B4B4B; -$grey-12: #3E3E3E; -$grey-13: #313131; -$grey-14: #242424; -$grey-15: #171717; -$grey-16: #0B0B0B; +$grey-1 : #E4E4E4; +$grey-2 : #D7D7D7; +$grey-3 : #CBCBCB; +$grey-4 : #BEBEBE; +$grey-5 : #A4A4A4; +$grey-6 : #979797; +$grey-7 : #8B8B8B; +$grey-8 : #7E7E7E; +$grey-9 : #646464; +$grey-10 : #575757; +$grey-11 : #4B4B4B; +$grey-12 : #3E3E3E; +$grey-13 : #313131; +$grey-14 : #242424; +$grey-15 : #171717; +$grey-16 : #0B0B0B; /* Topbar-Navigation ------------------------------------------------------------------- */ -$topbar-bg-color: $body-bg; -$topbar-bg: $topbar-bg-color; +$topbar-bg-color : $body-bg; +$topbar-bg : $topbar-bg-color; $topbar-dropdown-toggle-color: $ci-1; -$topbar-link-color: #000; +$topbar-link-color : #000; $topbar-link-color-hover: #000; $topbar-link-color-active: #000; $topbar-link-color-active-hover: #000; @@ -107,13 +107,13 @@ $topbar-menu-icon-color-toggled: $ci-6; /* Footer ------------------------------------------------------------------- */ -$footer-bg: $grey-8; -$footer-color: #fff; -$footer-link-color: $ci-6; +$footer-bg : $grey-8; +$footer-color : #fff; +$footer-link-color : $ci-6; -$subfooter-bg: $grey-13; -$subfooter-color: $grey-8; +$subfooter-bg : $grey-13; +$subfooter-color : $grey-8; $subfooter-link-color: $grey-8; @@ -121,7 +121,7 @@ $subfooter-link-color: $grey-8; /* Code ------------------------------------------------------------------- */ -$code-background-color: scale-color($secondary-color, $lightness: 70%); +$code-background-color: scale-color($secondary-color, $lightness: 80%); $highlight-background: #ffffff; $highlight-comment: #999988; diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss old mode 100644 new mode 100755 index 5df1b39..500401c --- a/_sass/_06_typography.scss +++ b/_sass/_06_typography.scss @@ -83,6 +83,9 @@ p.button a { /* Headlines + The hK::before logic is to accomodate a vert. offset for persistent + top of page menu. The logic is copied from + https://css-tricks.com/hash-tag-links-padding/ ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { @@ -90,7 +93,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0; } - h1 { font-size: $font-size-h1; margin-top: 0; @@ -176,7 +178,8 @@ pre { margin-bottom: rem-calc(20); padding: 5px; background-color: $code-background-color; - border-radius: $global-radius; + border-radius: 5px; + border: 1px solid scale-color($color: $secondary-color, $lightness: 10%); } pre code { padding: rem-calc(2) rem-calc(5) rem-calc(1) rem-calc(0); diff --git a/_sass/_07_layout.scss b/_sass/_07_layout.scss index 01dd3e9..232cb05 100644 --- a/_sass/_07_layout.scss +++ b/_sass/_07_layout.scss @@ -48,6 +48,10 @@ body.video cite { color: #fff; } #navigation { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2); box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); + + [class^='icon-']:before, [class*=' icon-']:before { + margin-right: rem-calc(8); + } } diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss index 2204004..0ba0d54 100644 --- a/_sass/_09_elements.scss +++ b/_sass/_09_elements.scss @@ -148,3 +148,41 @@ img.lazy { transition: opacity 0.7s; opacity: 1; } + +*:target:not([id^='fn:']):not([id^='fnref:']) { + &::before { + content: " "; + width: 0; + height: 0; + + display: block; + padding-top: 50px; + margin-top: -50px; + } +} + +ul.material, .material ul { + list-style-position: inside; +} + +.material > li { + padding: 1em; +} + +li.current { + background-color: $topbar-link-bg-active; + border-radius: 1em; +} +li.gray { + color: $topbar-link-bg-active; + opacity: 0.5; +} + +.fixed-toc { + @media #{$large-up} { + width: auto; + left: auto; + top: auto; + position: fixed; + } +} \ No newline at end of file diff --git a/_sass/_11_syntax-highlighting.scss b/_sass/_11_syntax-highlighting.scss index f0a2a0c..8d09b93 100644 --- a/_sass/_11_syntax-highlighting.scss +++ b/_sass/_11_syntax-highlighting.scss @@ -3,7 +3,14 @@ ------------------------------------------------------------------- */ .highlight { - background: #fff; + background: scale-color($color: $secondary-color, $lightness: 80%); + [data-lang]::before { + content: attr(data-lang); + display: block; + text-align: right; + margin-right: 5px; + text-transform: uppercase; + } .c { color: #998; font-style: italic } // Comment .err { color: #a61717; background-color: #e3d2d2 } // Error .k { font-weight: bold } // Keyword diff --git a/_sass/foundation-components/_type.scss b/_sass/foundation-components/_type.scss index ff19996..33f59f3 100644 --- a/_sass/foundation-components/_type.scss +++ b/_sass/foundation-components/_type.scss @@ -59,7 +59,7 @@ $code-color: $oil !default; $code-font-family: $font-family-monospace !default; $code-font-weight: $font-weight-normal !default; $code-background-color: scale-color($secondary-color, $lightness: 70%) !default; -$code-border-size: 1px !default; +$code-border-size: 0px !default; $code-border-style: solid !default; $code-border-color: scale-color($code-background-color, $lightness: -10%) !default; $code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default; diff --git a/assets/img/CSELogo-color-vrable-thm.png b/assets/img/CSELogo-color-vrable-thm.png new file mode 100644 index 0000000..fca2659 Binary files /dev/null and b/assets/img/CSELogo-color-vrable-thm.png differ diff --git a/assets/mediaelement_js/jquery.js b/assets/mediaelement_js/jquery.js index 86a3305..3030229 100755 --- a/assets/mediaelement_js/jquery.js +++ b/assets/mediaelement_js/jquery.js @@ -349,8 +349,9 @@ jQuery.extend = jQuery.fn.extend = function() { src = target[ name ]; copy = options[ name ]; + // Prevent Object.prototype pollution // Prevent never-ending loop - if ( target === copy ) { + if ( name === "__proto__" || target === copy ) { continue; } @@ -8204,6 +8205,11 @@ function ajaxConvert( s, response ) { // Convert response if prev dataType is non-auto and differs from current if ( prev !== "*" && prev !== current ) { + // Mitigate possible XSS vulnerability (gh-2432) + if ( s.crossDomain && current === "script" ) { + continue; + } + // Seek a direct converter conv = converters[ prev + " " + current ] || converters[ "* " + current ]; @@ -9594,4 +9600,4 @@ if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); } -})( window ); \ No newline at end of file +})( window ); diff --git a/images/create-repository.png b/images/create-repository.png new file mode 100644 index 0000000..ce90be5 Binary files /dev/null and b/images/create-repository.png differ diff --git a/images/fork-button.png b/images/fork-button.png new file mode 100644 index 0000000..6da4496 Binary files /dev/null and b/images/fork-button.png differ diff --git a/images/github-after-clone.png b/images/github-after-clone.png new file mode 100644 index 0000000..2de5a6f Binary files /dev/null and b/images/github-after-clone.png differ diff --git a/images/github-desktop-diff.png b/images/github-desktop-diff.png new file mode 100644 index 0000000..f112761 Binary files /dev/null and b/images/github-desktop-diff.png differ diff --git a/images/github-desktop.png b/images/github-desktop.png new file mode 100644 index 0000000..9791b45 Binary files /dev/null and b/images/github-desktop.png differ diff --git a/images/github-pages-branch.png b/images/github-pages-branch.png new file mode 100644 index 0000000..62932c5 Binary files /dev/null and b/images/github-pages-branch.png differ diff --git a/images/github-signup.png b/images/github-signup.png new file mode 100644 index 0000000..8a63b53 Binary files /dev/null and b/images/github-signup.png differ diff --git a/images/hello-world-page-load.png b/images/hello-world-page-load.png new file mode 100644 index 0000000..7608145 Binary files /dev/null and b/images/hello-world-page-load.png differ diff --git a/images/hello-world-pages.png b/images/hello-world-pages.png new file mode 100644 index 0000000..87a421b Binary files /dev/null and b/images/hello-world-pages.png differ diff --git a/images/live-formatting.png b/images/live-formatting.png new file mode 100644 index 0000000..b736663 Binary files /dev/null and b/images/live-formatting.png differ diff --git a/images/manuals.png b/images/manuals.png new file mode 100644 index 0000000..80ffcfe Binary files /dev/null and b/images/manuals.png differ diff --git a/images/new-repository-screen.png b/images/new-repository-screen.png new file mode 100644 index 0000000..ff27046 Binary files /dev/null and b/images/new-repository-screen.png differ diff --git a/images/new-repository.png b/images/new-repository.png new file mode 100644 index 0000000..dbd4f72 Binary files /dev/null and b/images/new-repository.png differ diff --git a/images/pages-button.png b/images/pages-button.png new file mode 100644 index 0000000..a607add Binary files /dev/null and b/images/pages-button.png differ diff --git a/images/preview-buttons.png b/images/preview-buttons.png new file mode 100644 index 0000000..d4efccb Binary files /dev/null and b/images/preview-buttons.png differ diff --git a/images/push-message.png b/images/push-message.png new file mode 100644 index 0000000..a1f4b31 Binary files /dev/null and b/images/push-message.png differ diff --git a/images/settings-repo-button.png b/images/settings-repo-button.png new file mode 100644 index 0000000..8263863 Binary files /dev/null and b/images/settings-repo-button.png differ diff --git a/images/vscode-pages-open.png b/images/vscode-pages-open.png new file mode 100644 index 0000000..17c677a Binary files /dev/null and b/images/vscode-pages-open.png differ diff --git a/images/vscode.png b/images/vscode.png new file mode 100644 index 0000000..936b5a2 Binary files /dev/null and b/images/vscode.png differ diff --git a/images/webdesign_screenshot_andersneu.jpg b/images/webdesign_screenshot_andersneu.jpg new file mode 100644 index 0000000..99490bf Binary files /dev/null and b/images/webdesign_screenshot_andersneu.jpg differ diff --git a/images/webdesign_screenshot_moritz_sauer.jpg b/images/webdesign_screenshot_moritz_sauer.jpg new file mode 100644 index 0000000..c26c979 Binary files /dev/null and b/images/webdesign_screenshot_moritz_sauer.jpg differ diff --git a/images/webdesign_screenshot_mosonic.jpg b/images/webdesign_screenshot_mosonic.jpg new file mode 100644 index 0000000..c475feb Binary files /dev/null and b/images/webdesign_screenshot_mosonic.jpg differ diff --git a/images/webdesign_screenshot_nixdorf.jpg b/images/webdesign_screenshot_nixdorf.jpg deleted file mode 100644 index 5c2936f..0000000 Binary files a/images/webdesign_screenshot_nixdorf.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_phlow.jpg b/images/webdesign_screenshot_phlow.jpg index b066c89..3e16fe7 100644 Binary files a/images/webdesign_screenshot_phlow.jpg and b/images/webdesign_screenshot_phlow.jpg differ diff --git a/images/webdesign_screenshot_schriefer.jpg b/images/webdesign_screenshot_schriefer.jpg deleted file mode 100644 index 86d8056..0000000 Binary files a/images/webdesign_screenshot_schriefer.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_stilwandel.jpg b/images/webdesign_screenshot_stilwandel.jpg deleted file mode 100644 index d8c6753..0000000 Binary files a/images/webdesign_screenshot_stilwandel.jpg and /dev/null differ diff --git a/images/webdesign_screenshot_tarnkappe.jpg b/images/webdesign_screenshot_tarnkappe.jpg deleted file mode 100644 index cec00fc..0000000 Binary files a/images/webdesign_screenshot_tarnkappe.jpg and /dev/null differ diff --git a/images/zoom-help.png b/images/zoom-help.png new file mode 100644 index 0000000..1550070 Binary files /dev/null and b/images/zoom-help.png differ diff --git a/jekyll-theme-feeling-responsive.gemspec b/jekyll-theme-feeling-responsive.gemspec new file mode 100644 index 0000000..b68e53a --- /dev/null +++ b/jekyll-theme-feeling-responsive.gemspec @@ -0,0 +1,20 @@ +Gem::Specification.new do |s| + s.name = 'jekyll-theme-feeling-responsive' + s.version = '1.1' + s.date = '2021-06-21' + s.summary = 'A free flexible theme for Jekyll built on Foundation framework' + s.description = <<EOD +== Feeling Responsive +A free flexible theme for Jekyll built on Foundation framework. +You can use it for your company site, as a portfolio or as a blog. +See the [home page](http://phlow.github.io/feeling-responsive/) to get a +look at the theme and read about its features. +See the [documentation](http://phlow.github.io/feeling-responsive/documentation/) +to learn how to use the theme effectively in your Jekyll site. +EOD + s.authors = ['Moritz Sauer'] + s.email = ['https://phlow.de/kontakt.html'] + s.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) } + s.homepage = 'http://phlow.github.io/feeling-responsive/' + s.license = 'MIT' +end \ No newline at end of file diff --git a/pages/changelog.md b/pages/changelog.md index 9b13192..95f6e78 100644 --- a/pages/changelog.md +++ b/pages/changelog.md @@ -8,6 +8,9 @@ header: image_fullwidth: "header_unsplash_9.jpg" permalink: "/changelog/" --- +2021-06-21 // Version 1.92 +: I changed lots of different small things. The most important was to fix a problem from a commit caused to break the mobile navigation. + 2015-11-10 // Version 1.91 : I added a nasty hack to highlight the homepage in the topbar navigation. To do it, you have to add `homepage: true` to your homepage. The pages *404* and *search* are now excluded from the sitemap. diff --git a/pages/contact.md b/pages/contact.md index 4c0e4a0..573da45 100644 --- a/pages/contact.md +++ b/pages/contact.md @@ -1,12 +1,9 @@ --- -layout: page -title: "Contact" -meta_title: "Contact and use our contact form" -subheadline: "Wufoo-powered contact forms" -teaser: "Get in touch with me? Use the contact form." -permalink: "/contact/" +layout : page +title : "Contact" +meta_title : "Contact and use our contact form" +subheadline : "Contact Form" +teaser : "Get in touch with me? Use the contact form." +permalink : "/contact/" --- -If you need a fabulous contact form for your website, I suggest you use [Wufoo][1]. You can use three forms for free, you get no spam and if you get more than 100 entries you have to pay. - - - [1]: http://www.wufoo.com/ +If you need a fabulous contact form for your website, I suggest you use the free version of [Wufoo](http://www.wufoo.com/) \ No newline at end of file diff --git a/pages/documentation.md b/pages/documentation.md index c98e496..45e1ca9 100644 --- a/pages/documentation.md +++ b/pages/documentation.md @@ -22,6 +22,10 @@ header: <div class="medium-8 medium-pull-4 columns" markdown="1"> {% include _improve_content.html %} +## Edit Navigation {#edit-navigation} + +To customize the navigation of *Feeling Responsive*, you have to open the [YAML](https://jekyllrb.com/docs/datafiles/)-file `_data/navigation.yml`. Edit the data and adjust it to your own needs. + ## Different Page/Posts Formats {#formats} *Feeling Responsive* supports you with different templates for your content. These are the actual page/post formats: @@ -60,9 +64,6 @@ use in front matter via: `layout: video` <small markdown="1">[Up to table of contents](#toc)</small> {: .text-right } - - - ## Style your content with {#styling} Feeling Responsive offers lots of possibilities to style your articles. You can style your content in different ways. There are elements like subheadlines, feature images, header images, homepage images, meta data like categories and tags and many more. @@ -84,6 +85,12 @@ Quotes mix it up a little bit, if you write long articles. So use quotes: <small markdown="1">[Up to table of contents](#toc)</small> {: .text-right } +{% highlight html %} +> Age is an issue of mind over matter. If you don't mind, it doesn't matter. +<cite>Mark Twain</cite> +<small markdown="1">[Up to table of contents](#toc)</small> +{: .text-right } +{% endhighlight %} ## Comments @@ -94,9 +101,6 @@ By default comments are turned off. You can customize the default behaviour in ` <small markdown="1">[Up to table of contents](#toc)</small> {: .text-right } - - - ## Responsive Videos With foundation responsive videos are easy. [More ›](http://foundation.zurb.com/docs/components/flex_video.html) @@ -118,7 +122,7 @@ With foundation responsive videos are easy. [More ›](http://foundation.zurb.co ## Images: Title, Thumbnails, Homepage {#images} -There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/). +There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}{{ site.baseurl }}/headers/). ### Title Images @@ -148,8 +152,6 @@ image: homepage: header_homepage_13.jpg ~~~ - - ### Captions with URL Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest: @@ -240,7 +242,6 @@ This include creates a next/previous link to a post of the same category using t {% raw %} {% include next-previous-post-in-category %}{% endraw %} ~~~ - ### improve_content If your content is on Jekyll you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/). @@ -249,7 +250,6 @@ If your content is on Jekyll you can use this include to automatically generate {% raw %}{% include _improve_content.html %}{% endraw %} ~~~ - ### list-collection This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page the page gots filtered out via unless. The following example loops through a collection called *wordpress*. @@ -258,7 +258,6 @@ This include lets you loop through a collection to list all entries in that coll {% raw %}{% include list-collection collection='wordpress' %}{% endraw %} ~~~ - ### alert – Embed an alert in your content This include lets you easily display an alert. To use the include no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`. @@ -290,7 +289,6 @@ You can even use `<html>`-tags inside the alert. Beware: Use " and ' properly. <small markdown="1">[Up to table of contents](#toc)</small> {: .text-right } - ## Javascript/Foundation modules *Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster. diff --git a/pages/getting-started.md b/pages/getting-started.md index b5faef3..997bb01 100644 --- a/pages/getting-started.md +++ b/pages/getting-started.md @@ -1,23 +1,23 @@ --- -layout: page -show_meta: false -title: "Getting Started" -subheadline: "A Step-by-Step Guide" -teaser: "This step-by-step guide helps you to customize Feeling Responsive to your needs." +layout : page +show_meta : false +title : "Getting Started in 10 Steps" +subheadline : "A Step-by-Step Guide" +teaser : "This step-by-step guide helps you to customize Feeling Responsive to your needs." header: - image_fullwidth: "header_homepage_13.jpg" -permalink: "/getting-started/" + image_fullwidth : "header_homepage_13.jpg" +permalink : "/getting-started/" --- -1. Open `_config.yml` and work it through, it's well documented +1. Open `_config.yml` and work it through, it's well documented. 1. Add your own `logo.png` to `/assets/img/`. -1. Open `_data/socialmedia.yml` and add your own social media links. -1. Open `_data/navigation.yml` and customize your navigation. -1. Open `_data/language.yml` and translate the theme if necessary. -1. Open `_data/services.yml` and customize links in the footer. -1. Open `_data/network.yml` and customize links in the footer. +1. Add your own social media links and open `_data/socialmedia.yml`. +1. Open `_sass/_01_settings_colors.scss` and adjust the the colors to your taste. +1. Ccustomize your navigation and open `_data/navigation.yml`. +1. Translate this theme and open `_data/language.yml`. +1. Change the links in the footer and open `_data/services.yml` and `_data/network.yml`. 1. Open `_data/authors.yml` and edit author information and set default author in `config.yml`. -1. [Read the documentation][1] to check out all features of *Feeling Responsive*. 1. Make it yours and add your own content. +1. [Read the documentation][1] to check out all features of *Feeling Responsive*. <a class="radius button small" href="{{ site.url }}{{ site.baseurl }}/documentation/">Check out the documentation for all the tricks ›</a> diff --git a/pages/office-hours.md b/pages/office-hours.md new file mode 100644 index 0000000..342d7d0 --- /dev/null +++ b/pages/office-hours.md @@ -0,0 +1,10 @@ +--- +layout: page-fullwidth +title: "Office Hours" +subheadline: "" +teaser: "" +permalink: "/office-hours/" +header: no +--- + +<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FLos_Angeles&mode=WEEK&src=Y18xa3EwYzhoZmQ1bmhldG9zMjA0OG9oMDk5c0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%2333B679" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe> diff --git a/pages/pages-root-folder/index.md b/pages/pages-root-folder/index.md index 9b63780..a1cfa0d 100644 --- a/pages/pages-root-folder/index.md +++ b/pages/pages-root-folder/index.md @@ -4,24 +4,9 @@ # inserted automagically in the webpage. To make # this work, you have to use › layout: frontpage # -layout: frontpage -header: - image_fullwidth: header_unsplash_12.jpg -widget1: - title: "Blog & Portfolio" - url: 'http://phlow.github.io/feeling-responsive/blog/' - image: widget-1-302x182.jpg - text: 'Every good portfolio website has a blog with fresh news, thoughts and develop­ments of your activities. <em>Feeling Responsive</em> offers you a fully functional blog with an archive page to give readers a quick overview of all your posts.' -widget2: - title: "Why use this theme?" - url: 'http://phlow.github.io/feeling-responsive/info/' - text: '<em>Feeling Responsive</em> is heavily customizable.<br/>1. Language-Support :)<br/>2. Optimized for speed and it's responsive.<br/>3. Built on <a href="http://foundation.zurb.com/">Foundation Framework</a>.<br/>4. Seven different Headers.<br/>5. Customizable navigation, footer,...' - video: '<a href="#" data-reveal-id="videoModal"><img src="http://phlow.github.io/feeling-responsive/images/start-video-feeling-responsive-302x182.jpg" width="302" height="182" alt=""/></a>' -widget3: - title: "Download Theme" - url: 'https://github.com/Phlow/feeling-responsive' - image: widget-github-303x182.jpg - text: '<em>Feeling Responsive</em> is free and licensed under a MIT License. Make it your own and start building. Grab the <a href="https://github.com/Phlow/feeling-responsive/tree/bare-bones-version">Bare-Bones-Version</a> for a fresh start or learn how to use it with the <a href="https://github.com/Phlow/feeling-responsive/tree/gh-pages">education-version</a> with sample posts and images. Then tell me via Twitter <a href="http://twitter.com/phlow">@phlow</a>.' +layout: page-fullwidth +header: no + # # Use the call for action to show a button on the frontpage # @@ -32,21 +17,49 @@ widget3: # to use the main color or success, alert or secondary. # To change colors see sass/_01_settings_colors.scss # -callforaction: - url: https://tinyletter.com/feeling-responsive - text: Inform me about new updates and features › - style: alert permalink: /index.html # # This is a nasty hack to make the navigation highlight # this page as active in the topbar navigation # homepage: true +title: "Software Tools & Techniques Lab (UCSD CSE15L)" --- -<div id="videoModal" class="reveal-modal large" data-reveal=""> - <div class="flex-video widescreen vimeo" style="display: block;"> - <iframe width="1280" height="720" src="https://www.youtube.com/embed/3b5zCFSmVvU" frameborder="0" allowfullscreen></iframe> - </div> - <a class="close-reveal-modal">×</a> -</div> +Joe Gibbs Politz - <code>jpolitz@eng.ucsd.edu</code> - [jpolitz.github.io](https://jpolitz.github.io) + +## Material and Schedule + +<ul class="material"> + {% for post in site.categories.week reversed %} + <li class="{% if post.current %}current{% else %}gray{% endif %}"> + <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a> + <ul> + {% for todo in post.todos %} + <li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> + {% endfor %} + </ul> + + </li> + {% endfor %} +</ul> + +## Course Calendar + +This calendar shows rooms for scheduled in-person lecture and lab meetings. + +Visit Canvas to see Zoom links for remote sessions in the first two weeks. + +<iframe src="https://calendar.google.com/calendar/embed?src=c_qr732udb46jbievpbp102ekjmc%40group.calendar.google.com&ctz=America%2FLos_Angeles&mode=WEEK" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> + +## Frequently Asked Questions + +For now, this page is a placeholder and holds frequently asked questions about +the course. This site will switch to containing the official course website and +syllabus at the start of winter quarter (early January 2022). + + +**Q: Will the course have remote options?** + +Yes. The course will have remote lab options for the duration of the quarter. +There will be in-person lab options starting week 5. diff --git a/pages/roadmap.md b/pages/roadmap.md index f823aeb..10ef61a 100644 --- a/pages/roadmap.md +++ b/pages/roadmap.md @@ -1,56 +1,10 @@ --- -layout: page -title: "Roadmap" -subheadline: "ToDo-List & Ideas" -teaser: "Here are some ideas and features I want to implement in the future." +layout : page +title : "Roadmap – What's up next?!?" +subheadline : "ToDo-List & Ideas" +teaser : "<em>Feeling Responsive</em> works fine. I am happy lots of people use it. Currently I have no plans to make it <em>better</em> or <em>worse</em>." header: - image_fullwidth: "header_roadmap_3.jpg" -permalink: "/roadmap/" + image_fullwidth : "header_roadmap_3.jpg" +permalink : "/roadmap/" --- -## Ideas and possible new features -{: .t30 } - -* Get rid of Backstretch.js and solve it with pure CSS -* [Custom Scrollbar](https://css-tricks.com/custom-scrollbars-in-webkit/) -* Layout/Template for category-archives -* Layout/Template for collections -* Layout/Template for Landingpage -* Clean bare-bones version of *Feeling Responsive* -* Even better responsive typography -* Google AdSense ads -* More post-formats for blogging like special post formats for links, audio, tweets,... -* Make a video-sitemap.xml - - - -## Done - -* [<s>Add schema.org Markup for Videos</s>](https://support.google.com/webmasters/answer/2413309?hl=en) -* [<s>Submit <em>Feeling Responsive</em> to jekyllthemes.org</s>](http://jekyllthemes.org/themes/feeling-responsive/) -* <s>Use `style` in front matter to inject css-styles into `<head></s> -* <s>Add include to loop through collections</s> -* <s>Now with optional caption for header</s> -* [<s>Refined humans.txt</s>](http://humanstxt.org/) -* [<s>Produce an introduction video to showcase *Feeling Responsive*</s>](https://www.youtube.com/embed/3b5zCFSmVvU) -* [<s>Additional header with text</s>]({{ site.url }}{{ site.baseurl }}/headers/) -* <s>Added Google Analtics support</s> -* [<s>Add redirection layout by KanishkKanishk</s>](http://codingtips.kanishkkunal.in/redirects-jekyll-github-pages/) -* <s>Convert Foundation Sass to use native Jekyll Sass support</s> -* <s>Optimize HTML and use Schema.org-Attributes › http://schema.org/Article</s> -* <s>Disqus comments</s> -* <s>Rework `list-entries.html` › now language ready</s> -* [<s>Create custom 404.html-webpage</s>](https://help.github.com/articles/custom-404-pages/) -* <s>Add simple search box with Google</s> -* <s>Alternative non-landscape header</s> -* <s>Patterns for header</s> -* <s>Clean up color scheme and highlighting colors</s> -* <s>Make theme translation ready</s> -* [<s>Add draft-templates for new pages/posts</s>](https://github.com/Phlow/feeling-responsive/tree/gh-pages/_drafts) -* [<s>Step-by-Step-Guide to customize *Feeling Responsive*</s>]({{ site.url }}{{ site.baseurl }}/getting-started/) -* [<s>Video-Post-Format to feature videos in a huge way</s>]({{ site.url }}{{ site.baseurl }}/design/video/) -* <s>Title and captions for images</s> -* <s>SEO › Add metadescription to header.html and front matter</s> -* [<s>Adding Open Graph for Jekyll</s>](https://gist.github.com/pathawks/1406355) -* [<s>Gallery Post Example</s>]({{ site.url }}{{ site.baseurl }}/design/gallery/) -* [<s>Adding pagination</s>](http://jekyllrb.com/docs/pagination/) \ No newline at end of file diff --git a/pages/syllabus.md b/pages/syllabus.md new file mode 100644 index 0000000..e114cf5 --- /dev/null +++ b/pages/syllabus.md @@ -0,0 +1,128 @@ +--- +layout: page-fullwidth +title: "Syllabus" +subheadline: "Policies and grading for the course" +teaser: "" +permalink: "/syllabus/" +header: no +--- + +<div class="row"> +<div class="medium-4 medium-push-8 columns" markdown="1"> +<div class="panel radius" markdown="1"> +**Table of Contents** +{: #toc } +* TOC +{:toc} +</div> +</div><!-- /.medium-4.columns --> + +<div class="medium-8 medium-pull-4 columns" markdown="1"> + +Some of these policies are provisional due to the first 2 weeks of class being +remote. Check this page in week 2 (around January 12th) for updates regarding +week 3 and beyond. + +## Announcements + +We will announce important events in the course through Piazza. You must have a +Piazza account and be able to receive notifications through Piazza or check it +daily. + +You can join our Piazza course here: [https://piazza.com/ucsd/winter2022/cse15l](https://piazza.com/ucsd/winter2022/cse15l) + +## Course Components {#components} + +There are several components to the course: + +- **Lab sessions** +- **Lecture sessions & weekly quizzes** +- **Lab reports/portfolio posts** +- **Skill demonstrations** + +### Labs + +The course's lab component is the **main part** of the course, which meets for 2 +hours on Wednesdays or Thursdays. In each lab you'll switch between working on +your own, working in pairs, and participating in group discussions about your +approach, lessons learned, programming problems, and so on. + +The lab sessions and groups will be led by TAs and tutors, who will note your +participation in these discussions for credit. + +### Lecture Sessions & Weekly Quizzes + +Lecture sessions are on Monday and Wednesday. You can attend any of the three +lecture sessions on each day. In the first two weeks they will be held via Zoom. +In following weeks they will be held in the normally scheduled lecture halls, +and recorded via Zoom. Lecture attendance is optional. + +Each week there will be an online, untimed, multiple-tries quiz due on +_Wednesday morning_ (including week 1). The purpose of this quiz is to make sure +everyone has checked in on the concepts we will be using in lab on Wednesday and +Thursday. + +The lecture setup is roughly that on Monday we will introduce the topics and any +reading about the quiz material, then Wednesday we will review the quiz +in class and take additional questions. + +### Lab Reports/Portfolio Posts + +Every _two_ weeks, you will write a lab report on work from the previous two +weeks, due on Fridays. This will take the form of a blog post on a personal site +you will create in the second week of the course. At the end of the quarter this +means you'll have a personal web site with 5 posts detailing what you learned. +Some lab reports can be completed with a partner; individual assignments will +indicate which ones. + +For each post, our staff will review it and either give full credit or give +feedback; you must respond to the feedback to receive full credit on your post. +We'll post specific final deadlines for this feedback + +### Skill Demonstrations + +Twice during the quarter (week 5 and week 9) you you will record a screencast of +yourself demonstrating some of the skills you learned. This takes the place of +in-person midterm exams. We will grade these screencasts and give feedback on if +they correctly demonstrated what we were looking for. + +Then, in place of the final exam, you can re-do one or both of these +demonstrations if you missed credit on them to make up the missed credit. The +final exam may not be exacly the same tasks, but will be similar. + +## Grading {#grading} + +Each component of the course has a minimum achievement level to get an A, B, or +C in the course. You must reach that achievement level in _all_ of the +categories to get an A, B, or C. Pluses and minuses will be given around the +boundaries of these categories at the instructor's discretion. + +- **A** achievement: + - 8 or more lab participation + - All quizzes complete and correct, no more than 3 late + - All 5 lab reports complete with full credit/feedback addressed + - Full score on both skill demonstrations (either initially or with the + final make-up) +- **B** achievement: + - 7 or more lab participation + - 9/10 quizzes complete and correct, no more than 3 late + - All 5 lab reports submitted, 4 with full credit/feedback addressed + - Full score on both skill demonstrations (either initially or with the + final make-up) +- **C** achievement: + - 6 or more lab participation + - 8/10 quizzes complete and correct, no more than 3 late + - At least 4 lab reports submitted, 3 with full credit/feedback addressed + - Full score on one skill demonstrations, both submitted (either initially + or with the final make-up) + +## Consent to Participate in Educational Research + +You can download a copy of the form below +[here](https://docs.google.com/document/d/14HNe2U5-oBXtWgNKqNpTkhPiBjEhnlOKX2DJfBhnOO8/) +if you need a copy to fill out. + +<iframe width="100%" height="800px" src="https://docs.google.com/document/d/e/2PACX-1vSssZh6Sb22jt0dKnwc2NHG7wKPCE1Ehi-o2QdJUd9c1MZjY_1AvcIrH-a2tTIcHEROGfGFJhNfJAjW/pub?embedded=true"></iframe> + + +</div> \ No newline at end of file diff --git a/pages/weeks.md b/pages/weeks.md new file mode 100644 index 0000000..1c09e1e --- /dev/null +++ b/pages/weeks.md @@ -0,0 +1,22 @@ +--- +layout: page +show_meta: false +title: "Weekly Material" +subheadline: "Material for the course, organized by week" +header: no +permalink: "/weeks/" +--- + +<ul class="material"> + {% for post in site.categories.week reversed %} + <li class="{% if post.current %}current{% endif %}"> + <a href="{{ site.url }}{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a> + <ul> + {% for todo in post.todos %} + <li><a href="{{ todo.url }}">{{ todo.name }}</a> - Due {{ todo.due-date }}</li> + {% endfor %} + </ul> + + </li> + {% endfor %} +</ul>