• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

How to learn more about coding

Scheduled Pinned Locked Moved General Discussion
8 Posts 3 Posters 1.1k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    sdetweil @bebetter14
    last edited by sdetweil Jan 3, 2024, 12:59 PM Dec 11, 2023, 9:20 PM

    @bebetter14 well, it depends on what you want to try to do

    make new content, a module
    make things look better/different, css

    a module’s job is to collect some data and turn it into part of an html web page. only your data.
    you can make the actual html tags or use API call to create web page document object model ( aka DOM ) elements.

    the js file that matches the module name, runs in the browser. as such it cannot directly access the system it is on. mm provides a helper construct that does not run in the browser, and can access hardware or file systems to get data.
    I have a sample module that implements the spec, and uses a helper to show how the parts fit together.
    https://github.com/sdetweil/SampleModule
    more like a hello world, put up some basic text. you can configure the text or not

    because most of the module runs in the browser, JavaScript is the chosen language. you can interface to code in other languages thru the helper.

    many modules talk to python scripts that produce output captured by the helper and sent on to the core js file for processing

    my pythonPrint modules allows calling any python module and capturing it’s output.
    https://github.com/sdetweil/MMM-PythonPrint

    css is a head scratcher a lot of the time. figuring out the cascade / inheritance rules is an incredible learning experience. add on the styling capabilities on a web page, wow!!!

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    B 1 Reply Last reply Dec 11, 2023, 9:35 PM Reply Quote 1
    • B Offline
      BKeyport Module Developer @bebetter14
      last edited by Dec 11, 2023, 9:28 PM

      @bebetter14 I started out that way. What I did personally, was take a dead module that I really liked and started trying to figure out how it worked. Looked up the commands (Lots of searches for “XYZ Javascript” etc and playing on Jsfiddle.net – -Once I got that figured out, I built up my own module (MMM-Multimonth) and got help from some amazing people on here, including Sam and mmrize - major contribution was from a user who CSSified the whole thing and showed me how to do it.

      Knowledge grows as you jump in.

      The "E" in "Javascript" stands for "Easy"

      1 Reply Last reply Reply Quote 1
      • B Offline
        bebetter14 @sdetweil
        last edited by Dec 11, 2023, 9:35 PM

        @sdetweil @BKeyport Thank you both so much. These are great ideas to get started. From what both of you are saying, it sounds like I need to try and come up with an idea for a module and learn from there. Pretty much from the ground up. I really wish I learned more about this growing up. But at least now I have Chat GPT to assist.

        Also, thank you providing the links to those helpful modules. These will be great learning resources.

        B 1 Reply Last reply Dec 11, 2023, 10:58 PM Reply Quote 0
        • B Offline
          BKeyport Module Developer @bebetter14
          last edited by Dec 11, 2023, 10:58 PM

          @bebetter14 Avoid the AI engines. They’re mostly useless, just FYI. Enjoy the process. If you end up with a releasable module, great, if not, hey, it’s a learning experience.

          The "E" in "Javascript" stands for "Easy"

          B 1 Reply Last reply Dec 11, 2023, 11:19 PM Reply Quote 0
          • B Offline
            bebetter14 @BKeyport
            last edited by Dec 11, 2023, 11:19 PM

            @BKeyport Thank you for the heads up! I guess I should probably focus on trying to get the modules I have installed now to work before I start trying to make a new one.

            S 1 Reply Last reply Dec 11, 2023, 11:23 PM Reply Quote 0
            • S Offline
              sdetweil @bebetter14
              last edited by Dec 11, 2023, 11:23 PM

              @bebetter14 you can try my MMM-Config module which will present a form for editing config.js

              it has some struggles with some modules, but there are ways to work around them
              https://github.com/sdetweil/MMM-Config

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • B Offline
                bebetter14
                last edited by Feb 1, 2024, 1:05 PM

                Just an update. I have been doing the https://www.theodinproject.com/dashboard “classes” and they have been fantastic. Its a great Introduction to how to use Git and Github along with using a terminal. I do all the learning in a virtual machine that runs Linux. It had a great intros to HTML and CSS. I even have my own Github account (https://github.com/inventiveillustrtions) now with my first “project”.

                1 Reply Last reply Reply Quote 1
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy