DEV Community: Cécile Lebleu

Help: How to make a multilanguage website?

Cécile Lebleu — Thu, 25 Jul 2019 22:10:24 +0000

Hi everyone!

I'm building a website the simple way — HTML, CSS, and vanilla JavaScript, that's it. I'm trying to keep it as light and simple as I can. It's looking pretty good so far, but everything is in English and I will eventually need to add translations, mainly Spanish in the very near future, but then probably a couple more. (I can do the translation part).

I have been looking around for options and tools to implement this. My first thought was, since the site is static, only has about 5 pages, (and mostly because I have the time and enthusiasm to do it and keep it updated in more than one language), I'll just do it all by hand! When everything is about ready in English, I'll just duplicate the pages, translate the content, and add a button to switch between the different versions of the same page — manually linking each page. Yes, I actually consider this a viable option. Please don't judge!

Most of the answers, tutorials, and solutions I've found include using a CMS (which I don't think this site needs, and again, I'm trying to keep it as bloat-free as possible. Heck, I've been avoiding jQuery, even though it means writing some functionality from scratch. I like the challenge.)

Or they suggest using PHP or MySQL, which I know the basics of, but definitely would entail a learning curve, and again — keeping it as light as possible.

Or they suggest using the Google Translate API, which...just, no.

Get to the question already!

So my question is, is this actually doable? Have you done it before? Is it insane? Any tips, for example, on how to keep the same content on different pages related, in the eyes of search engines' robots?

Or, am I delusional, and should I give up and add in some PHP? If so, how would you do it? Any guides, or tutorials, ideas, etc?

I would highly appreciate any help, tips, links, funny judgmental gifs, or anything else in the comments!

Just click on the link

Cécile Lebleu — Thu, 04 Jul 2019 21:10:04 +0000

And try to fill the form as fast as possible. Good luck!

👉 userinyerface 👈

I didn't make it, my partner sent it to me!

Hand and wrist pain?

Cécile Lebleu — Sun, 30 Jun 2019 15:53:38 +0000

For a couple of days already I’ve had a pretty bad pain in my right hand, fingers, wrist, and forearm. I know the culprits: writing code on a MacBook flat keyboard, using the trackpad, and on my free time, using my phone and playing video-games.

I’m writing this on my phone with my left thumb only, my right hand wrapped tightly to ease the pain. I simply cannot use my right hand. I’ve even woken up multiple times during the past couple nights because of the pain.
But how will I ever achieve my goals if I can’t write code? “To get better, write more code”, is the best advice, but what if one can’t?...

So I’m looking for advice from people who suffer or have suffered similar problems. How do you keep going? Ice? Heat? Fancy ergonomic keyboard? Speech-to-text code?

How I manage my projects, folders, and files

Cécile Lebleu — Tue, 18 Jun 2019 19:49:55 +0000

This week I'd like to share my project filesystem, how I manage it, and why I do it this way. My intention is not to say "this is the best filesystem" or "you should manage your files this way", because different people will need different methods, and there is rarely a true one-size-fits-all approach —to anything. That said, this is the system that works for me, and that I've developed over the past 5+ years. Use it, modify it, and leave a like if you find it useful!

For a bit of background, I am a designer before being a developer, have been at it since around 2014, when I started drawing letters, learning graphic design and brand identity design. I have been developing (and therefore having to manage files for) very different types of projects throughout the years, including designing a wonderful card game about cyber witches, and helping design a diary app interface design.

Since I started becoming a dev, I've modified my folder system to better fit a developer's needs, like easier access through the command line and IDEs, Git, and so on.

Without further adieu, let's get to it. I promise—it's not complicated. We'll be tackling from the top down, from high level to detail. I'm on a Mac, but this system is relatively basic and can be implemented in any OS or environment.

My Project Management Filesystem

First of all, the most important folder: allProjects. Here, you guessed it, are all my projects. This folder is constantly backed up in two clouds (in case hell's fire rains on one cloud, the other cloud, or my local computer). This is the main, the favorite, the first folder I see when I open a finder window, command line, and editor.

In there, there are three folders: +Archives, +Lab, and +Study, followed by around 10 project folders. Let's look at each of the three main folders in detail. I put a + sign before the names so they'll always appear first.

v allProjects
|  > +Archives
|  > +Lab
|  > +Study
|  > ActiveProject
   ...
|  > AnotherActiveProject

+Archives contains all the projects that are completed, paused, or abandoned. In it, you'll find yearly folders, from 2014 to 2019. Each of these contains one folder for each project that has been successfully completed and delivered, or any personal projects that are abandoned, or the most common, paused until I know how to do it.
+Lab contains all the crazy creatures I'm imagining. Ideas, half-built things, apps in the earliest stages of development, and designs that only have a few letters drawn. I tend to keep each idea or creation in its own folder to keep it tidy.
+Study is just as important. As any dev, I'm always learning. Here, I have a folder with the name of each platform I'm taking courses on. Let's take... Per's Scrimba. In my Scrimba folder, I have a markdown file for each course or path, where I take notes, code snippets, summaries, etc. If it's a particularly big course, I may have a folder with multiple markdown files in it. Whenever I'm studying, I put my editor and browser side-by-side on full screen, and take notes while I go.

I mentioned I also have other folders next to the three + folders. These are all my active projects. This is my main working area, my priority. Whether they are client projects, projects with my partner, or projects of my own — if I'm working on it, it's here. It's at plain sight, so I know right away what I'm working on. When a small creature from the +Lab grows enough, I move it out into this wild area. If one of these projects goes for a while without updates, if I'm getting bored of it, or if I just can't continue without first learning something else, I move it into the +Archives. Also, I often take projects out of the archives and back to this main area, if I decide I want to start working on it again.

Individual project folders

Most of the time, I'm working on projects located in my main working area. But I also play around in the +Lab and I spend a few hours every day in the +Study area.

Each of the project folders has a mind of its own. No two projects are alike, so project folders tend to vary. When it's a development project, I'll usually set up a git repository in the project folder. But git with design projects is a big no-no — file sizes tend to grow enormously. Some can be connected to GitHub, but it really depends on the nature of the project. Some project folders have only one or two files, others can have multiple folder levels down and gigabytes of files.

Visual Tree (TL;DR)

For us visual people, and for those who just want to see it, here's a visual outline.

v allProjects
|  v +Archives
|  |  > 2014
|  |  > 2015
|  |  > 2016
|  |  > 2017
|  |  v 2018
|  |  |  > FinishedProject
|  |  |  > FinishedClientProject
|  |  |  > PausedProject
|  |  > 2019
|  v +Lab
|  |  > SomeTest
|  |  > SomeOtherInvention
|  v +Study
|  |  > CodeCademy
|  |  > CS50
|  |  > FCC
|  |  > Scrimba
|  |  > Udemy
|  > ActiveProject
|  > ClientProject
|  > AnotherActiveProject
|  |  > ProjectSubfolder
|  > OneMoreActiveProject
|  v Website
|  |  index.html
|  |  style.css
|  > PersonalProject
...

Notes

Although Scrimba has its own note-taking and bookmarking tool, I like to take notes locally from every course where I learn something new. It's easier to find my notes and search through them, and I don't need an internet connection.

What's something you couldn't work without?

Cécile Lebleu — Wed, 29 May 2019 18:15:29 +0000

Besides a decent computer and a decent internet connection, what's something that, if you didn't have around, you couldn't work properly?
Is it coffee, or tea, a good chair, music, headphones, your favorite editor or IDE, journal, a desk plant...?

For me, although all of the above are pretty useful, it would have to be an elbow cushion. Without it, my elbows get bruised from always being on the hard wood table while I type. I could replace it with any other cushion, but I recently crocheted a new DIY one that works perfectly.

I'm curious. What couldn't you be a developer without?

You can take this chance to be grateful for always having that nearby. Being grateful is really good for our mental health and well-being. 💙

Photo by Nicole Wolf on Unsplash

I really want to know how to make this

Cécile Lebleu — Sun, 05 May 2019 04:12:41 +0000

Hi everyone!
I would love to make things like this. I would really appreciate if anyone can help guide me in the right direction — how it's built, maybe any tutorials, or what I should learn.
https://www.tuftandpaw.com/pages/beautiful-cats-of-instagram-3d#hamilton

Thanks in advance!! 😸

Browser recommendation, or Why you should move to Vivaldi

Cécile Lebleu — Fri, 03 May 2019 18:16:55 +0000

Most of us are guilty of this. We keep too many tabs open. It gets difficult to find which one we were looking for, and the machine can get slow or hot from having to deal with so many tabs, auto-refreshes, data coming in, etc. We just don't know how powerful and personal our browser can be.

That’s why I want to recommend my favorite browser, not the most popular one, but by FAR my favorite. Vivaldi ❤️

BTW, this isn't sponsored or anything. I just really love the browser and I feel that you might benefit from trying it out and discovering the great features it has.

Why it's great

Let’s go back to the having-too-many-tabs-open thing. Some are related to work, others to a project you’re building, then there's social media too, and something you’re researching, a reading or watching list, etc. Well, if you do the switch, you’ll get Tab Stacking — just select related tabs with shift, then right click, and select “new tab stack”. This will group all of the tabs you selected in the space of one. You can also rename it, to quickly see what it’s about.

And what about performance? Here comes my favorite feature: Tab Hibernation. You can put tabs “to sleep”, so they are still there – but aren’t taking any memory or network. When you go to the hibernated tab, it will load as usual. This has dramatically improved performance in my daily work/study/research life.
Just to prove the point, I just un-hibernated my around 20 tabs, including a few instances of youtube, some CodePen, github, a couple dev.to, some articles, etc. Vivaldi was taking up about 20% CPU. Then, after selecting "Hibernate Background Tabs" (yes, you can hibernate everything else with one click), it was down to under 2%. Being honest, 20 tabs open is low for me — I just cleaned up yesterday. Usually, it's more around 50 tabs. So you can imagine the difference it makes if you're also using other apps other than the browser— the difference can sometimes be 60%+ to 1% CPU with a single click.

I could talk all day about Vivaldi, that’s how good it is. Some of the highlights for me include great themes and impressive customization — you can even select how round the corners should be, or changing theme at set times throughout the day (I have mine to change as the day progresses, with different colors to fit the light and mood), tabs on the top, right, left, or bottom (I have mine on the right), customizable panel where you can add any websites you want, on-page tools like blurring, grayscale, image tilting, CSS debugging; powerful dev tools, tab stack tiling (you can have multiple tabs tiled as you want them, vertically, horizontally, as rectangles, etc), hide all the UI with one shortcut, saving tabs as sessions you can come back to later, different users with different everything... I could go on. You can use it fully with keyboard only, I find it's faster this way. Anything you want, it's there.

The cons

Because, let's be fair, nobody's perfect.

Support

And, by support, I mean, Shopify. You can't edit a Shopify site using Vivaldi. (I haven't checked in a few months, though, to be fair.) But when I had to work on a Shopify site, I had to go back to Opera temporarily, because Shopify didn't support Vivaldi.

The looks

that people from support chats may give you. It's untold, but it's there. "Have you tried using Chrome?" or "It works on Chrome", as if the issue was related to the browser (it isn't, I already checked, no I don't have to check again, ugh ok I checked again and it's not working, see?). But this has more to do with being a woman requesting help, particularly being blonde.

The shock

When you have to use a different browser or computer. You look around, and see, there's only Chrome. [sigh]

The lack of mobile app

If you are a person who cares about syncing browser content between your computer and phone, well, Vivaldi won't be able to help you yet. Although they are developing the apps, they're not ready. I personally use Firefox Focus on my phone, and don't care about the syncing.

Update: Vivaldi now has an app for Android. Woohoo!

The alternatives

Vivaldi is the best browser I’ve ever used (and I’m a heavy browser hoarder). But no browser beats the customization that’s Vivaldi offers. Try it out for a couple of weeks. I highly, very highly recommend it.

In terms of other browsers, my second favorite is Firefox. It's Firefox, it's great. And then, Opera, with built-in free VPN and ad blocker. It was my main browser for months.
After these, every other browser is just... OK.

Feel free to tell me why your browser is better. As I said, I love hoarding browsers and trying our different features, and while I'm not looking to change — Vivaldi is better in most ways, I would love to hear what your browser of choice is, and why. And, if you'd like to know if there's a feature before downloading Vivaldi, I'll try my best at answering.

SQL pronunciation

Cécile Lebleu — Wed, 01 May 2019 19:02:10 +0000

Is SQL pronounced as S-Q-L or as sequel?

Both are listed on Wikipedia, but which one is the most popular or accepted way to pronounce it? Are there any reasons why one is better that the other?

In programming, is it better to have many small files or one large file?

Cécile Lebleu — Tue, 05 Feb 2019 01:13:27 +0000

The title says it all. In general, is it better to have multiple small files linked together, or one large file?

At least in the web, I know that you should have one or very few CSS stylesheets, to better control the style across different pages and all. As for HTML, it's pretty logically one per page. But what about JS?

And most importantly, the main point of my question is, what about other environments and other languages? Does this depend on the language or the goal? If so, what are some examples or cases where one method is better than the other?

Regardless of which is better, is it defined just by convention, or is it because of performance?

BTW, this is first post, so I'm sorry if I missed something, and please let me know!