From b4aca2e654d2780dee4d02a1f29d0b83e886c852 Mon Sep 17 00:00:00 2001 From: juanis2112 Date: Thu, 20 Aug 2020 01:29:26 -0500 Subject: [PATCH 1/7] Add embedded script for the first video including corresponding directives --- doc/_static/custom_styles.css | 45 ++++++++++++++++++++++++++++ doc/first-steps-with-spyder.rst | 53 +++++++++++++++++++++++++-------- 2 files changed, 85 insertions(+), 13 deletions(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index c517cd04a..040208195 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -160,3 +160,48 @@ div#driver-popover-item .tour-progress-indicator { a[href="#join-our-community"] + ul li.toc-h3 { display: none; } + +.dropdown-videos { + width: 640px; + margin-left: auto; + margin-right: auto; + border: 0; + border-radius: unset; +} + +.dropdown-videos .summary-content { + background-color: #dce2e8; +} + +.dropdown-videos .card-header { + background-color: white; + padding-top: 0.1em; + padding-bottom: 0.1em; + color: black; + font-weight: bold; + background-color: #8b9399; + font-size: 0.8em; + border-radius: unset; +} + +.dropdown-videos .card-header::first-letter { + font-weight: unset; +} + +.dropdown-videos .card-header::first-child { + border-radius: unset; +} + +details.dropdown-videos .summary-up, details.dropdown-videos .summary-down { + top: 0.1em !important; +} + +div.scroll { + margin:1px, 1px; + height: 250px; + overflow-x: hidden; + overflow-y: auto; + text-align:justify; + font-size: 0.8em; + color: #2c2e30; +} diff --git a/doc/first-steps-with-spyder.rst b/doc/first-steps-with-spyder.rst index 228a213f7..475af1a87 100644 --- a/doc/first-steps-with-spyder.rst +++ b/doc/first-steps-with-spyder.rst @@ -13,15 +13,41 @@ Getting started Discover the basics of using the Spyder interface and get an introduction to its four main panes, along with a quick look at the others. +* Find out different ways to open Spyder +* Understand the key elements of Spyder’s interface +* Learn more about Spyder’s four core panes +* Explore the other default panes + .. youtube:: E2Dap5SfXkI :height: 360 :width: 640 :align: left -* Find out different ways to open Spyder -* Understand the key elements of Spyder’s interface -* Learn more about Spyder’s four core panes -* Explore the other default panes +.. rst-class:: dropdown-videos + +.. dropdown:: Video transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone! I’m Juanita, and in this video I’m going to show you how to open Spyder and go over the basics of Spyder’s interface. We will learn about Spyder’s four panes that you’ll likely be using most often, as well as briefly explore the others that are open by default. If you don’t have Spyder installed and would like to follow along, you can download it at the link below this video. + + The easiest way to open Spyder, is by opening Anaconda Navigator and clicking on Spyder application once it is open. In case you have an older version of Spyder in Anaconda, open the command line (or the anaconda prompt in the case of windows) and type the commands conda update anaconda and conda install spyder=4. + + To launch Spyder without opening Navigator, open your command line and type spyder. If you followed the installation guide, you should have everything necessary to open Spyder 4. + + This is what Spyder 4 looks like in its default configuration; though you can thoroughly customize it, which we’ll get to in a later tutorial. You can see that it is divided into three sections showing three different panes: the Editor, the Console and the Help viewer. These three, along with the Variable Explorer, are the 4 core panes you’ll work with the most in Spyder. + + On the left we have the code editor, where you can open, edit and run files. Bottom right is the IPython console, which you can use both interactively and to run your code in the Editor. It shows you which version of Python you are using. Above it, you’ll find the Help pane, where you can get more information and documentation for any object in the Editor or Console by pressing Ctrl+I (or Cmd + I in Mac OS). We’ll see how to do this in our next video. + + For the two sections on the right, you can switch tabs to see the other panes that are open by default when launching Spyder. In the top section, you can switch to the Variable Explorer, which shows you the name, type, size and value of the variables that you have previously defined in the Editor or the Console. You can also modify the value of these variables directly from this pane by double clicking them right under the Value column.The Plots pane will show you the figures you generate with Matplotlib and other libraries, and the Files Pane [switch to] allows you to browse the files in your computer and open them in the Editor with just a click. + + Finally, in the bottom section you can also access the History Pane, which shows you the commands you have entered in the IPython Console, including those from previous sessions. + + I hope you’re now familiar with the basics of using the Spyder interface. In the next video, we will start working with Spyder’s core panes. + + Happy Spydering! + @@ -31,11 +57,6 @@ Learning the basics Learn the basics of using Spyder’s four main panes. -.. youtube:: WV9bm4ey7Cg - :height: 360 - :width: 640 - :align: left - * Open and edit a file in Spyder’s Editor * Run a script in the Editor and see the output in Spyder’s IPython Console * Execute basic Python commands in the IPython console @@ -43,6 +64,11 @@ Learn the basics of using Spyder’s four main panes. * View and interact with the variables in Spyder’s Variable Explorer * Get documentation in the Help pane in two different ways +.. youtube:: WV9bm4ey7Cg + :height: 360 + :width: 640 + :align: left + ============= @@ -51,12 +77,13 @@ Customization Learn how to customize Spyder’s interface to match your workflow and development style. +* Choose your preferred fonts +* Switch between different interface, icon and syntax themes +* Show, hide, undock and rearrange Spyder panes +* Split, close and pop out Editor panels + .. youtube:: -dARZBUDk_s :height: 360 :width: 640 :align: left -* Choose your preferred fonts -* Switch between different interface, icon and syntax themes -* Show, hide, undock and rearrange Spyder panes -* Split, close and pop out Editor panels From 43fa5cac315399039771d57f69a4057b9fbde556 Mon Sep 17 00:00:00 2001 From: juanis2112 Date: Thu, 20 Aug 2020 01:32:16 -0500 Subject: [PATCH 2/7] Change video iframe bottom margin to cero --- doc/_static/custom_styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index 040208195..ae80bc74f 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -55,7 +55,7 @@ iframe { display: block; margin-left: auto; margin-right: auto; - margin-bottom: 1.5rem; + margin-bottom: 0; margin-top: 1.0rem; } From d95090cbd4c895dc74cf9308a6a0c14273e108b0 Mon Sep 17 00:00:00 2001 From: juanis2112 Date: Thu, 20 Aug 2020 20:59:19 -0500 Subject: [PATCH 3/7] Style changes according to ux-review --- doc/_static/custom_styles.css | 12 ++++++------ doc/first-steps-with-spyder.rst | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index ae80bc74f..fa5aa739d 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -170,16 +170,15 @@ a[href="#join-our-community"] + ul li.toc-h3 { } .dropdown-videos .summary-content { - background-color: #dce2e8; + background-color: #EDEDED; } .dropdown-videos .card-header { background-color: white; padding-top: 0.1em; padding-bottom: 0.1em; - color: black; - font-weight: bold; - background-color: #8b9399; + color: white; + background-color: #4E4E4E; font-size: 0.8em; border-radius: unset; } @@ -200,8 +199,9 @@ div.scroll { margin:1px, 1px; height: 250px; overflow-x: hidden; - overflow-y: auto; - text-align:justify; + overflow-y: auto; font-size: 0.8em; color: #2c2e30; + padding-left: 1.2rem; + padding-right:1.2rem; } diff --git a/doc/first-steps-with-spyder.rst b/doc/first-steps-with-spyder.rst index 475af1a87..c37690c7b 100644 --- a/doc/first-steps-with-spyder.rst +++ b/doc/first-steps-with-spyder.rst @@ -25,7 +25,7 @@ Discover the basics of using the Spyder interface and get an introduction to its .. rst-class:: dropdown-videos -.. dropdown:: Video transcript +.. dropdown:: Transcript :animate: fade-in .. div:: scroll From 7ee2ce99ff95183e23151a2e4371dddca5feeff6 Mon Sep 17 00:00:00 2001 From: juanis2112 Date: Mon, 24 Aug 2020 11:34:39 -0500 Subject: [PATCH 4/7] Add video container for responsiveness --- doc/_static/custom_styles.css | 14 ++++++++++++++ doc/conf.py | 5 +++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index fa5aa739d..ade6d9f03 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -167,6 +167,7 @@ a[href="#join-our-community"] + ul li.toc-h3 { margin-right: auto; border: 0; border-radius: unset; + margin-top:-1px; } .dropdown-videos .summary-content { @@ -205,3 +206,16 @@ div.scroll { padding-left: 1.2rem; padding-right:1.2rem; } + +video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + max-width: 640px; + max-height: 360px; + margin-left: auto; + margin-right: auto; + background-color: black; +} diff --git a/doc/conf.py b/doc/conf.py index 8b8f887eb..cd0859628 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -378,11 +378,12 @@ def run(self): class Youtube(IframeVideo): - html = ('') + 'class="align-%(align)s">') def setup(builder): From 23a4f282c79e8431ecab29f7215040af1234d13a Mon Sep 17 00:00:00 2001 From: juanis2112 Date: Tue, 25 Aug 2020 22:19:15 -0500 Subject: [PATCH 5/7] Add responsive behavior and include the other 5 scripts --- doc/_static/custom_styles.css | 23 ++++-- doc/conf.py | 5 +- doc/first-steps-with-spyder.rst | 71 ++++++++++++++--- doc/working-with-spyder.rst | 137 +++++++++++++++++++++++++++++--- 4 files changed, 204 insertions(+), 32 deletions(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index ade6d9f03..79ee84444 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -56,7 +56,12 @@ iframe { margin-left: auto; margin-right: auto; margin-bottom: 0; - margin-top: 1.0rem; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding-top: 0; } /*** Custom colors for specific FA icons in the index page ***/ @@ -162,7 +167,8 @@ a[href="#join-our-community"] + ul li.toc-h3 { } .dropdown-videos { - width: 640px; + width: 100%; + max-width: 640px; margin-left: auto; margin-right: auto; border: 0; @@ -175,7 +181,6 @@ a[href="#join-our-community"] + ul li.toc-h3 { } .dropdown-videos .card-header { - background-color: white; padding-top: 0.1em; padding-bottom: 0.1em; color: white; @@ -207,15 +212,19 @@ div.scroll { padding-right:1.2rem; } -video-container { +div.video-container { position: relative; padding-bottom: 56.25%; - padding-top: 30px; height: 0; overflow: hidden; - max-width: 640px; - max-height: 360px; + width: 100%; margin-left: auto; margin-right: auto; background-color: black; } + +div.video-container-container { + max-width: 640px; + margin-left: auto; + margin-right: auto; +} diff --git a/doc/conf.py b/doc/conf.py index cd0859628..fdb94458e 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -378,12 +378,13 @@ def run(self): class Youtube(IframeVideo): - html = ('
' + html = ('
' + '
' '
') + 'class="align-%(align)s">
') def setup(builder): diff --git a/doc/first-steps-with-spyder.rst b/doc/first-steps-with-spyder.rst index c37690c7b..d736b14c0 100644 --- a/doc/first-steps-with-spyder.rst +++ b/doc/first-steps-with-spyder.rst @@ -30,24 +30,28 @@ Discover the basics of using the Spyder interface and get an introduction to its .. div:: scroll - Hello everyone! I’m Juanita, and in this video I’m going to show you how to open Spyder and go over the basics of Spyder’s interface. We will learn about Spyder’s four panes that you’ll likely be using most often, as well as briefly explore the others that are open by default. If you don’t have Spyder installed and would like to follow along, you can download it at the link below this video. + Hello everyone! I'm Juanita, and in this video I'm going to show you how to open Spyder and go over the basics of Spyder's interface. We will learn about Spyder's four panes that you'll likely be using most often, as well as briefly explore the others that are open by default. If you don't have Spyder installed and would like to follow along, you can download it at the link below this video. - The easiest way to open Spyder, is by opening Anaconda Navigator and clicking on Spyder application once it is open. In case you have an older version of Spyder in Anaconda, open the command line (or the anaconda prompt in the case of windows) and type the commands conda update anaconda and conda install spyder=4. + The easiest way to open Spyder is by opening Anaconda Navigator and clicking on the Spyder application. In case you have an older version of Spyder in Anaconda, open the command line (or the Anaconda Prompt in the case of Windows) and type the commands: - To launch Spyder without opening Navigator, open your command line and type spyder. If you followed the installation guide, you should have everything necessary to open Spyder 4. + .. code-block:: bash - This is what Spyder 4 looks like in its default configuration; though you can thoroughly customize it, which we’ll get to in a later tutorial. You can see that it is divided into three sections showing three different panes: the Editor, the Console and the Help viewer. These three, along with the Variable Explorer, are the 4 core panes you’ll work with the most in Spyder. + conda update anaconda + conda install spyder=4 + + To launch Spyder without opening Navigator, open your command line and type ``spyder``. If you followed the :doc:`installation`, you should have everything necessary to open Spyder 4. + + This is what Spyder 4 looks like in its default configuration, though you can thoroughly customize it, which we'll get to in a later tutorial. You can see that it is divided into three sections showing three different panes: the Editor, the IPython Console and the Help viewer. These three, along with the Variable Explorer, are the four core panes you'll work with the most in Spyder. - On the left we have the code editor, where you can open, edit and run files. Bottom right is the IPython console, which you can use both interactively and to run your code in the Editor. It shows you which version of Python you are using. Above it, you’ll find the Help pane, where you can get more information and documentation for any object in the Editor or Console by pressing Ctrl+I (or Cmd + I in Mac OS). We’ll see how to do this in our next video. + On the left we have the Editor, where you can open, edit and run files. Bottom right is the IPython Console, which you can use both interactively and to run your code in the Editor. It shows you which version of Python you are using. Above it, you'll find the Help pane, where you can get more information and documentation for any object in the or by pressing :kbd:`Ctrl-I` (or :kbd:`Cmd-I` on macOS). We'll see how to do this in our next video. - For the two sections on the right, you can switch tabs to see the other panes that are open by default when launching Spyder. In the top section, you can switch to the Variable Explorer, which shows you the name, type, size and value of the variables that you have previously defined in the Editor or the Console. You can also modify the value of these variables directly from this pane by double clicking them right under the Value column.The Plots pane will show you the figures you generate with Matplotlib and other libraries, and the Files Pane [switch to] allows you to browse the files in your computer and open them in the Editor with just a click. - - Finally, in the bottom section you can also access the History Pane, which shows you the commands you have entered in the IPython Console, including those from previous sessions. + For the two sections on the right, you can switch tabs to see the other panes that are open by default when launching Spyder. In the top section, you can switch to the , which shows you the name, type, size and value of the variables that you have previously defined in the or the . You can also modify the value of these variables directly from this pane by double clicking them under the column. The Plots pane will show you the figures you generate with Matplotlib and other libraries, and the Files pane allows you to browse the files on your computer and open them in the Editor with just a click. - I hope you’re now familiar with the basics of using the Spyder interface. In the next video, we will start working with Spyder’s core panes. + Finally, in the bottom section you can also access the History pane, which shows you the commands you have entered in the Console, including those from previous sessions. - Happy Spydering! + I hope you're now familiar with the basics of using the Spyder interface. In the next video, we will start working with Spyder's core panes. + Happy Spydering! @@ -69,6 +73,27 @@ Learn the basics of using Spyder’s four main panes. :width: 640 :align: left +.. rst-class:: dropdown-videos + +.. dropdown:: Transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone! I'm Juanita, and in this video I will show you how to start working with Spyder's four main panes. First, let's take a look at the Editor, which you can use to open, edit and run files from your computer. I will open a short “Hello World” program for this demo, which you can `download here`_. Once you have it open in your Editor, you can execute it by pressing the green run button. [show button] We can see the output in the Python Console [Show IPython console] as well as the path of the file that we are running and the working directory where this code was run. + + .. _download here: https://drive.google.com/file/d/18Ai-XY9kIPm9x_7-0RBakV2a6dRVqh-L/view + + We can also run any Python code that is entered directly in the IPython Console. For example, we can type ``print(“Hello”)`` and see the output. Or, we can try some math operations and see the results here too. Note that for implicitly printed output, there is a red indication that differs from the output of the ``print()`` function. + + Now, let's start defining some variables. We can do this both from the editor or from the Console. If I define a variable ``a = 10`` and then run this code, I can see its value in the console just by typing its name ``a``. However, you can also assign any variable in the IPython console (``b = 20``) and its value will be stored too. In both cases, they can also be seen in the Variable Explorer pane, which shows the name, type, size and value of each of the objects previously defined. In this case, we see variables ``a`` and ``b``, both of type int and with size 1. We can also define a list ``l`` with ``l = [1, 2, 3]`` and see that the type of the variable is list and the size is 3. + + We can change the values of the variables in the Variable Explorer too by double-clicking them and typing their new value. Now, we can check their new value in the console. In the case of a more complex type like a list, double-clicking it will open a viewer in which you can modify each of its values separately, along with other more complex operations which we'll demonstrate in a future video. We can remove a variable by right-clicking it and selecting the option Remove. After doing this, we can check in the IPython Console that the variable was actually deleted. + + Finally, we are going to learn how to get help for objects in two different ways. First, we can press :kbd:`Ctrl-I` (or :kbd:`Cmd-I` on macOS) right after the name of an object written in the Editor or the Console, for example ``numpy.array``. You can see that we obtain its documentation in the Help pane if it is available. Second, if we change the Source dropdown option to Console, we can type its name in the object box in the Help pane. Now we can get help for Numpy arrays. + + You should now be ready to start using Spyder's four main panes. Check out our next video to continue learning and as always, Happy Spydering! + ============= @@ -87,3 +112,29 @@ Learn how to customize Spyder’s interface to match your workflow and developme :width: 640 :align: left +.. rst-class:: dropdown-videos + +.. dropdown:: Transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone, I'm Juanita! In this video, I will show you how to customize Spyder to match your workflow and development style. + + First, we are going to learn how to change the font in the Editor, IPython Console and Help panes. To do this, go to Preferences, select the Appearance entry and scroll down to Fonts. You can change both the style and the size of the font for both plain and rich text. You can see how this affects the font in the Editor, Console and Help panes. + + In this same dialog, you can easily change the syntax highlighting theme, for which you can see the preview at the right of the window. Note that the Spyder's interface theme changes to match the highlighting theme because the Interface theme option is set to Automatic by default. However, you can change the theme for the entire Spyder interface choosing between Light and dark. After selecting this change, click Apply to restart Spyder to apply the new theme. + + Beyond just Spyder's preferences, you can freely rearrange the panes in Spyder's main window. To show or hide panes, go to Panes under the View menu, and select which ones you want to see. For example, let's hide the Files pane and show the Profiler pane. You can also close a pane from its options menu, which will hide it from the main window. + + By default, the panes and toolbars are locked so they can't be moved accidentally. However, unchecking the option Lock panes and toolbars in the View menu will allow you to move them freely anywhere on the window, by dragging them from the top and dropping them at any position you like. You can also undock a pane, which will open a new window with it. You can have as many separate windows as you have panes, if you choose. This feature is very useful if you work with several monitors because you can undock the Editor and move it to a different monitor, while working with the rest of the panes in your main monitor. + + Additionally, you can split the Editor pane vertically or horizontally in as many copies as you want, and open one or more panels in separate Spyder windows, complete with their own toolbar, outline and status bar. + + Finally, each pane can be customized further under its respective options menu and Preferences panel. + + With all these options, you can customize Spyder to your heart's content. However, if you ever want to return to its default configuration, you can always reset the window layout under Window Layouts in the View menu, or your entire Spyder configuration with the Reset to Default button in the Preferences. + + Enjoy your customized version of Spyder, and happy Spydering! + + diff --git a/doc/working-with-spyder.rst b/doc/working-with-spyder.rst index 49c210729..eaace979f 100644 --- a/doc/working-with-spyder.rst +++ b/doc/working-with-spyder.rst @@ -12,17 +12,44 @@ Beyond the main panes Explore how to take advantage of Spyder’s functionality beyond just the four core panes. -.. youtube:: NOu9JTkUuDg - :height: 360 - :width: 640 - :align: left - * View, manage and save figures with the Plots pane * Browse, interact with and open external programs in the in the Files pane * Quickly navigate within and between files with the Outline pane * Search for text or regular expressions across your entire project with the Find pane * Discover and explore structured documentation in the Online Help pane +.. youtube:: NOu9JTkUuDg + :height: 360 + :width: 640 + :align: left + +.. rst-class:: dropdown-videos + +.. dropdown:: Transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone! I'm Juanita, and I am going to show you how to use some of the remaining panes available in Spyder beyond just the four primary ones. + + Let's start with the Plots pane, which is open by default when launching Spyder. To see how it works, let's open a file that will generate a couple plots from Matplotlib's documentation. You can view the generated plots in the Plots pane and browse between them using the arrows, or simply clicking them in the sidebar. + + If you open the pane's options menu, you will see that Fit Plots to Window is enabled by default. Disabling it will allow you to zoom the plots in or out. You can also see that Mute inline plotting is enabled, which prevents the same figures from also appearing in the IPython Console. Note that every time that the code is run, new copies of the plots are generated in the pane, but you can remove any you don't want to keep around with the X button in the pane toolbar. Additionally, the pane automatically updates to show the plots generated by each console as you switch between them. + + To use a plot in another document, click the Copy to Clipboard button and paste it wherever you want, such as a word processor. Additionally, you can save a plot as a PNG by clicking the Save icon. + + The Files pane, also open by default, lets you browse the contents of the directories on your computer, open them in the Editor, and perform a variety of other file operations. You can show or hide the size, kind and date of the files in the pane's options menu. As you change the top-level folder you're viewing in the pane, Spyder's working directory shown in the top right of the main toolbar will update, which will also be synchronized with the currently active console. Double-clicking a text file will open it in the Editor, and copying one or more files will allow you to paste them as automatically-formatted absolute or relative paths. Right-clicking any item will offer an array of additional options for interacting with it. + + You can also open a file in the system default external application, or set up a custom file association in the File Associations tab of the Files preferences pane. For example, we can add the ``.csv`` extension and associate it with LibreOffice Calc under associated applications. Now every time you click a file with this extension, it opens externally with this program. + + Now, let's see how to use the Outline pane to navigate within a file. First, we have to open the pane under Panes in the View menu, since it isn't visible by default. As you can see, it shows you all the classes, methods and functions that are currently defined, and allows you to move between them with just a click. For a very large file like this one, it is very useful to switch between classes easily instead of scrolling through the four-thousand-plus lines of code. You can also browse the methods of a class by expanding it using the arrows, or the buttons in the Outline pane's toolbar. The Outline continuously updates to highlight the function, method or class corresponding to the cursor position in your code, so you can easily keep track of what object you are working on. Finally, by going to the pane options menu and activating Show all files, you can easily switch between the scripts and modules you have open, which is particularly important for navigating larger projects. + + The Files pane is another useful tool for particularly larger projects. Like the Outline pane, it can be opened under Panes in the View menu. This allows you to view and navigate through all occurrences of text or regular expressions in any file in the working directory, project or another custom directory. We see, for example, in the ``mainwindow.py`` file we import the ``is_dark_font_color`` function. If we want to quickly find the file where it was defined, we can write this string in the search bar. With this search, we get 7 matches from 3 different files. When we click on any of these matches, the file is opened automatically in the Editor, right where this string appears. + + Finally, we'll learn how to browse documentation using the Online Help pane. Once you open it, again under Panes in the View menu, you will see an index of modules from which documentation is available, including both those in the Python standard library and any third-party packages that may be installed in Spyder's environment. For example, we can find help for Numpy, Pandas and Matplotlib, which are all installed if you've downloaded Spyder with Anaconda. You can browse the contents in the built-in web browser provided by the pane, and click the hyperlinks within to navigate to different pages. You can also enter the name of the item you'd like documentation on in the Get field or in the space over the pane's toolbar, to load its information directly. If you're not sure of the object's name, use the Search field to view a list of results applicable to any keyword. + + Now that you're familiar with a wider array of Spyder's panes and features, you can accomplish a variety of common programming tasks with ease. Stay tuned for our our next videos to further add to your scientific toolbox, and as always, Happy Spydering! + =========================== @@ -31,15 +58,64 @@ Improving your code quality Learn how to improve the quality of your programs using code analysis. +* Open and use Code Analysis to evaluate the quality and style of Python files +* Run analysis on a file in the Editor or anywhere on your computer +* Determine what an error, warning or message means and how to fix it +* Turn off messages on a line, in a file or globally + .. youtube:: JnljnAjdO_w :height: 360 :width: 640 :align: left -* Open and use Code Analysis to evaluate the quality and style of Python files -* Run analysis on a file in the Editor or anywhere on your computer -* Determine what an error, warning or message means and how to fix it -* Turn off messages on a line, in a file or globally +.. rst-class:: dropdown-videos + +.. dropdown:: Transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone! I'm Juanita, and in this video we will learn how to improve your code quality using the Code Analysis pane. To display it, we can click its name under Panes in the View menu. + + This pane detects style issues, bad practices, potential bugs and other quality problems in your code, without having to execute it. There are three ways of running code analysis: + + * To analyze a file that is open in the Editor, we can press the configurable shortcut, :kbd:`F8` by default, or select Source --> Run code analysis from the menu bar. + + * We can also select a file to analyze by browsing for it using the file button next to the path box. This will start the analysis automatically. + + * The third way is to manually enter the path of a file we'd like to check in the path entry box in the pane's toolbar, and click the Analyze button in the pane. + + Based on these results, the code analysis shows an overall score of 4.34/10, which allows us to track improvements in our code quality. We can also expand or collapse one or all the sections in the pane to be able to see the Pylint errors, warnings and messages identifying the issues with our code. + + For example, the results tell us that there is a warning on line 20. To go directly to this line in the Editor, just click the message. Here, the code analysis says there is a ``bad-whitespace`` issue. To understand what this means, open the Pylint documentation. On the `Pylint docs page`_ http://pylint.pycqa.org/en/stable/index.html), click on Pylint features and search for the code of the message. + + .. _Pylint docs page: http://pylint.pycqa.org/en/stable/index.html + + We can see that the docs say that we used the wrong number of spaces around an operator. + + .. code-block:: + + bad-whitespace [C0326]: + + %s space %s %s %s Used when a wrong number of spaces is used around an operator, bracket or block opener. + + We can fix the error by adding one space before and after the operator in this variable assignment. If we run the analysis again, we can see the error isn't shown any more on this line. + + We can click the dropdown arrow in the filename field to view the list of previous analyses. Clicking one of them will show us the results. + + Sometimes, it is useful to turn certain messages off. We can do that in three different ways. + + We might want to silence warnings on only one line; for example, this "unused" import that is still necessary for the code execution. For this, type ``# pylint: disable=unused-import`` as a comment at the end of the line. Running the analysis again will show us that the error is no longer visible. + + If we want to silence a message in the whole file, we can do it by writing the disable command at the beginning of the file. For example, we can disable the ``invalid-name`` warning that appears several times in this file. If we run the analysis again, all of these warnings are gone. + + Finally, we can suppress specific messages for all files by editing the ``.pylintrc`` configuration file in your user folder. If it doesn't exist, we can generate it by opening our terminal, or the Anaconda Prompt if you're using Windows, and running ``pylint --generate-rc > .pylintrc`` in our user directory. + + Now, we can go to the ``MESSAGE CONTROL`` section in this file and add the corresponding Pylint message name, for example ``no-name-in-module``. If we run the analysis one more time, we see that the ``no-name-in-module`` warnings don't appear anymore. + + We can see that the score of our file increased to 7.63/10, a big improvement over the previous 4.34. + + Now that we've learned how to improve the quality of our code, you are ready to write cleaner and more correct programs using Spyder. Stay tuned for our next videos and as always, Happy Spydering! @@ -49,12 +125,47 @@ Optimizing your code Learn how to optimize your code using the Profiler. +* Use the Profiler to find bottlenecks in your programs +* Run profiling on a file in the Editor or elsewhere on your machine +* Interpret the results to evaluate function and method performance +* Use the information to speed up the run time of your code + .. youtube:: 4hcXa8aGu_c :height: 360 :width: 640 :align: left -* Use the Profiler to find bottlenecks in your programs -* Run profiling on a file in the Editor or elsewhere on your machine -* Interpret the results to evaluate function and method performance -* Use the information to speed up the run time of your code +.. rst-class:: dropdown-videos + +.. dropdown:: Transcript + :animate: fade-in + + .. div:: scroll + + Hello everyone! I'm Juanita, and in this video we will learn how to optimize your code using the profiler. To display it, click its name under Panes in the View menu. + + The Profiler will determine the run time and number of calls for every function and method used in a file. There are three ways of profiling a file: + + * We can browse for a file using the open button to the right of the Profiler's path box, which will run profiling over it automatically. + + * We can also manually enter the path in the pane's path box, and then run the analysis on the file by pressing the Profile button. + + * If we want to run the profiler for the file that is currently open in the Editor, we can click Run --> Profile... in the menu bar, or use the configurable shortcut :kbd:`F10`. + + We see that the results in the pane show us the different functions and methods in our file, with each sub-function listed hierarchically under the item that called them. The columns show the total time taken by each function and everything it called, while the local time includes only the time spent in that particular function. + + For example, the function ``values`` in this file calls a function ``internal_values`` values took a total of 482 us to run, with 338 us of that spent executing internal_values inside of it. Therefore, the total time for values is 482 us, but its local time is only 144 us as the rest was spent inside ``internal_values``. + + The Calls column displays the total number of times that function was called at that level. Finally, the numbers in the Diff columns for each of the three appear if a comparison is loaded, and indicate the change in runtime between the two measurements. + + By double-clicking an item in the Profiler, we will be taken to the file and line in the Editor where it was called. If this function was not called in one of your open scripts, clicking it will open the file that contains it. We can click the down arrow button in the filename field to recall paths of previously profiled files. + + Now that we know how to interpret the results of our profiling, let's optimize our code by finding the functions that take the longest time and making them faster. In this case, ``to_datetime`` takes 39 seconds to run. The reason for this is Pandas has to parse the non-standard timestamp format and is not told to try to use a faster parser than the default. + + We can reduce the time this function takes and compare it with the one before. For this, first we have to save the data as a ``.Result`` file with the save button in the pane. Now we have to figure out how to optimize the function, so let's search for it. We see that we can speed up this function by `manually specifying a datetime format`_. So, we add the appropriate argument, ``format="%Y-%m-%d %H:%M:%S.%f %z"``, to our function call. + + .. _manually specifying a datetime format: https://stackoverflow.com/questions/32034689/why-is-pandas-to-datetime-slow-for-non-standard-time-format-such-as-2014-12-31 + + Now, we run the profiling again to see how our script's performance has improved. If we want to see how much we lowered the time, we can load our previous result and take a look at the diff columns. Notice the difference is green because the time was reduced by three times, taking only 13 seconds instead of 39. Our code is now 26 seconds faster! + + Now that you've learned how to analyze the execution time of your code, you are ready to write more efficient programs with Spyder's help. Stay tuned for our next videos and as always, Happy Spydering! From 1efd5555906cb6c3ce425bc8836492d2af74d330 Mon Sep 17 00:00:00 2001 From: CAM Gerlach Date: Thu, 27 Aug 2020 00:09:48 -0500 Subject: [PATCH 6/7] Apply typo and formatting fixes to video transcripts --- doc/_static/custom_styles.css | 12 ++++++---- doc/first-steps-with-spyder.rst | 41 ++++++++++++++++----------------- doc/working-with-spyder.rst | 22 +++++++++--------- 3 files changed, 38 insertions(+), 37 deletions(-) diff --git a/doc/_static/custom_styles.css b/doc/_static/custom_styles.css index 79ee84444..64b55f84e 100644 --- a/doc/_static/custom_styles.css +++ b/doc/_static/custom_styles.css @@ -166,6 +166,8 @@ a[href="#join-our-community"] + ul li.toc-h3 { display: none; } +/*** Styles for video transcript dropdown elements ***/ + .dropdown-videos { width: 100%; max-width: 640px; @@ -173,18 +175,18 @@ a[href="#join-our-community"] + ul li.toc-h3 { margin-right: auto; border: 0; border-radius: unset; - margin-top:-1px; + margin-top: -1px; } .dropdown-videos .summary-content { - background-color: #EDEDED; + background-color: #ededed; } .dropdown-videos .card-header { padding-top: 0.1em; padding-bottom: 0.1em; color: white; - background-color: #4E4E4E; + background-color: #4e4e4e; font-size: 0.8em; border-radius: unset; } @@ -202,14 +204,14 @@ details.dropdown-videos .summary-up, details.dropdown-videos .summary-down { } div.scroll { - margin:1px, 1px; + margin: 1px 1px; height: 250px; overflow-x: hidden; overflow-y: auto; font-size: 0.8em; color: #2c2e30; padding-left: 1.2rem; - padding-right:1.2rem; + padding-right: 1.2rem; } div.video-container { diff --git a/doc/first-steps-with-spyder.rst b/doc/first-steps-with-spyder.rst index d736b14c0..07bcc6258 100644 --- a/doc/first-steps-with-spyder.rst +++ b/doc/first-steps-with-spyder.rst @@ -19,9 +19,9 @@ Discover the basics of using the Spyder interface and get an introduction to its * Explore the other default panes .. youtube:: E2Dap5SfXkI - :height: 360 - :width: 640 - :align: left + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos @@ -30,7 +30,9 @@ Discover the basics of using the Spyder interface and get an introduction to its .. div:: scroll - Hello everyone! I'm Juanita, and in this video I'm going to show you how to open Spyder and go over the basics of Spyder's interface. We will learn about Spyder's four panes that you'll likely be using most often, as well as briefly explore the others that are open by default. If you don't have Spyder installed and would like to follow along, you can download it at the link below this video. + Hello everyone! I'm Juanita, and in this video I'm going to show you how to open Spyder and go over the basics of Spyder's interface. We will learn about Spyder's four panes that you'll likely be using most often, as well as briefly explore the others that are open by default. If you don't have Spyder installed and would like to follow along, you can `download it here`_. + +.. _download it here: https://www.spyder-ide.org/#fh5co-download The easiest way to open Spyder is by opening Anaconda Navigator and clicking on the Spyder application. In case you have an older version of Spyder in Anaconda, open the command line (or the Anaconda Prompt in the case of Windows) and type the commands: @@ -43,9 +45,9 @@ Discover the basics of using the Spyder interface and get an introduction to its This is what Spyder 4 looks like in its default configuration, though you can thoroughly customize it, which we'll get to in a later tutorial. You can see that it is divided into three sections showing three different panes: the Editor, the IPython Console and the Help viewer. These three, along with the Variable Explorer, are the four core panes you'll work with the most in Spyder. - On the left we have the Editor, where you can open, edit and run files. Bottom right is the IPython Console, which you can use both interactively and to run your code in the Editor. It shows you which version of Python you are using. Above it, you'll find the Help pane, where you can get more information and documentation for any object in the or by pressing :kbd:`Ctrl-I` (or :kbd:`Cmd-I` on macOS). We'll see how to do this in our next video. + On the left we have the Editor, where you can open, edit and run files. Bottom right is the IPython Console, which you can use both interactively and to run your code in the Editor. It shows you which version of Python you are using. Above it, you'll find the Help pane, where you can get more information and documentation for any object in the Editor or Console by pressing :kbd:`Ctrl-I` (or :kbd:`Cmd-I` on macOS). We'll see how to do this in our next video. - For the two sections on the right, you can switch tabs to see the other panes that are open by default when launching Spyder. In the top section, you can switch to the , which shows you the name, type, size and value of the variables that you have previously defined in the or the . You can also modify the value of these variables directly from this pane by double clicking them under the column. The Plots pane will show you the figures you generate with Matplotlib and other libraries, and the Files pane allows you to browse the files on your computer and open them in the Editor with just a click. + For the two sections on the right, you can switch tabs to see the other panes that are open by default when launching Spyder. In the top section, you can switch to the Variable Explorer, which shows you the name, type, size and value of the variables that you have previously defined in the Editor or the Console. You can also modify the value of these variables directly from this pane by double clicking them under the Value column. The Plots pane will show you the figures you generate with Matplotlib and other libraries, and the Files pane allows you to browse the files on your computer and open them in the Editor with just a click. Finally, in the bottom section you can also access the History pane, which shows you the commands you have entered in the Console, including those from previous sessions. @@ -63,16 +65,15 @@ Learn the basics of using Spyder’s four main panes. * Open and edit a file in Spyder’s Editor * Run a script in the Editor and see the output in Spyder’s IPython Console -* Execute basic Python commands in the IPython console +* Execute basic Python commands in the IPython Console * Define variables in the Editor and modify their values in the IPython Console * View and interact with the variables in Spyder’s Variable Explorer * Get documentation in the Help pane in two different ways .. youtube:: WV9bm4ey7Cg - :height: 360 - :width: 640 - :align: left - + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos .. dropdown:: Transcript @@ -80,11 +81,11 @@ Learn the basics of using Spyder’s four main panes. .. div:: scroll - Hello everyone! I'm Juanita, and in this video I will show you how to start working with Spyder's four main panes. First, let's take a look at the Editor, which you can use to open, edit and run files from your computer. I will open a short “Hello World” program for this demo, which you can `download here`_. Once you have it open in your Editor, you can execute it by pressing the green run button. [show button] We can see the output in the Python Console [Show IPython console] as well as the path of the file that we are running and the working directory where this code was run. + Hello everyone! I'm Juanita, and in this video I will show you how to start working with Spyder's four main panes. First, let's take a look at the Editor, which you can use to open, edit and run files from your computer. I will open a short "Hello World" program for this demo, which you can `download here`_. Once you have it open in your Editor, you can execute it by pressing the green run button. We can see the output in the Python Console [Show IPython console] as well as the path of the file that we are running and the working directory where this code was run. .. _download here: https://drive.google.com/file/d/18Ai-XY9kIPm9x_7-0RBakV2a6dRVqh-L/view - We can also run any Python code that is entered directly in the IPython Console. For example, we can type ``print(“Hello”)`` and see the output. Or, we can try some math operations and see the results here too. Note that for implicitly printed output, there is a red indication that differs from the output of the ``print()`` function. + We can also run any Python code that is entered directly in the IPython Console. For example, we can type ``print("Hello")`` and see the output. Or, we can try some math operations and see the results here too. Note that for implicitly printed output, there is a red indication that differs from the output of the ``print()`` function. Now, let's start defining some variables. We can do this both from the editor or from the Console. If I define a variable ``a = 10`` and then run this code, I can see its value in the console just by typing its name ``a``. However, you can also assign any variable in the IPython console (``b = 20``) and its value will be stored too. In both cases, they can also be seen in the Variable Explorer pane, which shows the name, type, size and value of each of the objects previously defined. In this case, we see variables ``a`` and ``b``, both of type int and with size 1. We can also define a list ``l`` with ``l = [1, 2, 3]`` and see that the type of the variable is list and the size is 3. @@ -104,13 +105,13 @@ Learn how to customize Spyder’s interface to match your workflow and developme * Choose your preferred fonts * Switch between different interface, icon and syntax themes -* Show, hide, undock and rearrange Spyder panes +* Show, hide, undock and rearrange Spyder panes * Split, close and pop out Editor panels .. youtube:: -dARZBUDk_s - :height: 360 - :width: 640 - :align: left + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos @@ -123,7 +124,7 @@ Learn how to customize Spyder’s interface to match your workflow and developme First, we are going to learn how to change the font in the Editor, IPython Console and Help panes. To do this, go to Preferences, select the Appearance entry and scroll down to Fonts. You can change both the style and the size of the font for both plain and rich text. You can see how this affects the font in the Editor, Console and Help panes. - In this same dialog, you can easily change the syntax highlighting theme, for which you can see the preview at the right of the window. Note that the Spyder's interface theme changes to match the highlighting theme because the Interface theme option is set to Automatic by default. However, you can change the theme for the entire Spyder interface choosing between Light and dark. After selecting this change, click Apply to restart Spyder to apply the new theme. + In this same dialog, you can easily change the syntax highlighting theme, for which you can see the preview at the right of the window. Note that Spyder's interface theme changes to match the highlighting theme because the Interface theme option is set to Automatic by default. However, you can change the theme for the entire Spyder interface, choosing between Light and Dark. After selecting this change, click Apply to restart Spyder to apply the new theme. Beyond just Spyder's preferences, you can freely rearrange the panes in Spyder's main window. To show or hide panes, go to Panes under the View menu, and select which ones you want to see. For example, let's hide the Files pane and show the Profiler pane. You can also close a pane from its options menu, which will hide it from the main window. @@ -135,6 +136,4 @@ Learn how to customize Spyder’s interface to match your workflow and developme With all these options, you can customize Spyder to your heart's content. However, if you ever want to return to its default configuration, you can always reset the window layout under Window Layouts in the View menu, or your entire Spyder configuration with the Reset to Default button in the Preferences. - Enjoy your customized version of Spyder, and happy Spydering! - - + Enjoy your customized version of Spyder, and Happy Spydering! diff --git a/doc/working-with-spyder.rst b/doc/working-with-spyder.rst index eaace979f..82fcea102 100644 --- a/doc/working-with-spyder.rst +++ b/doc/working-with-spyder.rst @@ -19,9 +19,9 @@ Explore how to take advantage of Spyder’s functionality beyond just the four c * Discover and explore structured documentation in the Online Help pane .. youtube:: NOu9JTkUuDg - :height: 360 - :width: 640 - :align: left + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos @@ -36,7 +36,7 @@ Explore how to take advantage of Spyder’s functionality beyond just the four c If you open the pane's options menu, you will see that Fit Plots to Window is enabled by default. Disabling it will allow you to zoom the plots in or out. You can also see that Mute inline plotting is enabled, which prevents the same figures from also appearing in the IPython Console. Note that every time that the code is run, new copies of the plots are generated in the pane, but you can remove any you don't want to keep around with the X button in the pane toolbar. Additionally, the pane automatically updates to show the plots generated by each console as you switch between them. - To use a plot in another document, click the Copy to Clipboard button and paste it wherever you want, such as a word processor. Additionally, you can save a plot as a PNG by clicking the Save icon. + To use a plot in another document, click the Copy to Clipboard button and paste it wherever you want, such as a word processor. Additionally, you can save a plot as a PNG by clicking the save icon. The Files pane, also open by default, lets you browse the contents of the directories on your computer, open them in the Editor, and perform a variety of other file operations. You can show or hide the size, kind and date of the files in the pane's options menu. As you change the top-level folder you're viewing in the pane, Spyder's working directory shown in the top right of the main toolbar will update, which will also be synchronized with the currently active console. Double-clicking a text file will open it in the Editor, and copying one or more files will allow you to paste them as automatically-formatted absolute or relative paths. Right-clicking any item will offer an array of additional options for interacting with it. @@ -64,9 +64,9 @@ Learn how to improve the quality of your programs using code analysis. * Turn off messages on a line, in a file or globally .. youtube:: JnljnAjdO_w - :height: 360 - :width: 640 - :align: left + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos @@ -87,7 +87,7 @@ Learn how to improve the quality of your programs using code analysis. Based on these results, the code analysis shows an overall score of 4.34/10, which allows us to track improvements in our code quality. We can also expand or collapse one or all the sections in the pane to be able to see the Pylint errors, warnings and messages identifying the issues with our code. - For example, the results tell us that there is a warning on line 20. To go directly to this line in the Editor, just click the message. Here, the code analysis says there is a ``bad-whitespace`` issue. To understand what this means, open the Pylint documentation. On the `Pylint docs page`_ http://pylint.pycqa.org/en/stable/index.html), click on Pylint features and search for the code of the message. + For example, the results tell us that there is a warning on line 20. To go directly to this line in the Editor, just click the message. Here, the code analysis says there is a ``bad-whitespace`` issue. To understand what this means, open the Pylint documentation. On the `Pylint docs page`_ , click on Pylint features and search for the code of the message. .. _Pylint docs page: http://pylint.pycqa.org/en/stable/index.html @@ -131,9 +131,9 @@ Learn how to optimize your code using the Profiler. * Use the information to speed up the run time of your code .. youtube:: 4hcXa8aGu_c - :height: 360 - :width: 640 - :align: left + :height: 360 + :width: 640 + :align: left .. rst-class:: dropdown-videos From 0ea0b5b02f3fac5c1ca7089384118c7e1941ec93 Mon Sep 17 00:00:00 2001 From: "C.A.M. Gerlach" Date: Thu, 27 Aug 2020 12:56:14 -0500 Subject: [PATCH 7/7] Fix identation error with added link in video transcript --- doc/first-steps-with-spyder.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/first-steps-with-spyder.rst b/doc/first-steps-with-spyder.rst index 07bcc6258..deb56fbf8 100644 --- a/doc/first-steps-with-spyder.rst +++ b/doc/first-steps-with-spyder.rst @@ -32,7 +32,7 @@ Discover the basics of using the Spyder interface and get an introduction to its Hello everyone! I'm Juanita, and in this video I'm going to show you how to open Spyder and go over the basics of Spyder's interface. We will learn about Spyder's four panes that you'll likely be using most often, as well as briefly explore the others that are open by default. If you don't have Spyder installed and would like to follow along, you can `download it here`_. -.. _download it here: https://www.spyder-ide.org/#fh5co-download + .. _download it here: https://www.spyder-ide.org/#fh5co-download The easiest way to open Spyder is by opening Anaconda Navigator and clicking on the Spyder application. In case you have an older version of Spyder in Anaconda, open the command line (or the Anaconda Prompt in the case of Windows) and type the commands: