09/11/2020 Written by Cyril GRANDJEAN

Outside of the professional field, I like photography and hiking. This is why I created the French Riviera Hiking Meetup group to meet people from all over the world around hiking in the Alpes Maritimes. Because I like to couple personal projects with my passions, I decided a few years ago with friends from the Meetup group to create the OpenTracks project in my spare time.

OpenTracks is a website (https://opentracks.app) but also an iOS (link) and Android (link) application intended for people who like walks, hikes, snowshoe hikes, trails and treks.

Thanks to the OpenTracks application, you can search for hikes according to a lot of selection criteria but you can also perform the selected activities from your mobile thanks to the integrated GPS and the optimized offline mode to ensure that you are not lost but also by optimizing the battery usage. I invite you to explore the OpenTracks website and the descriptions of the mobile applications in more detail to discover more about the multiple features of the application and do not hesitate to create an account on the application if you are interested by the application.

I take advantage of the development of the application to improve my knowledge in JavaScript front-end and backend (OpenTracks is an application entirely developed in Javascript) as well as in mobile development which was an area that was relatively theoretical for me until now and to create a robust architecture that would allow to have pages displayed in SSR (for SEO), while being optimized on mobile. A difficult technical challenge but not uninteresting 🙂

I took advantage of this project to implement Test Driven Development in the application lifecycle. A small waste of time at the start of the project but which is now a considerable time saver thanks to the automatic tests which have been enriched over the versions of the application and which contributes to the continuous improvement of the quality of the application by avoiding regressions.

Run existing itineraries
Plan your activities

30/08/2018 Written by Cyril GRANDJEAN

After a few months of work, the new design of my personal website is now published online. Because the previous website design was created 8 years ago, I decided to recreate the website design from scratch in order to improve my web design skills. The new design has now been fully integrated into WordPress with an internationalisation mechanism in order to continue to display the content of pages and articles in French and English (I think it is still important to me to practice both languages despite the fact it takes more time to write pages and articles).

As a software engineer, I believe it is important to constantly learn about new technologies. That’s why I always try to learn and practice by working on some personal projects (I will develop in more detail in a future article). Therefore, I have used my need to improve my web design skills in this redesign work.

I have also tried to optimise the design for desktop computers, tablets and smartphone. I will continue to fix some bugs found and to make some other improvements in some future time.

In the blog, I will continue to write some articles about technological subjects, my professional experiences and some other articles worth sharing.

Don’t hesitate to follow me on Twitter, LinkedIn, Viadeo and GitHub by using my website links.

New website redesign

Thanks to the experience at Air France, I had the chance to be initiated to best practises for Search Engine Optimisations (SEO). After having read several articles found inside the web, I decided to practise these new knowledge for the new website developed for Noëlie Serries, osteopath at Cannes La Bocca.

You can find below some examples of user experience improvements and search engine optimisations:

  • Performances improvement (use of browser cache and applicative cache, code minifier)
  • Website optimised for mobile and tablet
  • Improved HTML with semantic data
  • Links to social networks
  • Optimisation of search engines important content (canonical URL, meta, title and header tags)
  • Internationalisation

Link to the website of NoĂ«lie Serries – Osteopath

Website of Noëlie Serries - Osteopath

Apart from my job, I like to go hiking and discover new landscapes and wildlife that I like to photograph with my digital SLR camera. I am also always interested and passionate about exploring new destinations and new countries.

During the various hikes or trips that I have made with my friends or with my Meetup group, I noticed that the pictures I took were only used for a short time before being archived in a directory that was almost never opened. Moreover, when some people asked me to recommend them, I thought it would be more convenient if I could show them the pictures I took on a map. The Photo Travel project was born.

The aim of Photo Travel is to display photos of trips, hiking and events on a map for people interested in a particular destination, a particular hike or a local event.

Link to Photo Travel.

Photo Travel

19/03/2015 Written by Cyril GRANDJEAN

Using the new web technologies HTML 5 and CSS 3, I have redesigned my personal website in order to have a new responsible website with a better display depending if you are using a mobile, a tablet or a desktop computer.

  • Mobile display

mobile-display

  • Tablet display

Screenshot_2015-03-19-21-42-22

  • Desktop display

desktop-display

03/08/2013 Written by Cyril GRANDJEAN

When you are developing a release of a web application, you will very often need to create a testing procedure which will test all the features of your application. Then, you will have to run all the tests manually for each version of your software in order to ensure that no regression has occurred. Functional manual tests are long, boring and can be subject to some human errors.

You can avoid these disadvantages by automating your functional tests using Selenium library. By using Selenium library in Java, you will be able to automate your web browser actions and you will be able to check that these actions will make their expecting behaviour.

We will take example of this basic PHP program:

<?php
session_start();

//We add the element into an array in session
if(isset($_POST['elementToAdd']))
{
	//If the array is already created
	if(is_array($_SESSION['array']))
	{
		//Limit of 10 elements
		if(sizeof($_SESSION['array']) < 10)
		{
			//We add our element
			array_push($_SESSION['array'],$_POST['elementToAdd']);
		}
	}
	else
	{
		//We create a new array
		$_SESSION['array'] = array($_POST['elementToAdd']);
	}
}
//We remove an element from the array in session
else if(isset($_POST['elementToDelete']))
{
	unset($_SESSION['array'][array_search($_POST['elementToDelete'], $_SESSION['array'])]);
}
?>
<html>
<head>
</head>
<body>
	<?php
	//We display the HTML array if there is any element in session
	if(isset($_SESSION['array']) && is_array($_SESSION['array']) && sizeof($_SESSION['array']) > 0)
	{
	?>
		<table>
			<?php
			//We display our elements in session
			foreach ($_SESSION['array'] as $value)
			{
			?>
				<tr class="aRow">
					<td class="rowValue">
						<?php echo $value ?>
					</td>
					<td>
						<form method="post">
							<input type="hidden" name="elementToDelete" value="<?php echo $value ?>" />
							<input type="submit" class="deleteButton" value="Delete element" />
						</form>
					</td>
				</tr>
			<?php
			}
			?>
		</table>
	<?php
	}	
	?>
	
	<form method="post">
		<input name="elementToAdd" type="text" />
		<input id="submitButton" type="submit" value="Add element" />
	</form>
</body>
</html>

You can click here to find the result of this PHP script.

Inside this PHP script, we have a form which we will use in order to add an element into a table stored in session limited to 10 elements only. When an element is added into the array, we can remove it by pressing the remove button.

We will create the following functional tests which we will automate using Selenium:

  • We create an element into the array and check that the element is well added.
  • We remove the element from the array and check that the element is well removed.
  • We test the limit of 10 elements.
public class SeleniumClass {

    /**
     * Driver of the web browser
     */
    private WebDriver driver;

    /**
     * Code to execute before any JUnit test
     */
    @Before
    public void setUp() {

        //We instantiate a Firefox driver
        driver = new FirefoxDriver();

        //We set a maximum timeout of 5 seconds
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    }

    /**
     * JUnit test for our functional tests
     */
    @Test
    public void testElementPage()
    {
        //We load the page
        driver.get("http://www.cyril-grandjean.co.uk/en/selenium.php");

        //We fill the text field with the name elementToAdd with the value element to add
        driver.findElement(By.name("elementToAdd")).sendKeys("element to add");

        //We click on the button with the id submitButton
        driver.findElement(By.id("submitButton")).click();

        //We check that 1 element with the class name rowValue has been added
        assert driver.findElements(By.className("rowValue")).size() == 1;

        //We check the value of the element in the HTML array
        assert driver.findElement(By.className("rowValue")).getText().equals("element to add");

        //We check the hidden input of the form to delete the element by checking the value attribute
        assert driver.findElement(By.name("elementToDelete")).getAttribute("value").equals("element to add");

        //We remove the element by clicking on the delete button
        driver.findElement(By.className("deleteButton")).click();

        //We check that the element has been removed
        assert driver.findElements(By.className("rowValue")).size() == 0;

        //We will try to add 11 elements
        for(int counterElementAdded = 0; counterElementAdded < 11; counterElementAdded++)
        {
            //We fill the text field with the name elementToAdd with the value element to add
            driver.findElement(By.name("elementToAdd")).sendKeys("element to add");

            //We click on the button with the id submitButton
            driver.findElement(By.id("submitButton")).click();
        }

        //We check that there is still 10 elements
        assert driver.findElements(By.className("rowValue")).size() == 10;

        //We remove the elements by clicking on the delete buttons
        while (driver.findElements(By.className("deleteButton")).size() > 0)
        {
            //We remove the element by clicking on the delete button
            driver.findElements(By.className("deleteButton")).get(0).click();
        }

        //We check that the elements have been removed
        assert driver.findElements(By.className("rowValue")).size() == 0;
    }

    /**
     * Code to execute after each JUnit test
     */
    @After
    public void tearDown() {

        //We quit the driver
        driver.quit();
    }
}

With this JUnit Selenium test, we have been able to automatically tests all the features of our PHP script.

You can find more information about Selenium at this link : http://docs.seleniumhq.org

30/07/2013 Written by Cyril GRANDJEAN

My first book Instant Highcharts is now released.

7545OT_HighCharts Starter_Instant_cov

What you will learn from this book

  • Set up Highcharts to work with your web application
  • Build your own customized column, bar, area, and pie charts
  • Prepare your chart dynamically on the server side
  • Set up a time axis
  • Add plot lines and plot bands into your axis
  • Customize some of your chart parameters such as the legend or the tooltip
  • Implement a multiple axes chart
  • Create a stacked bar chart

In detail

Nowadays, a lot of systems and tools are developed using web technologies. Customers need to analyze their data using charts on their computer or their mobile device. With the Highcharts library, it is possible to create highly customizable and interactive charts on any computer or a mobile device without installing any plugins.

Instant Highcharts is a practical, hands-on guide that provides you with a step-by-step approach, which will help you to take advantage of the powerful features of Highcharts. With Instant Highcharts, you will learn everything you need to know to create your own dynamic charts with your own data inside your web application.

Instant Highcharts will present you with different features available with Highcharts, and helps you to create your own chart. You will start with Highcharts installation and then learn to create your own customized column, bar, area, and pie charts with your data. You will learn to add some interactive functionality such as the zoom feature or to export your chart into a printable format. We will also give you tips that will help you to improve your skills with Highcharts.

Approach

Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks. Instant Highcharts has a step-by-step approach to help you understand the core concepts of different types of Highcharts and create your own customized charts.

Who this is for

Instant Highcharts is for web developers who are new to the Highcharts library and looking to create their own charts in their webpages. You should have some experience with the JavaScript library. You should know how to develop a server-side language such as PHP to create dynamic Highcharts.

You can buy this book at this link : https://www.packtpub.com/create-dynamic-customized-charts-instantly-using-highcharts/book

23/03/2011 Written by Cyril GRANDJEAN

During my internship at Distrame from July 2010 to September 2011, I have participated to the creation of the solution Efficacenergie. This solution, directly installed on the intranet network of the customer, allows the measure of energy consumption of a building such as water consumption, gas, electricity or the measure of temperature, … Efficacenergie is compatible with the wireless sensors of the brands LEM and Coronis.

The solution is installed on a NAS working on a linux operating system. Our NAS server is going to play collector’s role of data resulting from wireless sensors. Thanks to the application server Apache Tomcat and a mySQL database, the customer can visualize his consumptions with an ergonomic Web interface developed from the javascript framework Ext-JS. You can find on my portfolio a list of available features with Efficacenergie.

Here is a small video of presentation of the solution (French video) :

29/06/2010 Written by Cyril GRANDJEAN

Agora Immobilier has just changed design followed by the addition of new features such as the geo-localization of the possessions to be rented on Google Maps.