2024’s small template to start your raylib game. Featuring 3D, C 2017, Raylib 5.0, OpenGL 3 and a modular architecture.

Content

• Dependencies
• Screenshots
• Features
• Install
• Usage
• Assets
• Release
• Resources

Dependencies

• C++ 2020 / C 2017
• RayLib 5.0
• OpenGL 3.30
• CMake v3.28.3
• Visual Studio 2022 MVS

Screenshots

Note: Captured on mid-tier PC from 2020 (GPU: RTX-2060 with 6 GB VRAM, CPU: Intel i5-9600K, RAM: 32 GB).

Features

• Targets:
  • Win64 (Windows)
  • Linux
  • SteamDeck (Windows/Linux)
  • HTML5 (WebAssembly)
  • Discord (WebAssembly)
• Graphics
  • Render: PostProcessing Bloom, AA MSAA, Texture Filtering
  • Camera: ThirdPerson, Follow
  • Lighting: World Lighting, Player Lighting, Player Shadows
  • Meshes: Meshes, Textures, Shaders, Materials, [ ] Texture tiling
  • Sky: Color, Cubemap, Fog
• World
  • Physics [ ] hitbox [ ] gravity
  • Simulation: Tick Systems
• Scripting
  • Console
• Animation
  • Character
• Input
  • UI: lauch screen, settings menu
  • Input: Keyboard, Arrows, Gamepad
  • Control: [x] Tank control, [ ] Third Person
• Other
  • launching screen

Repository layout:

├── assets
│   └── images
│   └── ...
├── docs
├── infra
├── lib
│   ├── raylib-5.0_win64_msvc16
│   ├── winmm-10-win64
├── platform
│   ├── engine
│   └── game
├── standalone
│   ├── desktop_win64
└── tools
    └── blender
    └── ci

Install

Windows

CMake:

• Download the v3.28.3 release of CMake at http://www.cmake.org/download/.
• Pick Windows (Windows x64 Installer).
• Run the installer
• When asked for, select Add CMake to the system PATH for all users.
• Run software installation…

Visual Studio:

• Download the Community version of Visual Studio 2022 release of Visual Studio at https://visualstudio.microsoft.com/downloads/
• Run the installer…
• Run software Visual Studio Installer
• When asked for, click on modify under Visual Studio 2002
• Select Desktop development with C++ (contains MVC package)
• Click on modify

PowerShell:

cmake -S "." -B "build" -G "Visual Studio 17 2022"

Usage

CLI (pure CMake)

• Pros: basic, no Editor, CI friendly.
• Cons: manual actions intensive.

.\tools\ci\install.bat

.\tools\ci\dev.bat
# OR
.\tools\ci\release.bat

VisualStudio 2022 (IDE)

• Pros: better integration, 1 step compile+debug.
• Cons: very laggy UI, bad search tools.

.\tools\ci\install.bat

VSCode

• Pros: better code editor, lightweight.
• Cons: 2 steps compile+debug

.\tools\ci\install.bat

.\tools\ci\watch.bat

Run (press Ctrl+F5, or Menu > “Run” > “Run without Debugging”)

Debug (press F5, or Menu > “Run” > “Start Debugging”)

Assets

Pipeline

Installation:

1. Download io_scene_m3d.py
2. Start Blender
3. Go to menu, “Edit” > “Preferences…” > “Add-ons” tab > “Install…” button
4. Browse and double click on the downloaded file
5. On the “Add-ons” tab, search for “m3d”
6. Click on “Enable Add-on.”
7. Now in the menu, “File” > “Export” > “Model 3D (.m3d)” (and eventually “File” > “Import” > “Model 3D (.m3d)”) should appear

Get 3D Models:

1. Start WebBrowser…
2. https://www.mixamo.com
3. Click Characters
4. search “X bot”
5. Click Download
6. Check Format: fbx, pose: t-pose
7. Click Download
8. Start Blender…
9. Go to menu, File > New > General …Delete Cube
10. Go to menu, File > Import > FBX > “X bot.fbx”
11. Click on the “Texture Paint” tab > click “new” > type “X_bot_diffuse”
12. On right side panel > click “material” > “base color” > “image texture” > select “X_bot_diffuse”
13. Go to menu, File > Export > M3D > scale: 2.0 > “X_bot.m3d” > Export

Get 3D Animations:

1. Start WebBrowser…
2. https://www.mixamo.com
3. Click Animations
4. search “Slow Run”
5. check “In Place” box
6. Click Download
7. Check Format: fbx, Skin: with skin
8. Click Download
9. Start Blender…
10. Go to menu, File > New > General …Delete Cube
11. Go to menu, File > Import > FBX > “Slow Run.fbx”
12. Click on the “Animation” tab > click “editor type icon” > “non linear animation” (new channel editor)
13. click “push down action” (new channel)
14. Go to menu, File > Export > M3D > scale: 2.0 > “Slow Run.m3d” > Export

FAQ

Why Models are sometime unlit ?

Cause: Blender export changes materials indexes (start with 0 or 1) and lighting shader needs to be applied to real material.

• *.obj, *.iqm formats: use material[0]
• *.m3d, *.glb formats: use material[1]

What about performance ?

Condition: GPU: RTX-2060, CPU: i5-9600K, RAM: 32 GB

• Raylib (GL3) “High”: ~2500 FPS (AA 4x, Postpro Bloom)
• Raylib (GL3) “Low”: ~3000 FPS
• Unreal (DX12) “Low”: ~150 FPS (Settings=Low)

Project History

Release

• Source Code (monorepo):
  • 20260111-c99-raylib5-gl3-3dgame-starter-1.0.0-source-code
• Executable (Win64):
  • 20260111-c99-raylib5-gl3-3dgame-starter-1.0.0-desktop_win64.zip
• Repository (GitHub):
  • c99-raylib5-gl3-3dgame-starter (GitHub)

Resources

• C
  • ModernCppStarter
• CMake
  • CMake with include and source paths - basic setup
  • CMake add_library
  • Specify the default startup project in a Visual Studio solution.
  • How To Automatically Build CMake
• Monorepo
  • How to structure a monorepo
  • A monorepo template that actually works
• VS Code
  • Configure C/C++ debugging
• Raylib
  • raylib vs SDL - A libraries comparison
  • raylib-game-template
  • Examples GitHub
  • Examples Demos (HTML5)
    • shaders_postprocessing
    • shaders_texture_tiling
    • shaders_basic_lighting
    • shaders_fog
    • text_draw_3d
    • textures_image_processing
  • how to properly setup raylib app to talk to glsl shaders
  • WASM
    • Working for Web (HTML5)
    • Creating Discord Activities with raylib
  • Shadow
    • c99-raylib-shadowmap
• Quality
  • cppcheck
• Model3D Format
  • Welcome to Model 3D!
  • Model 3D Blender Integration
  • io_scene_m3d.py
  • IQM Export
• C Libs
  • cJSON parser

References

There are several games made with raylib to highlight:

• Hare136: https://play.google.com/store/apps/details?id=games.haremonic.slider
• SideStep Legends: https://store.steampowered.com/app/2077590/Sidestep_Legends/
• Pure Logic: https://store.steampowered.com/app/1861500/Pure_Logic/

There are also many small games (and tools) made with raylib on itchio: https://itch.io/c/380928/made-with-raylib

Hi everyone,

This is the complete source code for my game Cars2048 (Android, 2017, Unity3D)

Check it out here :

• Unity project on GitHub

• Photoshop and Blender assets on GitHub

The primary intent of this release is for entertainment and educational purposes.

Have fun !

Store

GooglePlay/Android : Cars 2048 - Puzzle Game

Screenshots

Today (20 February 2022) is a very meaningful and historic day for me as it marks the 10th anniversary of my blog here. A decade has gone since I browse through the web looking for a platform for blogging and then decided to join WordPress after Blogger.

What I’ve Learned ?

This blog helped me a lot in my job. Motivate myself to learn on my own, then sharing knowledge with others.

What’s Next ?

More products and less blogging!

Last word

Last but not least, Happy 10th Birthday to my blog once again!

Thank you all.

Test-driven development is not about testing. Test-driven development is about development (and design), specifically improving the quality and design of code. The resulting unit tests are just an extremely useful by-product.

TDD life-cycle

Before explaining best practices, it is important to understand the TDD life-cycle.

• Write the test
• Run the test (there is no implementation code, test does not pass)
• Write just enough implementation code to make the test pass
• Run all tests (tests pass)
• Refactor
• Repeat

Result

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit5Parent;
import org.junit.jupiter.api.*;
import org.junit.jupiter.params.ParameterizedTest;
import org.junit.jupiter.params.provider.CsvSource;

@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
public class HelloWorld6FinalTest extends JUnit5Parent {

    @Test
    void print_Hello_World_by_default() {
        String expected = "Hello, World!!";
        HelloWorld6Final.main(null);
        Assertions.assertEquals(expected, getOutput());
    }

    @DisplayName("print Hello with parameter (expected, parameter)")
    @ParameterizedTest
    @CsvSource({
            "'Hello, Damien!', Damien",
            "'Hello, Jane!', Jane",
            "'Hello, John!', John",
    })
    void print_Hello_with_parameter(String expected, String parameter) {
        String[] args = {parameter};
        HelloWorld6Final.main(args);
        Assertions.assertEquals(expected, getOutput());
    }

    @DisplayName("exception bad format (description, expected, parameter)")
    @ParameterizedTest
    @CsvSource({
            "Param is empty,  bad arg (ex: Damien), ''  ",
            "Param is blanck, bad arg (ex: Damien), ' ' ",
            "Param is null,   bad arg (ex: Damien), null"
    })
    void exception_bad_format(String description, String expected, String parameter) {
        String[] args = {parameter.equals("null") ? null : parameter};
        Exception e = Assertions.assertThrows(IllegalArgumentException.class, () -> {
            HelloWorld6Final.main(args);
        });
        Assertions.assertEquals(expected, e.getMessage());
    }
}

Specifications

This tutorial will implement the following specifications.

• Print “Hello, World!”
• Print “Hello, !", where is a parameter
• If parameter is not present, Print “Hello, World!”
• If parameter is not null or empty, then exception “bad arg (ex: Damien)”

Steps

Order is important, next step is also solution to previous step. (in Git Projet, Just follow classes named HelloWorld*Test order)

1. Start by developing Print "Hello, World!"
   1. HelloWorldTest#print_Hello_World Complete the test
   2. HelloWorldTest#print_Hello_World Run the test (test does not pass)
   3. HelloWorld Write just enough implementation code to make the test pass
2. Repeat with Print "Hello, <MY NAME>!", where <MY NAME> is a parameter
   1. HelloWorldTest#print_Hello_with_parameter Complete the test
   2. HelloWorldTest#print_Hello_with_parameter Run the test (test does not pass)
   3. HelloWorld Write just enough implementation code to make the test pass
   4. HelloWorldTest#* Run all tests (tests pass)
3. Repeat with If parameter is not present, Print "Hello, World!"
   1. HelloWorldTest#print_Hello_World_by_default Complete the test
   2. HelloWorldTest#print_Hello_World_by_default Run the test (test does not pass)
   3. HelloWorld Write just enough implementation code to make the test pass
   4. HelloWorldTest#* Run all tests (tests pass)
4. Refactor
   1. HelloWorldTest Migrate to JUnit5
   2. HelloWorld Use Ternary operator for inline condition
5. Repeat with If parameter is not null or empty, then exception "bad arg (ex: Damien)"
   1. HelloWorldTest#exception_bad_format Complete the test
   2. HelloWorldTest#exception_bad_format Run the test (test does not pass)
   3. HelloWorld Write just enough implementation code to make the test pass
   4. HelloWorldTest#* Run all tests (tests pass)

Step 0 - Initial commit

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld {

    public static void main(String[] args) {
        // TODO: NEXT: Print "Hello, World!"
    }
}

Step 1

Start by developing Print "Hello, World!"

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Test;

public class HelloWorldTest extends JUnit4Parent {

    @Test
    public void print_Hello_World() {
        throw new IllegalStateException("Not yet implemented!");
        // TODO: NEXT OUTPUT: super.getOutput()
    }
}

Run the test (test does not pass)

Complete the test

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Assert;
import org.junit.Test;

public class HelloWorld1Test extends JUnit4Parent {

    @Test
    public void print_Hello_World() {
        String expected = "Hello, World!";
        HelloWorld1.main(null);
        Assert.assertEquals(expected, getOutput());
    }
}

Run the test (test does not pass)

Write just enough implementation code to make the test pass

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld1 {

    public static void main(String[] args) {
        String text = "Hello, World!";
        System.out.println(text);
    }
}

Step 2

Repeat with Print "Hello, <MY NAME>!", where <MY NAME> is a parameter

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Assert;
import org.junit.Test;

public class HelloWorld2Test extends JUnit4Parent {

    @Test
    public void print_Hello_World() {
        String expected = "Hello, World!";
        HelloWorld2.main(null);
        Assert.assertEquals(expected, getOutput());
    }

    @Test
    public void print_Hello_with_parameter() {
        throw new IllegalStateException("Not yet implemented!");
        // TODO: NEXT: Print "Hello, <MY NAME>!", where <MY NAME> is a parameter
    }
}

Complete the test

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Assert;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;

import java.util.Arrays;
import java.util.Collection;

@RunWith(Parameterized.class)
public class HelloWorld2Test extends JUnit4Parent {

    @Parameterized.Parameters
    public static Collection<Object[]> data() {
        return Arrays.asList(new Object[][]{
                {"Hello, World!", "World"},
                {"Hello, Damien!", "Damien"},
                {"Hello, Jane!", "Jane"},
                {"Hello, John!", "John"},
        });
    }

    private final String expected;
    private final String first;

    public HelloWorld2Test(String expected, String first) {
        this.first = first;
        this.expected = expected;
    }

    @Test
    public void print_Hello_with_parameter() {
        String[] args = {first};
        HelloWorld2.main(args);
        Assert.assertEquals(expected, getOutput());
    }
}

Run the test (test does not pass)

Write just enough implementation code to make the test pass

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld2 {

    public static void main(String[] args) {
        String text = args[0];
        System.out.println(String.format("Hello, %s!", text));
    }
}

Step 3

Repeat with If parameter is not present, Print "Hello, World!"

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Assert;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;

import java.util.Arrays;
import java.util.Collection;

@RunWith(Parameterized.class)
public class HelloWorld3Test extends JUnit4Parent {

    @Parameterized.Parameters
    public static Collection<Object[]> data() {
        return Arrays.asList(new Object[][]{
                {"Hello, World!", "World"},
                {"Hello, Damien!", "Damien"},
                {"Hello, Jane!", "Jane"},
                {"Hello, John!", "John"},
        });
    }

    private final String expected;
    private final String first;

    public HelloWorld3Test(String expected, String first) {
        this.first = first;
        this.expected = expected;
    }

    @Test
    public void print_Hello_with_parameter() {
        String[] args = {first};
        HelloWorld3.main(args);
        Assert.assertEquals(expected, getOutput());
    }

    @Test
    public void print_Hello_World_by_default() {
        throw new IllegalStateException("Not yet implemented!");
        // TODO: NEXT: If parameter is not present, Print "Hello, World!"
    }
}

Complete the test

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit4Parent;
import org.junit.Assert;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.junit.runners.Parameterized;

import java.util.Arrays;
import java.util.Collection;

@RunWith(Parameterized.class)
public class HelloWorld3Test extends JUnit4Parent {

    @Parameterized.Parameters
    public static Collection<Object[]> data() {
        return Arrays.asList(new Object[][]{
                {"Hello, World!", "World"},
                {"Hello, Damien!", "Damien"},
                {"Hello, Jane!", "Jane"},
                {"Hello, John!", "John"},
        });
    }

    private final String expected;
    private final String first;

    public HelloWorld3Test(String expected, String first) {
        this.first = first;
        this.expected = expected;
    }

    @Test
    public void print_Hello_with_parameter() {
        String[] args = {first};
        HelloWorld3.main(args);
        Assert.assertEquals(expected, getOutput());
    }

    @Test
    public void print_Hello_World_by_default() {
        String expected = "Hello, World!!";
        HelloWorld4.main(null);
        Assert.assertEquals(expected, getOutput());
    }
}

Run the test (test does not pass)

Write just enough implementation code to make the test pass

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld3 {

    public static void main(String[] args) {
        // TODO: NEXT: If parameter is not present, Print "Hello, World!"
        String text = args[0];
        System.out.println(String.format("Hello, %s!", text));
    }
}

Step 4

Refactor from JUnit4 to JUnit5

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit5Parent;
import org.junit.jupiter.api.*;
import org.junit.jupiter.params.ParameterizedTest;
import org.junit.jupiter.params.provider.CsvSource;

@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
public class HelloWorld5Test extends JUnit5Parent {

   @Test
   void print_Hello_World_by_default() {
      String expected = "Hello, World!!";
      HelloWorld5.main(null);
      Assertions.assertEquals(expected, getOutput());
   }

   @DisplayName("print Hello with parameter (expected, parameter)")
   @ParameterizedTest
   @CsvSource({
           "'Hello, Damien!', Damien",
           "'Hello, Jane!', Jane",
           "'Hello, John!', John",
   })
   void print_Hello_with_parameter(String expected, String parameter) {
      String[] args = {parameter};
      HelloWorld5.main(args);
      Assertions.assertEquals(expected, getOutput());
   }
}

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld5 {

    public static void main(String[] args) {
        // TODO: NEXT: `If parameter is not null or empty, then exception "bad arg (ex: Damien)"`
        String text = hasNoArgs(args) ? "World!" : args[0];
        System.out.println(String.format("Hello, %s!", text));
    }

    private static boolean hasNoArgs(String[] args) {
        return args == null || (args != null && args.length == 0);
    }
}

Run all tests (tests pass)

Step 5

Repeat with If parameter is not null or empty, then exception "bad arg (ex: Damien)"

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit5Parent;
import org.junit.jupiter.api.*;
import org.junit.jupiter.params.ParameterizedTest;
import org.junit.jupiter.params.provider.CsvSource;

@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
public class HelloWorld5Test extends JUnit5Parent {

   @Test
   void print_Hello_World_by_default() {
      String expected = "Hello, World!!";
      HelloWorld5.main(null);
      Assertions.assertEquals(expected, getOutput());
   }

   @DisplayName("print Hello with parameter (expected, parameter)")
   @ParameterizedTest
   @CsvSource({
           "'Hello, Damien!', Damien",
           "'Hello, Jane!', Jane",
           "'Hello, John!', John",
   })
   void print_Hello_with_parameter(String expected, String parameter) {
      String[] args = {parameter};
      HelloWorld5.main(args);
      Assertions.assertEquals(expected, getOutput());
   }

   @Test
   void exception_bad_format() {
      // TODO: NEXT: `If parameter is not null or empty, then exception "bad arg (ex: Damien)"`
      throw new IllegalStateException("Not yet implemented!");
   }
}

Complete the test

HelloWorldTest.java

package com.damienfremont.blog;

import com.damienfremont.blog.utils.JUnit5Parent;
import org.junit.jupiter.api.*;
import org.junit.jupiter.params.ParameterizedTest;
import org.junit.jupiter.params.provider.CsvSource;

@DisplayNameGeneration(DisplayNameGenerator.ReplaceUnderscores.class)
public class HelloWorld6FinalTest extends JUnit5Parent {

    @Test
    void print_Hello_World_by_default() {
        String expected = "Hello, World!!";
        HelloWorld6Final.main(null);
        Assertions.assertEquals(expected, getOutput());
    }

    @DisplayName("print Hello with parameter (expected, parameter)")
    @ParameterizedTest
    @CsvSource({
            "'Hello, Damien!', Damien",
            "'Hello, Jane!', Jane",
            "'Hello, John!', John",
    })
    void print_Hello_with_parameter(String expected, String parameter) {
        String[] args = {parameter};
        HelloWorld6Final.main(args);
        Assertions.assertEquals(expected, getOutput());
    }

    @DisplayName("exception bad format (description, expected, parameter)")
    @ParameterizedTest
    @CsvSource({
            "Param is empty,  bad arg (ex: Damien), ''  ",
            "Param is blanck, bad arg (ex: Damien), ' ' ",
            "Param is null,   bad arg (ex: Damien), null"
    })
    void exception_bad_format(String description, String expected, String parameter) {
        String[] args = {parameter.equals("null") ? null : parameter};
        Exception e = Assertions.assertThrows(IllegalArgumentException.class, () -> {
            HelloWorld6Final.main(args);
        });
        Assertions.assertEquals(expected, e.getMessage());
    }
}

Run the test (test does not pass)

HelloWorld.java

package com.damienfremont.blog;

public class HelloWorld6Final {

    public static void main(String[] args) {
        String name = getName(args);
        String text = String.format("Hello, %s!", name);
        System.out.println(text);
    }

    private static String getName(String[] args) {
        if (hasNoArgs(args)) {
            return "World!";
        }
        if(isNullOrEmpty(args[0])) {
            throw new IllegalArgumentException("bad arg (ex: Damien)");
        }
        return args[0];
    }

    private static boolean isNullOrEmpty(String arg) {
        return arg == null || arg.trim().isEmpty();
    }

    private static boolean hasNoArgs(String[] args) {
        return args == null || (args != null && args.length == 0);
    }
}

Run all tests (tests pass)

And it’s finished !!!

Conclusion

Test-driven development is not about testing.

Test-driven development is about development (and design), specifically improving the quality and design of code. The resulting unit tests are just an extremely useful by-product.

Post

• https://damienfremont.com/2021/02/18/test-driven-development-tdd-in-java-helloworld-examples/

Source

• https://github.com/DamienFremont/damienfremont.com-blog-labs/tree/master/20210201-test-tdd-java-helloworld-examples

References

• https://javacodehouse.com/blog/test-driven-development-tutorial/#what-is-tdd
• https://technologyconversations.com/2014/09/30/test-driven-development-tdd/
• https://technologyconversations.com/2013/12/24/test-driven-development-tdd-best-practices-using-java-examples-2/

You can view an application as a train, and components as wagons. It’s possible to let go some of them if needed, like features for a project backlog. But here, instead of saving now on time or cost (implementation), you mostly save on future cost (maintenance).

Content:

1. “Train Wagons” Metaphor
2. Example – Classic Full-stack Javascript Project
3. Step 1 – Prioritize Stack
4. Step 2 – Identify non-essential or non-LTS parts
5. Step 3 – Repeat until best-value is achieved

The “Train Wagons” Metaphor

You can view tasks in a list, as wagons attached to a train. First wagon is the most important (a must have), last wagon is the least important (nice to have).

…and when you can’t make it to the end in the required budget or time, you could let go some wagons from the tail (actual benefice).

It’s also possible to view an application stack, or software architecture, in the same way. The train is the application, parts of it are wagons and you can let go some wagons. But here, instead of saving on time, you save on maintenance cost (future benefice).

Example – Classic Full-stack Javascript Project

Here is a simple example, a Single Page App (SPA) using classic stack from 2019: a server running NodeJS, PostgreSQL, and also a browser like Firefox executing ReactJS, Bootstrap.

It’s obvious that’s not enough to build your project. You also need third-part library to build on top of your main components, like ExpressJS for NodeJS, and tools or even a new language, like TypeScript for JavaScript.

Step 1 – Prioritize Stack

Not all components are equals. You need to identify which depends on which (A -> B -> C ..to show that A is the main component, and B and C some add-ons to it)

The classic way is to group them by software layers, then do the dependency graph. Usually with full-stack applications, you’ll find 2 layers (back-end server, database), up to sometimes 4 layers (+proxy, +front-end).

In this diagram, there are two layers: front-end (browser) and back-end (server). It’s obvious that the front-end is kinda bloated, specifically with add-ons!

Step 2 – Identify non-essential or non-LTS parts

There are multiple category for identifying non-essential parts, depending on your goals and constraints (team size, budget). Ex: boilerplate is a problem for every team, but too many tools not so much if your team is large or your environment complex.

Too many tools: SaSS, you are not FaceBook ..maybe just CSS with some overrides on Bootstrap?

Overkill delivery: Docker for standard application ..maybe just Git pull or Zip transfer?

Heavy boilerplate: small library, only using some functions, that you could write and maintained yourself!

Constant refactoring: library without Long Term Support (LTS) or community (ex: 1 developer)

Over-testing: why doing unit testing (Mocha) on front-end ? when you already do UI testing with full coverage (Selenium, Protractor)

Step 3 – Repeat until best-value is achieved

You need to know when to stop.

Client side: maybe your users don’t need it (simple website or business application)

Tests: maybe your tests are bad (low coverage, disabled, unmaintained) or your source code is bullet-proof (generated code, simple), or site downtime is OK (non-critical app).

Conclusion

You need to answer these questions: Are all components essentials ? and not just here for the hype ? Do I need a perfect clean project ? What is the future cost of each non-essential components ?

Project Source

• https://github.com/DamienFremont/damienfremont.com-blog-labs/tree/master/20200705-design-train-wagons-be-agile-and-prioritize-your-stack

Resources

• Wikipedia
  • Software_architecture
  • MoSCoW_method

Photoshop script to translate text layers based on language JSON files, then export project to PNG images for each language. Save a lot of time!

Usage: generate screenshots files for your app (ex: Googleplay, etc).

One project is converted to X languages screenshots. With the seconde script, you can also convert each group layer as a separate files (for multi-screenshots project).

Getting started (one screenshot by project)

• Open test photoshop file ./test/project-to-screenshot.psd
• Execute text-project-translate.bat
• Get your results from your Documents folder

NOTE: Edit output value in text-project-translate.jsx with you want to change the target folder

NOTE: Edit project-to-screenshot-fr.json or project-to-screenshot-en.json content to change translation text.

NOTE: Edit same keys in Photoshop projet AND *.json files.

NOTE: Use ‘Unicode’ type for universal support (asian and russian fonts).

Example – Test with 1 Screenshot (project)

text-project-translate.bat

"C:\Program Files (x86)\Photoshop\Photoshop.exe" c:\Users\damien\git\photoshop-script-text-translator\text-project-translate.jsx

text-project-translate.jsx

/**
 * Photoshop script to translate text layers based on lang
 * JSON file, then export project to PNG images for each
 * language.
 *
 * Usage: generate screenshots files for your app (ex:
 * Googleplay, etc).
 *
 * @param langs array of languages, linked to translation
 * files named like '-.json'
 * @param langFallback language to use when json file does
 * not exist.
 * @param (input) Current Photoshop project
 * @param (output) Current Photoshop project
 */
 
var langs = ["en", "ja", "ko", "zh-TW", "de", "fr", "pt", "es", "it", "ru", "hi"];
var langFallback = "en";
// get the path of currently opened photoshop document
var output = app.activeDocument.path;
var input = app.activeDocument.path;
 
/* UTILS *************************************************** */
 
// Because Photoshop doesn't
function JSON_parse(fileContent) {
    /// Extend script doesn't support JSON. Are you fucking kidding?
    // obj = JSON.parse(file_to_read .read());
    // Worry not. We got potentially harmful, yet useful, `eval` function.
    var jsonFile = eval("(" + fileContent + ")");
    return jsonFile;
}
 
function FILE_toString(fileToRead) {
    if (fileToRead === false) {
        alert("File read error:" + jsonFilePath);
    }
    fileToRead.open('r');
    var fileContent = fileToRead.read();
    fileToRead.close();
    return fileContent;
}
 
function loadLangFile(langKey) {
 
}
 
/* EXECUTION *************************************************** */
 
//Get the currently opened Photoshop document
var doc = app.activeDocument;
 
// get filename without extension
var filename = doc.name;
filename = filename.slice(0, filename.lastIndexOf(".")); //just add this line to the construction.      
 
// execute for eqch languages
for (var t = 0; t < langs.length; t++) {
    var currentLang = langs[t];
    var fileContent;
 
    // Use absolute path for the JSON file.
    var langFilePath = input + "/" + filename + "-" + currentLang + ".json";
    var fileToRead = File(langFilePath);
    fileContent = FILE_toString(fileToRead);
 
    // Use default language if file not found!
    if (fileContent === "") {
        var langFilePath2 = input + "/" + filename + "-" + langFallback + ".json";
        var fileToRead2 = File(langFilePath2);
        fileContent = FILE_toString(fileToRead2);
    }
 
    var messages = JSON_parse(fileContent);
 
    // Translate each text layers and sub layers
    for (var i = 0; i <span id="mce_SELREST_start" style="overflow:hidden;line-height:0;"></span>&lt; doc.layers.length; i++) {
        var currLayer = doc.layers[i];
 
        // check layer is visible
        if (currLayer.visible === false) {
            break;
        }
 
        // check layer is text
        if (currLayer.kind != LayerKind.TEXT) {
            break;
        }
 
        // get translation
        var translation = messages[currLayer.name];
 
        // check translation founded
        if (!translation) {
            break;
        }
 
        // set new text
        currLayer.textItem.contents = translation;
    }
 
    // save
    var file = new File(output + &quot;/&quot; + filename + &quot;-&quot; + currentLang + &quot;.png&quot;);
    var saveOptions = new PNGSaveOptions();
    doc.saveAs(file, saveOptions, true, Extension.LOWERCASE);
}

Getting started (multiple screenshot layers by project)

• Open test photoshop file ./test/layers-to-screenshots.psd
• Execute text-layers-translate.bat
• Get your results from your Documents folder

Example – Test with 2 Screenshot (group)

text-group-translate.bat

"C:\Program Files (x86)\Photoshop\Photoshop.exe" c:\Users\damien\git\photoshop-script-text-translator\text-groups-translate.jsx

text-groups-translate.jsx

/**
 * Photoshop script to translate text layers based on lang
 * JSON file, then export project to PNG images for each
 * language.
 *
 * Usage: generate screenshots files for your app (ex:
 * Googleplay, etc).
 *
 * @param langs array of languages, linked to translation
 * files named like '-.json'
 * @param langFallback language to use when json file does
 * not exist.
 * @param (input) Current Photoshop project
 * @param (output) Current Photoshop project
 */
 
var langs = ["en", "ja", "ko", "zh-TW", "de", "fr", "pt", "es", "it", "ru", "hi"];
var langFallback = "en";
// get the path of currently opened photoshop document
var inputPath = app.activeDocument.path;
var outputPath = app.activeDocument.path;
 
/* UTILS *************************************************** */
 
// Because Photoshop doesn't
function JSON_parse(fileContent) {
    /// Extend script doesn't support JSON. Are you fucking kidding?
    // obj = JSON.parse(file_to_read .read());
    // Worry not. We got potentially harmful, yet useful, `eval` function.
    var jsonFile = eval("(" + fileContent + ")");
    return jsonFile;
}
 
function FILE_toString(fileToRead) {
    if (fileToRead === false) {
        alert("File read error:" + jsonFilePath);
    }
    fileToRead.open('r');
    var fileContent = fileToRead.read();
    fileToRead.close();
    return fileContent;
}
 
/* EXECUTION *************************************************** */
 
//Get the currently opened Photoshop document
var doc = app.activeDocument;
 
// get filename without extension
var filename = doc.name;
filename = filename.slice(0, filename.lastIndexOf(".")); //just add this line to the construction.      
 
// execute for each group
for (var y = 0; y < doc.layers.length; y++) {
    var currentGroup = doc.layers[y];
 
    // check layer is visible
    if (currentGroup.kind != undefined) {
        break;
    }
 
    // Pass sub layers to core script
    var groupLayers = currentGroup.layers;
    // hide others groups
    for (var t = 0; t < doc.layers.length; t++)
        doc.layers[t].visible = false;
    currentGroup.visible = true;
 
    // execute for each languages
    for (var t = 0; t < langs.length; t++) {
        var currentLang = langs[t];
        var fileContent;
 
        // Use absolute path for the JSON file.
        var langFilePath = inputPath + "/" + filename + "-" + currentLang + ".json";
        var fileToRead = File(langFilePath);
        fileContent = FILE_toString(fileToRead);
 
        // Use default language if file not found!
        if (fileContent === "") {
            var langFilePath2 = inputPath + "/" + filename + "-" + langFallback + ".json";
            var fileToRead2 = File(langFilePath2);
            fileContent = FILE_toString(fileToRead2);
        }
 
        var messages = JSON_parse(fileContent);
 
        // Translate each text layers and sub layers
        for (var i = 0; i <span id="mce_SELREST_start" style="overflow:hidden;line-height:0;">&#65279;</span>&lt; groupLayers.length; i++) {
            var currLayer = groupLayers[i];
 
            // check layer is visible
            if (currLayer.visible === false) {
                break;
            }
 
            // check layer is text
            if (currLayer.kind != LayerKind.TEXT) {
                break;
            }
 
            // get translation
            var translation = messages[currLayer.name];
 
            // check translation founded
            if (!translation) {
                break;
            }
 
            // set new text
            currLayer.textItem.contents = translation;
        }
 
        // save
        // TODO: create outputPath
        var file = new File(outputPath + &quot;/&quot; + filename + &quot;-&quot; + currentLang + &quot;-&quot; + (y + 1) + &quot;.png&quot;);
        var saveOptions = new PNGSaveOptions();
        doc.saveAs(file, saveOptions, true, Extension.LOWERCASE);
    }
}

Example – External Project

text-group-translate.bat

"C:\Program Files (x86)\Photoshop\Photoshop.exe" c:\Users\damien\git\photoshop-script-text-translator\text-groups-translate.jsx

References

• Photoshop read json file
• Photoshop get layer type

Source

https://github.com/DamienFremont/damienfremont.com-blog-labs/tree/master/20190620-photoshop-script-translate-text-then-export

When you don’t want to do repetitive tasks in Photoshop… This script exports root layers from your current project to separate PNG files.

Usage: exporting sketchs to character animation, mock-up, code, etc.

Scripts

layers-exporter.bat

"C:\Program Files (x86)\Photoshop\Photoshop.exe" %cd%\layers-exporter.jsx`

layers-exporter.jsx

var output = $.getenv("USERPROFILE") + "/Documents/";
 
//Get the currently opened Photoshop document
var doc = app.activeDocument;
 
//Show each layer each time and save a snapshot
for (var i = 0; i < doc.layers.length; i++) {
 
  //Hide all the layers
  for (var j = 0; j < doc.layers.length; j++) {
    doc.layers[j].visible = false;
  }
 
  // show layer
  var layerIndex = i;
  doc.layers[layerIndex].visible = true;

  var layerName = doc.layers[layerIndex].name;
  var filename = doc.name;
  filename = filename.slice(0, filename.lastIndexOf(".")); //just add this line to the construction.
 
  // save
  var file = new File(output + filename + "_" + layerName + ".png");
  var saveOptions = new PNGSaveOptions();
  doc.saveAs(file, saveOptions, true, Extension.LOWERCASE);
}

Usage

1. save these two scipts at the same location on your machine
2. Open a photoshop file with layers
3. Execute layers-exporter.bat, from command line or by clicking on it
4. Get your results from your Documents folder

NOTE: edit output value in layers-exporter.jsx if you want to change the target folder

NOTE: only ‘root’ layers or groups will generate files, you don’t have to worry about a million files from your project tree.

Example

Source

https://github.com/DamienFremont/damienfremont.com-blog-labs/tree/master/20190525-photoshop-script-export-layers-to-png

Keeping the file size of the built app to a minimum is important, especially for mobile devices or for app stores that impose a size limit.

Note: this article was made using Unity 2019.1

Edit (2020): use App Bundle now. Your app will be splitted in small parts for download, it’s one package for all hardware plateformes …and Google will force you into it next year anyway.

Content

1. Don’t expect too much from Unity
2. Remove useless assets, models, script etc
3. Remove the parts of the engine you aren’t using
4. Use small size textures/images and compression
5. If you have audio, Convert songs to ogg
6. Enable IL2CPP native compilation
7. Build two separate APK

1. Don’t expect too much from Unity

Half of that size is taken up by the Unity engine. You won’t be able to get it much smaller and later version of Unity are bigger !!!

But no matter what you do, I doubt you’ll get a completed game smaller than ~20mb. It’s just a downside of using a game engine that has lots of features you don’t use.

Example: in 7-Zip > Open your APK file, wait, sort by Size …’lib’ use 10 mo, ‘assets\bin\Data\Managed’ 6 mo (compressed) …so that’s 16 mo for the engine in your APK, (uncompressed to compressed size is not linear, bad with lib, good with assets)

2. Remove useless assets, models, script etc

It’s common sense, but it’s easy to forget some large picture or sound files in your project.

Remove any stuff you don’t need, such as scenes that are in your build but not used.

Example: in WinDirStat > menu:File > Open Folder > choose your unity3d project > Ok, Wait, Navigate to Assets folder, Check your files …maybe there are some you don’t use or need.

Example: in Unity3D > menu: Window > General > Console), click the small drop-down panel in the top right, and select Open Editor Log …you’ll see only your files in uncompressed size, so it won’t be true in your APK !!! (uncompressed to compressed size is not linear, bad with DLL, good with picture file)

3. Remove the parts of the engine you aren’t using

Remove the parts of the engine you arent using instead of including all of it. Like Physics, x86 Architecture, .NET 4.x.

Unity supports two .NET API compatibility levels.: .NET 4.x and .NET Standard 2.0. The .NET Standard 2.0 restricts you to a smaller subset of the .NET API, which can help keep size down.

Change the build to just ARM you don’t need x86. Also check out the stripping level.

Example: in Unity3D > Menu > Build Settings > (new window) > Player Settings > (new window) > Player > Settings > ARMv7:true, x86:false, API Compatibility Level: NET Standard 2.0

4. Use small size textures/images and compression

Try reducing the sizes of your assets. Use compression on images (and reduce their resolution), reduce the bitrate of any audio, especially music.

You can reduce the colour depth of images that don’t need transparency.

Example: in Photoshop > Menu > File > Save for web > PNG 8, Image Size …File size is reduce from 600 ko to 40 ko !!!

5. If you have audio, Convert songs to ogg

Use a tool to convert sound files to .ogg format.

Example: http://www.the-converter.net/fr/audio > ogg, 16 KHz, 32 kb/s, mono

6. Enable IL2CPP native compilation

Install NDK and choose IL2CPP

Example: in Unity3D > Menu > Build Settings > (new window) > Player Settings > (new window) > Player > Settings > ‘Scripting Backend’:’IL2CPP’

7. Build two separate APK

Googleplay will impose ARM64. In the meantime, you’ll need to build for ARMv7 and ARM64. It’s only possible with IL2CPP activated.

But ARM64, like x86, adds about 5 MO to your APK file.

Example: in Unity3D > Menu > Build Settings > (new window) > Player Settings > (new window) > Player > Settings > ‘Split APK by Archi’:true

Resources

Reducing the file size of your build

How to reduce apk size?

How to reduce the size of an APK file in Unity?

How can we reduce apk file size in unity i made a game like flappy bird it is over 32 mb how to reduce the size .

Performance tips for Unity 2d mobile

Do you find project management stressful? Do you struggle to keep your tasks, team members, and goals organized? Here’s how to manage your project with a simple and free tool like Trello. Whether on desktop or mobile.

Staying on top of these things can be frustrating—but with the right tool, the entire process can become streamlined, efficient, and easier for everyone. The right tool will turn you into a project management master, able to get updates, reprioritize tasks, and communicate with your team on the fly.

What’s the tool that will give you these project management superpowers? Trello.

There are a lot of project management tools out there. But Trello stands out from the crowd with its simplicity. It provides a straightforward system for organizing and monitoring projects at a glance. It’s so simple, in fact, that you might be tempted to pass it up in favor of something that requires a week-long training course.

But Trello’s simplicity is its greatest strength. Let’s take a look at how it can turn you into an organizational ace.

Contents

• Create a Trello account
• Create a Trello Team
• Create a Trello Board
  • Lists: categorizing your activities
  • Labels: categorizing your cards
• Add some tasks to Board
  • Flow example
• Install the mobile app
  • Share it with team members

The final board:

Create a Trello account

Go to Trello’s signup and use the ‘Sign up with Google’.

https://trello.com/signup

Create a Trello Team

Each one can be used by a whole company, a separate team within it, a non-work related group such as your family or friends, or just yourself. A Team unit can even represent a single complex project that has numerous sub-units.

Create a new team by clicking the “+” button at the left hand side of your Trello header. Add a name, picture and people to your team, then save

Create a Trello Board

Within the Teams you create or join, the Board is the main working unit. It looks and feels like a whiteboard where you manage your work with sticky notes. Write new ones, move them around, and archive old ones.

Boards can be used in myriad ways. They can be dedicated to the whole workflow of a particular team or separate activities within it. Alternatively, they can focus on a single project or event.

From the team’s Boards tab, click “Create new board” in the Trello header directly to the left of your name, and select “Create Board.”

1. Set a name for your board, choose a background and a Team.
2. Create your first list ‘About this board’
3. Create your first card in it ‘What can you expect from this board?’
4. Add a picture to the card with ‘attachment’, then complete decription
5. And some other cards like ‘Release Target: 2018’ and ‘Tips for using this Board’

Lists: categorizing your activities

The next thing in the Trello workflow is Lists. They’re the classifiers of your activities within a Board.

There are numerous ways to go about using Lists. If you stick to the classical Kanban approach of Trello, your lists would hold your to-dos, in-progress tasks, and things you’ve finished. Each list can represent any way of grouping tasks that makes sense for your work. This can be their subject area, priority level, responsible person, or other classifying criteria.

Use the following:

1. Idea
2. Set for Development
3. In Progress
4. Done

Tips

later you can add more lists, for each release: coping Done’s content to Shipped for v1, Shipped for v2, etc

Labels: categorizing your cards

Trello labels can be used for tracking which types activities your team is spending time on.

To set labels in Trello, Just open the menu and click on “Labels”. There you can give names to the default labels or create new ones – as many as you like!

Use the following:

1. Need attention (something need to be rework before work)
2. Must have (core elements to your project, like gameplay)
3. Nice to have (optionnal elements to your project, like lootbox, skins)
4. Whishlist proposal (An idea that you maybe want in the Set for development list)
5. Hot! (it’s a bug, an issue or it’s urgent)

Tips

You can also add and remove labels pressing “l” to bring up a pop-over menu of labels. Toggle an individual label by pressing numbers between 1 and 9. Individual label shortcuts are mapped below.

You can use ASCII art to make icons for your labels: /!\ [x] [_] <?> ♥ …

Add some tasks to Board

Cards: where work gets done

The smallest unit of work in Trello is the card. Cards are super flexible and allow you to include descriptions, attachments, subtasks or checklists, due dates and times, assignees, and labels. A card typically represents a single task in your workflow.

You can upload images and files from your device, or from Google Drive, Dropbox, Box, or OneDrive. And with a simple click-and-drag, cards can be moved from one list to another.

• Some cards are simple: use a name and description
• Some cards are heavy: use a checklist
• Some tasks have deadline: use a due date
• then put a label if a type is needed

Tips

You can add multiple card in a one-shot action if the text in it have multiple lines.

Flow example

Start

1. Create basic tasks for your project (tools install, helloworld project, brainstorming)
2. Do it!
3. Only when done, create a lot of tasks (idea1, idea 2, idea 3)
4. Priorize it, add a ‘whishlist’ label if needed

Iterate

1. Move 3-5 of your top ‘idea’ cards to ‘set for dev’
2. Do it! Experiment with it !
3. When Done, repeat

End

1. When you hit your target for v1, copy it to a new list ‘shipped for v1’ for archive purpose (Done is now empty)
2. Release your game
3. Then restart a new version

Tips

Always finish a card before working on the next.

Always start your card with a verb if it’s a task.

Check checklists’ boxes to follow Card advancement.

Install the mobile app

The app is available on desktop web browser or on your mobile app : use it at anytime whenever you have an idea (transport, bed, work, etc).

https://trello.com/platforms

Share it with team members

You can invite others to your boards and teams by sharing a special link with them.

References

https://trello.com/b/TTAVI7Ny/ue4-roadmap

https://blog.trello.com/how-to-scrum-and-trello-for-teams-at-work

https://help.trello.com/article/705-creating-a-new-team

https://help.trello.com/article/717-adding-people-to-a-board

Nous avons pu participer pour la première fois à la conférence DevFest à Nantes le 18 octobre 2018. Dans cet article à deux mains, nous vous proposons quelques morceaux choisis sur cette expérience et ses talks/conférences.

Pour rappel, DevFest est un événement présent dans plusieurs pays et villes, et très orienté technique.

• -> Le site

JEUDI 18 OCTOBRE - 1ER JOUR

Les moments forts: la keynote, les talks, les codelabs et quelques speakers de renom (ex: les GDE ‘Google Developer Expert’, David Gageot, etc).

8h30 - Accueil

Du monde! Du monde! Content d’être venu tôt pour être bien placé durant la conférence.

Bon point pour l’organisation: le badge est aussi un planning des talks ET un plan du site. C’est beaucoup plus pratique que d’autres conférences (le palais des congrès c’est grands! et il n’y a plus besoin d’application mobile, car vous avez l’essentiel autour du cou).

• -> Aperçu des stands
• -> Sans oublier SQLI !!!

9h00 - Keynote d’ouverture

Une grosse vidéo d’intro sur le thème de la conquête spatiale, suivi d’un talk.

Nous avons eu la chance d’avoir un speaker expérimenté pour ce premier talk: Christian HEILMANN (lead developer at Microsoft Germany). Rien de ‘disruptif’, mais quelques piqures de rappel: les développeurs doivent se comporter en professionnels (ex: attention à la ‘hype’, se faire à l’idée qu’une application est là pour 10 ans, la dette technique doit être gérée, et nous devons construire en partant de l’existant plutôt que de réinventer constamment la même chose).

• -> L’intro de la keynote
• -> Le twitter du speaker

Quelques ‘talks’ et ‘codelab’ pour la suite (présentation et travaux pratiques).

11h00 - The next big thing in (client side) templating

Un talk sur le futur des templating en web (faire des vues pour nos sites et applications).

Le speaker de chez Google a retracé l’histoire du templating à travers les âges du web:

• ‘concat’: Au début il y avait juste des chaines de caractères assemblées …pas très maintenable, mais simple.
• ‘template’: ensuite il y eu le MVC, et donc son ‘V’ pour Vue séparée du code et sa traduction en template …un peu lourd, mais durable.
• ‘react’: puis vint le JSX et de nouveau le mélange entre Vue et Code …beaucoup trop lié à la librairie de facebook, mais performant.

Le futur semble aller vers le style de ReactJS, mais basé sur les standards du web, les WebComponents du W3C, et donc sur ce que propose le navigateur.

• ‘polymer’: librairie de Google qui permet dès aujourd’hui de coder comme pour demain. Pour résumer, en faisant du ReactJS, à la sauce ES6, donc du JavaScript, en utilisant les class ES6 et le templating ES6 à la place du JSX de ReactJS.

Bilan? natif, performant, léger (<1kb), futur-proof car fournit par le navigateur, meilleur pratiques de dev, pas de librairie tier.

• -> La présentation sur le templating ES6
• -> Le twitter du speaker

Reprise à 14h après un bon repas!

14h00 - Typographie et accessibilité

Un talk à mi-chemin entre UX et Accessibilité, et un bon rappel sur la définition d’un handicap (comment rendre accessible son site ou applications, et pourquoi).

Rappel: Handicap ou limite ne correspondent pas forcément à une personne handicapée, au sens légal du terme. Beaucoup de troubles, d’invalidités ou de blessures temporaires entrent dans cette définition (rappel: 80% des handicaps ne se voient pas).

Derrière l’effort à fournir, en plus de la valeur légale, il y la valeur morale de pousser une solution UX vers RGAA. Les enjeux: l’accessibilité numérique est un droit depuis quelques années. Il y a deux normes WCAG (W3C), RGAA (France) pour l’implémenter. Ces deux normes sont des méthodologies, non des outils. Elles ne fournissent pas de solutions, mais des critères pour vous aider à valider votre site. En France nous avons RGAA avec trois niveaux. Soit ‘A’: accessible, ‘AA’: confort (minimum légal), ‘AAA’ facultatif: handicap mental ou cognitif.

Concernant la typographie, il y a deux points d’attention:

• VISU: visuelle, malvoyant, couleurs, contrastes
• DYS: dyslexie, lecture, gestes, chiffres, mémoire

Les préconisations: reposer sur ce que fait la plateforme (navigateur) plutôt que votre code (JavaScript et widgets), afin de ne pas tout ‘casser’ quand l’utilisateur à un zoom, une navigation ou un écran différent. Utiliser la taille de police pour hiérarchiser le contenu. Toujours définir les tailles en unité ‘em’ (unité relative), que ce soit pour les polices, les interlignes ou les inter-paragraphes. La largeur de police en ‘ch’. Les polices ‘web-safe’ classiques (‘verdana’, ‘arial’, ‘tahoma’, ‘trebuchet’). Voir même laisser l’utilisateur personnaliser son expérience, via les polices, le contraste, le thème. Des outils automatisés existent pour détecter les erreurs flagrantes.

• -> La présentation sur la Typographie et accessibilité
• -> Le twitter du speaker

15h00 - L’infrastructure as code avec Terraform

Un talk sur la nouvelle orientation de Terraform, qui passe de gestion d’infrastructure vers la gestion de ‘providers’ fournissant des APIs (Graphana, Cubernetis, base de données, outils), et donc une solution d’Infrastructure-As-Code.

Il propose une compatibilité accrue par rapport à ses concurrents: beaucoup de ‘providers’ pour Terraform sont maintenus par le produits tiers eux-mêmes (ex: produits Google). Et introduit son propre vocabulaire: topologie (‘topology’) des ressources (‘provider)’ qui ont des états (‘state’). En se basant autour d’un langage maison (malheureusement), le HCL, mais facile à lire et à générer par les outils (Ansible, utilise le YML, un langage standardisé lui).

Ses points forts:

• provider-specific: Le code écrit est spécifique aux ressources. ex: un programme écrit pour un cloud Google ne fonctionnera pas sur un cloud Amazon.
• cloud-agnostic: Le workflow autour est générique. ex: la gestion de l’infra (‘topoly’) d’une infra sera la même que cela soit sur un cloud Amazon ou Google.

TerraForm introduit de la gestion d’état dans Infrastructure-As-Code (contrairement à Ansible, qui ne gère que des script/code et des ressources). L’avantage est sur la modification de l’infrastructure. Par exemple: si une personne modifie manuellement une ressource (une VM), Terraform le détectera et jouera la partie de code concernant cette partie de l’infra, et seulement elle. Il profite également de modules via HTTP ou GitHub ou S3.

Conclusion: par rapport à Ansible, il y a plus de complexité introduite (via le code et la gestion d’états), mais maintenable et réactive (moins monolithique). Ansible est plus simple et rappel le python pour les Ops, mais il est difficile de rendre la solution modulaire. Terraform à essayer donc, mais quelques questions sur l’avenir du produit, notamment sa compatibilité à long terme avec les clouds et l’évolution de son langage.

• -> Le twitter du speaker

16h00 - A la découverte des algorithmes génétiques

Un codelab cette fois (travaux pratiques sur deux heures) autour des algorithmes génétiques.

Une expérience un peu rude, car limitée dans le temps sur un sujet qui m’était inconnu: Il fallait résoudre un problème, très rapidement présenté, en étant par équipe, le tout en compétition, en seulement une heure, en installant son poste! Heureusement, après 20min d’égarement, nous avons compris quel était le sujet, et tout est rentré dans l’ordre.

Ce que j’en ai ressorti: quand il est question de machine-learning, nous y associons souvent les réseaux de neurones et des jeux de données massifs pour l’apprentissage. Ici le but est le même: la machine doit apprendre seule, mais plutôt que de renforcer des réseaux de neurones, nous allons soumettre des solutions aléatoires à la ‘sélection’ naturelle (comprendre: les moins bonnes solutions disparaissent), puis y ajouter une touche d’aléatoire (‘mutation’) pour éviter les impasses, jusqu’à obtenir un candidat adapté au problème (‘fit’).

En somme, du Darwinisme (algorithmes génétiques), plutôt que de l’apprentissage spécialisé (réseau de neurones).

Bilan: petit plaisir coupable, mon équipe (en violet ci-dessous) s’en est bien sortie, malgré un algo trop aléatoire …la nature fait bien les choses (le but était de produire une voiture qui roulait, testé dans un simulateur web).

• -> Le starter du codelab sur algorithmes génétiques
• -> Le twitter du speaker
• -> Un peu de littérature pour comprendre

Et enfin quelques ‘quickies’ pour finir (talks courts et moins poussés).

BILAN

Une conférence sympa, du choix entre les sujets (web, IoT, mobile, etc), pour tous les niveaux et dans tous les formats (talk, codelab). Mais, des salles un peu surchargées et quelques soucis pour la retransmission des talks dans les salles annexes.

• -> Retrouver tout les moments forts sur le twitter du DevFest Nantes

PRESENTATION

Justine POEZEVARA

jpoezevara@sqli.com

Damien FREMONT
Expert technique SQLI
En mission au Ministère des Affaires Etrangères, Nantes
https://twitter.com/Damien_Fremont
dfremont@sqli.com