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.2k 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.
    • B Offline
      bebetter14
      last edited by

      I’ve recently gotten very interested in creating a Magic Mirror. Ive started with zero knowledge of coding and I’m still having to Google just about everything. Doing this project has motivated me to learn more about coding but specifically how I can use this raspberry pi. I would love to learn more about how to tweak and modify my Magic Mirror using css but I have no idea where to start. Is there a pecking order I should learn different languages. I know this isnt something I’m going to learn in say a month or two but I love finding something new to learn about and I feel like learning some programing would be a great experience. Can anyone point me in the right direction on what I should learn?

      S BKeyportB 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @bebetter14
        last edited by sdetweil

        @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 Reply Quote 1
        • BKeyportB Offline
          BKeyport Module Developer @bebetter14
          last edited by

          @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

            @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.

            BKeyportB 1 Reply Last reply Reply Quote 0
            • BKeyportB Offline
              BKeyport Module Developer @bebetter14
              last edited by

              @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 Reply Quote 0
              • B Offline
                bebetter14 @BKeyport
                last edited by

                @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 Reply Quote 0
                • S Offline
                  sdetweil @bebetter14
                  last edited by

                  @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

                    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