beac0nthe blog of beac0nhttp://schempp.xyz/ Optimizing my blog<p>Recently, I optimized my blog for page speed and file size. I did this, because I came across the <a href="https://testmysite.thinkwithgoogle.com/" target="_blank">Mobile Website Speed Testing Tool</a> and my blog did not have 100 points in every category.</p> <p>It wasn’t that bad though. My blog was above the 90 points margin. I still wanted to have 100 points in all categories, so I started optimizing my blog, which took longer than expected.</p> <h2 id="reading-the-detailed-report">Reading the detailed report</h2> <p>After google analyzed my blog, the report told me which party of my blog were not optimized. The report is splitted in three categories:</p> <ol> <li>mobile friendliness (got 99/100)</li> <li>mobile speed (got 91/100)</li> <li>desktop speed (got 97/100)</li> </ol> <h3 id="mobile-friendliness---size-tap-targets-appropriately">Mobile friendliness - size tap targets appropriately</h3> <p>My “tap targets” were not big enough. Apparently size still matters.</p> <p>Thanks to the report, which included <a href="https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately" target="_blank">links</a> to all problems found, this was an easy fix:</p> <ul> <li>the distance between clickable elements should not be smaller than 32px (…done)</li> <li>clickable targets should be at least 48px big (…done)</li> </ul> <h3 id="mobile-and-desktop-speed---eliminate-render-blocking-javascript-and-css-in-above-the-fold-content">Mobile and desktop speed - Eliminate render-blocking JavaScript and CSS in above-the-fold content</h3> <p>The categories “mobile speed” and “desktop speed” apparently measure the same thing but have different impacts on the score, because, e.g. big pictures are worse on a mobile client than on a desktop client.</p> <p>The only point which I got wrong was the render-blocking JavaScript and CSS in above-the-fold. I don’t use JavaScript on my blog, so the only not optimized thing was my CSS.</p> <p>And this is the part where it gets a little bit ugly. I first started to pull out the stuff which is clearly “above-the-fold” (e.g. CSS for the header). This still didn’t produce the wanted results. My score was still not 100/100. After fiddleing around for some time, I realized, that almost all of my CSS was “above-the-fold” (including blog posts).</p> <p>So I just put all of my CSS in the header, which is not that bad, because my CSS is not that big. I also optimized my CSS, using <a href="https://github.com/css/csso" target="_blank">CSSO</a>.</p> <h2 id="not-done-yet">Not done yet</h2> <p>After having all scores maxed out (100/100) I tried <a href="http://www.webpagetest.org/" target="_blank">webpagetest.org</a>. Turns out, that I haven actually enabled gzip compression for my favicon.ico. Since the favicon is the only image on my start page, which is not inlined, I got an F for compression T_T.</p> <p>The fix was easy. I just had to put</p> <div class="highlighter-rouge"><pre class="highlight"><code>gzip_types *; </code></pre> </div> <p>in the nginx config file.</p> Sun, 26 Mar 2017 00:00:00 +0100http://schempp.xyz/coding/2017/03/26/optimizing-my-blog/ http://schempp.xyz/coding/2017/03/26/optimizing-my-blog/bye bye social media<p>I recently deleted all my social media accounts *gasp* , which were exactly two: facebook and twitter.</p> <h2 id="but-why">But why?</h2> <ol> <li>They consume too much time</li> <li>They provide little or no value for my live</li> <li>I can communicate with the people I care about through other software. Why do we have these messenger apps if we don’t use them?</li> <li>Also I watched this <a href="https://www.youtube.com/watch?v=3E7hkPZ-HTk" target="_blank">video</a></li> <li>I now get my tech news through various newsletters (and boy… there are a lot of them)</li> </ol> Sun, 26 Mar 2017 00:00:00 +0100http://schempp.xyz/coding/2017/03/26/bye-bye-social-media/ http://schempp.xyz/coding/2017/03/26/bye-bye-social-media/Possible Frontend Architecture<p>This post is about how a frontend architecture could look like. The presented architecture is not the only way how to solve the problems in the frontend like loading time, data retrieval, etc. but it can be one possible way.</p> <h2 id="the-architecture">The architecture</h2> <p>In the architecture, the “backend” is behind an API-Gateway, which doesn’t really concern us. The task of this API-Gateway is to handle REST-Calls.</p> <p>The four main parts in the frontend are:</p> <ol> <li> <p><strong>Data Fetcher:</strong> a server which fetches data from the API-Gateway. Could be <a href="http://graphql.org/" target="_blank">GraphQL</a> or something like that.</p> </li> <li> <p><strong>Server Side Renderer:</strong> a server which prerenders the html/css markup for you. This is relevant for <a href="https://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank">SEO</a> and <a href="http://andrewhfarmer.com/server-side-render/" target="_blank">performance</a> stuff. And with performance I mean the time it takes for your webpage to display something (If you code everything with React, you won’t have static html, until you prerender it of couse).</p> </li> <li> <p><strong>Frontend Deliverer:</strong> delivers the js, css and image files to the browser. This could be something like a <a href="https://en.wikipedia.org/wiki/Content_delivery_network" target="_blank">CDN</a> or a cookieless domain (just search the web for “cookieless domain” and you will find many blogs, suggesting that you should server static content from a cookieless domain…).</p> </li> <li> <p><strong>Browser:</strong> the software which you are using right now to view this page, unless you are using curl, wget or something similar…</p> </li> </ol> <p><img src="/images/frontendArchitecture.png" alt="alt text" title="Frontend Architecture" /></p> <h2 id="request-order">Request Order</h2> <ol> <li> <p>As seen in the image, the first thing the Browser has to do is send a request to some server. This server has to return the prerendered html markup, so the server has to be the Server Side Renderer.</p> </li> <li> <p>After the browser got the html page, it loads the javascript bundles and the css files from the Frontend Deliverer.</p> </li> <li>Finally the javascript code is executed. The javascript code gets it’s data from the Data Fetcher and <ol> <li><strong>UPDATE:</strong> you could also store the data, using <a href="http://graphql.org/" target="_blank">GraphQL</a> and <a href="http://graphql.org/learn/queries/#mutations" target="_blank">Mutations</a>. But be aware, that <a href="http://graphql.org/" target="_blank">GraphQL</a> and <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm" target="_blank">REST</a> are <a href="https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/" target="_blank">two completely different things</a>. Both have their strengths and weaknesses.</li> </ol> </li> <li>sends PUT, POST or DELETE requests directly to the API Gateway. As the user uses the site, more requests might be sent to either the Data Fetcher or the API Gateway.</li> </ol> <p>To prerender the site, the Server Side Renderer executes the same code, which is executed in the browser. Therefore the Server Side Renderer has to execute javascript at some point, which suggests that the Server Side Renderer should be implemented in javascript (e.g. node.js)</p> <h2 id="benefits">Benefits</h2> <p>You might ask yourself, why you should do this. After all, you could just deliver everything from one server. However, if you use this architecture you can:</p> <ul> <li>deploy separately from the backend, thus deploy faster and more secure (you just need to exchange some js bundles to update the frontend)</li> <li>optimize the size and count of http requests you need to send to the backend, thus reducing the amount of data transfered over a possible small bandwidth medium</li> <li>create an interface, which spereates the frontend from the backend in such a manner, that they are more exchangable</li> <li>reuse some of the parts of this architecture to implement a second user interface, e.g. for an mobile app</li> <li>write frontend integrationtests easier, because you don’t need a running server on your local machine</li> <li>improve the developer experience by beeing able to develop the frontend much faster</li> </ul> <h2 id="drawbacks">Drawbacks</h2> <p>Of course, nothing is without drawbacks. Everything has a price. This architecture</p> <ul> <li>is more complex</li> <li>is not necessarily suited for frontend newcomers or junior developers, because it requires some expertise in how http, javascript and the browsers work</li> <li>needs more effort to maintain, because if you deploy your frontend detached from your backend, your current frontend version has to match the current backend version or be backwards compatible, and vice versa</li> </ul> <h2 id="conclusion">Conclusion</h2> <p>If you need a frontend, which <strong>has</strong> to look and feel homogeneous, you should use this architecture.</p> <p>If you need a frontend, which <strong>can</strong> look and feel homogeneous, you should still use this architecture.</p> <p>If you need a frontend, which <strong>musn’t</strong> look and feel homogenous, you could still use this architecture. After all, why wouldn’t you want to have the benefits described above?</p> <p>Of course if you are writing a small service, building such an architecture is way to oversized. So for small services, you shouldn’t use this architecture.</p> <p>In the end it all comes down to how big your frontend is going to be. At some point you have to think about the problems which occur with big web applications and this architecture might help you solve some of them.</p> Tue, 07 Mar 2017 00:00:00 +0100http://schempp.xyz/coding/architecture/2017/03/07/possible-frontend-architecture/ http://schempp.xyz/coding/architecture/2017/03/07/possible-frontend-architecture/React-Redux Frontend Architecture<p>This post is about how we used <a href="https://facebook.github.io/react/" target="_blank">React</a> in combination with <a href="http://redux.js.org/" target="_blank">Redux</a> in our project, to create a frontend architecture, in which the code we write is easy to test, maintain and extend.</p> <h2 id="the-categories-of-the-architecture">The categories of the architecture</h2> <p>We divided the files in our project in seven categories:</p> <ol> <li>(<a href="https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d" target="_blank">Stateless</a>) <a href="https://facebook.github.io/react/docs/react-component.html" target="_blank">Components</a></li> <li><a href="http://redux.js.org/docs/basics/UsageWithReact.html#container-components" target="_blank">Redux Containers</a></li> <li><a href="http://redux.js.org/docs/basics/Actions.html#action-creators" target="_blank">Action Creators</a></li> <li>Controllers</li> <li><a href="http://redux.js.org/docs/basics/Reducers.html" target="_blank">Reducers</a></li> <li><a href="http://redux.js.org/docs/recipes/ComputingDerivedData.html" target="_blank">Selectors</a></li> <li>APIs</li> </ol> <p>How the different categories work together can be seen in the following graphic:</p> <p><img src="/images/reactReduxArchitecture.png" alt="alt text" title="React-Redux-Architecture" /></p> <p>Most of the categories are marked with either the react-icon <img src="/images/reactLogo.svg" alt="react-icon" class="iconImage" /> or the redux-icon <img src="/images/reduxLogo.svg" alt="redux-icon" class="iconImage" />.</p> <p>Categories marked with an icon are a common principle of the library, which the icon represents. Looking at the graphic, you can see that most of the categories are already a common part of either the react or redux library. Only the “Controllers” and the “APIs” categories are different. These categories provide abstractions, which make it easier to maintain and improve the code.</p> <p>As seen in the graphic, components seem to always be inside a container. However, components do not necessarily need to be in a container to be used. Sometimes components are used directly in other components and get their properties in the components which are inside a container:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html">const ComponentWithContainer = ( {valueA, valueB, callbackA}) =&gt; { return ( <span class="nt">&lt;div&gt;</span> <span class="nt">&lt;p&gt;</span>{valueA}: {valueB}<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;ComponentWithoutContainer</span> <span class="na">doStuff=</span><span class="s">{callbackA}</span> <span class="nt">/&gt;</span> <span class="nt">&lt;/div&gt;</span>) } export default connect(...)(ComponentWithContainer)</code></pre></figure> <p>The <strong>APIs</strong> category contains APIs to communicate with webservices in the backend, but it can also encapsulate other APIs, like e.g. an API to legacy code in the frontend or an API to a third-party frontend library like a tracking-API.</p> <p><strong>Controllers</strong> contain more complex logic and use the APIs and the Action Creators to fulfill their work. The Controllers use the Action Creators to e.g. chain multiple Actions and API calls together by using promises. In the following example, we are using <a href="https://github.com/gaearon/redux-thunk" target="_blank">thunk</a> to be able to use function callbacks in addition to action creators.</p> <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">backend</span> <span class="nx">from</span> <span class="s1">'../api/backendRest'</span> <span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">actions</span> <span class="nx">from</span> <span class="s1">'../actions/someActions'</span> <span class="kr">export</span> <span class="kd">function</span> <span class="nx">someController</span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span><span class="nx">dispatch</span><span class="p">,</span> <span class="nx">getState</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">fetchSomeData</span><span class="p">()</span> <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">json</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">dispatch</span><span class="p">(</span><span class="nx">actions</span><span class="p">.</span><span class="nx">actionA</span><span class="p">(</span><span class="nx">json</span><span class="p">))</span> <span class="p">})</span> <span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">error</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="s1">'ERROR:'</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">)</span> <span class="p">}</span> <span class="p">}</span></code></pre></figure> <p>In the example above, we first get data from the backend and then use said data with an action. Of course we can do more complex things in the controllers, like e.g. more complex communication with different backends.</p> <p>How the other categories (marked with <img src="/images/reduxLogo.svg" alt="redux-icon" class="iconImage" /> or <img src="/images/reactLogo.svg" alt="react-icon" class="iconImage" />) are used together is already described on <a href="http://redux.js.org/" target="_blank">redux.js</a> or <a href="https://facebook.github.io/react/docs/hello-world.html" target="_blank">React</a></p> <h2 id="testing">Testing</h2> <p>To test our application, we use unit tests, as well as integration tests. Everything that is reasonable testable without using the backend, is tested with unit tests. Everything that would be really hard to mock, is tested with integration tests.</p> <p>In our project, we unit test the react components, which is really easy, because they are almost always functional components. This does not mean, that stateful components should never be used. However, stateful components should only be used if necessary. Only use stateful components, if the state has something to do with the visual representation of the component. Never put business logic in your components! Putting business logic in your components is like putting business logic in the view of a <a href="http://martinfowler.com/eaaDev/uiArchs.html#ModelViewController" target="_blank">MVC</a> program. More on stateful vs stateless components can be found <a href="https://facebook.github.io/react/docs/state-and-lifecycle.html" target="_blank">here</a></p> <p>Furthermore, we also unit test the selectors and the actions together with the reducers. To test our react components, we use <a href="https://facebook.github.io/jest/" target="_blank">jest</a> together with <a href="https://github.com/airbnb/enzyme" target="_blank">enzyme</a>.</p> <p>The Controllers and the APIs are tested (together with everything else) with integration tests, since they are heavily dependent on an existing backend. However, our integration tests test everything except the react components (which are already covered by the unit tests). So the integration tests replace the react components (so to say) and trigger all the functionality, stored in the Controllers and Action categories, which can be seen in the following graphic:</p> <p><img src="/images/reactReduxArchitectureIntegrationTesting.png" alt="alt text" title="React-Redux-Architecture - Integration testing" /></p> <p>The integration tests run on node.js, as well as the unit tests. This means, that we can test every category and every component in our application, without starting the browser (which is awesome :-) ).</p> <p>Of course we still need some <a href="http://docs.seleniumhq.org/" target="_blank">selenium</a> tests, to tests the application in different browsers. However, the amount of selenium tests can be reduced significantly.</p> <p>Furthermore, “replacing” the react components with integration tests makes it very easy to write said integration tests, because you could say, that the integration tests are just another “view”.</p> <p>So instead of having react components, which the user can use (by clicking, typing), you have the integration tests which take care of the interaction. Thus an integration test can be written like a user story and is therefore easy to understand.</p> <p>An integration test, involving two sites which are implementet with react and redux and use the same backend could be testet as follows:</p> <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">storeSiteA</span> <span class="o">=</span> <span class="nx">createStoreFromRootReducer</span><span class="p">(</span><span class="nx">rootReducerSiteA</span><span class="p">)</span> <span class="kr">const</span> <span class="nx">storeSiteB</span> <span class="o">=</span> <span class="nx">createStoreFromRootReducer</span><span class="p">(</span><span class="nx">rootReducerSiteB</span><span class="p">)</span> <span class="c1">// changes something in the backend which affects the other site</span> <span class="nx">storeSiteA</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">(</span><span class="nx">siteAactions</span><span class="p">.</span><span class="nx">someAction</span><span class="p">())</span> <span class="c1">// expect the change to have an effect on the state</span> <span class="nx">expect</span><span class="p">(</span><span class="nx">siteAselectors</span><span class="p">.</span><span class="nx">someSelector</span><span class="p">(</span><span class="nx">storeSiteA</span><span class="p">.</span><span class="nx">getState</span><span class="p">())).</span><span class="nx">toBe</span><span class="p">(...)</span> <span class="c1">// get data from backend</span> <span class="nx">storeSiteB</span><span class="p">.</span><span class="nx">dispatch</span><span class="p">(</span><span class="nx">siteBactions</span><span class="p">.</span><span class="nx">pullData</span><span class="p">())</span> <span class="c1">// expect data to be what came from site A</span> <span class="nx">expect</span><span class="p">(</span><span class="nx">siteBselectors</span><span class="p">.</span><span class="nx">getData</span><span class="p">(</span><span class="nx">storeSiteB</span><span class="p">.</span><span class="nx">getState</span><span class="p">())).</span><span class="nx">toBe</span><span class="p">(...)</span></code></pre></figure> <p>The actions and selectors which are used by the components are also used by the integration test.</p> Sat, 22 Oct 2016 16:39:10 +0200http://schempp.xyz/coding/architecture/2016/10/22/react-redux-architecture/ http://schempp.xyz/coding/architecture/2016/10/22/react-redux-architecture/The importance of refactoring<p>Describing refactoring to a non-developer person can be tough. Especially when this person does not understand the implications of the absence of clean code or other code-quality improving techniques.</p> <p>If you try to explain code-quality improving techniques to non-developer persons, you might hear questions like “why haven’t you done it right the first time?”.</p> <p>Even explaining why code-quality matters is really difficult, particularly when money is involved. For a person who is only interested in making money with the resulting software, improving code-quality sounds like a waste of time and money, because the software might work, even without improving the code-quality.</p> <p>But if you want to continue developing the software, the code needs to be maintainable, well structured and as small as possible but still understandable. Because if it isn’t, developing new features and fixing bugs will become nearly impossible.</p> <p>Communicating the importance of code-quality to a non-developer person verbally is hard. To make the process of highlighting the importance of code-quality and refactoring more easy, I created a four-quadrant matrix.</p> <h3 id="the-refactoring-matrix">The Refactoring-Matrix</h3> <p><img src="/images/refactoringMatrix.png" alt="alt text" title="Refactoring-Matrix" /></p> <p>As the old saying goes “a picture is worth a thousand words”, this graphic is meant to explain the importance of refactoring and code-quality without going into detail too much.</p> <h2 id="the-axes">The axes</h2> <p>In the grahpic, you can see two axes. The x-axis describes the time, which is spent in the current project (the time spent on the software).</p> <p>The y-axis describes the time, which is spent on the implementation of new features or the time spent on bug-fixing.</p> <p>The matrix in general is meant to describe the correlation between time, which has passed, and the effort which is needed to implement new features or fix existing bugs.</p> <p>The red and green lines describe what happens if you do/don’t do refactoring</p> <h2 id="section">?</h2> <p>The quadrant on the lower left is the quadrant in which every new project starts. It’s too early to say something about the quality of the code, because there simply isn’t much code.</p> <h2 id="this-should-not-happen">This should not happen</h2> <p>The quadrant on the upper left should never be reached in any project. If this quadrant is reached, it means that you need a lot of time do implement new features in the early phase of the project. This might still happen, if</p> <ul> <li>people use a technology which is not suited for the task or outdated</li> <li>people use a technology they are not familiar with, so they have to learn the whole language/framework</li> <li>people put to much effort in thinking about absolutely <strong>every</strong> little detail instead of writing code</li> </ul> <h2 id="no-problems">no problems</h2> <p>The quadrant on the lower right is the quadrant in which every project should be. In this quadrant,</p> <ul> <li>new features are easy to develop in a short amount of time</li> <li>bugs are easy to detect and easy to fix</li> <li>the code is as small as possible and as big as necessary</li> <li>there are many tests</li> <li>tests are easy to write</li> </ul> <p>This quadrant can be reached by constantly doing refactoring and constantly thinking about improvements of the code-quality and software architecture.</p> <p>As you can clearly see in the graphic, the green line does <strong>not</strong> converge to zero, it’s more like a sinus curve. This means, that you can’t develop the “perfect” software architecture and never need to think about this stuff again. It means, that whatever is done in the project, the developers have to think and do something about the software-architecture/clean-code.</p> <h2 id="danger-zone">danger zone</h2> <p>The quadrant on the upper left is the quadrant, which a project should never ever reach. In this quadrant,</p> <ul> <li>the code is unmaintainable,</li> <li>the code is complicated/hard to understand</li> <li>new features take a (very) long time to implement</li> <li>bugs are hard to fix</li> <li>there are no or too little tests</li> <li>tests are (really) hard to write</li> </ul> <p>The red line in this quadrant looks like the half of a parabola, which means that the red curve will rise very fast. Every feature implemented in such a project will take longer and longer for every feature that is developed.</p> <p>This means, that after some time, the software will not be maintainable anymore. New features can’t be developed, because they would break something somewhere. It is therefore very important, that a project never gets too deep into the “danger zone”, because it might never leave it again.</p> Fri, 14 Oct 2016 16:39:10 +0200http://schempp.xyz/coding/2016/10/14/the-importance-of-refactoring/ http://schempp.xyz/coding/2016/10/14/the-importance-of-refactoring/Fix bootloader problem with Linux in windows<p>If you install windows after you installed Linux, the Linux bootloader will be “overwritten”.</p> <p>To fix this, you don’t have to reinstall grub or syslinux or any other bootloader you are using. Just boot into windows, figure out on which partition the bootloader is and set the active partition flag on this partition.</p> <h2 id="set-the-active-partition">set the active partition</h2> <p>to set the active partition, you simply can use diskpart. Run diskpart:</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash">diskpart</code></pre></figure> <p>then navigate to the disk, containing the Linux partition with the bootloader. For example:</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="k">select </span>disk 0 <span class="k">select </span>partition 3 active <span class="nb">exit</span></code></pre></figure> <p>in this case, the bootloader of my Linux installation was on my first disk on partition three.</p> <h2 id="update-problems">update problems</h2> <p>For some updates in windows 7, the active partition needs to be the partition with the windows bootloader on it. The windows 7 bootloader partition is usually 100MB big and is the partition right before the partition with your windows 7 system.</p> <h2 id="scripts">scripts</h2> <p>to make life easier, I wrote some scripts which set the active flag on either the partition with syslinux or the partition with the windows bootloader.</p> <p>file arch</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="k">select </span>disk 0 <span class="k">select </span>partition 2 active <span class="nb">exit</span></code></pre></figure> <p>file windows</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="k">select </span>disk 0 <span class="k">select </span>partition 3 active <span class="nb">exit</span></code></pre></figure> <p>file set_boot_loader.bat</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash">diskpart /s <span class="s2">"%~dpnx1"</span> &gt; logfile.txt</code></pre></figure> <p>file set_boot_loader_arch.bat</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash">set_boot_loader.bat arch</code></pre></figure> <p>file set_boot_loader_windows.bat</p> <figure class="highlight"><pre><code class="language-bash" data-lang="bash">set_boot_loader.bat windows</code></pre></figure> Wed, 27 May 2015 22:34:30 +0200http://schempp.xyz/windows/linux/2015/05/27/fix-linux-windows-bootloader/ http://schempp.xyz/windows/linux/2015/05/27/fix-linux-windows-bootloader/Loop over files - bash one line<p>It’s simple:</p> <div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="k">for </span>i <span class="k">in</span> <span class="k">*</span>; <span class="k">do </span><span class="nb">echo</span> <span class="nv">$i</span>; <span class="k">done</span> </code></pre> </div> <p>If you want to replace a certain text in all files with something new, use this:</p> <div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="k">for </span>i <span class="k">in</span> <span class="k">*</span>; <span class="k">do </span>sed -i <span class="s1">'s/original/new/g'</span> <span class="nv">$i</span>; <span class="k">done</span> </code></pre> </div> <p>where <strong>original</strong> is the original text and <strong>new</strong> is the new text. If you run the following script…</p> <div class="language-bash highlighter-rouge"><pre class="highlight"><code><span class="k">for </span>i <span class="k">in</span> <span class="k">*</span>; <span class="k">do </span>sed -i <span class="s1">'s/foo/bar/g'</span> <span class="nv">$i</span>; <span class="k">done</span> </code></pre> </div> <p>…in a folder, which contains a file with the content:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>Hello foo, my name is bar </code></pre> </div> <p>the result will be:</p> <div class="language-text highlighter-rouge"><pre class="highlight"><code>Hello bar, my name is bar </code></pre> </div> Wed, 29 Apr 2015 22:11:45 +0200http://schempp.xyz/coding/snippets/2015/04/29/loop-over-files-bash-one-line/ http://schempp.xyz/coding/snippets/2015/04/29/loop-over-files-bash-one-line/How to wrap a javascript function<p>Recently I wanted to modify a project, to wrap a javascript function, so that I could extend the functionality of that function without breaking the project it was assigned to.</p> <p>After searching the web for a bit, I found this stackoverflow-post, which exactly fits my needs. Works perfectly and I also learned something new :).</p> <p>Suppose the function looks something like this:</p> <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">foo</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'original function'</span><span class="p">);</span> <span class="p">}</span></code></pre></figure> <p>now you want to wrap that function, you do this:</p> <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">foo</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="c1">//this is important!</span> <span class="c1">//you need to save the old function,</span> <span class="c1">//to call it later.</span> <span class="kd">var</span> <span class="nx">cached_function</span> <span class="o">=</span> <span class="nx">foo</span><span class="p">;</span> <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'modified function - START'</span><span class="p">);</span> <span class="c1">//If you use call, you can pass the arguments as they are</span> <span class="c1">//If you use apply, you have to pass the arguments as an array</span> <span class="kd">var</span> <span class="nx">returnValue</span> <span class="o">=</span> <span class="nx">cached_function</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'modified function - END'</span><span class="p">);</span> <span class="k">return</span> <span class="nx">returnValue</span><span class="p">;</span> <span class="p">};</span> <span class="p">}());</span></code></pre></figure> <p>Works perfectly. Found <a href="http://stackoverflow.com/questions/9134686/adding-code-to-a-javascript-function-programatically">here</a>.</p> Sun, 22 Mar 2015 20:24:20 +0100http://schempp.xyz/coding/snippets/2015/03/22/how-to-wrap-a-js-function/ http://schempp.xyz/coding/snippets/2015/03/22/how-to-wrap-a-js-function/Regex for relative file paths<p>Regular expressions can come in handy when you need to find strings. This Regual expression simply matches relative paths. It’s not perfect, but it gets the job done :)</p> <p><font size="4px">(([^\./\\:*?&lt;&gt;|"]*)(/[^\./\\:*?&lt;&gt;|"]*)*/([^\./\\:*?&lt;&gt;|"]*\.[^\./\\:*?&lt;&gt;|"]+))</font></p> <p>I should mention, that this regex is meant for python and also the relative path has to have a file ending. This means that, for example the path ‘path/without/filending’ doesn’t get matched by the regex, but ‘path/with/file.ending’ does.</p> <h2 id="update">Update:</h2> <p><font size="4px">^(\/?[^\/]+)(\/[^\/]+)*\/([^\/]*\.[^\/]+)$</font></p> <p>This is the optimized version :) - a lot shorter. Check this <a href="https://regex101.com/r/tN6sI7/1">site</a> for trying regular expressions.</p> Sun, 22 Mar 2015 20:01:20 +0100http://schempp.xyz/coding/snippets/2015/03/22/regex-for-relative-paths/ http://schempp.xyz/coding/snippets/2015/03/22/regex-for-relative-paths/Apps you should have for rooted Android devices<p>After rooting my android device, I realized, that there are a variety of apps which are very powerful if you have a rooted device. In this post, I want to introduce you to my favorite apps which are <strong>only</strong> for rooted devices or are <strong>more useful</strong> on rooted devices.</p> <h2 id="voltage-controlhttpsplaygooglecomstoreappsdetailsidcomdarekxanvoltagecontrol"><a href="https://play.google.com/store/apps/details?id=com.darekxan.voltagecontrol">Voltage Control</a></h2> <p>This simple app allows you to change the CPU govenours, IO shedulers and the CPU frequency. It does <strong>not</strong> have profiles and all this “if screen turned of then…” stuff which is, in my opinion, positive in any way. Additionally, this app is completely free and has no advertisement what so ever.</p> <h2 id="greenifyhttpsplaygooglecomstoreappsdetailsidcomoasisfenggreenify"><a href="https://play.google.com/store/apps/details?id=com.oasisfeng.greenify">Greenify</a></h2> <p>Another great app, which also works on not rooted devices. Of course the full potential of this app is only accessible with root rights. Furthermore the power of this app can be extended by installing an extension called <a href="http://repo.xposed.info/module/de.robv.android.xposed.installer">xposed framework</a>. So what does this app do? It simply puts all selected apps in a hibernate mode, which makes the apps use much less power than they would normally do. With the additional exposed framework, one can unlock the experimental features.</p> <h2 id="os-monitorhttpsplaygooglecomstoreappsdetailsidcomeolwralosmonitor"><a href="https://play.google.com/store/apps/details?id=com.eolwral.osmonitor">OS Monitor</a></h2> <p>Another app, which only works with root rights. This app is similar to <strong>htop</strong> in Linux or <strong>taskmanager</strong> in windows. It allows the user to list and interact with all running process, connections and other stuff.</p> <h2 id="afwallhttpsplaygooglecomstoreappsdetailsiddevukanthufirewall"><a href="https://play.google.com/store/apps/details?id=dev.ukanth.ufirewall">AFWall+</a></h2> <p>A must have for all rooted phones. This app simply is a firewall with blacklists or whitelists and some other stuff like logs. You can select which app is allowed to connect via Wifi and/or mobile Internet.</p> <h2 id="gsam-battery-monitorhttpsplaygooglecomstoreappsdetailsidcomgsamlabsbbmhlde"><a href="https://play.google.com/store/apps/details?id=com.gsamlabs.bbm&amp;hl=de">GSam Battery Monitor</a></h2> <p>This is the best app for tracking your battery. It shows you which app sucks the most out of your battery and shows you all sort of information about the battery drain. Definitely a must have.</p> <h2 id="repetitouchhttpsplaygooglecomstoreappsdetailsidcomcygeryrepetitouchfreehlde"><a href="https://play.google.com/store/apps/details?id=com.cygery.repetitouch.free&amp;hl=de">RepetiTouch</a></h2> <p>Awesome app. Basically this app allows you to <strong>record</strong> your typing on the screen, and then allows you to <strong>play back</strong> what you just recorded. You can also define how much you want your recording to be played back.</p> Fri, 26 Dec 2014 13:33:51 +0100http://schempp.xyz/android/2014/12/26/apps-you-should-have/ http://schempp.xyz/android/2014/12/26/apps-you-should-have/