The magic of using props.children as an API with a controller component is quite simple and boils down to two steps:

1. Configure props.children
2. Pass from component controller requiredprops for your features

Configure props.children

The first is to define if your component accepts, one (and / or) of the react element in children, to accept both:

const children = React.Childen.toArray(props.children)

React.Children.toArray transforms the variable into an array so that the children.map method is always available. (Which is not the case if you only have one react element in children of your controller component)

• Use React.Children.toArray is only of interest if you want to support 1 or more children in your controller. If you still only have one child, in this case you can skip its use.

Inject props from your controller to children react elements with cloneElement

React.cloneElement Allows you to clone an already rendered JSX element (Unlike React.createElement which can render a ReactComponent into a JSX element). The 2nd parameter of the function allows to override the props, we can therefore write: :

cloneElement(child, { mine: true })

Done, you know how to use the props.children as an API interface of your reusable components. il ne vous manque plus qu'à écrire un composant controller pour provisionner des props à vos children.

Yes but why ?

Let's take the example of a <Carousel />, if you want to add the following props to each <Slide />:

props.carouselRef : created within carousel automatically

props.activeIndex : available using the carousel reference

In bonus, we also want to automatically set the index on each slide, so we don't need to manually update it on each slide.

• props.index can go up to slides.length - 1

If we want to create a reusable component without exploiting l'API props.children, we should use another props and should write for example:

function App() {
  return (
    <Carousel
      slides={[Slide1, Slide3, Slide3]}
    />
  );
}
// ou 
function App() {
  return (
    <Carousel
      slides={[<Slide1 />, <Slide3 />, <Slide3 />]}
    />
  );
}

It works very well and for each case we can inject props to each children :

• In the 1st using JSX or more precisely with createElement
• In the 2nd with cloneElement.

So why should you use props.children ? Simply because the interface is more user land friendly (user-land i.e. in your user's code, aka your developer colleague who reuses your component):

<Carousel>
  <Slide1 />
  <Slide2 />
  <Slide3 />
</Carousel>
// et 
<Carousel>
  <Slide1 /> {/* <= in this case, use React.Children.toArray */}
</Carousel>

Finally, your controller should look like this :

function Carousel(props) {
  const carouselRef = useRef<Carousel>();
  return (
    <ReactCarousel ref={carouselRef}>
      {React.Children.toArray(props.children).map((child, index) => cloneElement({
        key: child.name
        carouselRef,
        activeIndex: carouselRef.current.getActiveIndex(),
        index,
      }))}
    </ReactCarousel>
  )
}

Some example of feature that can be added :

• A "skip all" button (if many children) ou "skip" (if one child)
• Add analytics on each slide to trigge pageView using automatique name that use the index
• Event on skip action using the slide name and it's index

When not to use the props.children API?

• When it is not for API purposes, i.e. your component is not reusable
• When your API is not documented or you do not know how to write or maintain documentation properly so that no one gets it wrong (or when we will have automatic documentation for our components)
• When your API is too complex, ie your component solves too many problems or problems that will probably change, as this may add complexity for those who are not familiar with your components.

Other examples of uses cases

<UserController>

<UserController perPage={25} filters={{ sort: { order: 'ASC', id: 'id' } }}>
  <SimpleUserList />
</UserController>

You can now re-use your controller for many kind of UserList

• It is convenient to use a loading indicator when fetching, you will also do it in the controller to normalize its injection through various controllers, for example ...

You can use <UserController /> with <SimpleUserList /> refactored in 2 componants:

• One as a layout controller
• Many for each field that must be shown in the layout

This will give you a lot more of layout re-usability without writing much code, always with an easy to learn interface :

<UserController id={15}>
  <SimpleForm>
    <TextInput source="id" />
    <TextInput source="firstName" />
  </SimpleForm>
</UserController>

<UserGrid>

This example illustrates the simplicity offered by this new interface, to offer more grains for example for the display of columns according to the access rights of each: :

<UserController perPage={25} filters={{ sort: { order: 'ASC', id: 'id' } }}>
  <UserGrid>
    <TextField source="id" />
    <TextField source="firstname" />
    {isAdmin && (<TextField source="apiKey" />)}
  </UserGrid>
</UserController>

Nowadays, SMS are widely used across web services. They are not aiming to replace bulk mail and they are generally used to identify a user more securely.

This list is just a few cases that come to my mind where you might want to send a text message to your users :

• Password recovery
• Two factor authentication
• Confirmation of an action with increased security
• Alert: it is known that a SMS will have a higher rate of lecture than an email

They are plenty of SMS provider online that can be used for sending SMS. They usually expose an HTTP API so you can send SMS over HTTP.

These provider are generally not free, despite the low pricing, for some developer this will still be to high for there need and it will be considered as not mandatory. This generally result in a weaker security strategy for your web service.

Hopefully, it's possible to build your home made SMS server with a minimal cost of 5 usd (not including the electricity).

For this, you will need the following:

• A Linux compatible USB 3G Modem
• A valid SIM card that support SMS sending

I bought the cheapest USB stick I could find on the internet from China, and prayed that it was supported by Linux, and it was.

US $7.0 29% OFF|HSDPA USB STICK SIM Modem 7.2Mbps 3G Wireless Network Adapter with TF SIM Card|3g modem|sim card stickhsdpa usb - AliExpress

Smarter Shopping, Better Living! Aliexpress.com

aliexpress.com

It cost 7$. As a new Aliexpress customer, I also had a 2$ voucher, overall I had to pay 5$ and waited one month to receive it.

Regarding the SIM card, you must choose the right plan depending on the country where you will host your SMS server, but also the location of your users.

In my case, the server will be hosted in Paris (France), and since my ISP is offering to their customers a SIM card with free and unlimited SMS to french numbers, I started with this one.

If you are going to use an unlimited SMS plan, you should read carefully the general condition of it, sometimes broadband provider add limit such as the number of total recipients per month.

If you have both the SIM card and a modem, you should now set the pin to something easy, or disable the PIN code so it will be less configuration.

Prerequisites

Either you are using Docker or standalone installation, your GSM modem must be visible in the system. When you put a USB stick to your system, you have to see a new USB device:

dmesg | grep ttyUSB

or typing command:

lsusb

Bus 001 Device 009: ID 12d1:1406 Huawei Technologies Co., Ltd. E1750

My hardware support both SD card reader and mode, I have to use usb_modswitch to switch it to modem mode:

usb_modeswitch -W -v 05c6 -p 1000 -K

I'll also make this config persistent by adding this line to /etc/rc.local right before exit 0 (Debian).

Now lsusb return

Bus 001 Device 004: ID 05c6:6000 Qualcomm, Inc. Siemens SG75

Prevent rules to assign a wrong tty device

This is specific to my modem. I experienced my modem jumping from a tty port to another, since I mount the device using docker, this was ruining my server, hopefully you can assign dev rule to prevent this :

echo 'SUBSYSTEM=="tty", ATTRS{idVendor}=="05c6", ATTRS{idProduct}=="6000", SYMLINK+="mobile"' | tee -a /etc/udev/rules.d/10-local.rules
sudo udevadm trigger
ls -l /dev/mobile

I picked up the vendor id and product id using the lsusb command

This will ensure your device is always mounted under /dev/mobile

Expose an HTTP server using Docker

We use Gammu to communicate with our sim card, it is a "phone" software written in C designed to work on both Windows and UNIX system. A quick GitHub search to get a ready to use soft : https://github.com/pajikos/sms-gammu-gateway

You can use the following docker compose file to start the service

version: '3'
services:
  sms-gammu-gateway:
    container_name: sms-gammu-gateway
    restart: always
    image: pajikos/sms-gammu-gateway
    ports:
      - "5000:5000"
    devices:
      - /dev/mobile:/dev/mobile

Run:

docker-compose up -d

When you run this application, you can simply send SMS using REST API:

POST http://xxx.xxx.xxx.xxx:5000/sms
Content-Type: application/json
Authorization: Basic admin password
{
  "text": "Hello, how are you?",
  "number": "+420xxxxxxxxx"
}

example:

AUTH=$(echo -ne "admin:password" | base64 --wrap 0)
curl -H 'Content-Type: application/json' -H "Authorization: Basic $AUTH" -X POST --data '{"text":"Hello, how are you?", "number":"+420xxxxxxxxx"}' http://localhost:5000/sms
1

If you need to customize the smsc number:

curl -H 'Content-Type: application/json' -H "Authorization: Basic $AUTH" -X POST --data '{"text":"Hello, how are you?", "number":"+420xxxxxxxxx","smsc": "+33695000695"}' http://localhost:5000/sms

or you can simply get the current signal strength:

GET http://xxx.xxx.xxx.xxx:5000/signal

and the response:

{
  "SignalStrength": -83,
  "SignalPercent": 45,
  "BitErrorRate": -1
}

That's it, you have a quick and clean running free sms server running.

To think further, you could have many instances of this basic and secure endpoint for multiple SIM card and use a more complexe back end with fancy features such as:

• deciding which sim card to use when sending an sms
• reading response and replying to original user
• handle roundrobin
• away message
• handle available credit with broadband provider
• credit system for users
• ...

This happened to me in a CI process before where I had to configure multiple process and wait for them to be up.

The following bash script will wait for the service running at service:8000 to be up before continuing:

found_message_in_a_bottle() {
 curl --connect-timeout 2 -s service:8000 2>/dev/null| grep -q Welcome
}
wait_for_saltmaster() {
 while ! found_message_in_a_bottle; do
   echo wait for service... 
   sleep 1
 done
}

Now run wait_for_saltmaster and the CI will hang until the service is up.

If you don't want to completely destroy your Linux system but just neutralize it, you can go with a fork bomb using the following command:

:(){ :|: & };:

This will create a process which will duplicate it self infinitely until the system crash.

If you are in a situation where you receive unwanted guest (like Kim Dotcom), you might want to quickly delete all your hard drive content in a safe way (Use a hammer and crash it) or a programmatic way.

If you have too many hard-drive, the programmatic way will do it. This command will write random data on your hard drive without worriying for a sec for files or partitions.

sudo dd if=/dev/random of=/dev/sda

Replace /dev/sda with the hard drive you wish to delete.

Don't use this just to test or worst, to have "fun"

I would like to thanks Nicolas Bernaerts for sharing on his GitHub repository the script to generate a booklet from a PDF file. This script was written for Ubuntu but it also work on Debian.

First of all, download the script and give it execution permission:

wget --header='Accept-Encoding:none' https://raw.githubusercontent.com/NicolasBernaerts/ubuntu-scripts/master/pdf/generate-booklet-install.sh
chmod +x generate-booklet-install.sh

If you use Debian, you must edit the installation script:

sed -i 's/Ubuntu/Debian/g' generate-booklet-install.sh

Run the installation:

./generate-booklet-install.sh

It will add to your file manager an option to generate a booklet. Right click on any PDF file, choose Generate Booklet, then A4 and print with "Long edge stapling".

Your booklet is ready!

After decades of sofware development, I finally opened this blog which is under active development, stay tuned for futur news