開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

Laragon is a program that provides the WAMP environment (which stands for Windows, Apache, MySQL and PHP) and can completely replace XAMPP which has many current bugs. With Laragon, we can easily, quickly and conveniently set up the WAMP environment and manage them in local environment.

In addition to supporting PHP and MySQL, Laragon also supports other web programming languages ​​such as Node.js, Python, Java, Go, Ruby and other database management systems like PostgreSQL, MongoDB. This software suite is extremely popular in the Laravel community, downloaded and loved by thousands of programmers around the world.

XAMPP and WAMP

Before talking about Laragon, I would like to first go through my development web server history. First, I always used Windows-based computers for all my development work. When I was starting, the only viable solutions for Windows development was to set everything manually or to use XAMPP or WAMP server software. For a while, I used WAMP, but for the most part, XAMPP was my preferred environment. And I had different versions of XAMPP installed until recently, each one with varying versions of PHP.

Laragon will allow switch between PHP versions, using Apache and Nginx, and maybe having support for different MySQL versions. Laragon is not easy to use as Local, but once we set it up, it is working as we expect it to. Most operations are done via the context menu for the application sitting in the taskbar notifications area.

The following are the benefits of laragon.

— PHP version support

— CMDER terminal support

— Laragon provides us a strong database management system with HeidiSql, optionally you can change it for phpmyadmin

— SSL activation

— Choosing Apache, Nginx for your web server

— Activating Memcache, Redis

— Quick app creating with GUI application

— Changing ports very quickly and easily

— Sharing your local site for the public with Ngrok on laragon

— Email management

— Powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby. It is fast, lightweight, easy-to-use and easy-to-extend

By Tsuki

Tweet

SCSS (Sassy CSS) is the superset, it’s the more advanced version of CSS. We can add additional functionalities to CSS such as variables, nesting , loops, indentations and more by using SCSS. All these additional functionalities can make writing CSS much easier and faster as compared to writing the traditional CSS.

Nesting

Nesting has many benefits:

Variables

 SCSS offers variables in order to declare re-used properties in one place. Using traditional CSS, we would need to repeat the same code over and over, but with SASS we can store these values as variables.

Mathematical functions

In SASS, we can also use mathematical operations like +, -, *, /, or %. This allows us to influence size specifications, for example.

Indentations

The original SASS works with indentations and line breaks to structure the code. We don’t need parentheses to display nesting or semicolons to mark line ends.

By Tsuki

Tweet

— Absolute positioning

If you want to define where an element is placed on the website at all times, absolute positioning is the key to make this happen. Absolute positioning allows you to control exactly where an element will stay. And then use top, right, bottom and left, accompanied by a pixel value to control the place.

position:absolute;
bottom:10px;
right:10px

The CSS above sets the position of an element to stay 10px from the bottom and right edges of the browser. 

— Use a CSS preprocessor

Use Less or Sass or SCSS when you develop the website. They can help you declare colors, sizes, etc one single time, and create CSS with for cycles and similar things. 

— Link states

The :link pseudo-class controls all links that haven’t been clicked on yet. The :visited pseudo class handles the styling of all of the links you’ve already visited. This tells website visitors where they have already been on the site, and where they have yet to explore.

a:link { color: blue; }
a:visited { color: purple; }

— Resize images to fit

Sometimes images are needed to fit a certain width, while scaling proportionally. An easy way to do this is to use max width to handle this.

Here is an example:

img {
    max-width:100%;
    height:auto;
}

— Split HTML and CSS

It is the best idea of creating different CSS files (for example, one for desktop and one for mobile) while developing, and only, in the end, merge them.

The same principle can be made with HTML. If you’re not developing in SPA environments, you can use PHP to include and require pieces of HTML code.

— Direct children

Use > to select the direct children of an element.

#footer > a

This will select and style all of the active link elements that are immediately under the Footer ID.

—  :before

This CSS is a selector that allows you to choose a CSS element and insert content before every element with a specific class applied to it. 

h3:before { 
    content: "More: ";
<span class="new-blog"> color: #F00;</span>
}

— :after

Like the :before selector, :after can be used to insert content globally on specific elements. A practical use would be adding “see more” after every excerpt on an article . You can do like this:

p:after{ 
    content: " -Read more… ";
    color:#f00;
}

By Tsuki

Tweet

aws等でインスタンスに指定したキーペアのプライベートキー(.pem)を使用して
PuTTYでssh接続できない場合の対処方法をシェアします。

Tweet

There are numerous JS frameworks. It’s not possible for anyone to tell considering the way that each JS framework is great for one pack of challenges and not the best one for another.

JavaScript was at first used exceptionally for the client-side. However, nowadays JavaScript is also used as a server-side programming language.

1. React

React is one of the finest front-end open-source JavaScript frameworks that allow developers to create rich user interfaces. Created by a team of Facebook developers, React introduced functional, declarative, and component-based styles.  React is a complex framework for new developers to learn, use, and understand, but it has an extensive community. 

Pros:

• Plenty of reusable components to build business logic
• Ease of integration with front-end and back-end
• Unidirectional data flow with flux controls
• SEO-friendly JavaScript framework
• Huge support community
• Capacity to test and debug rapidly

Cons:

• Only covers the UI layer of the app
• Have to deal with complex state management 
• Constant upgrades make it difficult for developers to keep up with the changes
• New developers may find JSX to be a barrier

2. Angular

Angular is one of the top-rated JavaScript UI frameworks that developers utilize to build classy single-page web applications. The framework leverages HTML syntax on dynamic web pages.

Pros:

• Component-based architecture
• High-class server performance
• Two-way data binding 
• A rich collection of third-party integrations
• A massive community of developers

Cons:

• Need to learn JavaScript and Typescript
• Struggles with SEO due to poor accessibility
• Migration from one version to another is difficult
• Debugging the scope can be difficult

3. Vue JS

Vue.js is one of the most versatile front-end JavaScript frameworks. It’s also known as a progressive framework due to its capability to facilitate the design of high-end single-page web applications through dual integration mode. The framework follows the MVMM (Model-View-View-Model) architecture pattern. Besides that, Vue.js is simple, unrestricted, and an easy-to-adopt framework.   

Pros:

• Quick and easy configuration due to MVVM architecture
• Easy to learn, use, and understand even for beginners
• Lightweight framework with a small build size
• Seamless integration with third-party apps

Cons:

• Lack of high-end and effective plugins
• Older versions of iOS and Safari browsers can cause problems
• Difficulty with two-way binding

4. Svelte

Svelte JS is an open-source, web component-based front-end development framework.It is possible to create components using Svelte JS using the languages you’re content using (JavaScript, HTML, or CSS).

Pros:

• Component-based model pattern
• Easy to use, learn, and understand
• One of the most small-sized builds 
• Supports both client and server-side rendering

Cons:

• Not much IDE support available in the market
• Doesn’t have the backing of tech giants like Vue, Angular, and React
• Absence of third-party components
• Difficult to scale up the application

5. Express JS

Express JS is an open-source and minimalistic back-end JavaScript framework based on Node.js that developers use to build complex APIs and web applications. One of the major advantages of this Express JS framework is fast server-side programming. 

Pros:

• Active community support
• Rich set of documentation
• Powerful routing mechanism
• Seamless connectivity with all databases
• Accelerates web app development process

Cons:

• Security and code quality can be an issue
• Middleware creates issues for many clients
• Error messages have no description
• Hard to find an optimal way to write code for server-side

Tsuki

Tweet