How to convert a function definition as string to code in JavaScript

 

Just a snippet for converting a function as string to code:

image

 

Code

<!doctype html>
<html>
<head>
    <meta charset=”utf-8″ />
    <meta http-equiv=”x-ua-compatible” content=”ie=edge”>
    <title>Research</title>
    <meta name=”description” content=”A page to quickly spike some code or styling.”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”icon” href=”data:;base64,iVBORw0KGgo=”>   
    <style>
       
    </style>
</head>
<body>
    <script>
        // Define a function as a string.
        // Don’t forget the “(” and the “)” arround the function.
        // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
        var functionAsString = “(function(a, b){ return a + b; })”;

        // Convert a string containing a function definition to a real function.
        var fn = eval(functionAsString);

        // Execute the created function.
        var result = fn(1, 2);

        // Log result is: 3
        console.log(result);
    </script>
</body>
</html>

Developer Anarchy, made possible by C-level buy-in and Micro Services.

A very great podcast on developer anarchy: http://www.se-radio.net/2016/03/se-radio-episode-253-fred-george-on-developer-anarchy/

As Fred George explains, developer anarchy will work in environments, where you have C-Level Buy-In and can have rapid feedback.

So you better not try it on the mars lander project Smile.

It envies self-directed teams, fast deployment, rapid feedback, small components / services and business knowledge by the developers.

CSS modules

 

A great article on css modules: http://glenmaddern.com/articles/css-modules

This allows css to be imported and used in JavaScript.

A great fit for web components and can be easily used in frameworks like Aurelia, Angular, React etc.

Example

CSS

Create a *.css file called submit-button.css  with content:
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

 

JavaScript

Then use the css in your JavaScript like:

import styles from ‘./submit-button.css’;

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

 

HTML (result)

<button class=”components_submit_button__normal__abc5436″> Processing… </button>

 

Under the covers it uses ICSS, more on ICSS: http://glenmaddern.com/articles/interoperable-css