DEV Community: Sourcegraph

Cody June 2023 (version 5.1): Better codegen, more recipes, more context, more editors

Bachi Degli Innocenti — Wed, 28 Jun 2023 19:15:33 +0000

The June 2023 release of Cody (version 5.1) brings even more powerful and accurate code AI to devs. Not only can Cody suggest AI-generated autocompletions in your editor like GitHub Copilot, it can also write entire files, fix bugs, refactor code, and answer questions about your entire codebase. Cody’s power and accuracy comes from supplying the LLM with better context about your codebase--also known as “cheating” from Steve Yegge’s Cheating Is All You Need post--which builds on our work at Sourcegraph creating the leading code search engine.

Highlights:

🪄 Better autocomplete, with a more powerful LLM (Anthropic Claude) and broader context. Free for devs.
🧪 New and improved recipes: explain code, fix code smells, optimize performance, and more.
💬 Inline chat, for easy fixes, refactors, and questions on specific regions of code files.
🌐 Multi-repository context, so Cody looks beyond just the current repository for knowledge when writing/fixing code and answering questions.
➕ Support for JetBrains IDEs: IntelliJ, PyCharm, WebStorm, etc. Editor support for Emacs and Neovim is coming soon.
💻 The Cody desktop app, which makes it easy for individuals to use Cody on your private code in your editor and in a chat UI. No server deployment needed.
Cody is free forever for devs on both public and private code. You only need to pay if you exceed the (generous) rate limits or for team/company/enterprise features.

Get started with Cody, or download the editor extension directly for VS Code or JetBrains.

Better autocomplete

Like GitHub Copilot, Cody suggests AI-generated autocompletions in your editor. In this release, we’ve shipped some big improvements to Cody’s autocomplete (and moved it from experimental to beta):

Broader context for more idiomatic code suggestions: Cody is the first code AI to autocomplete based on context from the entire repository, using embeddings-based semantic search. This means Cody can generate better code that uses more of your codebase’s own APIs and idiomatic usage patterns, compared to GitHub Copilot and others that only use recent files and open tabs.
More powerful LLM (Anthropic Claude): An LLM with greater general reasoning capability plus a larger context window means Cody’s suggestions can be better and more accurate than other code AI tools (including GitHub Copilot) that use simpler LLMs.
Free for devs, with a very generous rate limit.

Today, most devs will find Cody’s autocomplete and GitHub Copilot’s autocomplete roughly equivalent (but remember that Cody is free!).

We expect Cody autocomplete to keep improving quickly. Our approach—more and better context, more powerful LLM—is different from that of other AI code autocomplete tools that optimize for limited context and small models. We’re optimistic that this maximal approach will definitively surpass the minimal approach.

If you want to try Cody autocomplete and compare it with GitHub Copilot, you can toggle Cody autocomplete on/off and still keep using Cody for everything else (chat, recipes, codegen, etc.). Send us your feedback!

New and improved recipes

Cody can explain, write, fix, and refactor code using your codebase’s own APIs, docs, and usage patterns. This goes way beyond autocomplete or prompt engineering. It’s possible only because Cody supplies context about your own code to a powerful LLM, so it can perform higher-level coding tasks.

In this release, we’ve added and updated many of our favorite recipes:

Explain code using broad knowledge of your codebase and internal APIs
Generate unit test using your preferred test frameworks and conventions
Generate docstring using your codebase’s style
Improve variable names because naming is one of the hard things about computer science
Smell code to find and fix code smells
Generate release notes based on recent commits
Generate pull request description
Optimize code performance
Special shoutout to community members Deepak Kumar and Momil Ijaz for contributing recipes to Cody!

Inline chat

While recipes help quickly accomplish specific tasks, Cody chat gives users more freeform capabilities. As a user, you may want to ask Cody questions like:

Why is this code not working like I expect it to?
Why is this function so slow?
Can you make this thing work?
Inline chat for Cody, now in beta, makes it easy to ask questions and get direct inline fixes at any point in your code. You can start a chat with Cody directly at a certain point in your code file, and Cody will use the context at that line to answer your question.

Cody can also write and edit code itself, and you can use inline chat to requests fixes and refactors. Cody will make direct edits to your code, and you can choose to accept or undo any changes.

To open a Cody inline chat, click the + icon to the left of any line in your file. With the chat window open, you can either ask Cody questions or use a slash command, such as:

/fixup. Cody will make changes directly to your code inline.
/touch. Cody puts its output in a new file.
Multi-repository context
Cody’s ability to answer questions about your code comes from its ability to pull context from the code graph. The code graph is the schema of code and code metadata built by the Sourcegraph platform when connected to all of your code hosts.

Before today, Cody would respond to queries by pulling context from your currently-open repository. When used with Sourcegraph 5.1, Cody can now pull context from multiple repositories in the code graph at the same time. In practice, this means that Cody can tell you about code and services that span multiple repositories.

Multi-repository context fetching is available when using Cody via the web interface. To enable this in Cody on the web, click “Add repositories” under the chat bar, and select the repositories you’d like Cody to fetch context from.

Support for JetBrains IDEs

We want Cody to be available wherever you write code, and the #1 request we’ve received is to bring Cody to IntelliJ and other JetBrains IDEs. Cody is now available as a plugin for JetBrains IDEs (AppCode, Android Studio, CLion, GoLand, IntelliJ IDEA, PhpStorm, PyCharm, Rider, RubyMine, WebStorm, and all new IDEs that JetBrains releases), and you can download it today. The plugin supports the Cody chat sidebar, recipes, and code autocomplete.

You can connect the JetBrains plugin to a Sourcegraph.com account to use on public code and to a Sourcegraph Enterprise account or the Cody desktop app to use for a private codebase.

Cody is also available for VS Code, with support coming soon for Neovim and Emacs. Join the waitlist to be notified when more editors are available or to request a new editor.

Cody desktop app

If a code AI tool can only fetch context from recent files, open tabs, or a ripgrep search, it’s going to be limited and inaccurate. It’ll often fail to find relevant code snippets across your entire codebase, so its autocompletions and answers will be less idiomatic and more likely to be flat-out hallucinated.

The solution to this is a persistent server or application that has indexed the codebase and serves context to your editor’s code AI tool. Today we’re releasing the Cody desktop app, a service that runs in the background of your local machine, serving as the integration point between your codebase and IDE extensions to make Cody more accurate.

Ask Cody a question in your editor and Cody will fetch context from the app’s code graph instead of using local keyword search, leading to more accurate answers generated with a broader understanding of your code.

Context from the app improves all of Cody's features:

Code autocomplete: Cody makes autocompletions based on existing components in a repository, such as React components or functions, regardless of if those components are in open files or elsewhere in a repository.
Chat: Ask Cody about functions or components that are being imported from another file, and Cody will find the component’s definition to explain it. Other code AI tools often can’t find where components are defined if the relevant file isn’t already open.
Recipes: Cody can summarize recent changes to a repository based on context of the commit history. If you ask other code AI tools to do this, they’ll simply say they don’t have access to that data.
The app is the best way to use Cody for free, and it’s available to download today.

Announcing scip-clang: a new SCIP indexer for C and C++

Bachi Degli Innocenti — Wed, 17 May 2023 17:56:23 +0000

scip-clang is our new indexer for C and C++ code written from the ground up to natively emit SCIP and especially support the wide range of language features present in C++.

For teams using C and C++, indexing your code with scip-clang can provide a significantly improved code navigation experience in Sourcegraph, similar to editors like VS Code (based on clangd) and CLion. scip-clang's precise code navigation is aware of build configurations, macros, and type information. Some examples of when this is particularly useful:

Navigating class hierarchies, such as those using virtual functions with overriding, or the Curiously Recurring Template Pattern. In such cases, identically named methods appear in multiple class definitions, leading to false positives with search-based code navigation.
Different C++ container types often use identical method names like find and contains, which may have multiple overloads. Precise code navigation enables accurately navigating to the correct method overload in the correct type without false positives.
Understanding whether a definition comes from inside a macro expansion. In such cases, since the definition is not explicitly available in the source, it is not accessible to search-based code navigation. However, precise code navigation can accurately point to the macro expansion.

You can explore precise code navigation powered by scip-clang in the following repositories: Chromium (C++), LLVM (C++), Postgres (C).

Continue reading here: https://about.sourcegraph.com/blog/announcing-scip-clang

Installing and customizing Visual Studio Code: VS Code setup from scratch

Erika Heidi — Fri, 18 Feb 2022 15:14:43 +0000

Visual Studio Code (VS Code) is a source code editor or IDE (Integrated Development Environment) freely available for all major operating systems. Although VSCode has native features to help you develop applications and websites in several languages, what makes VS Code an excellent choice for developers is the vast ecosystem of extensions that allow you to customize and fine tune your VS Code installation to meet your specific needs.

In this article, you'll learn how to install and customize VS Code to make it the right fit for your coding needs. You'll also get a list of recommended extensions for improving your overall productivity, no matter your programming language of choice. As an appendix, I've included a few extensions that I personally use for PHP Development.

Installing Visual Studio Code

As mentioned earlier, VS Code is available for all major operating systems. To get started, access their download page and download the adequate installer for your system.

Installing on Ubuntu

For Ubuntu systems, the operating system in which this article is validated, you should download the .deb file. Once it's downloaded, you can install it from your terminal with sudo dpkg -i file.deb, like this:



sudo dpkg -i code_1.63.2-1639562499_amd64.deb

Installing on other systems

For other systems, download and execute the appropriate installer.

Getting familiar with the interface

After installation is complete, open VS Code. You'll see a "Get Started" page like this:

In this page you have some shortcuts to change your configuration, set up synchronization, and install language-specific extensions. You don't need to do this now; first, let's explore how to navigate the IDE interface.

Opening a project in VS Code

To open an existing project, use the files icon on the left menu (it's the first icon). Then, choose a project directory to open, or clone a remote repository to get started.

Changing the font size

Open a file from your project and check if you are satisfied with the default font size. With bigger resolutions and screens, there's a chance you may need to increase the font size for more comfortable reading. You can do this by accessing the menu File -> Preferences -> Settings and then searching for "font" on the search bar that appears at the top. Look for the option Editor font size and change it to your desired size.

Increase the IDE fonts / window zoom level

Changing the editor font won't modify the IDE interface font size. To increase the UI fonts, go to the Settings page via the menu File -> Preferences -> Settings and search for "zoom" on the search bar that appears at the top. Change the Window zoom level to a value such as 1 or 2 and see if that looks better.

Changing the editor theme

To change the default editor color theme, go to File -> Preferences -> Color Theme or hit CTRL+K CTRL+T to access the theme selection menu. There are a few different options, in both dark and light schemes.

_ The theme chosen in this gif is "Monokai Dark"._

Using the source control tool

The third icon on the left menu will give you access to VS Code's built-in source control tool, a helper tool that allows you to discard and commit changes to source control without the need to run commands from a terminal.

How to install extensions

Once you're satisfied with your basic setup, you may want to start exploring VS Code extensions. The VS Code Marketplace offers a large collection of useful extensions to customize your VS Code so that it attends all your coding needs.

There are two different ways to install an extension from the marketplace:

Installing directly through the IDE

You can search and install extensions directly from the VS Code interface by accessing the extensions tab, the 5th button on the top left menu.

Installing with a command

If you are navigating the marketplace looking for extensions and find one you want to install, you can do so with a command executed through VS Code's "quick open" shortcut (CTRL+P). The extension page typically has instructions on how to do so. For instance, let's say you want to install the Markdown all in one extension, a popular markdown extension for VS Code. From VS Code, type CTRL+P and paste in the following command:



ext install yzhang.markdown-all-in-one

Each extension has a unique name that you can find on the extension's marketplace page. You'll need that name to install the extension with the ext install command.

Recommended productivity extensions

In this section, you'll find a collection of recommended extensions that can be useful to improve your coding productivity regardless of your programming language of choice.

Sourcegraph code search

The newly released Sourcegraph VS Code extension allows you to search code across millions of open source repositories right from your IDE. You don't need an account to use the plugin, but connecting to a free account enables you more features such as searching across your private repositories on multiple code host services.

Installation



ext install sourcegraph.sourcegraph

In the following video, I show a brief overview of how to use the Sourcegraph plugin on VS Code to search for examples of how a method is used across open source repositories.

For more information and tips on how to use Sourcegraph's VS Code extension, check this blog post.

Prettier

Prettier is a popular code formatting tool that is also available as a VS Code extension. It enforces a consistent code style based on a set of rules that take into consideration the maximum line length, wrapping and reformatting code when necessary.

Installation



ext install esbenp.prettier-vscode

Docker

The Docker extension allows you to quickly manage your Docker environment through VS Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

Installation



ext install ms-azuretools.vscode-docker

Color Highlight

Especially useful for developers who work with front end, the Color Highlight extension adds a colored border around colors, which is very handy to give you an instant reference for web colors without having to reload a page on your browser.

Installation



ext install naumovs.color-highlight

Project Manager

The Project Manager extension enables advanced project management on VS Code. It allows you to organize your projects into virtual workspaces with support to tags and remote development.

Installation



ext install alefragnani.project-manager

Markdown all in one

With over 3 million downloads, the Markdown all in one extension is a must-have for anyone who writes documentation in the markdown language.

Installation



ext install yzhang.markdown-all-in-one

Spell Right

With the Spell Right extension you'll have a lightweight and offline spellcheck right into your VS Code installation. It supports several languages and file types.

Installation



ext install ban.spellright

CodeSnap

The CodeSnap extension allows you to take beautiful screenshots of your code.

Installation



ext install adpyke.codesnap

Emmet Live

The Emmet Live extensions enables support to emmet abbreviations, special expressions that are evaluated and turned into structured code snippets, such as HTML code.

Installation



ext install ysemeniuk.emmet-live

TailwindCSS Intelesense

The TailwindCSS Intelesense extension adds syntax highlight and autocomplete for TailwindCSS projects on VS Code.

Installation



ext install bradlc.vscode-tailwindcss

Appendix: PHP extensions

In this section, you'll find a collection of extensions that are useful for PHP development.

PHP Intelephense

The PHP Intelephense extension enables advanced code analysis and gives you context about methods, variables, classes and other components in a PHP application.

Installation



ext install bmewburn.vscode-intelephense-client

PHP Getters and Setters

The PHP getters and setters extension enables you to quickly generate getter and setter methods on a PHP class, based on its properties.

Installation



ext install phproberto.vscode-php-getters-setters

PHP Namespace Resolver

The PHP namespace resolver extension facilitates importing classes and also allows you to easily order your use statements by line length or in alphabetical order.

Installation



ext install MehediDracula.php-namespace-resolver

Laravel Artisan

The Laravel Artisan extension allows you to run Artisan commands from within your VS Code.

Installation



ext install ryannaddy.laravel-artisan

Conclusion

In this post, we saw how to install and customize VS Code for a better coding experience suited to your individual needs. We also saw some useful extensions for productivity, and a few PHP extensions that can help you improve your development speed in that language.

Give these extensions a try, and if some don't turn out to be useful you can quickly deactivate them through the Extensions tab (the fifth icon on the top left menu).

Have feedback or questions about the Sourcegraph VS Code extension? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have.

Simple & Advanced Search in VS Code with Sourcegraph

Prosper Otemuyiwa — Thu, 10 Feb 2022 19:15:55 +0000

The hallmark of fast and productive developers is finding and deploying resources quickly to succeed in their projects. Software is eating the world. The rapid digital transformation has led to countless innovations & services that improve people's lives all over the world. However, it's not been easy for developers.

Sourcegraph universal code search enables developers to find and fix things fast across the complex universe of interdependent codebases – various programming languages, code hosts, repositories, version control systems, services, and APIs.

Simple and Advanced Search in VS Code

Sourcegraph released a VS Code extension that enables any developer to search over two million open source repositories right from inside VS Code IDE—for free.

With Sourcegraph for VS Code, you can:

Learn from open source code examples
Search best practices
Copy and paste code from open-source land.
Sync your private code and search it within VS Code.

How to Install Sourcegraph VS Code Extension

Open VS Code.
Search for "Sourcegraph for VS Code" in the extensions marketplace.

Note: An alternative way is to install directly from the VS Code marketplace.

Click on the wildcard icon on the Activity Bar to launch the extension, as shown in the image below:

Search for code!

Code Search with Sourcegraph in VS Code

Sourcegraph supports three modes of code search:

Literal
Regular Expression
Structural

Literal Search in VS Code

Sourcegraph allows you to search for the exact string you are looking for in the codebase in a literal search pattern. For example, you can find function calls, comments, error messages, etc.

With literal Search, you can find function calls, error messages, comments, notes etc. For instance, if you want to search for "palindrome" you can search like so:

Example: Search for palindrome code samples

For more info, check out a detailed article about literal expression search on Sourcegraph.

Regular Expression Search in VS Code

Sourcegraph enables the mode to harness regular expression in code search. You need to allow the regular expression mode on the search box by clicking on the * sign on the right.

Example: Find code samples for the following Promise cases in JavaScript. Promise.any, Promise.all, Promise.allSettled and Promise.case

To learn more, check out a detailed article about regular expression search on Sourcegraph.

Structural Search in VS Code

Structural Search gives you the ability to copy-paste code blocks into the search box and get accurate results returned.

First, enable the structural search mode by clicking on the [ ] sign on the right:

Example: Find code samples of try and catch in JavaScript code.

To learn more, check out a detailed article about structural search on Sourcegraph.

Private Code Search in VS Code

The VS Code extension provides private code search. It allows you add and search your own code. To search for private code, you'll need to do the following:

If you don't have an account on Sourcegraph, create one.
On Sourcegraph Cloud, navigate to Access tokens in your account settings and generate a new token.

Settings

Click to generate access token

Give the access token a name

Copy the newly generated token, and navigate to the Sourcegraph extension.

Copy the newly generated access token

Paste the token into the access token input field in the extension's sidebar.

Paste the generated access token into Sourcegraph VS Code extension

The Editor will be reloaded automatically to use the newly added token.

Conclusion

Sourcegraph for VS Code brings the power of Sourcegraph query language into your IDE. Now, you are building & leveraging advanced code search in the same environment. One more step to optimizing your developer productivity!

You can also run Sourcegraph locally, or opt-in for us to set up a managed Sourcegraph instance for your team. You'll be able to use a self-hosted Sourcegraph instance for free (up to 10 users).

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.

Parsing DEV markdown within a Laravel Tailwind application

Erika Heidi — Wed, 19 Jan 2022 10:08:29 +0000

In a previous part of our series, we saw how to create an Artisan command to import your latest DEV articles and save them as markdown files within the storage folder of your Laravel application. The only thing missing now is to exhibit these posts in the main page of the demo application.

In this post, you'll learn how to parse the DEV markdown using the librarianphp/parsed library, which enables support for liquid tags in addition to parsing the front matter to obtain metadata related to the post. You can also watch the recap video on YouTube.

Disclaimer: this methodology works only with posts that are created with the classic markdown DEV editor, which uses a Jekyll front matter within the markdown body of the article. If you use the rich editor, you'll need to generate a valid front matter based on the returning API information for each article, before saving them as .md files. This is not covered within this series.

Preparation

Before moving along, make sure you have followed all steps in the previous tutorials of the series in order to bootstrap your Laravel application and development environment, to create the basic front-end view, and to create an Artisan command to import posts from DEV. This will require you to have Docker, Curl, and Git installed on your system.

This tutorial assumes that you have an alias to ./vendor/bin/sail on the root of the application folder, so that you can run Sail with ./sail. You can create such an alias with the following commands, executed from the application root folder:

ln -s ./vendor/bin/sail sail
chmod +x sail

If you haven't yet, bring your environment up with:

./vendor/bin/sail up -d

This command will start up your environment and keep it running in the background. Your Laravel application should now be available at http://localhost from your browser.

1. Installing Parsed via Composer

To parse the content imported from DEV, we'll use librarianphp/parsed, a library based on league/commonmark that parses the metadata content from traditional DEV posts that use the Jekyll front matter, in addition to parsing liquid tags and allowing you to implement your own custom liquid tags.

Run the following command to include librarianphp/parsed as a Composer dependency:

./sail composer require librarianphp/parsed

Once the dependencies are installed, you can move on to the next step.

2. Fetching the list of posts from local markdown files

If you followed along with all tutorials in this series, you should now have your DEV articles as .md files in the local application storage folder, storage/app. Now you'll need to create a list with your most recent posts and make the list available to the front-end view so that you can exhibit your posts on the main application page.

We'll need to modify the routes/web.php file, since that is where you have your main route defined. Open this file in your code editor.

The following code uses the glob() function to loop through all files in the specified directory, which is defined with the help of the storage_path() helper function. This function will return the absolute path for directories inside your storage folder. When specifying the search pattern, we use a /*.md filter to make sure we skip any files that aren't markdown files. Then, we create a Content object by loading the contents from each file, and add that object to an array called articles. We then use the krsort method to order the array in reverse order, which will bring your latest articles first in the list. We also use the array_slice() function to keep a fixed number of results, defined by the variable limit which is set to 10 by default. Finally, we return the template view, passing in the list of articles so that it can be used in a loop.

You can replace the current content on your routes/web.php with the following:

<?php

use Illuminate\Support\Facades\Route;
use Parsed\Content;
use Parsed\ContentParser;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
   $articles = [];
   $limit = 10;

   foreach (glob(storage_path('app') . '/*.md') as $file) {
       $article = new Content(file_get_contents($file));
       $article->parse(new ContentParser());

       $articles[] = $article;
   }

   krsort($articles);
   $articles = array_slice($articles, 0, $limit);
   return view('index', [
       'articles' => $articles
   ]);
});

Save the file when you're done.

3. Listing the posts on the application's main page

If you reload the application on your browser now, nothing has changed, since you still need to update your main front-end view to list the content obtained in the previous step. The content was passed along to the front-end view in an array named articles, so we'll need to loop through this array in order to show each article's summary.

Open the index view file at resources/views/index.blade.php on your code editor. Locate the main content area, where the example posts are statically defined. You can remove the static posts because you're going to replace them with a foreach Blade loop.

Each item in the articles array is an object of type Parsed\Content. This object is a wrapper around markdown content using the Jekyll front matter format to define metadata about the content, such as title, cover image, and tags. All items defined in the content's front matter are available through a method called frontMatterGet(). To check if a metadata information exists, you can use the method frontMatterHas().

The following piece of Blade-compatible code loops through the articles array to exhibit a summary of each post. It checks whether a cover_image property is set within the frontmatter of the article. When this property is not present, it will use a random image from Lorem Picsum to illustrate the post. For simplicity, the code assumes that title, description, and tags are always set:

   @foreach ($articles as $article)
       <div class="mb-10">
           <img src=@if ($article->frontMatterHas('cover_image'))
                      "{{ $article->frontMatterGet('cover_image') }}"
                    @else "https://picsum.photos/1000/420"
                    @endif alt="Post header image" class="rounded-lg my-4"
            />
           <h1 class="text-4xl mb-4">{{ $article->frontMatterGet('title') }}</h1>
           <p class="text-md">{{ $article->frontMatterGet('description') }}</p>
           <p>Posted in: <span class="text-gray-700 font-bold">{{ $article->frontMatterGet('tags') }}</span></p>
       </div>
   @endforeach

Here is the fully updated index.blade.php file for your reference:

<!doctype html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   <title>My DEV Blog</title>
   <meta name="description" content="My DEV Blog">
   <meta name="author" content="Sourcegraph">

   <meta property="og:title" content="A headless blog in Laravel">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://github.com/sourcegraph-community/laravel-dev-blog">
   <meta property="og:description" content="A demo Laravel blog">

   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body class="bg-gradient-to-r from-blue-600 via-pink-500 to-purple-900">

   <div class="container text-white mx-auto mt-6">
       <div class="grid grid-cols-3 gap-4">
           <div>
               <h1 class="text-3xl">My DEV Blog: latest posts</h1>
           </div>
           <div class="col-span-2 text-right">
               menu
           </div>
       </div>
   </div>

   <div class="container mx-auto px-10 py-10 bg-gray-100 my-10 text-gray-600 rounded-md shadow-md">
       <div class="grid grid-cols-3 gap-8">
           <div class="col-span-2">
               @foreach ($articles as $article)
                   <div class="mb-10">
                       <img src=@if ($article->frontMatterHas('cover_image'))
                                   "{{ $article->frontMatterGet('cover_image') }}"
                                @else "https://picsum.photos/1000/420"
                                @endif alt="Post header image" class="rounded-lg my-4"
                        />
                       <h1 class="text-4xl mb-4">{{ $article->frontMatterGet('title') }}</h1>
                       <p class="text-md">{{ $article->frontMatterGet('description') }}</p>
                       <p>Posted in: <span class="text-gray-700 font-bold">{{ $article->frontMatterGet('tags') }}</span></p>
                   </div>
               @endforeach
           </div>

           <div>
               <img src="https://picsum.photos/100" class="rounded-full mx-auto p-4" alt="avatar"/>
               <p class="text-gray-700 text-xl mb-10">Hi, I'm a demo Laravel application built with Tailwind CSS, pulling content from DEV.to.
                   You can find my code <a class="text-purple-800 font-bold" href="https://github.com/sourcegraph-community/laravel-dev-blog" title="Laravel DEV blog demo on GitHub">here</a> and you can learn more about me <a class="text-purple-800 font-bold" href="https://dev.to/sourcegraph/creating-a-new-laravel-application-with-sail-and-docker-no-php-required-4c2n" title="Getting started with Laravel tutorial series">here</a>.</p>

               <h2 class="text-gray-400 text-2xl">Links</h2>

               <ul class="py-2">
                   <li class="py-2"><a class="px-1 py-2 bg-purple-300" href="https://github.com/sourcegraph-community/laravel-dev-blog">Demo Laravel DEV Blog on GitHub</a></li>
                   <li class="py-2"><a class="px-1 py-2 bg-pink-400" href="https://dev.to/sourcegraph/creating-a-new-laravel-application-with-sail-and-docker-no-php-required-4c2n">Getting started with Laravel on DEV</a></li>
                   <li class="py-2"><a class="px-1 py-2 bg-purple-300" href="https://laravel.com/docs/8.x">Laravel Documentation</a></li>
                   <li class="py-2"><a class="px-1 py-2 bg-pink-400"  href="https://tailwindcss.com/docs/installation">TailwindCSS Documentation</a></li>
                   <li class="py-2"><a class="px-1 py-2 bg-purple-300" href="https://php.net">Official PHP Documentation</a></li>
                   <li class="py-2"><a class="px-1 py-2 bg-pink-400" href="https://sourcegraph.com">Sourcegraph Code Search</a></li>
               </ul>
           </div>
       </div>
   </div>

</body>
</html>

The sidebar was also slightly updated with a few resourceful links to improve the overall appearance of the page. Once you save the template and reload the application on your browser, you should see a page similar to this, but showcasing your own DEV articles:

Conclusion

In this article, which is the fourth and last part of our Getting started with Laravel series, we've seen how to create a collection of DEV.to markdown posts and parse them using the librarianphp/parsed library.

The demo application is open source and fully available on GitHub. Feel free to clone or fork the project to create a custom version that better suits your needs.

Helpful Resources

Check the following list with useful resources to learn more about the open source projects and libraries used in this series:

You can follow Sourcegraph on Twitch to be notified when we go live. Follow our YouTube channel for the full recap videos of our livestreams.

8 Sourcegraph Search Query Features You Should Know About

Prosper Otemuyiwa — Mon, 03 Jan 2022 09:01:51 +0000

Sourcegraph is a search tool that enables developers to search, explore and better understand all of their public and private code. It supercharges developer productivity and automates large-scale code changes.

In this article, I’ll explore some Sourcegraph search gems with you.

Here are 8 Sourcegraph search features you should know about!

1. Literal Expression Search

By default, all search queries on Sourcegraph are treated as literal patterns. If you know the exact string you’re looking for in the codebase, then all you need to do is paste it in the query box and search.

Sourcegraph interprets this search pattern literally (as the name defines it) to simplify searching for words or punctuation in your codebase.

With literal search, you can find function calls, error messages, comments, notes etc. For instance, if you want to search for how to use the browser navigator clipboard API, you can simply use:



navigator.clipboard

Search Query: https://sourcegraph.com/search?q=context:global+navigator.clipboard&patternType=literal

For more info, check out a detailed article about literal expression search on Sourcegraph.

2. Regular Expression Search

Sourcegraph’s query language is very powerful. One of its strengths is in the regular expression search it provides.

On the search box, you need to enable the regular expression mode by clicking on the * sign on the right.

Once the regex mode is enabled, you can start using regular expressions for advanced search patterns. You can also add patterntype:regexp to your queries and this will automatically enable regex mode.

Let's see a few different use cases of regex search as examples.

1. Find how the filesync readFile and writeFile methods are used in several projects.



fs\.(read|write)File patterntype:regexp

Search Query: https://sourcegraph.com/search?q=context:global+fs%5C.%28read%7Cwrite%29File&patternType=regexp

2. Find real-life use cases for Promise.all, Promise.any, Promise.race, and Promise.allSettled.



Promise.(any|race|allSettled) lang:JavaScript patterntype:regexp

Search Query: https://sourcegraph.com/search?q=context:global+Promise.%28any%7Crace%7CallSettled%29+lang:JavaScript&patternType=regexp

Check out a detailed article about the regular expression search on Sourcegraph.

3. Structural Search

Structural search gives you wings as a developer. With structural search, you can copy-paste blocks of code into the Sourcegraph search box, and accurate results will be returned.

First, enable the structural search mode by clicking on the [ ] sign on the right:

Then you can go ahead and perform a structural search like so:



"exclude": [...] lang:json file:tsconfig.json patterntype:structural

Search Query:
https://sourcegraph.com/search?q=context:global+%22exclude%22:+%5B...%5D+lang:json+file:tsconfig.json&patternType=structural

To learn more, check out a detailed article about structural search on Sourcegraph.

4. Diff Search

Diff search allows you to search for code in file diffs. It makes it easy for a developer to search for code that used to exist and compare it with code that presently exists.

For example, the following search…



repo:^github\.com/sourcegraph/sourcegraph$ type:diff matrix

Search Query: https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/sourcegraph/sourcegraph%24+type:diff+matrix&patternType=literal

5. Commit Search

Commit search allows you to search for specific strings used in commit messages across your codebase.

Let’s search over commit messages like so:

6. Search Contexts

Search contexts are a set of repositories at specific revisions that search queries on Sourcegraph will target.

In other words, search contexts enable you to narrow, group and search only the code repositories you care about.

By default, Sourcegraph uses a global search context (namely, context:global) for all search queries, when no search context is specified by the actor (me, you, or a programmable robot) performing the search.

To learn more, check out a detailed article about creating, and using search contexts on Sourcegraph.

7. Symbol Search

Symbol search comes in handy when you want to directly search for function, class, variable and const definitions in your code search.

With Sourcegraph, you can use the “type:symbol” filter in your search query like so:



repo:^github\.com/sourcegraph/sourcegraph$ type:symbol Vector

The search query returns the symbol you searched for. All the symbols in that particular repository or file are grouped and shown on the left-hand side.

The grouped symbol list is searchable as shown in the gif below. You can search for whatever symbol you want.

Note: Sourcegraph has Symbol support for 75+ languages

8. Branch & Tag Search

Sourcegraph makes it possible to search for code in all of your branches and tags. Yes, all your branches, not only the main branch!

Branch Search

Use Case: Search the “add-panel-zoekt-cap” branch of the sourcegraph/sourcegraph repo for webhook.

Search Query: https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/sourcegraph/sourcegraph%24+rev:*refs/heads/add-panel-zoekt-cap+webhook&patternType=literal

Tag Search

Use Case: Search the “v3.32.0-rc.2” tag of the https://github.com/sourcegraph/sourcegraph repo for batch changes.

Search Query: https://sourcegraph.com/search?q=context:global+repo:%5Egithub%5C.com/sourcegraph/sourcegraph%24+rev:*refs/tags/v3.32.0-rc.2+batch+changes&patternType=literal

Conclusion

The benefits of code search are innumerable. The faster you can find code, the higher the development velocity for you and your teammates.

Sourcegraph Cloud is not the only option to add, explore private code and use search contexts. Sourcegraph can be installed in different ways to give you advanced search features for your private code.

You can run Sourcegraph locally or opt-in for us to set up a managed Sourcegraph instance for your team. You'll be able to use a self-hosted Sourcegraph instance for free (up to 10 users).

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.

Creating a Laravel Artisan command to import posts from DEV via the command line

Erika Heidi — Wed, 29 Dec 2021 14:59:29 +0000

In a previous part of our series, we saw how to install and configure TailwindCSS 3.0 within a Laravel project and how to set up a basic blog layout for our demo application. With that base template in place, the fourth part of the series is focused on the back-end side of the application.

In this post, you'll learn how to create an Artisan command in Laravel to import posts from DEV using their API and how to save the content as markdown files in your local application storage folder. This recap is also available as a video that you can watch on YouTube.

Preparation

Before moving along, make sure you have followed all steps in the first tutorial of the series in order to bootstrap your Laravel application and development environment. This will require you to have Docker, Curl, and Git installed on your system.

If you haven't yet, bring your environment up with:

./vendor/bin/sail up -d

This command will start up your environment and keep it running in the background. Your Laravel application should now be available at http://localhost from your browser.

ln -s ./vendor/bin/sail sail
chmod +x sail

1. Creating a new Artisan command

Start by creating a new Artisan command using the make:command utility. This will create a new file with boilerplate code for an Artisan command, saved at app/Console/Commands/.

./sail artisan make:command ImportPosts

Open the newly generated file app/Console/Commands/ImportPosts.php in your code editor, and you'll see content like this:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class ImportPosts extends Command
{
   /**
    * The name and signature of the console command.
    *
    * @var string
    */
   protected $signature = 'command:name';

   /**
    * The console command description.
    *
    * @var string
    */
   protected $description = 'Command description';

   /**
    * Create a new command instance.
    *
    * @return void
    */
   public function __construct()
   {
       parent::__construct();
   }

   /**
    * Execute the console command.
    *
    * @return int
    */
   public function handle()
   {
       return 0;
   }
}

Start by changing the command:name for the command signature you'd like to use. In this demo we'll use import:dev.

The handle() method is where the command action happens; this is what will be executed when you run artisan import:dev from the command line.

2. Obtaining latest posts from the DEV API

Luckily for us, DEV has an API that we can query to obtain the latest posts from a user, without the need to use an authorization token, since that is all public data. The endpoint we want to query is:

https://dev.to/api/articles?username=DEV_USERNAME

To make the request, we'll use minicli/curly, which is a small PHP library based on curl. Require that dependency with:

./sail composer require minicli/curly

Once you have the dependency installed, add a use directive at the top of the file so that you can easily reference Minicli\Curly\Client in your code. We'll also use Laravel's Carbon/Carbon library to parse the article's publish date, so you should include that within your use directives as well. Lastly, include the Illuminate\Support\Facades\Storage class with another use directive, since we'll be using this facade class to check and save files within the local file storage system.

This is how the first lines of your app/Console/Commands/ImportDev.php file should look like:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Minicli\Curly\Client;
use Illuminate\Support\Facades\Storage;
use Carbon\Carbon;

Next, update your handle() method with the following code:

public function handle()
{
   $crawler = new Client();
   $headers = [
       'User-Agent: curly 0.1',
   ];

   $articles_response = $crawler->get('https://dev.to/api/articles?username=DEV_USERNAME&per_page=10', $headers);

   if ($articles_response['code'] !== 200) {
       $this->error('Error while contacting the dev.to API.');

       return Command::FAILURE;
   }

   $articles = json_decode($articles_response['body'], true);
   foreach ($articles as $article) {
       $article_slug = $article['slug'];
       $published = new Carbon($article['published_at']);
       $filename = $published->format('YmdH') . '-' . $article_slug .'.md';

       if (Storage::disk('local')->exists($filename)) {
           continue;
       }

       $endpoint = sprintf('https://dev.to/api/articles/%s', $article['id']);
       $article_query = $crawler->get($endpoint, $headers);

       if ($article_query['code'] == 200) {
           $article_full = json_decode($article_query['body'], true);

           Storage::disk('local')->put($filename, $article_full['body_markdown']);

           $this->info("Article saved: " . $filename);
       }
   }

   return Command::SUCCESS;
}

This code will make a request to the DEV API to obtain a list with the latest 10 articles from a user. To get the full contents of the article, including the article's metadata defined in the front matter, we'll make a second request once we check that the article hasn't been imported before. Then, we'll use the Storage utility to save the body_markdown of each article as a markdown file in the application's storage folder. The files are saved using a combination of the article's publish date and the article slug as filename, with the .md extension.

Don't forget to change DEV_USERNAME to your own username on DEV.to.

Save the file when you're finished.

3. Test the command to import posts from DEV

With the command ready, you can now run it with:

./sail artisan import:dev

Article saved: 2021121515-setting-up-tailwindcss-30-on-a-laravel-project-1cb8.md
Article saved: 2021121013-creating-a-new-laravel-application-with-sail-and-docker-no-php-required-4c2n.md
Article saved: 2021120318-how-to-set-up-elgatos-stream-deck-on-ubuntu-linux-2110-pdh.md
Article saved: 2021112011-dynamic-twitter-header-images-with-dynacover-github-action-35nb.md
Article saved: 2021111818-how-to-build-github-actions-in-php-with-minicli-and-docker-1k6m.md
Article saved: 2021111618-automatically-update-your-contributors-file-with-this-github-action-workflow-d98.md
Article saved: 2021102717-10-sourcegraph-search-tricks-for-open-source-contributors-and-maintainers-44n9.md
Article saved: 2021092715-3d-design-creating-printable-solid-shapes-from-svg-files-with-inkscape-and-freecad-266e.md
Article saved: 2021090615-3d-design-with-freecad-part-2-working-with-sketcher-part-design-workbenches-3leo.md
Article saved: 2021090614-an-introduction-to-3d-design-with-freecad-part-1-navigation-3gjo.md

You should see the titles of your latest posts showing up in the output of the command. Once the command is finished running, have a look at your storage/app folder and you'll see your posts as individual markdown files named after each post's publish date and slug.

ls storage/app

2021090614-an-introduction-to-3d-design-with-freecad-part-1-navigation-3gjo.md
2021090615-3d-design-with-freecad-part-2-working-with-sketcher-part-design-workbenches-3leo.md
2021092715-3d-design-creating-printable-solid-shapes-from-svg-files-with-inkscape-and-freecad-266e.md
2021102717-10-sourcegraph-search-tricks-for-open-source-contributors-and-maintainers-44n9.md
2021111618-automatically-update-your-contributors-file-with-this-github-action-workflow-d98.md
2021111818-how-to-build-github-actions-in-php-with-minicli-and-docker-1k6m.md
2021112011-dynamic-twitter-header-images-with-dynacover-github-action-35nb.md
2021120318-how-to-set-up-elgatos-stream-deck-on-ubuntu-linux-2110-pdh.md
2021121013-creating-a-new-laravel-application-with-sail-and-docker-no-php-required-4c2n.md
2021121515-setting-up-tailwindcss-30-on-a-laravel-project-1cb8.md
public

Conclusion

In this article, which is part 3 out of 4 in our Getting started with Laravel series, we've seen how to create an Artisan command and how to import posts from a user of DEV.to using the DEV API and the minicli/curly library. The command uses the underlying storage system from Laravel to store the posts as individual markdown files in your storage/app folder.

In the next part of this series, we'll finish this demo application by updating the index controller and listing the posts on the main application's page.

You can follow Sourcegraph on Twitch to be notified when we go live. Follow our YouTube channel for the full recap videos of our livestreams.

15 Days Of Code Search

Prosper Otemuyiwa — Wed, 29 Dec 2021 12:03:24 +0000

Recently, I did a #15DaysOfSearch Twitter campaign to show developers how they can optimize their workflow by mastering code search on sourcegraph.com.

Here's the recap from Day 1 to Day 15:

Day 1

wagmism

@unicodeveloper

Today commences the beginning of #15DaysOfSearch.

I'll show you cool, resourceful & awesome @sourcegraph code search tricks you should be using over the next 15 Days.🤩

Day 1: Search for commit messages matching a string “chore” in a repo with the following query:

16:11 PM - 06 Dec 2021

Day 2

wagmism

@unicodeveloper

Day 2 of #15DaysOfSearch

How to search for code or anything in all branches of a repo starting with "emchap". ✅

Note: "emchap" could be any string or set of characters.

18:50 PM - 07 Dec 2021

Day 3

wagmism

@unicodeveloper

Day 3 of #15DaysOfSearch 🔥 🚀

Today, we'll perform a diff search on repos. With @sourcegraph, you can run a query like so:

Search Query: repo:^github\.com/sourcegraph/sourcegraph$ type:diff matrix

18:28 PM - 08 Dec 2021

Day 4

wagmism

@unicodeveloper

Day 4 of #15DaysOfSearch 😍

Today, we’ll learn how to perform a symbol search on @sourcegraph.

With the type:symbol filter, you can search for specific functions, classes, struct definitions & more in your codebase.

Let's search for newrouter in Go codebases. 😌

14:52 PM - 09 Dec 2021

Day 5

wagmism

@unicodeveloper

Day 4 of #15DaysOfSearch 😍

Today, we’ll learn how to perform a symbol search on @sourcegraph.

With the type:symbol filter, you can search for specific functions, classes, struct definitions & more in your codebase.

Let's search for newrouter in Go codebases. 😌

14:52 PM - 09 Dec 2021

Day 6

wagmism

@unicodeveloper

Day 6 of #15DaysOfSearch 🔥🚀

Today, we'll look at how you can discover secrets, private keys and tokens quickly across your codebase with @sourcegraph code search.

With a regular expression search, you can do this:

21:15 PM - 14 Dec 2021

Day 7

wagmism

@unicodeveloper

Day 7 of #15DaysOfSearch

Today we'll perform a language-specific code search on @sourcegraph.

With the "lang" keyword filter, you can narrow your search to return results for a particular language/technology.

Let's do a wild search for "lambda" 😌😍

21:09 PM - 15 Dec 2021

Wrapping Up

Sourcegraph users report an average of 30mins a day saved by using code search. The knowledge of Sourcegraph code search tips and tricks arms you with the confidence to move fast in any codebase.

You can run Sourcegraph locally or opt-in for us to set up a managed Sourcegraph instance for your team. You'll be able to use a self-hosted Sourcegraph instance for free (up to 10 users).

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.

Setting up TailwindCSS 3.0 on a Laravel project

Erika Heidi — Wed, 15 Dec 2021 15:31:43 +0000

In the first part of our series, we saw how to bootstrap a new Laravel application with Sail and Docker. This allows you to develop a Laravel application without having to set up a PHP development environment on your system.

With the base application up and running, the second part of our livestreaming series was focused on setting up a basic blog layout using TailwindCSS. In this post, you'll see a recap with all steps executed during the live session, so that you can reproduce them at your own pace.

You can also watch the video recap on YouTube.

Preparation

If you haven't yet, bring your environment up with:

./vendor/bin/sail up -d

This command will start up your environment and keep it running in the background. Your Laravel application should now be available at http://localhost. Open this URL on your browser and you'll see a page like this:

For convenience, you may want to create an alias to execute Sail from the application's root directory:

ln -s ./vendor/bin/sail sail
chmod +x sail

Now you can run Sail like this:

./sail artisan

This command will run Artisan on the application container.

1. Installing and configuring TailwindCSS 3 with Laravel

Start by installing the frontend dependencies via NPM. The npm command is available as a shortcut with Laravel Sail:

./sail npm install

Next, install TailwindCSS with:

./sail npm install -D tailwindcss postcss autoprefixer

Then, run the following command to generate your Tailwind configuration file:

./sail npx tailwindcss init

Now you'll need to tell Laravel that you want to compile Tailwind resources using Laravel Mix. Open the webpack.mix.js file (located at the root of your application) and include tailwindcss as a postCss plugin. This is how your mix.js definition should look like when you're finished:

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

Next, you should update your tailwind.config.js file to include the paths to all your template resources. The following example will include all blade templates and JS files in your resources folder:

tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The next step is to import all @tailwindcss component layers into your application's CSS. Open the resources/css/app.css file and include the following content:

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

The configuration is done. You can now run the command that will watch for changes in your frontend resources and build assets in real time while you develop your application:

./sail npm run watch

This command will block your terminal. You can stop it at any time with CTRL+C.

2. Creating a basic blog template

Now that your setup is complete, you can start building the frontend of your application. For this demo, we're building a basic blog template with a main column and a sidebar on the right.

A good idea to get started is to search for a basic HTML5 boilerplate code / template and build from there.

After some experimentation, we built the following template during the livestreaming session. Save this content to a file named index.blade.php in your resources/views folder:

resources/views/index.blade.php

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>My DEV Blog</title>
    <meta name="description" content="My DEV Blog">
    <meta name="author" content="Sourcegraph">

    <meta property="og:title" content="A headless blog in Laravel">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://github.com/sourcegraph-community/laravel-dev-blog">
    <meta property="og:description" content="A demo Laravel blog">

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body class="bg-gradient-to-r from-blue-600 via-pink-500 to-purple-900">

    <div class="container text-white mx-auto mt-6">
        <div class="grid grid-cols-3 gap-4">
            <div>
                <h1 class="text-3xl">My DEV Blog</h1>
            </div>
            <div class="col-span-2 text-right">
                menu
            </div>
        </div>
    </div>

    <div class="container mx-auto px-6 py-10 bg-gray-100 my-10 text-gray-600 rounded-md shadow-md">
        <div class="grid grid-cols-4 gap-4">
            <div class="col-span-3">

                <div class="mb-10">
                    <img src="https://picsum.photos/1000/420" alt="Post header image" class="rounded-lg my-4"/>
                    <h1 class="text-3xl">This is the title of my first post</h1>

                    <p>This is the description bnablab alba lbal ablabla blab al.</p>
                </div>

                <div class="my-10">
                    <img src="https://picsum.photos/1000/420?sjdj" alt="Post header image" class="rounded-lg my-4"/>
                    <h1 class="text-3xl">This is the title of my second post</h1>

                    <p>This is the description bnablab alba lbal ablabla blab al.</p>
                </div>

            </div>

            <div>
                <h2 class="text-gray-400 text-xl">Categories</h2>

                <ul>
                    <li><a href="#">Linux</a></li>
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Devops</a></li>
                    <li><a href="#">Career</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>

As you can see from the code, apart from the asset call, the rest is purely HTML and CSS styled with TailwindCSS descriptive classes.

After saving the template, open your routes/web.php file and update your main route definition so that it renders your new template instead of the default Laravel welcome page. This is how the file should look like once you're done:

routes/web.php

Route::get('/', function () {
    return view('index');
});

Save the file. If you reload your browser now, you should see a page like this:

In a later part of this series, we'll turn this skeleton into an actual dynamic template, using more advanced Blade features.

Conclusion

Installing TailwindCSS 3.0 within a Laravel project requires a few configuration steps, but once you get the build command running, you can greatly speed up your frontend development process by making use of the advanced features of Tailwind 3, including just-in-time processing for super fast build times, as well as many other features included in the newest version.

In the next part of this series, we'll move to the backend and create an Artisan command to import posts from a DEV user profile.

You can follow Sourcegraph on Twitch to be notified when we go live.

How to find log4j vulnerable dependencies quickly across your codebase

Prosper Otemuyiwa — Tue, 14 Dec 2021 19:59:57 +0000

To quickly determine which of your projects depend on the vulnerable versions of log4j, run these queries on Sourcegraph:

Gradle

org\.apache\.logging\.log4j' 2\.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))
lang:gradle patterntype:regexp count:all

Search Query: Gradle

Mavin

<log4j\.version>2\.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))</log4j\.version>
file:pom\.xml patterntype:regexp count:all

Search Query: Mavin

Ivy

org="org\.apache\.logging\.log4j".*rev="2\.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))"
file:ivy\.xml patterntype:regexp count:all

Search Query: Ivy

SBT(Scala)

org.apache.logging.log4j" % "2.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))
file:\.sbt$ patterntype:regexp count:all

Search Query: Scala

Bazel

org\.apache\.logging\.log4j: 2.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))
lang:bazel patterntype:regexp count:all

Search Query: Bazel

Any file containing org.apache.logging.log4j followed by a vulnerable version number

org\.apache\.logging\.log4j 2.((0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15)(\.[0-9]+))
patterntype:regexp count:all

Search Query: Any file containing org.apache.logging.log4j followed by a vulnerable version number

Search your organization’s private code

On Sourcegraph Cloud, run the queries linked above in your user search context (context:@username), after you’ve synced all of the org repositories you want to search (in Settings > Account > Your repositories).

On a self-hosted Sourcegraph instance, copy and paste those queries above into the search box on your instance. After pasting, ensure the .* (regexp search) button is on for queries that contain regular expressions.

In-depth Log4j 0-day fixes and mitigations

For in-depth info on Log4j Log4Shell 0-day, check out this excellent article on finding, fixing, and track affected codebase.

Conclusion

Finding and fixing vulnerabilities in your codebase can be challenging, but with the right tools, you can speed up the process and secure your codebase in minimal time.

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.

Creating a new Laravel application with Sail and Docker (no PHP setup required)

Erika Heidi — Fri, 10 Dec 2021 13:58:03 +0000

In the first episode of our livestreaming series Getting Started with Laravel on Sourcegraph's Twitch channel, we've seen how to bootstrap a new Laravel application with Sail and Docker. This allows you to develop your Laravel application using Docker containers instead of having to set up a fully functional PHP development environment on a local machine or development server.

In this recap post, we'll share all steps that were executed during the live session, so that you're able to reproduce them at your own pace. If you prefer, you can also watch the video version of this recap on youtube.

Preparation

Before moving along, make sure you have the following software installed and configured on your local machine or development server:

Docker
Curl
Git

Windows and MacOS users will need Docker Desktop installed. Linux users need only the Docker engine installed. Make sure you add your user to the docker group so that you are able to execute Docker with your regular user.

1. Create a new Laravel application with the official builder script

The demo application is a blog-like application that pulls content from a user's profile at DEV. We'll call it laravel-dev-blog.

The next command will download the builder script from an official Laravel site and run it using bash.

curl -s https://laravel.build/laravel-dev-blog | bash

This operation may take a few minutes the first time you run the installer, since it will download a suitable PHP image to execute Composer and install the application dependencies using Docker.

Before finishing, the installation script will ask you to confirm your sudo password in order to set the correct permissions on the application directories:

Application ready! Build something amazing.
Sail scaffolding installed successfully.

Please provide your password so we can make some final adjustments to your application's permissions.

[sudo] password for erika: 

Thank you! We hope you build something incredible. Dive in with: cd laravel-dev-blog && ./vendor/bin/sail up

You can now explore the files in your freshly installed Laravel application.

cd laravel-dev-blog/
ls

The artisan script, located at the root of the application folder, is an important tool that you can use to generate boilerplate code, manipulate the database, run jobs and queues, among other things.

Following, a list with the relevant directories within a freshly installed Laravel application:

.
├── app/ # models, controllers, and app-specific logic
├── bootstrap/
├── config/ # configuration files
├── database/ # database-related classes and scripts
├── public/ # the document root for the application
├── resources/ # front end resources that aren't public: views, base CSS and JS 
├── routes/ # where the application routes are defined
├── storage/ # file uploads, cache, and logs are stored here
├── tests/ #application tests

2. Running `sail up`

With the files in place, you can now bring your development environment up with the following command:

sail up

This will run your development environment in foreground mode, which allows you to see container logs in real time, but it will block your terminal. To stop the execution and save the state of containers, you can hit CTRL+C.

To run the environment in background mode (detached), include -d as an argument to the previous command:

sail up -d

Whether you choose to run your environment in foreground or background mode, your new Laravel application should now be available at http://localhost. Open this URL on your browser and you'll see a page like this:

Sail quick reference

The following list contains a short reference on the main Sail commands:

Command	Description
`sail up`	Brings the Docker environment up.
`sail down`	Brings the Docker environment down and remove associated containers, storage, and network.
`sail start`	Starts an environment that was previously stopped with `sail stop`.
`sail stop`	Stops an environment that is currently running, saving the state of containers and services.
`sail artisan`	Runs the `artisan` tool on the application container.
`sail php`	Runs a PHP script on the application container.

For more information on all available Sail commands, please visit the official documentation.

Troubleshooting

Here are a few tips for troubleshooting common problems that may happen while you run this tutorial.

'Docker' is not running

This error can appear if the Docker service is not enabled on your system, or if your current system user doesn't have permission to execute Docker. On new installations of the Docker engine on Linux, only the root user is able to manage containers. You need to make sure your system user is added to the docker group on your system.

I added my user to the docker group, but it still doesn't work

After adding the user to the group, you need to restart your session so that the changes are valid. You can log out and log on again on your system. Another option is to run the following command:

u - ${USER}

Although this is a temporary solution and you'll still need to restart your session so that the change is permanent.

Conclusion

With the Laravel builder script and Sail, it is possible to install and run a Laravel application without the need to have PHP installed on your local machine or development server. This can be very useful to explore the Laravel framework and the PHP language in general, with the additional advantage of using a standardized development environment that is compatible and optimized for running Laravel.

In the next part of this series, we'll start building the front end of our project using TailwindCSS.

Follow Sourcegraph on Twitch to be notified when we go live with new episodes on this series.

How to use Search Contexts on Sourcegraph

Prosper Otemuyiwa — Fri, 19 Nov 2021 12:02:50 +0000

Sourcegraph prides itself in the ability to search millions of open source and private repositories.

Many features enrich the developer's experience of using Sourcegraph code search. One of such features is Search Contexts.

In this article, you'll learn how to use search contexts on Sourcegraph Cloud

What are Search Contexts?

Search contexts are a set of repositories at specific revisions that search queries on Sourcegraph will target. In other words, search contexts enable you to narrow, group and search only the code repositories you care about.

By default, Sourcegraph uses a global search context (namely, context:global) for all search queries, when no search context is specified by the actor (me, you, or a programmable robot) performing the search.

Use cases for Search Contexts

First

In a day, I search many repositories for code. I have identified about 15 code repos that often come up repeatedly and return the desired search results. I want to group them so that my search query targets only this set of repos.

Second

Sequel to the first case, Sourcegraph allows me to search code repo branches. Instead of specifying the branch names in my query every time, I want to group specific branches of certain repos once to focus more on what I need to find than the semantics of finding it.

Third

My company has hundreds of repos, thousands of developers and several teams. Sourcegraph allows us to search all of these repos. However, we'd also like each team to be able to search only the code repos they actively manage.

How to use Search Contexts

The first step is to go to sourcegraph.com.

You’ll see a context:global selector at the left side of the search textbox.

Every open-source repository that is added to Sourcegraph Cloud is automatically assigned to the global search context.

You can explore other available public search contexts by clicking the search contexts selector. A dropdown menu should appear as shown below:

Yaaaay!! More public search contexts. Here we have: chakraui, cncf, kubernetes, o3de, stackstorm, stanford, and temporalio search contexts that anyone can use to explore public code.

Given a scenario where you want to search for code within the Kubernetes community, you can select the kubernetes search context and input your query syntax in the search textbox like so:

It only searches for code within the Kubernetes search context. One major benefit of search contexts is the swift response time you get while searching for anything.

My Recommendation: Explore the Stanford search context. A treasure of open source code from Stanford students, academics and professors!

You’re probably wondering how to create your search context. So let’s get into it!

Note: By the way, if you have added repositories to Sourcegraph Cloud, you already have a search context in this format: context:@username.

How to create Search Contexts

Follow these steps:

Step 1

Step 2

Go to Code Search in the top left navigation bar. On Hover, you’ll see a dropdown.

Click on the Contexts menu item. It'll direct you to a page that shows all your existing search contexts (if you have others apart from the global search context).

In the image above, you can see that I already have a context:@unicodeveloper search context because I added some private repositories to Sourcegraph a few months ago.

Step 3

Click on the Create search context button by the right hand side.
It will direct you to https://sourcegraph.com/contexts/new

Add a name and description.
Choose the visibility of the context.

Now, add the repositories you want to be part of this context in the format above.

An example is this:

Note: Remove the “https://” when adding the repository URL.

Test the configuration
Go ahead and create the search context.

You will see your recently created search context. Mine is below:

Now, you can explore only the code you care about in this newly minted search context like so:

Note: Don’t forget to press the context selector to switch to the global search context if you need to explore all the public code on Sourcegraph.

Conclusion

As developers, our knowledge of refactoring code and identifying patterns come in handy in automating repeatable processes. Leverage your search context knowledge in taking your code search prowess to the next level.

Create as many contexts as possible to match your use case. If you are part of a team, invite them to enjoy the benefits of code search.

Sourcegraph.com is not the only option to add, explore private code and use search contexts. Sourcegraph can be installed in different ways to set up a deployment for your private code.

You can run Sourcegraph locally or opt-in for us to set up a managed Sourcegraph instance for your team. You'll be able to use a self-hosted Sourcegraph instance for free (up to 10-users).

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.