Jekyll2023-02-15T06:16:49+00:00/feed.xmlmjk @ webHallo, mein Name ist Melchior. Auf dieser Seite findest du links zu meinen Projekten und aktuelle (Konzert)termine. Ansonsten Poste ich alles mögliche.
react-navbar2023-02-12T00:00:00+00:002023-02-12T00:00:00+00:00/allgemein/2023/02/12/react-navbar<p>Well, I know it’s been a wile that i write something.<br />
I want to change that and I think this is the perfect topic to write an post about.</p>
<p>I actually intended to program a react-native app. Then I thought it wouldn’t hurt to refresh my knowledge about react-js before I get into react-native.</p>
<p>And this is where the story begins.
<!--more--></p>
<h2 id="practice-reactjs">practice reactjs</h2>
<p>First of all I had to decide what I want to do. I didn’t want to code a todo list for the umpteenth time, but something useful. Some time ago I discovered GatsbyJS and played around with it. I realy like Jekyll but I also like the concept behind ReactJS. So I decided to code a reactjs-component which I can reuse in other projects.</p>
<p>Speaking of Jekyll I really love the header. I love that it’s “really” responsive and the fact the links disappear if its on a screen with under a given value an the burger icon/button appears where I can toggle the navigation. Except for a minor issue. But I’ll come to this later. I want to rebuild this Navbar/header thing as an reactjs-component, make it generic and dynamical as hell and distribute it to npm later on.</p>
<p>I started a new React-Project and added some dummy contend. The I added a new Component, named it Navbar but i still had no idea how to isolate them and deploy them to npm. how can i get rid of this dummy-code? How can I get rid of the install and configuration overhead? Well, there is a solution called create-react-library.</p>
<h3 id="create-react-library">create-react-library</h3>
<p>create-react-library is an awesome cli to create an react component library from scratch without anny configuration. If your npm version is up to date, you can even use it without installing it by simply running it with npx like this.:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx create-react-library myAwesomeLibraryName
</code></pre></div></div>
<p>Then we get some instructions to bring our component to life.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>To get started, <span class="k">in </span>one tab, run:
<span class="nv">$ </span><span class="nb">cd </span>myAwesomeLibraryName <span class="o">&&</span> npm start
And <span class="k">in </span>another tab, run the create-react-app dev server:
<span class="nv">$ </span><span class="nb">cd </span>myAwesomeLibraryName/example <span class="o">&&</span> npm start
</code></pre></div></div>
<p>This is awesome!!! We already have an existing component which is even used in an create-react-app example.</p>
<h4 id="directory-structure">directory structure</h4>
<p>Now let’s have a quick look on the generated files.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.
├── dist
│ ├── index.css
│ ├── index.js
│ ├── index.js.map
│ ├── index.modern.js
│ └── index.modern.js.map
├── example
│ ├── node_modules
│ | ├── ...
| │ └── ...
│ ├── public
│ | ├── favicon.ico
│ | ├── index.html
| │ └── manifest.json
│ ├── src
│ | ├── App.js
│ | ├── App.test.js
│ | ├── index.css
| │ └── index.js
│ ├── package.json
│ ├── package-lock.json
│ └── README.md
├── node_modules
│ ├── ...
│ └── ...
├── src
│ ├── .eslintrc
│ ├── index.js
│ ├── index.test.js
│ └── styles.module.css
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .travis.yml
├── package.json
├── package-lock.json
└── README.md
</code></pre></div></div>
<h4 id="dist">dist</h4>
<p>This is where the magic happens. Our library will be built into this directory.</p>
<h4 id="example">example</h4>
<p>In this directory lives the sample app that uses our component.</p>
<h4 id="node_modules">node_modules</h4>
<p>this is the Directory where npm stores the dependencies of our component</p>
<h4 id="src">src</h4>
<p>This is where the fun happened. Here we code our component library which will be built later in dist.</p>
<h3 id="keep-it-simple">keep it simple</h3>
<p>I have many ideas of features I could implement in to this library but I think in the end this is realy timeconsuming and I shoud keep it simple. At leased for now. The goal is to just refresh my react skills, lern how to create and shere a npm package and then move on to the next project.</p>
<p>Sure, I want to rebuild this jekyll Navbar/header thing width the burger icon/button as an reactjs-component but for now let’s keep it simple and add this stuff later on.</p>
<p>So I add a simple horizontal Navbar.</p>
<h3 id="link">link</h3>
<p>We have this example <code class="language-plaintext highlighter-rouge">create-react-app</code> app in the example directory where we can check out our new component. But if we would like to us it in an other project, before we publish it to npm, we have to link it, so we can use it there.</p>
<p>insight myAwesomeLibraryName</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">link</span>
</code></pre></div></div>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">unlink</span>
</code></pre></div></div>
<p>insight another project</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">link </span>myAwesomeLibraryName
</code></pre></div></div>
<h2 id="distribute-to-npm">distribute to npm</h2>
<p>first create npm account and werifi email
then</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm adduser
</code></pre></div></div>
<h2 id="next-steps">next steps</h2>
<p>this are just some notes to complete this post lateron</p>
<ul>
<li>use prop-types
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">--save</span> prop-types
</code></pre></div> </div>
</li>
<li>use link</li>
<li>use sass</li>
<li>add the burger icon/button stuff</li>
<li>calculate the width of the lins to prevent uggly design issues</li>
</ul>Well, I know it’s been a wile that i write something. I want to change that and I think this is the perfect topic to write an post about. I actually intended to program a react-native app. Then I thought it wouldn’t hurt to refresh my knowledge about react-js before I get into react-native. And this is where the story begins.PeaceDC @ UJZ Korn2018-03-11T00:00:00+00:002018-03-11T00:00:00+00:00/mucke/2018/03/11/peace-dc-at-ujz-korn<p>Peace Development Crew // S.P. Music - Live Konzert + Party</p>
<p>concerts mixed by <a href="http://www.ras-or.com">ras ‘or</a></p>
<p>Friday, March 23 21:00 - 6:00</p>
<p><a href="https://www.facebook.com/events/420536301711136/">more info</a></p>Peace Development Crew // S.P. Music - Live Konzert + Party concerts mixed by ras ‘or Friday, March 23 21:00 - 6:00 more infoupdate2017-12-12T21:15:00+00:002017-12-12T21:15:00+00:00/allgemein/2017/12/12/update<p>It’s been a long time since I posted anything here. Nothing happened since 2014! That should change now. I’ll integrate tags in the near future and continue to post this and that, but focus on some highlights. Well, and hopefully I’ll add the social media links soon. ;-)
<!--more--></p>
<h2 id="webdevelopment">Webdevelopment</h2>
<p>Speaking about several technologies, some Ideas I have for awesome projects in the future and Web Development in general. For more fun I’ll also add some basic syntax highlighting.</p>
<h2 id="bushcraft--survival--prepping">Bushcraft / Survival / Prepping</h2>
<p>I think I’ll share some Survival / Bushcraft skills with you and maybe make some tutorials. Maybe I’ll also show some pictures of my equipment an speak about my experience with it.</p>
<h2 id="making-music">Making Music</h2>
<p>You know / or you don’t, I’m a musician so of corse I planed to write about making music.</p>It’s been a long time since I posted anything here. Nothing happened since 2014! That should change now. I’ll integrate tags in the near future and continue to post this and that, but focus on some highlights. Well, and hopefully I’ll add the social media links soon. ;-)ras ‘or at Cafe Glocksee on Fri Sep 192014-09-19T19:52:38+00:002014-09-19T19:52:38+00:00/mucke/2014/09/19/ras-or-at-cafe-glocksee-on-fri-sep-19<p><span class="fsl">Zup Volks?<br />
Dynamic Response proudly rocking da spot!</p>
<p>Der Soundclash mit Remixen, Trap, Hip Hop und Reggae bis hin zu beatlastigen PowerTrackz mit Peyond</p>
<p>Special guests!</p>
<p>Dj's<br />
Ceven Nr. One<br />
Plus<br />
Ras`Or<br />
<span class="text_exposed_show"><br />
C ya<br />
Lädey's and homebro's<br />
Eintritt frei !!!</span></span></p>
<p><a href="http://www.reverbnation.com/show/14200687?utm_campaign=a_public_shows&utm_medium=unknown&utm_source=page_object_news_item">ras 'or at Cafe Glocksee on Fri Sep 19</a>.</p>Zup Volks? Dynamic Response proudly rocking da spot! Der Soundclash mit Remixen, Trap, Hip Hop und Reggae bis hin zu beatlastigen PowerTrackz mit Peyond Special guests! Dj's Ceven Nr. One Plus Ras`Or C ya Lädey's and homebro's Eintritt frei !!! ras 'or at Cafe Glocksee on Fri Sep 19.Last chance to save Net Neutrality - Boing Boing2014-07-14T23:38:25+00:002014-07-14T23:38:25+00:00/allgemein/2014/07/14/last-chance-to-save-net-neutrality-boing-boing<p>Only <span id="count2">36</span> hours are left to comment on the FCC's proposal to allow for Net Neutrality-shredding "Internet fast lanes" that let phone companies pick Internet winners and losers—<a href="https://www.battleforthenet.com/">it's time to act</a>.<br />
<a href="http://boingboing.net/2014/07/14/last-chance-to-save-net-neutra.html">Last chance to save Net Neutrality - Boing Boing</a>.</p>Only 36 hours are left to comment on the FCC's proposal to allow for Net Neutrality-shredding "Internet fast lanes" that let phone companies pick Internet winners and losers—it's time to act. Last chance to save Net Neutrality - Boing Boing.In diesem Video steckt eine riesige Sauerei | Campact Blog2014-06-28T12:48:56+00:002014-06-28T12:48:56+00:00/allgemein/2014/06/28/in-diesem-video-steckt-eine-riesige-sauerei-campact-blog<p>Fracking: Millionen Liter Wasser, ein Cocktail an Chemikalien und Tonnen von Sand werden in den Boden gepumpt. Das hältst du für ein gewagtes Experiment? Die ZDF Heute-Show beweist Abenteuergeist<br />
<a href="http://blog.campact.de/2014/06/in-diesem-video-steckt-eine-riesige-sauerei/?_mv=79KIOxSuo8mXYGMK5geIWU">In diesem Video steckt eine riesige Sauerei | Campact Blog</a>.</p>Fracking: Millionen Liter Wasser, ein Cocktail an Chemikalien und Tonnen von Sand werden in den Boden gepumpt. Das hältst du für ein gewagtes Experiment? Die ZDF Heute-Show beweist Abenteuergeist In diesem Video steckt eine riesige Sauerei | Campact Blog.Arbeitserleichterung für die NSA: Deutscher Bundestag bezieht Internet von US-Anbieter Verizon 11 Updates | netzpolitik.org2014-06-28T10:59:05+00:002014-06-28T10:59:05+00:00/sicherheit/2014/06/28/arbeitserleichterung-fuer-die-nsa-deutscher-bundestag-bezieht-internet-von-us-anbieter-verizon-11-updates-netzpolitik-org<p>Abgeordnete und Mitarbeiter bekommen vom Deutschen Bundestag Internet-Adressen des amerikanischen Anbieters Verizon. Das hat netzpolitik.org vor Ort selbst nachgeprüft. Da die Verbindungen von Verizon mit der NSA offenkundig sind, präsentiert der Bundestag daher die eigentlich schützenswerte Kommunikation den fremden Geheimdiensten quasi auf dem Silbertablett.<br />
<a href="https://netzpolitik.org/2014/arbeitserleichterung-fuer-die-nsa-deutscher-bundestag-bezieht-internet-von-us-anbieter-verizon/">Arbeitserleichterung für die NSA: Deutscher Bundestag bezieht Internet von US-Anbieter Verizon 11 Updates | netzpolitik.org</a>.</p>Abgeordnete und Mitarbeiter bekommen vom Deutschen Bundestag Internet-Adressen des amerikanischen Anbieters Verizon. Das hat netzpolitik.org vor Ort selbst nachgeprüft. Da die Verbindungen von Verizon mit der NSA offenkundig sind, präsentiert der Bundestag daher die eigentlich schützenswerte Kommunikation den fremden Geheimdiensten quasi auf dem Silbertablett. Arbeitserleichterung für die NSA: Deutscher Bundestag bezieht Internet von US-Anbieter Verizon 11 Updates | netzpolitik.org.GD Map - A tool to visualize disk space2014-06-21T21:21:02+00:002014-06-21T21:21:02+00:00/allgemein/2014/06/21/gd-map-a-tool-to-visualize-disk-space<p>GdMap is a tool which allows to visualize disk space. Ever wondered why your hard disk is full or what directory and files take up most of the space? With GdMap these questions can be answered quickly.<br />
<a href="http://gdmap.sourceforge.net/">GD Map - A tool to visualize disk space</a>.</p>GdMap is a tool which allows to visualize disk space. Ever wondered why your hard disk is full or what directory and files take up most of the space? With GdMap these questions can be answered quickly. GD Map - A tool to visualize disk space.10 Things To Do After Installing Ubuntu 14.04 Trusty Tahr To Get A Near Perfect Desktop ~ Web Upd8: Ubuntu / Linux blog2014-06-20T16:31:28+00:002014-06-20T16:31:28+00:00/allgemein/2014/06/20/10-things-to-do-after-installing-ubuntu-14-04-trusty-tahr-to-get-a-near-perfect-desktop-web-upd8-ubuntu-linux-blog<p>Ubuntu 14.04 LTS (Trusty Tahr) will be released tomorrow and since many of you will install it as soon as it's released (or maybe you're already using Ubuntu 14.04), here's a list of 10 useful things to do to get a near perfect desktop.<br />
<a href="http://www.webupd8.org/2014/04/10-things-to-do-after-installing-ubuntu.html">10 Things To Do After Installing Ubuntu 14.04 Trusty Tahr To Get A Near Perfect Desktop ~ Web Upd8: Ubuntu / Linux blog</a>.</p>Ubuntu 14.04 LTS (Trusty Tahr) will be released tomorrow and since many of you will install it as soon as it's released (or maybe you're already using Ubuntu 14.04), here's a list of 10 useful things to do to get a near perfect desktop. 10 Things To Do After Installing Ubuntu 14.04 Trusty Tahr To Get A Near Perfect Desktop ~ Web Upd8: Ubuntu / Linux blog.Nein zu Vorratsdaten - meine Daten gehören mir - Campact2014-04-14T09:04:03+00:002014-04-14T09:04:03+00:00/allgemein/2014/04/14/nein-zu-vorratsdaten-meine-daten-gehoeren-mir-campact<p>Der Europäische Gerichtshof hat die Richtlinie zur Vorratsdatenspeicherung gekippt. Denn diese auch in Deutschland geplante Rundum-Überwachung unserer elektronischen Kommunikation bedroht unser Grundrecht auf ein selbstbestimmtes Leben und Privatsphäre.</p>
<p>Während CDU und CSU an der Vorratsdatenspeicherung festhalten, beginnt sich die SPD zu bewegen. Das ist unsere Chance, Vorratsdaten in Deutschland zu verhindern!</p>
<p>Ich habe gerade einen Appell gegen die Vorratsdatenspeicherung unterschrieben. Unterzeichne bitte auch Du:</p>
<!--more-->
<p><a href="https://www.campact.de/Ueberwachungsfrei">https://www.campact.de/Ueberwachungsfrei</a></p>
<p>Beste Grüße<br />
Melchior Kannengießer</p>
<p><a href="https://www.campact.de/vorrat/appell2014/empfehlen/">Verbreiten Sie die Aktion! - Meine Daten gehören mir - Campact</a>.</p>Der Europäische Gerichtshof hat die Richtlinie zur Vorratsdatenspeicherung gekippt. Denn diese auch in Deutschland geplante Rundum-Überwachung unserer elektronischen Kommunikation bedroht unser Grundrecht auf ein selbstbestimmtes Leben und Privatsphäre. Während CDU und CSU an der Vorratsdatenspeicherung festhalten, beginnt sich die SPD zu bewegen. Das ist unsere Chance, Vorratsdaten in Deutschland zu verhindern! Ich habe gerade einen Appell gegen die Vorratsdatenspeicherung unterschrieben. Unterzeichne bitte auch Du: