DEV Community: François

Introducing Squidly: Simplify Your GitHub Workflow Management

François — Fri, 24 Jan 2025 12:57:22 +0000

Hello, Dev.to community! 🚀

I'm excited to introduce you to Squidly (beta), a SaaS platform designed to streamline your GitHub workflow management. Whether you're a solo developer or part of a larger team, Squidly offers a comprehensive suite of features to help you manage, monitor, and gain insights into your GitHub workflows—all in one place.

🚧 Note: the platform is in Beta stage, server can make from 30 seconds to 1 minute to be up and ready.

Why Squidly?

Managing multiple GitHub workflows can be challenging, especially when you're juggling various projects. Squidly aims to simplify this process by providing a centralized dashboard where you can visualize and control your workflows efficiently.

Key Features

Dashboard Overview: Get a quick overview of all your GitHub workflows. Monitor their status, view statistics, and manage them with ease.
Repository Management: Add or remove repositories directly from Squidly. Gain insights into your workflows and manage them without leaving the platform.
Workflow Control: View all your workflows and their statuses. Re-run or cancel workflows directly from the list.
Billing Usage Recap: For premium users, Squidly provides a detailed billing usage recap, helping you keep track of your workflow usage.

More details is on the pricing section: Squidly

Pricing Plans

Squidly is currently in beta and free to use. We offer a Free Plan for small projects and a Premium Plan for developers who need more advanced features. A Teams Plan is also in the works for enterprise users.

How to Test

To test Squidly, navigate to the relevant sections of the app and explore the features. Our intuitive interface makes it easy to get up and running quickly.

Join Our Community

We'd love for you to join our growing community of developers. Follow us on Twitter for updates, or reach out through our contact form if you have any questions.

Thank you for taking the time to learn about Squidly. We hope it becomes an invaluable tool in your development workflow.

You can try the tool directly in Beta environment (All data will be deleted at the end of Beta testing).

Squidly - All your Github workflows in one place

Happy coding! 🎉

Question - Tools to see differences between JS frameworks

François — Thu, 30 Mar 2023 14:01:55 +0000

Hi developers! 👋

Do you have any tools to see the difference in terms of code between different frontend frameworks?
For example, difference to declare a props, events, ...

Thanks a lot 🙏

ReactJS vs Vue.js - Feedback about two long-term projects

François — Wed, 30 Mar 2022 13:33:55 +0000

I don't think it is really useful to introduce these two frameworks/libraries since you probably already know them. If it is not the case, you can find a quick introduction on those links ReactJS/Vue.js.

Here is a graph of their evolution in terms of Github stars from 2014 to today 📊.

Number of stars on GitHub projects React and Vue (source: https://star-history.t9t.io/#facebook/react&vuejs/vue&angular)

As a comparison, the most starred repository on GitHub is FreeCodeCamp, with over 340k stars 🌟 . It is an open source project with a large codebase and a friendly community where you can learn to code for free with over 8,000 tutorials.

In this article, I will give you my feedback on the use of these 2 frameworks through two projects at Kinoba 💛

DISCLAIMER

The projects I will be talking about started in 2020 and are part of my discovery and learning of main frontend frameworks. I deliberately did not go into advanced technical details to make it accessible to beginners, tech lovers and also experienced developers. Today, I'm working with these two amazing frameworks in my daily life 🙌 .

Vue.js

First steps in front-end frameworks with Vue

My first Vue.js project at Kinoba was made with the Highday project. This platform allows you to describe your professional life in synthetic, graphic and contemporary formats, to share with your community.

The technical stack used is Vue for the front-end and Ruby On Rails for the back-end.

I think that these 2 technologies work really well together: development is super smooth, Vue is intuitive and the learning curve is awesome.

The choice of the framework for this project was mainly made thanks to the growth of Vue, its simplicity of understanding, its lightness compared to others and its growing community. Others criteria came into consideration, such as the possibility to install the app in PWA mode on mobile or desktop devices.

What I appreciated during the development

⚙️ The principle of the "single file component" is useful: it allows you to keep all the code related to a component in one place, so it is easier to organize your project. And you don't end up with styles from one component overwriting the styles of another component.
📚 The documentation is great
🤩 Quick and easy PWA setup
🏢 Vue was not created by a big company like Facebook or Google.
📦 Packages are awesome!

Examples of packages used

While working on the project, the latest version of Vue (Vue 3) had just been released (Evan You 💚️), with lots of new features. I am already looking forward to start a new project with this new version. 🤩

React

First steps with React
The second framework I learned is React, thanks to an event platform.

Unlike the project with Vue, this one required the use of React because the project integrated massive rendering and performance issues. We needed a more complete and robust framework and React turned out to be a perfect fit for this type of project.

We also implemented a custom chat made with actioncable and a custom backoffice for event administrators.

What I appreciated during the development

🤓 Learning a "new language", JSX.
⚙️ We used the "Class Component" system (I have not used the "Functionnal Component" yet so I have no hindsight on this point)
📣 The massive React community
💪 The stability of the library

Examples of packages used

Next time, I hope to be able to test how Functionnal Component works to see the different aspects of using React. I have also heard a lot about Next.js or React Native from several friends, they sound pretty cool 😎

Simple code examples between Vue.js and React

Loops

Loop in React

Loop in Vue.js

I find it so much easier in Vue.

Reading the code becomes quite complicated when you have multiple loops in React. The syntax is too heavy in my opinion.

Conditions

Condition in React

Condition in Vue.js

Same thing for the conditions, I find React's JSX pretty heavy and if there are too many conditions so it quickly becomes unmaintainable over time.

To conclude…

The learning of the two frameworks was done without too many worries but which one do you think I prefer? 😉

Because of my knowledge of Vue, I did not have too many learning issues with React, and for any problem I had my colleagues as a backup 💪. This is a personal opinion but I prefer to use Vue.js for all the points I mentioned above.

JSX complicates a little bit the readability of the code but it is useful not to have an html, css and a separate javascript file.

Having a separate stylesheet is not so annoying, we still manage to organize ourselves even if some styles may overwrite styles of other components.

In my future personal projects, I would also like to learn the Svelte.js framework which, as its name suggests, greatly reduces the weight of the application once compiled. Indeed, the virtual DOM is not present, which is one less thing to load 🚀. It promises better loading speed compared to other frameworks and as web developers we are always looking for better performance. So, I think Svelte can be interesting in that regard and its popularity keeps increasing.

👋 See you soon @Kinoba

Se reconvertir dans le développement web 👩‍💻👨‍💻

François — Fri, 04 Feb 2022 09:54:14 +0000

Viens découvrir les premiers articles de notre série d'interviews au format court sur la reconversion dans le développement web.

Chez Kinoba, nous avons des profils très différents. Six membres de l’équipe se sont reconvertis dans le développement web après s’être essayés à des métiers divers et variés. Ils témoignent de leur reconversion dans cette série d’interviews au format court :

Et toi, comment as-tu vécu ta reconversion ? ⬇️ ⬇️ ⬇️

3 ways to send emails with only few lines of code and Gmail - Python - Part 3

François — Mon, 28 Jun 2021 14:01:51 +0000

We will see how to send a simple email with the help of three different programming languages: Javascript, Ruby and Python
Before you start you need to create a Gmail account.
Do not forget to accept and allow the "Less secure apps" access in order use your scripts with your Gmail smtp connection.
I'll let you do this on your own, you don't need a tutorial for this 😜

Python 🐍

We are going to use the Smtplib and the MIMEMultipart libraries:

import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

Define Gmail account info and recipient email:

# The email addresses and password
sender_address = 'youremail@gmail.com'
sender_password = 'yourpassword'
gmail_port = 587

receiver_address = 'myfriend@yopmail.com'
mail_content = 'Easy peazy lemon squeezy'

Setup the MIME:

message = MIMEMultipart()
message['From'] = sender_address
message['To'] = receiver_address
message['Subject'] = 'Sending email using Python'
message.attach(MIMEText(mail_content, 'plain'))

Create SMTP session for sending the mail:

session = smtplib.SMTP('smtp.gmail.com', gmail_port)
session.starttls() # enable security
session.login(sender_address, sender_password)
text = message.as_string()
session.sendmail(sender_address, receiver_address, text)
session.quit()

print('Email Sent')

Here the final code:

import smtplib

from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText

# The email addresses and password
sender_address = 'youremail@gmail.com'
sender_password = 'yourpassword'
gmail_port = 587

receiver_address = 'myfriend@yopmail.com'
mail_content = 'Easy peezy lemon squeezy'

# Setup the MIME
message = MIMEMultipart()
message['From'] = sender_address
message['To'] = receiver_address
message['Subject'] = 'Sending email using Python'

# The body and the attachments for the mail
message.attach(MIMEText(mail_content, 'plain'))

# Create SMTP session for sending the mail
session = smtplib.SMTP('smtp.gmail.com', gmail_port)
session.starttls() # enable security
session.login(sender_address, sender_password)
text = message.as_string()
session.sendmail(sender_address, receiver_address, text)
session.quit()

print('Email Sent')

The power of Python 🐍

What's next?

With those scripts, we went through the basics of the module, gem and library (read the docs 📚) but you can also do amazing things with them like loops, sending attachments, automated things... feel free to do want you want.

Thanks for reading this tiny scripts serie 😊
See you soon @Kinoba

3 ways to send emails with only few lines of code and Gmail - Ruby - Part 2

François — Mon, 21 Jun 2021 11:48:01 +0000

Ruby 💎

We are going to use the Mail gem:

gem install mail

Require it at the beginning of your send_email.rb:

require 'mail'

Declare Gmail account info:

# Gmail account info
options = {
  address: 'smtp.gmail.com',
  port: 587, # gmail smtp port number
  domain: 'gmail.com',
  user_name: 'youremail@gmail.com',
  password: 'yourpassword',
  authentication: 'plain'
}

Initialize Mail delivery_method info:

Mail.defaults do
  delivery_method :smtp, options
end

Send email 📧 :

Mail.deliver do
  to 'myfriend@yopmail.com'
  from 'youremail@gmail.com'
  subject 'Sending email using Ruby'
  body 'Easy peasy lemon squeezy'
end

Here the final code:

require 'mail'

# Gmail account info
options = {
  address: 'smtp.gmail.com',
  port: 587,
  domain: 'gmail.com',
  user_name: 'youremail@gmail.com',
  password: 'yourpassword',
  authentication: 'plain'
}

Mail.defaults do
  delivery_method :smtp, options
end

Mail.deliver do
  to 'myfriend@yopmail.com'
  from 'youremail@gmail.com'
  subject 'Sending email using Ruby'
  body 'Easy peasy lemon squeezy'
end

puts 'Email sent'

The ease of Ruby 💎

3 ways to send emails with only few lines of code and Gmail - Javascript - Part 1

François — Mon, 14 Jun 2021 10:05:45 +0000

Javascript 🚀

For the first script, we are going to use the Nodemailer module:

yarn add nodemailer

Require or import the module into your index.js:

const nodemailer = require('nodemailer')

Initialize the mailer with our Gmail account info:

// Gmail account info
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

Create your email:

// Email info
const mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yopmail.com',
  subject: 'Sending email using Node.js',
  text: 'Easy peasy lemon squeezy'
};

Sending your email:

// Send email and retrieve server response
transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Here the final code:

const nodemailer = require('nodemailer')

// Gmail account info
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

// Email info
const mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yopmail.com',
  subject: 'Sending email using Node.js',
  text: 'Easy peasy lemon squeezy'
};

// Send email 📧  and retrieve server response
transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Javascript buddy 🤝

Javascript 🚀 - Part 1
Ruby 💎 - Part 2
Python 🐍 - Part 3

3 ways to send emails with only few lines of code and Gmail - Series

François — Fri, 11 Jun 2021 11:56:07 +0000

Table of teasing

Configure Scaleway S3 for Active Storage in Rails 6.0

François — Fri, 26 Mar 2021 08:20:08 +0000

Scaleway is a French web hosting company, founded by Xavier Niel in 1999. It provides physical and online dedicated servers, domain registration services and datacenters.

In 2020, Scaleway was the second player in France behind OVHCloud and the third in Europe.

If you want an alternative to Amazon AWS S3 storage services that we use @Kinoba, follow along this tiny and easy tutorial 😊

Scaleway part

Let's begin with the Scaleway config 👨🏻‍🔧

1️⃣ First step: Create an account on Scaleway Elements:

👉🏻 https://www.scaleway.com/fr/object-storage/

2️⃣ Second step: Create your S3 bucket by going to your Scaleway console and "Object Storage" tab.

Here, a help procedure if needed:
👉🏻 https://www.scaleway.com/en/docs/object-storage-feature/#-Operation-Procedures

3️⃣ Third step: Generate your Access key and your Secret key 🔐 (do not forget to store them somewhere like 1Password or Bitwarden for example):

👉🏻 https://www.scaleway.com/en/docs/generate-api-keys/

Ruby On Rails part

The funniest part: integrating Scaleway into your Rails app 👩🏽‍💻

After installing ActiveStorage and creating the active_storage_tables migration, you can add the "aws-sdk-s3" gem to your Gemfile

# Gemfile
gem 'aws-sdk-s3', require: false

Then, you can add your credentials to your .env file (do not forget to add your file to your .gitignore)

# .env
SCALEWAY_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID
SCALEWAY_SECRET_ACCESS_KEY_ID=YOUR_SECRET_ACCESS_KEY_ID
SCALEWAY_BUCKET_NAME=YOUR_BUCKET_NAME

Add this config to you storage.yml with your personal keys and bucket

# storage.yml
test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

scaleway:
  service: S3
  endpoint: https://s3.fr-par.scw.cloud # Scaleway API endpoint, depending on your region
  access_key_id: <%= ENV['SCALEWAY_ACCESS_KEY_ID'] %> # Do not forget to hide your secrets
  secret_access_key: <%= ENV['SCALEWAY_SECRET_ACCESS_KEY_ID'] %> # Do not forget to hide your secrets
  region: fr-par # Your bucket region, here it's Paris
  bucket: <%= ENV['SCALEWAY_BUCKET_NAME'] %> # Your bucket name

Do not forget to tell Rails to use Scaleway storage in production environment

# production.rb
config.active_storage.service = :scaleway

Finally, you can attach your files to your records as usual 🙌🏻

# user.rb
has_one_attached :avatar

# users_controller.rb
@user.avatar.attach(params[:avatar])

That's it 🎉

Check it out on Medium

François Loupias - Fullstack web developer @Kinoba

DEV Community: François

Introducing Squidly: Simplify Your GitHub Workflow Management

Why Squidly?

Key Features

Pricing Plans

How to Test

Join Our Community

Question - Tools to see differences between JS frameworks

ReactJS vs Vue.js - Feedback about two long-term projects

DISCLAIMER

Vue.js

React

Simple code examples between Vue.js and React

To conclude…

Se reconvertir dans le développement web 👩‍💻👨‍💻

3 ways to send emails with only few lines of code and Gmail - Python - Part 3

Python 🐍

The power of Python 🐍

What's next?

Table of contents

3 ways to send emails with only few lines of code and Gmail - Ruby - Part 2

Ruby 💎

The ease of Ruby 💎

Table of contents

3 ways to send emails with only few lines of code and Gmail - Javascript - Part 1

Javascript 🚀

Javascript buddy 🤝

Table of contents

3 ways to send emails with only few lines of code and Gmail - Series

Table of teasing

Configure Scaleway S3 for Active Storage in Rails 6.0

Scaleway part

Ruby On Rails part

That's it 🎉